md2vue - npm Package Compare versions

Comparing version 1.2.4 to 2.0.0

dist/md2vue.common.js

@@ -79,6 +79,6 @@ 'use strict';
   var names = ref.names; if ( names === void 0 ) names = '';
-  var vueInjection = ref.vueInjection; if ( vueInjection === void 0 ) vueInjection = '';
+  var documentInfo = ref.documentInfo; if ( documentInfo === void 0 ) documentInfo = {};
 
-  if (typeof vueInjection !== 'string') {
-    var msg = '`vueInjection` is not a string';
+  if (typeof documentInfo !== 'object') {
+    var msg = '`documentInfo` is not an object';
     console.warn(msg);
@@ -88,5 +88,19 @@ throw msg
 
-  var result = indent(code, 2);
-  var injection = indent(vueInjection, 4);
-  return ("\n<script>\n" + result + "\n  module.exports = {\n    components: {\n" + (indent(names, 6)) + "\n    }" + (vueInjection ? ',' : '') + "\n" + injection + "\n  }\n</script>")
+  var injection = Object.keys(documentInfo).map(function (key) {
+    var val = documentInfo[key];
+
+    if (typeof val === 'function') {
+      val = val.toString();
+      // short style: `a(){}`
+      if (/^function /.test(val) === false) {
+        val = 'function ' + val;
+      }
+    } else {
+      val = JSON.stringify(val);
+    }
+
+    return ("  " + key + ": " + val)
+  });
+
+  return ("\n<script>\n" + code + "\nmodule.exports = {\n" + (injection.join(',\n')) + "\n}\nmodule.exports.components = {\n" + (indent(names, 2)) + "\n}\n</script>")
 };
@@ -121,8 +135,11 @@
   var demos = [];
+  renderer.code = code;
 
-  var toggleCode = config.toggleCode;
+  var markup = marked(source, { renderer: renderer });
 
-  renderer.code = function (code, language) {
+  return { demos: demos, markup: markup }
+
+  function code (raw, language) {
     var lang = language === 'vue' ? 'html' : language;
-    var markup = hljs.highlight(lang, code).value;
+    var markup = hljs.highlight(lang, raw).value;
     var result = wrapHljsCode(fix(markup), lang);
@@ -136,3 +153,3 @@
     var tag = "md2vuedemo" + ((id++).toString(36));
-    var ref = extractMdCode(code);
+    var ref = extractMdCode(raw);
     var style = ref.style;
@@ -142,27 +159,19 @@ var script = ref.script;
 
-    var vueComponent = "<template lang=\"html\">\n  <div class=\"vue-demo\">\n" + (indent(template, '    ')) + "\n  </div>\n</template>\n<script lang=\"buble\">\n" + script + "\n</script>";
+    var vue = "<template lang=\"html\">\n  <div class=\"vue-demo\">\n" + (indent(template, '    ')) + "\n  </div>\n</template>\n<script lang=\"buble\">\n" + script + "\n</script>";
 
     if (style !== '') {
-      vueComponent += "\n<style scoped>" + style + "</style>";
+      vue = "<style scoped>" + style + "</style>\n" + vue;
     }
 
-    demos.push({
-      tag: tag,
-      raw: code,
-      vue: vueComponent
-    });
+    demos.push({ tag: tag, raw: raw, vue: vue });
 
-    var ctrl = '';
+    var customMarkups = '';
 
-    if (toggleCode) {
-      var rand = 1e8 * Math.random() | 0;
-      var uid = 'vd' + Buffer.from(("" + rand)).toString('base64').replace(/=/g, '');
-      ctrl = "<input id=\"" + uid + "\" type=\"checkbox\" /><label for=\"" + uid + "\"></label>";
+    if (typeof config.customMarkups === 'function') {
+      customMarkups = config.customMarkups() || '';
+    } else if (config.customMarkups === 'string') {
+      customMarkups = config.customMarkups || '';
     }
-    return ("\n<div class=\"vue-demo-block\">\n<" + tag + "></" + tag + ">\n" + ctrl + "\n" + result + "\n</div>\n")
-  };
 
-  return {
-    demos: demos,
-    markup: marked(source, { renderer: renderer })
+    return ("\n<div class=\"vue-demo-block\">\n<" + tag + "></" + tag + ">\n" + customMarkups + "\n" + result + "\n</div>\n")
   }
@@ -246,4 +255,2 @@ };
 var defaults = {
-  toggleCode: true,
-  vueInjection: '',
   target: 'vue'
@@ -256,3 +263,3 @@ };
   var config = Object.assign({}, defaults, opts);
-  var vueInjection = config.vueInjection;
+  var documentInfo = config.documentInfo;
   var target = config.target;
@@ -288,3 +295,3 @@ var componentName = config.componentName;
       return Promise.all([
-        Promise.resolve({ code: code, names: names, vueInjection: vueInjection }),
+        Promise.resolve({ code: code, names: names, documentInfo: documentInfo }),
         bundler.pipe()
@@ -298,5 +305,5 @@ ])
       var content = [
+        wrapCSSText(css),
         wrapMarkup(markup),
-        wrapScript(obj),
-        wrapCSSText(css)
+        wrapScript(obj)
       ].join('\n');
@@ -303,0 +310,0 @@

dist/md2vue.esm.js

@@ -75,6 +75,6 @@ import marked from 'marked';
   var names = ref.names; if ( names === void 0 ) names = '';
-  var vueInjection = ref.vueInjection; if ( vueInjection === void 0 ) vueInjection = '';
+  var documentInfo = ref.documentInfo; if ( documentInfo === void 0 ) documentInfo = {};
 
-  if (typeof vueInjection !== 'string') {
-    var msg = '`vueInjection` is not a string';
+  if (typeof documentInfo !== 'object') {
+    var msg = '`documentInfo` is not an object';
     console.warn(msg);
@@ -84,5 +84,19 @@ throw msg
 
-  var result = indent(code, 2);
-  var injection = indent(vueInjection, 4);
-  return ("\n<script>\n" + result + "\n  module.exports = {\n    components: {\n" + (indent(names, 6)) + "\n    }" + (vueInjection ? ',' : '') + "\n" + injection + "\n  }\n</script>")
+  var injection = Object.keys(documentInfo).map(function (key) {
+    var val = documentInfo[key];
+
+    if (typeof val === 'function') {
+      val = val.toString();
+      // short style: `a(){}`
+      if (/^function /.test(val) === false) {
+        val = 'function ' + val;
+      }
+    } else {
+      val = JSON.stringify(val);
+    }
+
+    return ("  " + key + ": " + val)
+  });
+
+  return ("\n<script>\n" + code + "\nmodule.exports = {\n" + (injection.join(',\n')) + "\n}\nmodule.exports.components = {\n" + (indent(names, 2)) + "\n}\n</script>")
 };
@@ -117,8 +131,11 @@
   var demos = [];
+  renderer.code = code;
 
-  var toggleCode = config.toggleCode;
+  var markup = marked(source, { renderer: renderer });
 
-  renderer.code = function (code, language) {
+  return { demos: demos, markup: markup }
+
+  function code (raw, language) {
     var lang = language === 'vue' ? 'html' : language;
-    var markup = hljs.highlight(lang, code).value;
+    var markup = hljs.highlight(lang, raw).value;
     var result = wrapHljsCode(fix(markup), lang);
@@ -132,3 +149,3 @@
     var tag = "md2vuedemo" + ((id++).toString(36));
-    var ref = extractMdCode(code);
+    var ref = extractMdCode(raw);
     var style = ref.style;
@@ -138,27 +155,19 @@ var script = ref.script;
 
-    var vueComponent = "<template lang=\"html\">\n  <div class=\"vue-demo\">\n" + (indent(template, '    ')) + "\n  </div>\n</template>\n<script lang=\"buble\">\n" + script + "\n</script>";
+    var vue = "<template lang=\"html\">\n  <div class=\"vue-demo\">\n" + (indent(template, '    ')) + "\n  </div>\n</template>\n<script lang=\"buble\">\n" + script + "\n</script>";
 
     if (style !== '') {
-      vueComponent += "\n<style scoped>" + style + "</style>";
+      vue = "<style scoped>" + style + "</style>\n" + vue;
     }
 
-    demos.push({
-      tag: tag,
-      raw: code,
-      vue: vueComponent
-    });
+    demos.push({ tag: tag, raw: raw, vue: vue });
 
-    var ctrl = '';
+    var customMarkups = '';
 
-    if (toggleCode) {
-      var rand = 1e8 * Math.random() | 0;
-      var uid = 'vd' + Buffer.from(("" + rand)).toString('base64').replace(/=/g, '');
-      ctrl = "<input id=\"" + uid + "\" type=\"checkbox\" /><label for=\"" + uid + "\"></label>";
+    if (typeof config.customMarkups === 'function') {
+      customMarkups = config.customMarkups() || '';
+    } else if (config.customMarkups === 'string') {
+      customMarkups = config.customMarkups || '';
     }
-    return ("\n<div class=\"vue-demo-block\">\n<" + tag + "></" + tag + ">\n" + ctrl + "\n" + result + "\n</div>\n")
-  };
 
-  return {
-    demos: demos,
-    markup: marked(source, { renderer: renderer })
+    return ("\n<div class=\"vue-demo-block\">\n<" + tag + "></" + tag + ">\n" + customMarkups + "\n" + result + "\n</div>\n")
   }
@@ -242,4 +251,2 @@ };
 var defaults = {
-  toggleCode: true,
-  vueInjection: '',
   target: 'vue'
@@ -252,3 +259,3 @@ };
   var config = Object.assign({}, defaults, opts);
-  var vueInjection = config.vueInjection;
+  var documentInfo = config.documentInfo;
   var target = config.target;
@@ -284,3 +291,3 @@ var componentName = config.componentName;
       return Promise.all([
-        Promise.resolve({ code: code, names: names, vueInjection: vueInjection }),
+        Promise.resolve({ code: code, names: names, documentInfo: documentInfo }),
         bundler.pipe()
@@ -294,5 +301,5 @@ ])
       var content = [
+        wrapCSSText(css),
         wrapMarkup(markup),
-        wrapScript(obj),
-        wrapCSSText(css)
+        wrapScript(obj)
       ].join('\n');
@@ -299,0 +306,0 @@

package.json

 {
   "name": "md2vue",
-  "version": "1.2.4",
+  "version": "2.0.0",
   "main": "./dist/md2vue.common.js",
@@ -5,0 +5,0 @@ "module": "dist/md2vue.esm.js",

README.md

@@ -7,87 +7,4 @@ # md2vue
 
-## API
+## How to use
 
-### markdown text to `.vue` 
-
-```javascript
-const md2vue = require('md2vue')
-
-// `vueInjection` is those stuff you want to add to
-// the Vue component's `export default {}` block
-const vueInjection = `
-head() {
-  return '测试'
-},
-layout: 'component'
-`
-md2vue(markdown, {
-  vueInjection,
-  // this would insert a pair of lable and checkbox
-  // which could be used for controlling visibility of
-  // source code and demo block
-  // default: `true`
-  toggleCode: true
-}).then(content => {
-  require('fs').writeFileSync('./dest.vue', content)
-})
-```
-
-The output could be like this:
-
-```html
-<template>
-  <article class="markdown-body">
-    // ...
-    <md2vuedemo0></md2vuedemo0>
-    // ...
-  </article>
-</template>
-<script>
-const md2vuedemo0 = .... 
-// ...
-module.exports = {
-  components: { md2vuedemo0 },
-+ head() {
-+   return '测试'
-+ },
-+ layout: 'component'
-}
-</script>
-```
-
-### markdown text to javascript
-
-```javascript
-const md2vue = require('md2vue')
-
-// `vueInjection` is those stuff you want to add to
-// the Vue component's `export default {}` block
-const vueInjection = `
-head() {
-  return '测试'
-},
-layout: 'component'
-`
-md2vue(markdown, {
-  vueInjection,
-  // this would insert a pair of lable and checkbox
-  // which could be used for controlling visibility of
-  // source code and demo block
-  // default: `true`
-  toggleCode: true,
-  // this indicates that js code expected
-  // default to vue (see above section)
-  target: 'js',
-  // name of the component
-  componentName: 'docPageA',
-}).then(content => {
-  require('fs').writeFileSync('./docPageA.js', content)
-})
-```
-
-## TODO
-
-- loader
-- command line
-- sourceMap
-- consider using [remark](http://remark.js.org/) 
+See [./test/index.js]

No alert changes

Worsened metrics

Total package byte prevSize

306622

decreased by-5.01%

Number of package files

11

decreased by-8.33%

Lines of code

1600

decreased by-12.85%

Number of lines in readme file

10

decreased by-89.25%

No dependency changes