Getting started React + improve snippetManager

package.json

@@ -28,6 +28,7 @@
     "express": "^4.16.4",
     "fast-deepclone": "^1.0.1",
     "handlebars": "^4.1.1",
+    "highlight.js": "^9.15.6",
     "hoek": "^6.1.2",
     "indent-string": "^3.2.0",
     "jquery": "^3.3.1",

plugins/snippetManager.js

@@ -1,54 +1,123 @@
-const
-  fs = require('fs'),
+const fs = require('fs'),
   path = require('path'),
-  marked = require('marked'),
   MarkdownIt = require('markdown-it'),
-  color = require('colors/safe');
+  color = require('colors/safe'),
+  hljs = require('highlight.js'),
+  indentLine = require('indent-string');
 
 const SNIPPET_REGEX = /(\[snippet=)[a-zA-Z0-9-]+\]/g;
+const SNIPPET_INOTHER_REGEX = /(\[\[snippet=)[a-zA-Z0-9-]+\]]/g;
 
+const SNIPPET_EXTRACT = /\/\* *snippet:start *\*\/\n?((.|\n)*?)\/\* *snippet:end *\*\//;
 
-module.exports = {
+const md = new MarkdownIt();
 
-  process (filename, data) {
-    let
-      self = this,
-      fileString = data.contents.toString(),
-      match = fileString.match(SNIPPET_REGEX),
-      presentLanguages = [],
-      md = new MarkdownIt();
-
-    if(match) {
-      match.forEach(el => {
-        let
-          name = el.split('=')[1].slice(0, -1),
-          fullPath = path.join(__dirname, '../src/' + filename.split('/').slice(0, -1).join('/') + '/snippets'),
-          code = '',
-          filenames = fs.readdirSync(fullPath);
-
-        filenames.forEach(file => {
-
-          if (file.split('.')[0] === name && file.substr(-8) !== 'test.yml') {
-            presentLanguages.push(file.split('.')[1]);
-            let fileContent = fs.readFileSync(fullPath + '/' + file, 'utf8');
-            const lng = file.split('.')[1];
-            const languageName = lng === 'js' ? 'javascript' : lng;
-
-            code += '``` ' + languageName + '\n' + fileContent + '\n```\n';
-          }
-
-        });
-        const markdown = md.render(code);
-        fileString = fileString.replace(el, markdown);
+const countIndent = (string, pos) => {
+  let count = 0;
+  let idx = pos - 1;
+  const char = string[idx];
+  for (; string[idx] === ' ' || string[idx] === '\t'; idx -= 1) {
+    count += 1;
+  }
+  return {
+    char,
+    count
+  };
+};
+
+const getDirPath = filename =>
+  path.join(
+    __dirname,
+    '../src/' +
+      filename
+        .split('/')
+        .slice(0, -1)
+        .join('/') +
+      '/snippets'
+  );
+
+const getMarkdown = (code, lang, indent, wrapWithTag) => {
+  if (wrapWithTag) {
+    return md.render(code);
+  }
+  const codeIndented = indentLine(code, indent.count, { indent: indent.char });
+  return hljs.highlight(lang, codeIndented, true).value;
+};
+
+const getSnippetContent = (dir, file) => {
+  let content = fs.readFileSync(dir + '/' + file, 'utf8');
+
+  const match = SNIPPET_EXTRACT.exec(content);
+  if (match) {
+    content = match[1];
+  }
+
+  if (content[content.length - 1] === '\n') {
+    content = content.slice(0, -1);
+  }
+
+  return content;
+};
+
+const replaceSnippets = (filename, fileString, regex, wrapWithTag = true) => {
+  const match = fileString.match(regex);
+  if (match) {
+    match.forEach(el => {
+      let name = el.split('=')[1].slice(0, wrapWithTag ? -1 : -2),
+        dirPath = getDirPath(filename),
+        filenames = fs.readdirSync(dirPath),
+        code = '';
+
+      const indent = countIndent(fileString, fileString.indexOf(el));
+
+      let languageName;
+      filenames.forEach(file => {
+        if (file.split('.')[0] === name && file.substr(-8) !== 'test.yml') {
+          const fileContent = getSnippetContent(dirPath, file);
+          const lng = file.split('.')[1];
+
+          languageName = lng === 'js' ? 'javascript' : lng;
+          code += wrapWithTag
+            ? '``` ' + languageName + '\n' + fileContent + '\n```\n'
+            : fileContent;
+        }
       });
+
+      const markdown = getMarkdown(code, languageName, indent, wrapWithTag);
+      fileString = fileString.replace(
+        indent.char.repeat(indent.count) + el,
+        markdown
+      );
+    });
+  }
+  return fileString;
+};
+
+module.exports = {
+  process(filename, data) {
+    let self = this,
+      fileString = data.contents.toString(),
+      match = false;
+
+    let newFileString = replaceSnippets(
+      filename,
+      fileString,
+      SNIPPET_INOTHER_REGEX,
+      false
+    );
+    newFileString = replaceSnippets(filename, newFileString, SNIPPET_REGEX);
+    if (newFileString !== fileString) {
+      fileString = newFileString;
+      match = true;
     }
+
     return {
-      has_code_example : (match) ? true : false,
+      has_code_example: match,
       fileContent: new Buffer(fileString)
     };
   },
 
-  report (args) {
+  report(args) {
     console.log(color.yellow('[TO-DO] =>'), args);
   }
 };

src/sdk-reference/js/6/getting-started/node-js/snippets/subscribe.js

@@ -1,14 +1,9 @@
 // Loads the Kuzzle SDK modules
-const {
-  Kuzzle,
-  WebSocket
-} = require('kuzzle-sdk');
+const { Kuzzle, WebSocket } = require('kuzzle-sdk');
 
 // Instantiates a Kuzzle client with the WebSocket protocol
 // Replace 'kuzzle' with your Kuzzle server hostname (e.g. 'localhost')
-const kuzzle = new Kuzzle(
-  new WebSocket('kuzzle')
-);
+const kuzzle = new Kuzzle(new WebSocket('kuzzle'));
 
 // Adds a listener to detect any connection problems
 kuzzle.on('networkError', error => {
@@ -26,21 +21,24 @@ const run = async () => {
     };
 
     // Defines a callback invoked each time a notification is received
-    const callback = (notification) => {
-
-      if (notification.type === 'document' && notification.action === 'create') {
-        const {
-          _source: driver,
-          _id: driverId
-        } = notification.result;
-
-        console.log(`New driver ${driver.name} with id ${driverId} has B license.`);
-        kuzzle.disconnect();
+    const callback = notification => {
+      if (!(notification.type === 'document' && notification.action === 'create')) {
+        return;
       }
+      const { _source: driver, _id: driverId } = notification.result;
+      console.log(
+        `New driver ${driver.name} with id ${driverId} has B license.`
+      );
+      kuzzle.disconnect();
     };
 
     // Subscribes to document notifications using the above filter
-    await kuzzle.realtime.subscribe('nyc-open-data', 'yellow-taxi', filter, callback);
+    await kuzzle.realtime.subscribe(
+      'nyc-open-data',
+      'yellow-taxi',
+      filter,
+      callback
+    );
 
     console.log('Successfully subscribed to document notifications!');
   } catch (error) {