Skip to content

Commit e9e14be

Browse files
author
Deyan Ginev
authored
Merge pull request #8 from NativeScript/update-existsing-snippets
Reflect snippets changes to doc (md) files
2 parents 40b0496 + 366a6ca commit e9e14be

File tree

8 files changed

+213
-32
lines changed

8 files changed

+213
-32
lines changed

‎README.md‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,42 @@ Use the `<snippet id='<your-snippet-id>'/>` notation to define the corresponding
7676
<snippet id='sum-snippet'/>
7777
```
7878

79+
If you set `-w` flag your snippets will be wrapped around the snippet notation you have been provided. This way when you update your snipet source - the `markdown-snippet-injector` will reflect the changes in your markdown as well.
80+
81+
Example:
82+
83+
`mdinject -w --root=<path-to-source-code> --docsroot=<path-to-docs>`
84+
85+
main.css
86+
```
87+
/* >> css-snippet */
88+
.btn {
89+
color: green;
90+
text-align: center;
91+
}
92+
/* << css-snippet */
93+
```
94+
95+
README.MD
96+
```
97+
This is a CSS snippet
98+
<snippet id='css-snippet'/>
99+
```
100+
101+
After first build the README.MD will looks like:
102+
```
103+
This is a CSS snippet
104+
<snippet id='css-snippet'>
105+
```
106+
.btn {
107+
color: green;
108+
text-align: center;
109+
}
110+
```
111+
</snippet>
112+
```
113+
Then when you update `main.css`, your README.MD will be updated as well.
114+
79115
# Advanced features
80116
## Nested snippets
81117
Nested snippets are also supported. This is helpful in scenarios where you want to explain parts of a larger snippet in steps:
@@ -162,12 +198,11 @@ When injected, a snippet is formatted using the default MarkDown code-snippet fo
162198
```
163199
mdinject --root=. --docsroot=../ --sourceext=".java|.cs" --targetext=".md|.txt" --snippettitles="Java|C#"
164200
```
201+
> Note that the order of the snippet titles must be the related to the order of the source extension types so that they match.
165202
166203
## Run e2e tests
167204
1. Clone repo
168205
2. npm install
169206
3. npm test
170207

171208
E2E tests are developed with [Mocha](https://mochajs.org).
172-
173-
> Note that the order of the snippet titles must be the related to the order of the source extension types so that they match.

‎index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ if (docsRoot === undefined) {
1515
}
1616

1717
var snippetInjector = new SnippetInjector();
18+
19+
snippetInjector.toWrap = yargsModule.argv.w;
1820
snippetInjector.sourceFileExtensionFilter = yargsModule.argv.sourceext || ".ts";
1921
snippetInjector.targetFileExtensionFilter = yargsModule.argv.targetext || ".md";
2022

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"scripts": {
1414
"prepublish": "tsc -p .",
15-
"test": "mocha"
15+
"test": "tsc && mocha"
1616
},
1717
"keywords": [
1818
"markdown",

‎snippet-injector.ts‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const cssSpec: FormatSpec = {
3232
const xmlSpec: FormatSpec = {
3333
commentStart: ws + "<!--" + ws,
3434
commentEnd: ws + "-->" + wsAndLine,
35-
postProcess: function(snippet: string) {
35+
postProcess: function (snippet: string) {
3636
var bindingRegEx = new RegExp("\{\{.*\}\}");
3737
var newLineChar = '\n';
3838
var linesOfSnippet = snippet.split(newLineChar);
@@ -67,6 +67,7 @@ export class SnippetInjector {
6767
private _storedSourceTypes: Array<string>;
6868
private _storedTargetTypes: Array<string>;
6969
private _storedSourceTitles: any;
70+
private _toWrap: boolean;
7071

7172
private _fileFormatSpecs = {};
7273

@@ -75,6 +76,14 @@ export class SnippetInjector {
7576
this._storedSnippets = {};
7677
}
7778

79+
get toWrap(): boolean {
80+
return this._toWrap;
81+
}
82+
83+
set toWrap(value: boolean){
84+
this._toWrap = value;
85+
}
86+
7887
get targetFileExtensionFilter(): string {
7988
return this._targetFileExtensionFilter;
8089
}
@@ -112,7 +121,7 @@ export class SnippetInjector {
112121
this._storedSourceTitles[this._storedSourceTypes[i]] = (currentTitles[i] || "")
113122
}
114123
}
115-
124+
116125
this._fileFormatSpecs['.cs'] = jsSpec;
117126
this._fileFormatSpecs['.swift'] = jsSpec;
118127
this._fileFormatSpecs['.h'] = jsSpec;
@@ -172,9 +181,25 @@ export class SnippetInjector {
172181
}
173182
}
174183

184+
private replaceWrappedSnippetsWithCorespondingTags(fileContent): string {
185+
var content = "";
186+
content = fileContent.replace(/\<snippet id=['"]([a-zA-Z0-9\-]+)[\S\s]>[\S\s]*?<\/snippet>/g, "<snippet id='$1'/>");
187+
return content;
188+
}
189+
190+
private wrapSnippetWithComments(snippetTag, snippetId): string {
191+
var wrappedSnippetTag = "";
192+
wrappedSnippetTag += "\n<snippet id='" + snippetId + "'>\n"
193+
wrappedSnippetTag += snippetTag
194+
wrappedSnippetTag += "\n</snippet>\n"
195+
196+
return wrappedSnippetTag;
197+
}
198+
175199
private processDocsFile(path: string, extensionFilter: string) {
176200
console.log("Processing docs file: " + path);
177201
var fileContents = fsModule.readFileSync(path, 'utf8');
202+
fileContents = this.replaceWrappedSnippetsWithCorespondingTags(fileContents);
178203
var regExpOpen = /\<\s*snippet\s+id=\'((?:[a-z]+\-)*[a-z]+)\'\s*\/\s*\>/g;
179204
var match = regExpOpen.exec(fileContents);
180205
var hadMatches: boolean = false;
@@ -197,6 +222,29 @@ export class SnippetInjector {
197222
}
198223

199224
if (finalSnippet.length > 0) {
225+
/*
226+
Check whether it should be wrapped or replaced.
227+
If the tag is closed it will be replaced by the snippet.
228+
229+
From:
230+
<snippet id="snippetId"/>
231+
To:
232+
{your_snippet}
233+
234+
If there is open and closed tag the snippet will be wrapped around snippet tag.
235+
236+
From:
237+
<snippet id="snippetId"></snippet>
238+
To:
239+
<snippet id="snippetId">
240+
{your_snippet}
241+
</snippet>
242+
243+
*/
244+
if (this.toWrap) {
245+
var tmpMatchedString = this.wrapSnippetWithComments(matchedString, placeholderId);
246+
fileContents = fileContents.replace(matchedString, tmpMatchedString);
247+
}
200248
fileContents = fileContents.replace(matchedString, finalSnippet);
201249
console.log("Token replaced: " + matchedString);
202250
}

‎test/docsroot/test.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,19 @@ This one has some hidden parts:
1010
This one has some hidden parts:
1111
<snippet id='ts-snippet-with-hidden-section'/>
1212

13-
1413
# CSS snippet:
1514
<snippet id='css-snippet'/>
1615
<snippet id='cssSnippet'/>
1716

1817
This one has some hidden parts:
1918
<snippet id='css-snippet-with-hidden-section'/>
19+
20+
This one is already processed snippet
21+
<snippet id='css-already-processed'>
22+
```
23+
.btn {
24+
color: green;
25+
background-color: blue;
26+
}
27+
```
28+
</snippet>

‎test/e2e.js‎

Lines changed: 93 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,37 +21,112 @@ function hasPattern(pattern, shouldExists, callback) {
2121
} else {
2222
callback(shouldExists ? null : 'Pattern ' + pattern + ' WAS found. This is NOT expected.');
2323
}
24-
2524
}
2625
});
2726
}
2827

28+
function contain(pattern, callback) {
29+
hasPattern(pattern, true, callback);
30+
}
31+
32+
function notContain(pattern, callback) {
33+
hasPattern(pattern, false, callback);
34+
}
35+
2936
describe('markdown-snippet-injector', function () {
3037

3138
beforeEach(function (done) {
3239
preparedemo();
3340
done();
3441
});
3542

36-
//TODO: Add tests for hidden fields
43+
describe('XML',
44+
function () {
45+
it('should process XML snippets', function (done) {
46+
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".xml"');
47+
notContain("<snippet id='xml-snippet'/>", function () {
48+
notContain("<snippet id='xml-snippet'>", function () {
49+
contain('<Label fontSize="20" text="{{ itemName }}"/>', done);
50+
});
51+
});
52+
});
3753

38-
it('should process XML snippets', function (done) {
39-
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".xml"');
40-
hasPattern("<snippet id='xml-snippet'/>", false, done);
41-
});
54+
it('should process XML snippets and wrap it', function (done) {
55+
shelljs.exec('node index.js -w --root=./test/root --docsroot=./test/docsroot-output --sourceext=".xml"');
56+
notContain("<snippet id='xml-snippet'/>", function () {
57+
contain("<snippet id='xml-snippet'>", function () {
58+
contain('<Label fontSize="20" text="{{ itemName }}"/>', done);
59+
});
60+
});
61+
});
62+
});
4263

43-
it('should process TypeScript snippets', function (done) {
44-
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".ts"');
45-
hasPattern("<snippet id='ts-snippet'/>", false, done);
46-
});
64+
describe('TypeScript',
65+
function () {
66+
it('should process TypeScript snippets', function (done) {
67+
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".ts"');
68+
notContain("<snippet id='ts-snippet'/>", function () {
69+
notContain("<snippet id='ts-snippet'>", function () {
70+
notContain("</snippet>", function () {
71+
contain('return a + b;', done);
72+
});
73+
});
74+
});
75+
});
4776

48-
it('should process CSS snippets', function (done) {
49-
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
50-
hasPattern("<snippet id='css-snippet'/>", false, done);
51-
});
77+
it('should process TypeScript snippets and wrap', function (done) {
78+
shelljs.exec('node index.js -w --root=./test/root --docsroot=./test/docsroot-output --sourceext=".ts"');
79+
notContain("<snippet id='ts-snippet'/>", function () {
80+
contain("<snippet id='ts-snippet'>", function () {
81+
contain("</snippet>", done);
82+
});
83+
});
84+
});
85+
});
5286

53-
it('should NOT process snippetIds that are not defined in source', function (done) {
54-
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
55-
hasPattern("<snippet id='cssSnippet'/>", true, done);
56-
});
87+
describe('CSS',
88+
function () {
89+
it('should process CSS snippets', function (done) {
90+
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
91+
notContain("<snippet id='css-snippet'/>", function () {
92+
notContain("<snippet id='css-snippet'>", function () {
93+
notContain("</snippet>", function () {
94+
contain('text-align: center;', done);
95+
});
96+
});
97+
});
98+
});
99+
100+
it('should process CSS snippets and wrap', function (done) {
101+
shelljs.exec('node index.js -w --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
102+
notContain("<snippet id='css-snippet'/>", function () {
103+
contain("<snippet id='css-snippet'>", function () {
104+
contain("</snippet>", function () {
105+
contain('text-align: center;', done);
106+
});
107+
});
108+
});
109+
});
110+
111+
it('should keep hidden the marked area in CSS', function (done) {
112+
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
113+
notContain("visibility: hidden;", done);
114+
});
115+
116+
it('should NOT process snippetIds that are not defined in source', function (done) {
117+
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
118+
contain("<snippet id='cssSnippet'/>", function () {
119+
notContain("<snippet id='cssSnippet'>", done);
120+
});
121+
});
122+
123+
it('should update the already processed snippet tags', function (done) {
124+
shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
125+
contain("<snippet id='css-already-processed'>", function () {
126+
contain("</snippet>", function () {
127+
contain("color: red;", done);
128+
});
129+
});
130+
});
131+
});
57132
});

‎test/root/test-css.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,19 @@
88
/* >> css-snippet-with-hidden-section */
99
.btn {
1010
color: green;
11+
background-color: blue;
1112
/* >> (hide) */
1213
visibility: hidden;
1314
/* << (hide) */
1415
}
15-
/* << css-snippet-with-hidden-section */
16+
/* << css-snippet-with-hidden-section */
17+
18+
/* >> css-already-processed */
19+
.text {
20+
color: red;
21+
font-size: 10px;
22+
/* >> (hide) */
23+
visibility: hidden;
24+
/* << (hide) */
25+
}
26+
/* << css-already-processed */

‎test/root/test-xml.xml‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui/listview" xmlns="http://www.nativescript.org/tns.xsd">
1+
<navigation:ExamplePage
2+
xmlns:navigation="navigation/example-page" loaded="onPageLoaded"
3+
xmlns:lv="nativescript-telerik-ui/listview"
4+
xmlns="http://www.nativescript.org/tns.xsd">
25
<StackLayout>
3-
<!-- >> xml-snippet -->
6+
<!-- >> xml-snippet -->
47
<StackLayout>
58
<Label fontSize="20" text="{{ itemName }}"/>
69
</StackLayout>
7-
<!-- << xml-snippet -->
8-
9-
<!-- >> xml-snippet-with-hidden-section -->
10+
<!-- << xml-snippet -->
11+
<!-- >> xml-snippet-with-hidden-section -->
1012
<StackLayout>
1113
<!-- >> (hide) -->
1214
<Label text="you should not see this"/>
1315
<!-- << (hide) -->
1416
<Label fontSize="20" text="{{ itemName }}"/>
1517
</StackLayout>
16-
<!-- << xml-snippet-with-hidden-section -->
17-
18+
<!-- << xml-snippet-with-hidden-section -->
1819
</StackLayout>
1920
</navigation:ExamplePage>

0 commit comments

Comments
 (0)