feat: add liveFilter predicate to replace live

Author: Bart Ledoux

README.md

@@ -19,10 +19,8 @@ yarn add -D vuepress-plugin-live
 //.vuepress/config.js
 module.exports = {
   //...
-  plugins: [
-    ["live"],
-  ]
-}
+  plugins: [["live"]],
+};
 ```
 
 ## Usage
@@ -33,3 +31,52 @@ In your markdown file just add a `live` flag to your fenced code blocks.
 <button>example</button>
 ```
 </code></pre>
+
+## Options
+
+### noSsr
+
+Avoid server side rendering the components in components if they are not ssr ready. Remember that vuepress build pre-compiles the html pages you need.
+
+#### default
+
+`false`
+
+#### example
+
+```js
+//.vuepress/config.js
+module.exports = {
+  //...
+  plugins: [["live", { noSsr: true }]],
+};
+```
+
+### liveFilter
+
+Allows users of theis plugin to say what fenced blocks will be rendered with vue-live.
+
+#### default
+
+```js
+(lang) => / live$/.test(lang) && / live /.test(lang);
+```
+
+#### example
+
+```js
+//.vuepress/config.js
+module.exports = {
+  //...
+  plugins: [
+    [
+      "live",
+      {
+        liveFilter(lang) {
+          return ["vue", "js", "jsx"].includes(lang);
+        },
+      },
+    ],
+  ],
+};
+```

markDownPlugin.js

@@ -2,19 +2,23 @@ const { parseComponent } = require("vue-template-compiler");
 const { isCodeVueSfc } = require("vue-inbrowser-compiler");
 const getImports = require("./getImports");
 
-const addVueLive = ({ noSsr }) => md => {
+const addVueLive = ({ noSsr, liveFilter }) => (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 (!/ live$/.test(lang) && !/ live /.test(lang)) {
+    if (
+      liveFilter
+        ? !liveFilter(lang)
+        : !/ live$/.test(lang) && !/ live /.test(lang)
+    ) {
       return fence(...args);
     }
 
-    const getScript = code => {
+    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)) {
@@ -32,14 +36,16 @@ const addVueLive = ({ noSsr }) => md => {
     // 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 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 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}'}"