1.1.0

Author: undefined

example/src/markdown.md

@@ -1,101 +1,15 @@
 
-# Hello
-
-`<span>{{sss}}</span>`
-
-> This is test.
-
-- How are you?
-- Fine, Thank you, and you?
-- I'm fine， too. Thank you.
-- 🌚
-
-```javascript
-import Vue from 'vue'
-
-Vue.config.debug = true
-```
-
-<div class="test">
-  {{ model }} test
-</div>
-
-<compo>{{ model }}</compo>
-
-<div
-  class="abc"
-  @click="show = false">
-  啊哈哈哈
-</div>
-
-> All script or style tags in html mark will be extracted.Script will be excuted, and style will be added to document head.
-> Notice if there is a string instance which contains special word "&lt;/script>", it will fetch a SyntaxError.
-> Due to the complexity to solve it, just don't do that.
 ```html
-<style scoped>
-  .test {
-    background-color: green;
-  }
-</style>
-
-<style scoped>
-  .abc {
-    background-color: yellow;
-  }
-</style>
-<script>
-  let a=1<2;
-  let b="<-forget it-/script>";
-  console.log("***This script tag is successfully extracted and excuted.***")
-  module.exports = {
-    components: {
-      compo: {
-        render(h) {
-          return h('div', {
-            style: {
-              background: 'red'
-            }
-          }, this.$slots.default);
-        }
-      }
-    },
-
-    data () {
-      return {
-        model: 'abc'
-      }
-    }
-  }
-</script>
-jjjjjjjjjjjjjjjjjjjjjj
 <template>
-  <div></div>
+  <div id="components-button-demo-button-group">
+  </div>
 </template>
+<style>
+#components-button-demo-button-group h4 {
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: normal;
+}
+</style>
 ```
-
-
-
-<div>
-</div>
-
-sadfsfs
-
-大家哦哦好啊谁都发生地方上的冯绍峰s
-
-> sahhhh
-
-<compo>{{ model }}</compo>
-
-```html
-<compo>{{model }}{{model }}{{model }}{{model }}{{ model }}</compo>
-```
-
-
-
-<style src="./custom.css"></style>
-
-## 引入 style 文件
-
-<div class="custom">
-  原谅色
-</div>

example/webpack.config.js

@@ -1,5 +1,6 @@
 var resolve = require("path").resolve;
 var webpack = require("webpack");
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = {
   entry: "./src/entry.js",
@@ -28,13 +29,18 @@ module.exports = {
       },
       {
         test: /\.md$/,
-        loader: resolve(__dirname, "../index.js"),
-        options: {}
+        use: ['vue-loader', {
+          loader: resolve(__dirname, "../index.js"),
+          options: {wrapper: 'div', raw: true}
+        }],
       }
     ]
   },
   devServer: {
     historyApiFallback: true,
     noInfo: true
-  }
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+  ],
 };

lib/core.js

@@ -1,29 +1,166 @@
-var path = require('path');
 var loaderUtils = require('loader-utils');
+var hljs = require('highlight.js');
+var cheerio = require('cheerio');
+var markdown = require('markdown-it');
+var Token = require('markdown-it/lib/token');
 
-var markdownCompilerPath = path.resolve(__dirname, 'markdown-compiler.js');
+/**
+ * `<pre></pre>` => `<pre v-pre></pre>`
+ * `<code></code>` => `<code v-pre></code>`
+ * @param  {string} str
+ * @return {string}
+ */
+var addVuePreviewAttr = function(str) {
+  return str.replace(/(<pre|<code)/g, '$1 v-pre');
+};
 
