san-md-loader - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/san-md-loader.js

@@ -108,2 +108,6 @@ 'use strict';
       preset: 'default',
+      esModule: true,
+      html: true,
+      tagOpen: '```san',
+      tagClose: '```',
       highlight: function highlight(str, lang) {
@@ -130,2 +134,8 @@ if (lang && hljs.getLanguage(lang)) {
       delete this.options.plugins;
+
+      var _this$getSanComponent = this.getSanComponent(source),
+          components = _this$getSanComponent.components,
+          content = _this$getSanComponent.content,
+          requires = _this$getSanComponent.requires;
+
       var md = markdown(this.options.preset, this.options);
@@ -135,3 +145,10 @@ plugins.forEach(function (plugin) {
       });
-      var sanTemplate = "\n            <template>\n                <san-component class=\"".concat(this.options.templateClass || '', "\">").concat(md.render(source), "</san-component>\n            </template>\n        ");
+      var sanTemplate = "\n            <template>\n                <san-component class=\"".concat(this.options.templateClass || '', "\">").concat(md.render(content), "</san-component>\n            </template>\n        ");
+      var sanComponents = components.map(function (item, index) {
+        return item.replace('export default', "const sanComponent".concat(index, " ="));
+      }).join('');
+      var childComponents = components.map(function (item, index) {
+        return "'san-component-".concat(index, "': sanComponent").concat(index);
+      }).join(',');
+      var importModules = this.getImportModules(requires);
       var exportMethod = this.options.esModule ? 'export default' : 'module.exports=';
@@ -143,5 +160,100 @@
 
-      var sanImport = this.options.esModule ? 'import san from "san";' : 'var san = require("san");';
-      return "\n            ".concat(sanImport, "\n            ").concat(exportMethod, " san.defineComponent({template:").concat(JSON.stringify(sanTemplate), "});\n        ");
+      return "\n            ".concat(importModules, "\n            ").concat(sanComponents, "\n            ").concat(exportMethod, " san.defineComponent({\n                template: ").concat(JSON.stringify(sanTemplate), ",\n                components: {\n                    ").concat(childComponents, "\n                }\n            });\n        ");
     }
+  }, {
+    key: "getSanComponent",
+    value: function getSanComponent(source) {
+      var reg = new RegExp("".concat(this.options.tagOpen, "([\\s\\S]+?)").concat(this.options.tagClose));
+      var content = source;
+      var matchResult = reg.exec(content);
+      var componentId = 0;
+      var sanBlock = [];
+
+      while (matchResult) {
+        sanBlock.push(matchResult[1] ? matchResult[1].trim() : '');
+        content = content.replace(reg, "<san-component-".concat(componentId, " />"));
+        componentId++;
+        matchResult = reg.exec(content);
+      }
+
+      var requires = {};
+      var importReg = new RegExp("import([\\s\\S]+?)from '([\\s\\S]+?)'");
+      var components = sanBlock.map(function (item) {
+        var matches = importReg.exec(item);
+        var tmpStr = item;
+
+        while (matches) {
+          if (requires[matches[2]]) {
+            requires[matches[2]].push(matches[1].trim());
+          } else {
+            requires[matches[2]] = [matches[1].trim()];
+          }
+
+          tmpStr = tmpStr.replace(importReg, '');
+          matches = importReg.exec(tmpStr);
+        }
+
+        return tmpStr;
+      });
+
+      var _loop = function _loop(key) {
+        if ({}.hasOwnProperty.call(requires, key)) {
+          var tmpArray = Array.from(new Set(requires[key]));
+          requires[key] = {
+            single: '',
+            multi: []
+          };
+          tmpArray.forEach(function (item) {
+            var tmpMatches = item.match(/{([\s\S]+?)}/);
+
+            if (tmpMatches) {
+              var _requires$key$multi;
+
+              var variables = tmpMatches[1].indexOf(',') ? tmpMatches[1].trim().split(',') : [tmpMatches[1].trim()];
+
+              (_requires$key$multi = requires[key].multi).push.apply(_requires$key$multi, _toConsumableArray(variables));
+            } else {
+              requires[key].single = item.trim();
+            }
+          });
+          requires[key].multi = requires[key].multi.map(function (item) {
+            return item.trim();
+          });
+          requires[key].multi = Array.from(new Set(requires[key].multi));
+        }
+      };
+
+      for (var key in requires) {
+        _loop(key);
+      }
+
+      return {
+        components: components,
+        content: content,
+        requires: requires
+      };
+    }
+  }, {
+    key: "getImportModules",
+    value: function getImportModules(requires) {
+      var importModules = '';
+
+      if (!{}.hasOwnProperty.call(requires, 'san') || requires.san.single !== 'san') {
+        importModules += this.options.esModule ? 'import san from "san";' : 'var san = require("san");';
+      }
+
+      for (var key in requires) {
+        if ({}.hasOwnProperty.call(requires, key)) {
+          if (requires[key].single) {
+            importModules += "\n                        import ".concat(requires[key].single, " from '").concat(key, "';\n                    ");
+          }
+
+          if (requires[key].multi) {
+            importModules += "\n                        import {".concat(requires[key].multi.join(','), "} from '").concat(key, "';\n                    ");
+          }
+        }
+      }
+
+      return importModules;
+    }
   }]);
@@ -148,0 +260,0 @@

