fix: use remark syntax instead of markdownit

Author: Bart Ledoux

index.js

@@ -1,58 +1,51 @@
-module.exports = function getPlugin({ noSsr, liveFilter }) {
-  return function addVueLiveToFencedCode(md) {
-    const fence = md.renderer.rules.fence;
-    md.renderer.rules.fence = (...args) => {
-      const [tokens, idx] = args;
-      const token = tokens[idx];
-      const lang = token.info.trim();
-
-      // if it does not ends with live just use default fence
-      if (
-        liveFilter
-          ? !liveFilter(lang)
-          : !/ live$/.test(lang) && !/ live /.test(lang)
-      ) {
-        return fence(...args);
+const visit = require("unist-util-visit");
+const { parseComponent } = require("vue-template-compiler");
+const { isCodeVueSfc } = require("vue-inbrowser-compiler-utils");
+
+export default function attacher({ liveFilter } = {}) {
+  return (ast) => visit(ast, "code", visitor);
+
+  function visitor(node) {
+    let { lang } = node;
+
+    if (
+      liveFilter
+        ? !liveFilter(lang)
+        : !/ live$/.test(lang) && !/ live /.test(lang)
+    ) {
+      return;
+    }
+
+    const getScript = (code) => {
+      // script is at the beginning of a line after a return
+      // In case we are loading a vue component as an example, extract script tag
+      if (isCodeVueSfc(code)) {
+        const parts = parseComponent(code);
+        return parts && parts.script ? parts.script.content : "";
       }
 
-      const getScript = (code) => {
-        // script is at the beginning of a line after a return
-        // In case we are loading a vue component as an example, extract script tag
-        if (isCodeVueSfc(code)) {
-          const parts = parseComponent(code);
-          return parts && parts.script ? parts.script.content : "";
-        }
-
-        //else it could be the weird almost jsx of vue-styleguidist
-        return code.split(/\n[\t ]*</)[0];
-      };
-
-      const code = token.content;
-
-      // analyze code to find requires
-      // put all requires into a "requires" object
-      // add this as a prop
-      const scr = getScript(code);
-      const requires = getImports(scr).map(
-        (mod) => `'${mod}': require('${mod}')`
-      );
-      const langArray = lang.split(" ");
-      const langClean = langArray[0];
-      const codeClean = md.utils
-        .escapeHtml(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 markdownGenerated = `<vue-live ${jsx}
+      //else it could be the weird almost jsx of vue-styleguidist
+      return code.split(/\n[\t ]*</)[0];
+    };
+
+    const code = node.value;
+
+    // analyze code to find requires
+    // put all requires into a "requires" object
+    // add this as a prop
+    const scr = getScript(code);
+
+    const langArray = lang.split(" ");
+    const langClean = langArray[0];
+    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 markdownGenerated = `<vue-live ${jsx}
         :layoutProps="{lang:'${langClean}'}" 
         :code="\`${codeClean}\`" 
-        :requires="{${requires.join(",")}}"
         ${editorProps ? ` :editorProps="${editorProps}"` : ""}
          />`;
-      return noSsr
-        ? `<no-ssr>${markdownGenerated}</no-ssr>`
-        : markdownGenerated;
-    };
-  };
-};
+
+    node.value = markdownGenerated;
+  }
+}

package.json

@@ -18,5 +18,13 @@
   "bugs": {
     "url": "https://github.com/vue-styleguidist/remark-plugin-vue-live/issues"
   },
-  "homepage": "https://github.com/vue-styleguidist/remark-plugin-vue-live#readme"
+  "homepage": "https://github.com/vue-styleguidist/remark-plugin-vue-live#readme",
+  "dependencies": {
+    "unist-util-visit": "^2.0.3",
+    "vue-inbrowser-compiler-utils": "^4.32.1",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "peerDependencies": {
+    "vue-live": "^1.14.0"
+  }
 }