Merge branch 'alibaba-fusion:master' into menu#4640

package.json

@@ -53,6 +53,7 @@
   ],
   "scripts": {
     "start": "ts-node ./tools/serve/index.ts",
+    "theme": "node --max_old_space_size=8192 ./scripts/server/theme/index.js",
     "build": "ts-node ./tools/build/index.ts",
     "build:transform": "ts-node ./tools/build/transform/index.ts",
     "build:sass": "ts-node ./tools/build/sass.ts",
@@ -128,7 +129,9 @@
     "@alifd/dts-generator": "^1.0.3",
     "@alifd/eslint-config-next": "^2.0.0",
     "@alifd/meet-react": "^2.9.8",
+    "@alifd/sass-mapper": "^2.0.2",
     "@alifd/sass-tracker": "^0.1.0",
+    "@alifd/sassdoc-parser": "^2.0.0",
     "@alifd/stylelint-config-next": "^1.0.0",
     "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
@@ -232,6 +235,7 @@
     "mocha": "^3.5.3",
     "mochawesome": "^7.1.3",
     "moment": "^2.20.1",
+    "node-sass-package-importer": "^5.3.3",
     "nunjucks": "^3.2.0",
     "postcss": "^7.0.32",
     "postcss-calc": "^7.0.3",

scripts/preview/middlewares/rebuild-scss.js

@@ -3,7 +3,7 @@ const fs = require('fs-extra');
 const co = require('co');
 const postcss = require('postcss');
 const syntax = require('postcss-scss');
-const sass = require('node-sass');
+const sass = require('sass');
 const packageImporter = require('node-sass-package-importer');
 const { logger } = require('../../utils');
 
@@ -17,9 +17,9 @@ const sassRender = options => {
 const scss2AST = scss => postcss().process(scss, { syntax: syntax }).result.root;
 
 const PATTEN = /^import\s+['"](.+)style\.js['"];?/gm;
-module.exports = function(options) {
-    return function(req, res, next) {
-        co(function*() {
+module.exports = function (options) {
+    return function (req, res, next) {
+        co(function* () {
             if (req.method === 'GET' && /\/rebuildScss.json/.test(req.url)) {
                 const { cwd } = options;
                 const { componentName } = req.query;

scripts/server/loaders/adaptor/index.js

@@ -1,31 +1,34 @@
 const path = require('path');
 const _ = require('lodash');
 const ejs = require('ejs');
+const loaderUtils = require('loader-utils');
 const { logger, replaceExt, getComPathName } = 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.call(this, content, this.resourcePath);
+module.exports = function (content) {
+    const options = loaderUtils.getOptions(this);
+    return fixImport.call(this, content, this.resourcePath, options);
 };
 
-function fixImport(code, resourcePath) {
+function fixImport(code, resourcePath, options) {
+    const componentName = options.componentName;
     const matched = code.match(IMPORT_REG);
     const matchedLib = code.match(IMPORT_LIB_REG_G);
 
     if (matched) {
         const components = matched[1].replace(/\s/g, '').split(',');
         const importStrings = components
             .map(component => {
-                const componentPath = path.join(cwd, 'src', getComPathName(component));
+                const componentPath = path.join(cwd, 'components', getComPathName(component));
                 const relativePath = path.relative(path.dirname(resourcePath), componentPath);
 
                 return `
 import ${component} from '${relativePath}';
-import '${path.join(relativePath, 'style.js')}';
+import '${path.join(relativePath, 'style')}';
 `;
             })
             .join('\n');
@@ -37,7 +40,7 @@ import '${path.join(relativePath, 'style.js')}';
         matchedLib.forEach(element => {
             const component = element.match(IMPORT_LIB_REG)[1].replace(/\s/g, '');
             const afterLib = element.match(IMPORT_LIB_REG)[2].replace(/\s/g, '');
-            const libPath = path.join(cwd, 'src', afterLib);
+            const libPath = path.join(cwd, 'components', afterLib);
             const newLibPath = path.relative(path.dirname(resourcePath), libPath);
             const newLibStr = `
 import ${component} from'${newLibPath}'`;
@@ -50,7 +53,10 @@ import ${component} from'${newLibPath}'`;
         const adaptorTplPath = path.resolve(__dirname, '../../tpls/adaptor.ejs');
         this.addDependency(adaptorTplPath);
 
-        const scripts = ['/common.js', `/${replaceExt(path.relative(cwd, this.resourcePath), '.js')}`];
+        const scripts = [
+            '/common.js',
+            `/${replaceExt(path.relative(cwd, this.resourcePath), '.js')}`,
+        ];
 
         ejs.renderFile(
             adaptorTplPath,
@@ -61,8 +67,7 @@ import ${component} from'${newLibPath}'`;
                 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);
+                    this.emitFile(path.join(componentName, 'adaptor/index.html'), html);
                 }
             }
         );

scripts/server/loaders/index/index.js

@@ -7,11 +7,12 @@ const tplsPath = path.resolve(__dirname, '../../tpls');
 const headerTplPath = path.resolve(tplsPath, 'partials/header.ejs');
 const indexTplPath = path.resolve(tplsPath, 'index.ejs');
 
-module.exports = function(content) {
+module.exports = function (content) {
     const options = loaderUtils.getOptions(this);
     const links = options.links;
     const lang = options.lang;
     const dir = options.dir;
+    const componentName = options.componentName;
     const resourcePath = this.resourcePath;
 
     this.addDependency(headerTplPath);
@@ -36,10 +37,7 @@ module.exports = function(content) {
             if (err) {
                 logger.error(`Render index.html failed: ${err}`);
             } else {
-                const htmlPath = path.relative(
-                    path.join(process.cwd(), 'docs'),
-                    this.resourcePath.replace(/\.(en-us\.)?md$/, '.html')
-                );
+                const htmlPath = path.join(componentName, 'index.html');
                 this.emitFile(htmlPath, html);
             }
         }

scripts/server/loaders/theme/index.js

@@ -8,7 +8,7 @@ const emitConfigHTML = require('./config');
 const themeTplPath = path.resolve(__dirname, '../../tpls/theme.ejs');
 const cwd = process.cwd();
 
-module.exports = function(content) {
+module.exports = function (content) {
     const options = loaderUtils.getOptions(this);
     const disableAnimation = options.disableAnimation;
     const componentName = options.componentName;
@@ -27,7 +27,7 @@ module.exports = function(content) {
             if (err) {
                 logger.error(`Render theme demo failed: ${err}`);
             } else {
-                const htmlPath = replaceExt(path.relative(path.join(cwd, 'docs'), this.resourcePath), '.html');
+                const htmlPath = path.join(componentName, 'theme/index.html');
                 this.emitFile(htmlPath, html);
             }
         }

scripts/server/middlewares/get-variables.js

@@ -5,13 +5,19 @@ const parse = require('@alifd/sassdoc-parser');
 const generate = require('@alifd/sass-mapper');
 const { logger } = require('../../utils');
 
-module.exports = function(options) {
-    return function(req, res, next) {
-        return co(function*() {
+module.exports = function (options) {
+    return function (req, res, next) {
+        return co(function* () {
             if (req.method === 'GET' && /\/getVariables.json/.test(req.url)) {
                 const { cwd } = options;
                 const { componentName } = req.query;
-                const varPath = path.join(cwd, 'src', componentName, 'scss', 'variable.scss');
+                const varPath = path.join(
+                    cwd,
+                    'components',
+                    componentName,
+                    'scss',
+                    'variable.scss'
+                );
                 if (!(yield fs.exists(varPath))) {
                     throw new Error(`Can not find the scss variable file: ${varPath}`);
                 }
@@ -48,7 +54,10 @@ function* getCssScssMap(varPath, cwd, componentName) {
         }
     });
 
-    const cssSccMap = yield generate(path.join(cwd, 'src', componentName, 'main.scss'), varPrefix);
+    const cssSccMap = yield generate(
+        path.join(cwd, 'components', componentName, 'main.scss'),
+        varPrefix
+    );
     cssSccMap.selectors = cssSccMap.selectors.map(selector => {
         return {
             selector: selector.selector.replace(/"/g, ''),

scripts/server/middlewares/rebuild-scss.js

@@ -3,7 +3,7 @@ const fs = require('fs-extra');
 const co = require('co');
 const postcss = require('postcss');
 const syntax = require('postcss-scss');
-const sass = require('node-sass');
+const sass = require('sass');
 const packageImporter = require('node-sass-package-importer');
 const { logger } = require('../../utils');
 
@@ -17,16 +17,16 @@ const sassRender = options => {
 const scss2AST = scss => postcss().process(scss, { syntax: syntax }).result.root;
 
 const PATTEN = /^import\s+['"](.+)style\.js['"];?/gm;
-module.exports = function(options) {
-    return function(req, res, next) {
-        co(function*() {
+module.exports = function (options) {
+    return function (req, res, next) {
+        co(function* () {
             if (req.method === 'GET' && /\/rebuildScss.json/.test(req.url)) {
                 const { cwd } = options;
                 const { componentName } = req.query;
                 delete req.query.componentName;
 
-                const entryPath = path.join(cwd, 'src', componentName, 'main.scss');
-                const entryStylePath = path.join(cwd, 'src', componentName, 'style.js');
+                const entryPath = path.join(cwd, 'components', componentName, 'main.scss');
+                const entryStylePath = path.join(cwd, 'components', componentName, 'style.js');
                 const entryScss = yield fs.readFile(entryPath, 'utf8');
                 const entryStyleScss = yield fs.readFile(entryStylePath, 'utf8');
 
@@ -49,7 +49,7 @@ module.exports = function(options) {
 
                 const result = yield sassRender({
                     data: newEntryScss,
-                    includePaths: [path.join(cwd, 'src', componentName)],
+                    includePaths: [path.join(cwd, 'components', componentName)],
                     importer: packageImporter({ cwd }),
                 });
 

scripts/server/theme/index.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const cp = require('child_process');
+const parseArgs = require('minimist');
+const { checkComponentName } = require('../../utils');
+
+const scriptPath = path.join(__dirname, 'server.js');
+
+const args = checkComponentName(false, true);
+
+// 获取输入的 mode，css / scss，默认scss
+// const mode = process.env.npm_config_mode || 'scss';
+// args.push(mode);
+
+const argv = parseArgs(args);
+
+argv._.forEach(item => {
+    if (item.indexOf('=') > -1) {
+        const key = item.split('=')[0];
+        const value = item.split('=')[1];
+        argv[key] = value;
+    }
+});
+
+start(restoreArgs(argv));
+
+function start(args) {
+    const worker = cp.fork(scriptPath, args);
+
+    hanleMsg(worker);
+    function hanleMsg(worker) {
+        worker.on('message', data => {
+            if (data === 'RESTART') {
+                worker.kill('SIGINT');
+                start(args);
+            } else if (data.indexOf('CHANGE_LANG') === 0) {
+                worker.kill('SIGINT');
+                const lang = data.split('=')[1];
+                const argv = parseArgs(args);
+                argv.lang = lang;
+                const newArgs = restoreArgs(argv);
+                start(newArgs);
+            } else if (data.indexOf('CHANGE_DIR') === 0) {
+                worker.kill('SIGINT');
+                const dir = data.split('=')[1];
+                const argv = parseArgs(args);
+                argv.dir = dir;
+                const newArgs = restoreArgs(argv);
+                start(newArgs);
+            }
+        });
+    }
+}
+
+function restoreArgs(argv) {
+    return Object.keys(argv).reduce((ret, key) => {
+        let arr;
+        if (key === '_') {
+            arr = argv._;
+        } else {
+            arr = [`--${key}`, argv[key]];
+        }
+
+        return ret.concat(arr);
+    }, []);
+}