-module.exports = function(source) {
-  this.cacheable();
-
-  this.options.__vueMarkdownOptions__ =
-    this.query || this.vueMarkdown || this.options.vueMarkdown || {};
-
-  var filePath = this.resourcePath;
-  var vueLoaderOptions = this.query && this.query.vueLoaderOptions
-  var result =
-    'module.exports = require(' +
-    loaderUtils.stringifyRequest(
-      this,
-      '!!vue-loader' +
-        (vueLoaderOptions ? `?${JSON.stringify(vueLoaderOptions)}` : '') + 
-        '!' +
-        markdownCompilerPath +
-        '?raw!' +
-        filePath +
-        (this.resourceQuery || '')
-    ) +
-    ');';
+/**
+ * renderHighlight
+ * @param  {string} str
+ * @param  {string} lang
+ */
+var renderHighlight = function(str, lang) {
+  if (!(lang && hljs.getLanguage(lang))) {
+    return '';
+  }
+
+  return hljs.highlight(lang, str, true).value;
+};
+
+/**
+ * html => vue file template
+ * @param  {[type]} html [description]
+ * @return {[type]}      [description]
+ */
+var renderVueTemplate = function(html, wrapper) {
+  var $ = cheerio.load(html, {
+    decodeEntities: false,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false,
+    xmlMode: true,
+  });
+
+  var output = {
+    style: $.html('style'),
+    // get only the first script child. Causes issues if multiple script files in page.
+    script: $.html($('script').first())
+  };
+  var result;
+
+  $('style').remove();
+  $('script').remove();
+  if(wrapper) {
+    result =
+      `<template><${wrapper}>` +
+      $.html() +
+      `</${wrapper}></template>\n`
+  } else {
+    result =
+      `<template>` +
+      $.html() +
+      `</template>\n`
+  }
+  result += output.style + '\n' + output.script;
 
   return result;
 };
+
+module.exports = function(source) {
+  this.cacheable && this.cacheable();
+  var parser, preprocess;
+  var opts = loaderUtils.getOptions(this);
+  var preventExtract = false;
+  if (opts.preventExtract) {
+    delete opts.preventExtract;
+    preventExtract = true;
+  }
+
+  if (typeof opts.render === 'function') {
+    parser = opts;
+  } else {
+    opts = Object.assign(
+      {
+        preset: 'default',
+        html: true,
+        highlight: renderHighlight,
+        wrapper: 'section'
+      },
+      opts
+    );
+
+    var plugins = opts.use;
+    preprocess = opts.preprocess;
+
+    delete opts.use;
+    delete opts.preprocess;
+
+    parser = markdown(opts.preset, opts);
+
+    //add ruler:extract script and style tags from html token content
+    !preventExtract &&
+      parser.core.ruler.push('extract_script_or_style', function replace(
+        state
+      ) {
+        let tag_reg = new RegExp('<(script|style)(?:[^<]|<)+</\\1>', 'g');
+        let newTokens = [];
+        state.tokens
+          .filter(token => token.type == 'fence' && token.info == 'html')
+          .forEach(token => {
+            let tokens = (token.content.match(tag_reg) || []).map(content => {
+              let t = new Token('html_block', '', 0);
+              t.content = content;
+              return t;
+            });
+            if (tokens.length > 0) {
+              newTokens.push.apply(newTokens, tokens);
+            }
+          });
+        state.tokens.push.apply(state.tokens, newTokens);
+      });
+
+    if (plugins) {
+      plugins.forEach(function(plugin) {
+        if (Array.isArray(plugin)) {
+          parser.use.apply(parser, plugin);
+        } else {
+          parser.use(plugin);
+        }
+      });
+    }
+  }
+
+  /**
+   * override default parser rules by adding v-pre attribute on 'code' and 'pre' tags
+   * @param {Array<string>} rules rules to override
+   */
+  function overrideParserRules(rules) {
+    if (parser && parser.renderer && parser.renderer.rules) {
+      var parserRules = parser.renderer.rules;
+      rules.forEach(function(rule) {
+        if (parserRules && parserRules[rule]) {
+          var defaultRule = parserRules[rule];
+          parserRules[rule] = function() {
+            return addVuePreviewAttr(defaultRule.apply(this, arguments));
+          };
+        }
+      });
+    }
+  }
+
+  overrideParserRules(['code_inline', 'code_block', 'fence']);
+
+  if (preprocess) {
+    source = preprocess.call(this, parser, source);
+  }
+
+  source = source.replace(/@/g, '__at__');
+
+  var content = parser.render(source).replace(/__at__/g, '@');
+  var result = renderVueTemplate(content, opts.wrapper);
+
+  if (opts.raw) {
+    return result;
+  } else {
+    return 'module.exports = ' + JSON.stringify(result);
+  }
+};