@codpoe/react-markdown-loader - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -54,3 +54,3 @@ const mdIt = require('markdown-it');
  */
-const toMdComponent = (jsx, importStatements, exportStatements, demos) => {
+const toMdComponent = (jsx, code, importStatements, exportStatements, demos) => {
     return `
@@ -60,2 +60,4 @@ import React from 'react';
 
+        ${code}
+
         ${joinDemos(demos)}
@@ -83,5 +85,5 @@
 const joinDemos = (demos) => {
-    return demos.map(([id, demo]) => (`
-        class Rmdl${id} extends React.Component {
-            ${demo}
+    return demos.map(([name, content]) => (`
+        class ${name} extends React.Component {
+            ${content}
         }
@@ -108,2 +110,3 @@ `)).join('\n');
     let exportStatements = '';
+    let code = '';
     const demos = [];
@@ -122,2 +125,3 @@ let isDemo = false;
                 const type = (m && m.length > 1) ? m[1] : '';
+                const name = `Rmdl${idx}`;
                 const content = tokens[idx + 1].content;
@@ -133,3 +137,3 @@
                     case TYPES.DEMO:
-                        demos.push([idx, content]);
+                        demos.push([name, content]);
                         isDemo = true;
@@ -143,8 +147,6 @@ break;
 
-                const nodeName = `Rmdl${idx}`;
-
                 return `
                     <div className="${className}__demo">
                         <div className="${className}__demo-component">
-                            <${nodeName} />
+                            <${name} />
                         </div>
@@ -160,5 +162,64 @@ <div className="${className}__demo-code">
         }
+    }).use(mdContainer, 'code', {
+        validate(params) {
+            return params.trim().match(/^code$/);
+        },
+        render(tokens, idx) {
+            if (tokens[idx].nesting === 1) {
+                const content = tokens[idx + 1].content;
+                code += content;
+
+                return '{/* ';
+            }
+            return ' */}';
+        }
+    }).use(mdContainer, 'import', { // 以 'import' 作为标记
+        validate(params) {
+            return params.trim().match(/^import$/);
+        },
+        render(tokens, idx) {
+            if (tokens[idx].nesting === 1) {
+                const content = tokens[idx + 1].content;
+                importStatements += content;
+
+                return '{/* ';
+            }
+            return ' */}';
+        }
+    }).use(mdContainer, 'export', { // 以 'export' 作为标记
+        validate(params) {
+            return params.trim().match(/^export$/);
+        },
+        render(tokens, idx) {
+            if (tokens[idx].nesting === 1) {
+                const content = tokens[idx + 1].content;
+                exportStatements += content;
+
+                return '{/* ';
+            }
+            return ' */}';
+        }
+    }).use(mdContainer, 'demo', { // 以 'demo' 作为标记
+        validate(params) {
+            return params.trim().match(/^demo$/);
+        },
+        render(tokens, idx) {
+            if (tokens[idx].nesting === 1) {
+                const name = `Rmdl${idx}`;
+                const content = tokens[idx + 1].content;
+                demos.push([name, content]);
+
+                return `
+                    <div className="${className}__demo">
+                        <div className="${className}__demo-component">
+                            <${name} />
+                        </div>
+                        <div className="${className}__demo-code">
+                `;
+            }
+            return '</div></div>';
+        }
     });
 
-    // 
+    // 使用额外的 markdown-it 插件
     plugins.forEach(plugin => {
@@ -171,3 +232,3 @@ md.use(...plugin);
     
-    return toMdComponent(jsx, importStatements, exportStatements, demos);
+    return toMdComponent(jsx, code, importStatements, exportStatements, demos);
 };

package.json

 {
   "name": "@codpoe/react-markdown-loader",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A webpack loader transforming markdown to react component",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

11274

21.8%

Lines of code

242

30.81%

No dependency changes