fix: add some tests and make remark work

Author: Bart Ledoux

getAst.js

@@ -0,0 +1,19 @@
+const { Parser } = require("acorn");
+
+const ACORN_OPTIONS = {
+  ecmaVersion: 2019,
+  sourceType: "module",
+};
+
+/**
+ * Parse source code with Acorn and return AST, returns undefined in case of errors
+ */
+module.exports = function getAst(code, plugins = []) {
+  const parser = Parser.extend(...plugins);
+
+  try {
+    return parser.parse(code, ACORN_OPTIONS);
+  } catch (err) {
+    return undefined;
+  }
+};

getImports.js

@@ -0,0 +1,36 @@
+const walkes = require("walkes");
+const getAst = require("./getAst");
+
+/**
+ * Returns a list of all strings used in import statements or require() calls
+ */
+module.exports = function getImports(code) {
+  // Parse example source code, but ignore errors
+  const ast = getAst(code);
+  if (!ast) {
+    return [];
+  }
+
+  const imports = [];
+  walkes(ast, {
+    // import foo from '
+    // import 'foo'
+    ImportDeclaration(node) {
+      if (node.source) {
+        imports.push(node.source.value);
+      }
+    },
+    // require('foo')
+    CallExpression(node) {
+      if (
+        node.callee &&
+        node.callee.name === "require" &&
+        node.arguments &&
+        node.arguments[0].value
+      ) {
+        imports.push(node.arguments[0].value);
+      }
+    },
+  });
+  return imports;
+};

index.js

@@ -1,17 +1,16 @@
 const visit = require("unist-util-visit");
 const { parseComponent } = require("vue-template-compiler");
 const { isCodeVueSfc } = require("vue-inbrowser-compiler-utils");
+const getImports = require("./getImports");
 
