md2vue - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/md2vue.common.js

@@ -52,3 +52,3 @@ 'use strict';
 Renderer.prototype.link = function (href, title, text) {
-  var relative = !/^(https?\:)?\/\//.test(href);
+  var relative = !/^(https?:)?\/\//.test(href);
   var out = "<a href=\"" + href + "\"";
@@ -66,9 +66,7 @@
 
-  return out;
+  return out
 };
 
 function camelCase (str) {
-  return str.replace(/[_.-](\w|$)/g, function (_,x) {
-    return x.toUpperCase()
-  })
+  return str.replace(/[_.-](\w|$)/g, function (_, x) { return x.toUpperCase(); })
 }
@@ -85,6 +83,2 @@
 
-  if (!code) {
-    return ''
-  }
-
   if (typeof vueInjection !== 'string') {
@@ -98,3 +92,3 @@ var msg = '`vueInjection` is not a string';
   var injection = indent(vueInjection, 4);
-  return ("\n<script>\n" + result + "\n  export default {\n    components: {\n" + (indent(names, 6)) + "\n    }" + (vueInjection ? ',' : '') + "\n" + injection + "\n  }\n</script>")
+  return ("\n<script>\n" + result + "\n  module.exports = {\n    components: {\n" + (indent(names, 6)) + "\n    }" + (vueInjection ? ',' : '') + "\n" + injection + "\n  }\n</script>")
 };
@@ -111,2 +105,10 @@
 
+var wrapModule = function (ref) {
+  var componentName = ref.componentName;
+  var compiled = ref.compiled;
+  var css = ref.css;
+
+  return ("module.exports = (function (module) {\n" + compiled + "\n  var exports = module.exports\n  exports.name = \"" + componentName + "\"\n  exports.methods = {\n    beforeCreate: function () {\n      const css = \"" + (css.replace(/\n/g, ' ')) + "\"\n      if (css) {\n        this._ic_ = insert(css)\n      }\n    },\n    destroyed: function () {\n      this._ic_ && this._ic_()\n    }\n  }\n  module.exports.install = function (Vue) {\n    Vue.component(exports.name, exports)\n  }\n  if (typeof window !== void 0 && window.Vue) {\n    Vue.use(exports )\n  }\n  return module.exports;\n\n  function insert(css) {\n    var elem = document.createElement('style')\n    elem.setAttribute('type', 'text/css')\n\n    if ('textContent' in elem) {\n      elem.textContent = css\n    } else {\n      elem.styleSheet.cssText = css\n    }\n\n    document.getElementsByTagName('head')[0].appendChild(elem)\n    return function () {\n      document.getElementsByTagName('head')[0].removeChild(elem)\n    }\n  }\n  })({});\n")
+};
+
 var wrapHljsCode = function (code, lang) { return ("<pre v-pre class=\"lang-" + lang + "\">\n<code>" + code + "</code>\n</pre>"); };
@@ -251,3 +253,4 @@
   toggleCode: true,
-  vueInjection: ''
+  vueInjection: '',
+  target: 'vue'
 };
@@ -258,4 +261,6 @@
 
-  var config = Object.assign(defaults, opts);
+  var config = Object.assign({}, defaults, opts);
   var vueInjection = config.vueInjection;
+  var target = config.target;
+  var componentName = config.componentName;
 
@@ -303,3 +308,17 @@ var ref = tranform(source, config);
 
-      return content
+      if (!target || target === 'vue') {
+        return content
+      }
+
+      if (!componentName) {
+        throw new Error('[Error] `componentName` must be specified!')
+      }
+
+      return vueify.compiler
+        .compilePromise(content)
+        .then(function (compiled) { return wrapModule({
+          componentName: componentName,
+          compiled: compiled,
+          css: css
+        }); })
     })
@@ -306,0 +325,0 @@ };

dist/md2vue.esm.js

@@ -48,3 +48,3 @@ import marked from 'marked';
 Renderer.prototype.link = function (href, title, text) {
-  var relative = !/^(https?\:)?\/\//.test(href);
+  var relative = !/^(https?:)?\/\//.test(href);
   var out = "<a href=\"" + href + "\"";
@@ -62,9 +62,7 @@
 
-  return out;
+  return out
 };
 
 function camelCase (str) {
-  return str.replace(/[_.-](\w|$)/g, function (_,x) {
-    return x.toUpperCase()
-  })
+  return str.replace(/[_.-](\w|$)/g, function (_, x) { return x.toUpperCase(); })
 }
@@ -81,6 +79,2 @@
 
