Reflect snippets changes to doc (md) files

Author: angeltsvetkov

README.md

@@ -76,6 +76,40 @@ Use the `<snippet id='<your-snippet-id>'/>` notation to define the corresponding
         <snippet id='sum-snippet'/>
 ```
 
+After the first generation 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.
+
+Example:
+
+main.css
+```
+/* >> css-snippet */
+.btn {
+    color: green;
+    text-align: center;
+}
+/* << css-snippet */
+```
+
+README.MD
+```
+This is a CSS snippet
+<snippet id='css-snippet'/>
+```
+
+After first build the README.MD will looks like:
+```
+This is a CSS snippet
+<snippet id='css-snippet'>
+```
+.btn {
+    color: green;
+    text-align: center;
+}
+```
+</snippet>
+```
+Then when you update `main.css`, your README.MD will be updated as well.
+
 # Advanced features
 ## Nested snippets
 Nested snippets are also supported. This is helpful in scenarios where you want to explain parts of a larger snippet in steps:
@@ -162,12 +196,11 @@ When injected, a snippet is formatted using the default MarkDown code-snippet fo
 ```
 mdinject --root=. --docsroot=../ --sourceext=".java|.cs" --targetext=".md|.txt" --snippettitles="Java|C#"
 ```
+> Note that the order of the snippet titles must be the related to the order of the source extension types so that they match.
 
 ## Run e2e tests
 1. Clone repo
 2. npm install
 3. npm test
 
 E2E tests are developed with [Mocha](https://mochajs.org).
-
-> Note that the order of the snippet titles must be the related to the order of the source extension types so that they match.

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "prepublish": "tsc -p .",
-    "test": "mocha"
+    "test": "tsc && mocha"
   },
   "keywords": [
     "markdown",

snippet-injector.ts

@@ -32,7 +32,7 @@ const cssSpec: FormatSpec = {
 const xmlSpec: FormatSpec = {
     commentStart: ws + "<!--" + ws,
     commentEnd: ws + "-->" + wsAndLine,
-    postProcess: function(snippet: string) {
+    postProcess: function (snippet: string) {
         var bindingRegEx = new RegExp("\{\{.*\}\}");
         var newLineChar = '\n';
         var linesOfSnippet = snippet.split(newLineChar);
@@ -112,7 +112,7 @@ export class SnippetInjector {
                 this._storedSourceTitles[this._storedSourceTypes[i]] = (currentTitles[i] || "")
             }
         }
-        
+
         this._fileFormatSpecs['.cs'] = jsSpec;
         this._fileFormatSpecs['.swift'] = jsSpec;
         this._fileFormatSpecs['.h'] = jsSpec;
@@ -172,9 +172,25 @@ export class SnippetInjector {
         }
     }
 
+    private replaceWrappedSnippetsWithCorespondingTags(fileContent): string {
+        var content = "";
+        content = fileContent.replace(/\<snippet id=['"]([a-zA-Z0-9\-]+)[\S\s]>[\S\s]*?<\/snippet>/g, "<snippet id='$1'/>");
+        return content;
+    }
+
+    private wrapSnippetWithComments(snippetTag, snippetId): string {
+        var wrappedSnippetTag = "";
+        wrappedSnippetTag += "\n<snippet id='" + snippetId + "'>\n"
+        wrappedSnippetTag += snippetTag
+        wrappedSnippetTag += "\n</snippet>\n"
+
+        return wrappedSnippetTag;
+    }
+
     private processDocsFile(path: string, extensionFilter: string) {
         console.log("Processing docs file: " + path);
         var fileContents = fsModule.readFileSync(path, 'utf8');
+        fileContents = this.replaceWrappedSnippetsWithCorespondingTags(fileContents);
         var regExpOpen = /\<\s*snippet\s+id=\'((?:[a-z]+\-)*[a-z]+)\'\s*\/\s*\>/g;
         var match = regExpOpen.exec(fileContents);
         var hadMatches: boolean = false;
@@ -197,6 +213,8 @@ export class SnippetInjector {
             }
 
             if (finalSnippet.length > 0) {
+                var tmpMatchedString = this.wrapSnippetWithComments(matchedString, placeholderId);
+                fileContents = fileContents.replace(matchedString, tmpMatchedString);
                 fileContents = fileContents.replace(matchedString, finalSnippet);
                 console.log("Token replaced: " + matchedString);
             }

test/docsroot/test.md

@@ -10,10 +10,19 @@ This one has some hidden parts:
 This one has some hidden parts:
 <snippet id='ts-snippet-with-hidden-section'/>
 
-
 # CSS snippet:
 <snippet id='css-snippet'/>
 <snippet id='cssSnippet'/>
 
 This one has some hidden parts:
 <snippet id='css-snippet-with-hidden-section'/>
+
+This one is already processed snippet
+<snippet id='css-already-processed'>
+```
+.btn {
+    color: green;
+    background-color: blue;
+}
+```
+</snippet>

test/e2e.js

@@ -21,37 +21,79 @@ function hasPattern(pattern, shouldExists, callback) {
       } else {
         callback(shouldExists ? null : 'Pattern ' + pattern + ' WAS found. This is NOT expected.');
       }
-
     }
   });
 }
 
+function contain(pattern, callback) {
+  hasPattern(pattern, true, callback);
+}
+
+function notContain(pattern, callback) {
+  hasPattern(pattern, false, callback);
+}
+
 describe('markdown-snippet-injector', function () {
 
   beforeEach(function (done) {
     preparedemo();
     done();
   });
 
-  //TODO: Add tests for hidden fields
+  describe('XML',
+    function () {
+      it('should process XML snippets', function (done) {
+        shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".xml"');
+        notContain("<snippet id='xml-snippet'/>", function () {
+          contain("<snippet id='xml-snippet'>", function () {
+            contain("</snippet>", done);
+          });
+        });
+      });
+    });
 
-  it('should process XML snippets', function (done) {
-    shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".xml"');
-    hasPattern("<snippet id='xml-snippet'/>", false, done);
-  });
+  describe('TypeScript',
+    function () {
+      it('should process TypeScript snippets', function (done) {
+        shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".ts"');
+        notContain("<snippet id='ts-snippet'/>", function () {
+          contain("<snippet id='ts-snippet'>", function () {
+            contain("</snippet>", done);
+          });
+        });
+      });
+    });
 
-  it('should process TypeScript snippets', function (done) {
-    shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".ts"');
-    hasPattern("<snippet id='ts-snippet'/>", false, done);
-  });
+  describe('CSS',
+    function () {
+      it('should process CSS snippets', function (done) {
+        shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
+        notContain("<snippet id='css-snippet'/>", function () {
+          contain("<snippet id='css-snippet'>", function () {
+            contain("</snippet>", done);
+          });
+        });
+      });
 
-  it('should process CSS snippets', function (done) {
-    shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
-    hasPattern("<snippet id='css-snippet'/>", false, done);
-  });
+      it('should keep hidden the marked area in CSS', function (done) {
+        shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
+        notContain("visibility: hidden;", done);
+      });
 
-  it('should NOT process snippetIds that are not defined in source', function (done) {
-    shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
-    hasPattern("<snippet id='cssSnippet'/>", true, done);
-  });
+      it('should NOT process snippetIds that are not defined in source', function (done) {
+        shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
+        contain("<snippet id='cssSnippet'/>", function () {
+          notContain("<snippet id='cssSnippet'>", done);
+        });
+      });
+
+      it('should update the already processed snippet tags', function (done) {
+        shelljs.exec('node index.js --root=./test/root --docsroot=./test/docsroot-output --sourceext=".css"');
+        contain("<snippet id='css-already-processed'>", function () {
+          contain("</snippet>", function(){
+            contain("color: red;", done);
+          });
+        });
+      });
+    });
 });

test/root/test-css.css

@@ -8,8 +8,19 @@
 /* >> css-snippet-with-hidden-section */
 .btn {
     color: green;
+    background-color: blue;
     /* >> (hide) */
     visibility: hidden;
     /* << (hide) */
 }
-/* << css-snippet-with-hidden-section */
+/* << css-snippet-with-hidden-section */
+
+/* >> css-already-processed */
+.text {
+    color: red;
+    font-size: 10px;
+    /* >> (hide) */
+    visibility: hidden;
+    /* << (hide) */
+}
+/* << css-already-processed */