-export default function attacher({ liveFilter } = {}) {
-  return (ast) => visit(ast, "code", visitor);
-
+function getAttacher({ liveFilter } = {}) {
   function visitor(node) {
-    let { lang } = node;
+    let { lang, meta } = node;
 
     if (
       liveFilter
-        ? !liveFilter(lang)
-        : !/ live$/.test(lang) && !/ live /.test(lang)
+        ? !liveFilter(lang, meta)
+        : !/live$/.test(meta) && !/live /.test(meta)
     ) {
       return;
     }
@@ -35,17 +34,40 @@ export default function attacher({ liveFilter } = {}) {
     // add this as a prop
     const scr = getScript(code);
 
-    const langArray = lang.split(" ");
-    const langClean = langArray[0];
+    const requires = getImports(scr).map(
+      (mod) => `'${mod}': require('${mod}')`
+    );
+
     const codeClean = code.replace(/\`/g, "\\`").replace(/\$/g, "\\$");
-    const editorProps = langArray.find((l) => /^\{.+\}$/.test(l));
-    const jsx = langArray.length > 2 && langArray[1] === "jsx" ? "jsx " : ""; // to enable jsx, we want ```vue jsx live or ```jsx jsx live
+
+    const editorPropsArray = /\{.+\}/.exec(meta);
+    const editorProps = editorPropsArray ? editorPropsArray[0] : undefined;
+    const metaArray = meta ? meta.replace(editorProps, "").split(" ") : [];
+    const jsx = metaArray.length > 2 && metaArray[1] === "jsx" ? "jsx " : ""; // to enable jsx, we want ```vue jsx live or ```jsx jsx live
     const markdownGenerated = `<vue-live ${jsx}
-        :layoutProps="{lang:'${langClean}'}" 
-        :code="\`${codeClean}\`" 
-        ${editorProps ? ` :editorProps="${editorProps}"` : ""}
-         />`;
+      :layoutProps="{lang:'${lang}'}"${
+      requires.length
+        ? `
+      :requires="{${requires.join(",")}}"`
+        : ""
+    }
+      :code="\`${codeClean}\`" ${
+      editorProps
+        ? `
+      :editorProps="${editorProps
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")}"`
+        : ""
+    } />`;
 
+    node.type = "html";
     node.value = markdownGenerated;
   }
+
+  return function attacher() {
+    return (ast) => visit(ast, "code", visitor);
+  };
 }
+
+module.exports = getAttacher;

index.spec.js

@@ -0,0 +1,123 @@
+const remark = require("remark");
+const plugin = require("./index.js");
+
+test("transform fenced into vue-live with live flag", () => {
+  remark()
+    .use(plugin())
+    .process(
+      `
+\`\`\`vue live
+<comp/>
+\`\`\`
+`,
+      (err, file) => {
+        if (err) {
+          throw err;
+        }
+        expect(String(file)).toMatchInlineSnapshot(`
+          "<vue-live 
+                :layoutProps=\\"{lang:'vue'}\\"
+                :code=\\"\`<comp/>\`\\"  />
+          "
+        `);
+      }
+    );
+});
+
+test("avoid transform fenced into vue-live", () => {
+  remark()
+    .use(plugin())
+    .process(
+      `
+\`\`\`vue
+<comp/>
+\`\`\`
+  `,
+      (err, file) => {
+        if (err) {
+          throw err;
+        }
+        expect(String(file)).toMatchInlineSnapshot(`
+          "\`\`\`vue
+          <comp/>
+          \`\`\`
+          "
+        `);
+      }
+    );
+});
+
+test("transform custom fenced into vue-live", () => {
+  remark()
+    .use(plugin({ liveFilter: (lang) => /pizza/.test(lang) }))
+    .process(
+      `
+\`\`\`pizza
+<comp/>
+\`\`\`
+    `,
+      (err, file) => {
+        if (err) {
+          throw err;
+        }
+        expect(String(file)).toMatchInlineSnapshot(`
+          "<vue-live 
+                :layoutProps=\\"{lang:'pizza'}\\"
+                :code=\\"\`<comp/>\`\\"  />
+          "
+        `);
+      }
+    );
+});
+
+test("transform require and import statements", () => {
+  remark()
+    .use(plugin())
+    .process(
+      `
+\`\`\`js live
+import b from 'test/import'
+const a = require('test/req')
+<comp/>
+\`\`\`
+      `,
+      (err, file) => {
+        if (err) {
+          throw err;
+        }
+        expect(String(file)).toMatchInlineSnapshot(`
+          "<vue-live 
+                :layoutProps=\\"{lang:'js'}\\"
+                :requires=\\"{'test/import': require('test/import'),'test/req': require('test/req')}\\"
+                :code=\\"\`import b from 'test/import'
+          const a = require('test/req')
+          <comp/>\`\\"  />
+          "
+        `);
+      }
+    );
+});
+
+test("transform require and import statements", () => {
+  remark()
+    .use(plugin())
+    .process(
+      `
+  \`\`\`js live {"lineNumbers": true}
+  <comp/>
+  \`\`\`
+        `,
+      (err, file) => {
+        if (err) {
+          throw err;
+        }
+        expect(String(file)).toMatchInlineSnapshot(`
+          "<vue-live 
+                :layoutProps=\\"{lang:'js'}\\"
+                :code=\\"\`<comp/>\`\\" 
+                :editorProps=\\"{&quot;lineNumbers&quot;: true}\\" />
+          "
+        `);
+      }
+    );
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-plugin-vue-live",
-  "version": "0.0.1",
+  "version": "0.0.0-dev",
   "description": "Remark plugin to transform fenced code into examples in vue-live",
   "main": "index.js",
   "repository": {
@@ -20,11 +20,21 @@
   },
   "homepage": "https://github.com/vue-styleguidist/remark-plugin-vue-live#readme",
   "dependencies": {
+    "acorn": "^6.4.2",
     "unist-util-visit": "^2.0.3",
     "vue-inbrowser-compiler-utils": "^4.32.1",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "walkes": "^0.2.1"
   },
   "peerDependencies": {
     "vue-live": "^1.14.0"
+  },
+  "devDependencies": {
+    "jest": "^26.5.2",
+    "prettier": "^2.1.2",
+    "remark": "^12.0.1"
+  },
+  "scripts": {
+    "test": "jest"
   }
 }