chore(*): add Adaptor Development

wangshaoyuan · Dec 9, 2019 · 2a26e6c · 2a26e6c
1 parent 68f235c
commit 2a26e6c
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 2 deletions.
diff --git a/scripts/server/loaders/adaptor/index.js b/scripts/server/loaders/adaptor/index.js
@@ -1,13 +1,15 @@
 const path = require('path');
 const _ = require('lodash');
+const ejs = require('ejs');
+const { logger, replaceExt } = require('../../../utils');
 
 const cwd = process.cwd();
 const IMPORT_REG = /import {(.+)} from ['"]@alifd\/next['"];?/;
 const IMPORT_LIB_REG = /import (.+) from ['"]@alifd\/next\/lib\/(.+)['"];?/;
 const IMPORT_LIB_REG_G = /^import .+ from ['"]@alifd\/next\/lib\/(.+)['"];?/gm;
 
 module.exports = function(content) {
-    return fixImport(content, this.resourcePath);
+    return fixImport.call(this, content, this.resourcePath);
 };
 
 function fixImport(code, resourcePath) {
@@ -59,5 +61,48 @@ import ${component} from'${newLibPath}'`;
         });
     }
 
+    if (process.env.NODE_ENV === 'development') {
+        const adaptorTplPath = path.resolve(
+            __dirname,
+            '../../tpls/adaptor.ejs'
+        );
+        this.addDependency(adaptorTplPath);
+
+        const scripts = [
+            '/common.js',
+            `/${replaceExt(path.relative(cwd, this.resourcePath), '.js')}`,
+        ];
+
+        ejs.renderFile(
+            adaptorTplPath,
+            {
+                scripts,
+            },
+            (err, html) => {
+                if (err) {
+                    logger.error(`Render theme demo failed: ${err}`);
+                } else {
+                    const htmlPath = replaceExt(
+                        path.relative(
+                            path.join(cwd, 'docs'),
+                            this.resourcePath
+                        ),
+                        '.html'
+                    );
+                    this.emitFile(htmlPath, html);
+                }
+            }
+        );
+
+        return `
+        ${code.replace('export default', 'const Adaptor = ')};
+        import AdaptorGenerate from '@alifd/adaptor-generate';
+        AdaptorGenerate(Adaptor);
+        if (module.hot) {
+            module.hot.accept();
+        }
+        `;
+    }
+
     return code;
 }
diff --git a/scripts/server/loaders/theme/index.js b/scripts/server/loaders/theme/index.js
@@ -1,3 +1,4 @@
+process.env.NODE_ENV = 'development';
 const path = require('path');
 const loaderUtils = require('loader-utils');
 const ejs = require('ejs');

diff --git a/scripts/server/tpls/adaptor.ejs b/scripts/server/tpls/adaptor.ejs
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>主题 Demo</title>
+        <script src="//shadow.elemecdn.com/npm/[email protected]/dist/polyfill.min.js"></script>
+        <script src="//shadow.elemecdn.com/npm/[email protected]/umd/react.development.js"></script>
+        <script src="//shadow.elemecdn.com/npm/[email protected]/umd/react-dom.development.js"></script>
+        <script src="//shadow.elemecdn.com/npm/[email protected]/min/moment-with-locales.js"></script>
+        <script src="//unpkg.com/@alifd/[email protected]/umd/adaptor-generate.development.js"></script>
+    </head>
+    <body>
+        <div id="container"></div>
+        <div id="root"></div>
+        <% scripts.forEach(function(src) { %>
+        <script src="<%= src %>"></script>
+        <% })%>
+    </body>
+</html>
diff --git a/scripts/server/webpack.js b/scripts/server/webpack.js
@@ -30,7 +30,15 @@ module.exports = function getWebpackConfig(options) {
     );
     const demoPaths = glob.sync(path.join(componentPath, 'demo', '*.md'));
     const themePaths = glob.sync(path.resolve(componentPath, 'theme/**/*.jsx'));
-    const entry = getEntry([indexPath, ...demoPaths, ...themePaths]);
+    const adaptorPaths = glob.sync(
+        path.resolve(componentPath, 'adaptor/*.jsx')
+    );
+    const entry = getEntry([
+        indexPath,
+        ...demoPaths,
+        ...themePaths,
+        ...adaptorPaths,
+    ]);
     config.entry = entry;
 
     config.output = {
@@ -99,6 +107,16 @@ module.exports = function getWebpackConfig(options) {
         }
     }
 
+    if (adaptorPaths.length) {
+        const docsPath = path.join(cwd, 'docs');
+        links.push({
+            href: path
+                .relative(docsPath, adaptorPaths[0])
+                .replace(/\.jsx$/, '.html'),
+            title: 'Adaptor Demo',
+        });
+    }
+
     config.module.rules.push({
         test: /docs\/[^/]+\/index\.(en-us\.)?md$/,
         use: [