-  if (!code) {
-    return ''
-  }
-
   if (typeof vueInjection !== 'string') {
@@ -94,3 +88,3 @@ var msg = '`vueInjection` is not a string';
   var injection = indent(vueInjection, 4);
-  return ("\n<script>\n" + result + "\n  export default {\n    components: {\n" + (indent(names, 6)) + "\n    }" + (vueInjection ? ',' : '') + "\n" + injection + "\n  }\n</script>")
+  return ("\n<script>\n" + result + "\n  module.exports = {\n    components: {\n" + (indent(names, 6)) + "\n    }" + (vueInjection ? ',' : '') + "\n" + injection + "\n  }\n</script>")
 };
@@ -107,2 +101,10 @@
 
+var wrapModule = function (ref) {
+  var componentName = ref.componentName;
+  var compiled = ref.compiled;
+  var css = ref.css;
+
+  return ("module.exports = (function (module) {\n" + compiled + "\n  var exports = module.exports\n  exports.name = \"" + componentName + "\"\n  exports.methods = {\n    beforeCreate: function () {\n      const css = \"" + (css.replace(/\n/g, ' ')) + "\"\n      if (css) {\n        this._ic_ = insert(css)\n      }\n    },\n    destroyed: function () {\n      this._ic_ && this._ic_()\n    }\n  }\n  module.exports.install = function (Vue) {\n    Vue.component(exports.name, exports)\n  }\n  if (typeof window !== void 0 && window.Vue) {\n    Vue.use(exports )\n  }\n  return module.exports;\n\n  function insert(css) {\n    var elem = document.createElement('style')\n    elem.setAttribute('type', 'text/css')\n\n    if ('textContent' in elem) {\n      elem.textContent = css\n    } else {\n      elem.styleSheet.cssText = css\n    }\n\n    document.getElementsByTagName('head')[0].appendChild(elem)\n    return function () {\n      document.getElementsByTagName('head')[0].removeChild(elem)\n    }\n  }\n  })({});\n")
+};
+
 var wrapHljsCode = function (code, lang) { return ("<pre v-pre class=\"lang-" + lang + "\">\n<code>" + code + "</code>\n</pre>"); };
@@ -247,3 +249,4 @@
   toggleCode: true,
-  vueInjection: ''
+  vueInjection: '',
+  target: 'vue'
 };
@@ -254,4 +257,6 @@
 
-  var config = Object.assign(defaults, opts);
+  var config = Object.assign({}, defaults, opts);
   var vueInjection = config.vueInjection;
+  var target = config.target;
+  var componentName = config.componentName;
 
@@ -299,3 +304,17 @@ var ref = tranform(source, config);
 
-      return content
+      if (!target || target === 'vue') {
+        return content
+      }
+
+      if (!componentName) {
+        throw new Error('[Error] `componentName` must be specified!')
+      }
+
+      return compiler
+        .compilePromise(content)
+        .then(function (compiled) { return wrapModule({
+          componentName: componentName,
+          compiled: compiled,
+          css: css
+        }); })
     })
@@ -302,0 +321,0 @@ };

package.json

 {
   "name": "md2vue",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "./dist/md2vue.common.js",
@@ -20,3 +20,2 @@ "module": "dist/md2vue.esm.js",
   "devDependencies": {
-    "gh-pages": "^1.0.0",
     "rollup": "^0.47.4",
@@ -30,5 +29,4 @@ "rollup-plugin-buble": "^0.15.0",
     "build": "rollup -c rollup.config.js",
-    "preview": "npm run build && node test/ ./demo && live-server ./demo",
-    "deploy": "npm run build && node test/ ./demo && gh-pages -d demo"
+    "preview": "npm run build && node test/ ./docs && live-server ./docs"
   }
 }

README.md

@@ -9,2 +9,4 @@ # md2vue
 
+### markdown text to `.vue` 
+
 ```javascript
@@ -39,3 +41,3 @@ const md2vue = require('md2vue')
     // ...
-    <VueDemo0></VueDemo0>
+    <md2vuedemo0></md2vuedemo0>
     // ...
@@ -45,6 +47,6 @@ </article>
 <script>
-const VueDemo0 = .... 
+const md2vuedemo0 = .... 
 // ...
-export default {
-  components: { VueDemo0 },
+module.exports = {
+  components: { md2vuedemo0 },
 + head() {
@@ -57,1 +59,38 @@ +   return '测试'
 ```
+
+### 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/) 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

319909

increased by1568.97%

Dev dependency count

4

decreased by-20%

Number of package files

12

increased by100%

Lines of code

1815

increased by287.82%

Number of lines in readme file

93

increased by72.22%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

3

increased by200%

No dependency changes