package.json

 {
   "name": "san-md-loader",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "💥Convert markdown file to SAN component.",
@@ -30,2 +30,3 @@ "main": "dist/san-md-loader.js",
     "babel-loader": "^8.0.6",
+    "css-loader": "^3.3.1",
     "eslint-config-airbnb-base": "^14.0.0",
@@ -35,3 +36,2 @@ "eslint-plugin-import": "^2.19.1",
     "html-webpack-plugin": "^3.2.0",
-    "markdown-it-container": "^2.0.0",
     "rollup": "^1.27.9",
@@ -43,2 +43,4 @@ "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "san-xui": "^0.2.0",
+    "style-loader": "^1.0.1",
     "webpack": "^4.41.2",
@@ -45,0 +47,0 @@ "webpack-cli": "^3.3.10",

src/parser.js

@@ -8,2 +8,6 @@ import markdown from 'markdown-it';
             preset: 'default',
+            esModule: true,
+            html: true,
+            tagOpen: '```san',
+            tagClose: '```',
             highlight(str, lang) {
@@ -30,10 +34,23 @@ if (lang && hljs.getLanguage(lang)) {
 
+        const {components, content, requires} = this.getSanComponent(source);
+
         const md = markdown(this.options.preset, this.options);
         plugins.forEach((plugin) => (Array.isArray(plugin) ? md.use(...plugin) : md.use(plugin)));
+
         const sanTemplate = `
             <template>
-                <san-component class="${this.options.templateClass || ''}">${md.render(source)}</san-component>
+                <san-component class="${this.options.templateClass || ''}">${md.render(content)}</san-component>
             </template>
         `;
 
+        const sanComponents = components
+            .map((item, index) => item.replace('export default', `const sanComponent${index} =`))
+            .join('');
+
+        const childComponents = components
+            .map((item, index) => `'san-component-${index}': sanComponent${index}`)
+            .join(',');
+
+        const importModules = this.getImportModules(requires);
+
         const exportMethod = this.options.esModule ? 'export default' : 'module.exports=';
@@ -45,8 +62,94 @@
 
-        const sanImport = this.options.esModule ? 'import san from "san";' : 'var san = require("san");';
         return `
-            ${sanImport}
-            ${exportMethod} san.defineComponent({template:${JSON.stringify(sanTemplate)}});
+            ${importModules}
+            ${sanComponents}
+            ${exportMethod} san.defineComponent({
+                template: ${JSON.stringify(sanTemplate)},
+                components: {
+                    ${childComponents}
+                }
+            });
         `;
     }
+
+    getSanComponent(source) {
+        const reg = new RegExp(`${this.options.tagOpen}([\\s\\S]+?)${this.options.tagClose}`);
+        let content = source;
+        let matchResult = reg.exec(content);
+        let componentId = 0;
+        const sanBlock = [];
+
+        while (matchResult) {
+            sanBlock.push(matchResult[1] ? matchResult[1].trim() : '');
+            content = content.replace(reg, `<san-component-${componentId} />`);
+            componentId++;
+            matchResult = reg.exec(content);
+        }
+
+        const requires = {};
+        const importReg = new RegExp("import([\\s\\S]+?)from '([\\s\\S]+?)'");
+
+        const components = sanBlock.map((item) => {
+            let matches = importReg.exec(item);
+            let tmpStr = item;
+
+            while (matches) {
+                if (requires[matches[2]]) {
+                    requires[matches[2]].push(matches[1].trim());
+                } else {
+                    requires[matches[2]] = [matches[1].trim()];
+                }
+                tmpStr = tmpStr.replace(importReg, '');
+                matches = importReg.exec(tmpStr);
+            }
+
+            return tmpStr;
+        });
+
+        for (const key in requires) {
+            if ({}.hasOwnProperty.call(requires, key)) {
+                const tmpArray = Array.from(new Set(requires[key]));
+                requires[key] = {single: '', multi: []};
+                tmpArray.forEach((item) => {
+                    const tmpMatches = item.match(/{([\s\S]+?)}/);
+                    if (tmpMatches) {
+                        const variables = tmpMatches[1].indexOf(',')
+                            ? tmpMatches[1].trim().split(',')
+                            : [tmpMatches[1].trim()];
+                        requires[key].multi.push(...variables);
+                    } else {
+                        requires[key].single = item.trim();
+                    }
+                });
+                requires[key].multi = requires[key].multi.map((item) => item.trim());
+                requires[key].multi = Array.from(new Set(requires[key].multi));
+            }
+        }
+
+        return {components, content, requires};
+    }
+
+    getImportModules(requires) {
+        let importModules = '';
+
+        if (!{}.hasOwnProperty.call(requires, 'san') || requires.san.single !== 'san') {
+            importModules += this.options.esModule ? 'import san from "san";' : 'var san = require("san");';
+        }
+
+        for (const key in requires) {
+            if ({}.hasOwnProperty.call(requires, key)) {
+                if (requires[key].single) {
+                    importModules += `
+                        import ${requires[key].single} from '${key}';
+                    `;
+                }
+                if (requires[key].multi) {
+                    importModules += `
+                        import {${requires[key].multi.join(',')}} from '${key}';
+                    `;
+                }
+            }
+        }
+        return importModules;
+    }
 }

No alert changes

Improved metrics

Total package byte prevSize

17406

increased by77.54%

Lines of code

382

increased by91%

Worsened metrics

Dev dependency count

19

increased by11.76%

No dependency changes