@easyv/react-component-builder 0.16.3 → 0.17.1

package/config/paths.js

@@ -4,16 +4,21 @@ const path = require('path');
 const __cwd = process.cwd();
 const __root = path.resolve(__dirname, '..');
 const appPackage = require(path.join(__cwd, 'package.json'));
+const userHome = require('os').homedir();
 
 module.exports = {
-    appPackage,
-    appBuild: path.resolve(__cwd, 'build'),
-    appSrc: path.resolve(__cwd, appPackage.easyv.src || 'src'),
-    appComponents: path.resolve(__cwd, (appPackage.easyv || {}).components || 'src/components'),
-    webpackConfigExtend: path.resolve(__cwd, 'webpack.extend.js'),
-    public: path.resolve(__root, 'public'),
-    ownLoaders: path.resolve(__root, 'loaders'),
-    templates: path.resolve(__root, 'templates'),
-    cliNodeModules: path.join(__root, 'node_modules'),
-    __root
-};
+  appPackage,
+  appBuild: path.resolve(__cwd, 'build'),
+  appSrc: path.resolve(__cwd, appPackage.easyv.src || 'src'),
+  appComponents: path.resolve(
+    __cwd,
+    (appPackage.easyv || {}).components || 'src/components',
+  ),
+  webpackConfigExtend: path.resolve(__cwd, 'webpack.extend.js'),
+  public: path.resolve(__root, 'public'),
+  ownLoaders: path.resolve(__root, 'loaders'),
+  templates: path.resolve(__root, 'templates'),
+  cliNodeModules: path.join(__root, 'node_modules'),
+  customTemplatesRoot: path.join(userHome, 'easyv_custom_templates'),
+  __root,
+};

package/launcher/generate.js

@@ -1,78 +1,99 @@
 var inquirer = require('inquirer');
 var path = require('path');
-const fs = require('fs')
+const fs = require('fs');
 const fse = require('fs-extra');
 const chalk = require('chalk');
 const { appComponents, appPackage, templates } = require('../config/paths');
 
 const defaultValues = {
-    module_name: 'text',
-    name: '文本',
-}
-const templateValues = [
-    {
-        name: 'React演示',
-        value: 'basic'
-    }, {
-        name: 'Three Component',
-        value: 'three-component'
-    }
-]
-module.exports = (cb) => {
-    inquirer
-        .prompt([
-            {
-                type: 'input',
-                name: 'moduleName',
-                message: "你的组件名称是什么?",
-                validate: function (value) {
-                    return /^[a-zA-Z][\w-]+$/.test(value) ? true : '名称只能是 英文开头 包含 英文、数字、_- 的字符串'
-                },
-                default: defaultValues.module_name
-            },
-            {
-                type: 'input',
-                name: 'name',
-                message: "中文别名是什么?",
-                default: defaultValues.name
-            },
-            { type: 'list', name: 'template', message: '要添加哪种模版?', choices: templateValues }
-        ])
-        .then(answers => {
-            let { moduleName, name, template } = answers;
-            const base = {
-                name,
-                module_name: moduleName,
-                version: '1.0.0',
-                show: 1,
-            }
+  module_name: 'text',
+  name: '文本',
+};
+let templateValues = [
+  {
+    name: 'React演示',
+    value: 'basic',
+  },
+  {
+    name: 'Three Component',
+    value: 'three-component',
+  },
+];
 
-            const copyPath = path.join(appComponents, moduleName)
-            // 检查重名
-            if (fs.existsSync(copyPath)) {
-                console.log(chalk.red(`组件名称已存在`))
-                process.exit()
-            }
+module.exports = (cb, addCustom, generateCustom, add) => {
+  if (!add) {
+    const custom = addCustom();
+    templateValues = [...templateValues, ...custom];
+  }
+
+  inquirer
+    .prompt([
+      {
+        type: 'input',
+        name: 'moduleName',
+        message: '你的组件名称是什么?',
+        validate: function (value) {
+          return /^[a-zA-Z][\w-]+$/.test(value)
+            ? true
+            : '名称只能是 英文开头 包含 英文、数字、_- 的字符串';
+        },
+        default: defaultValues.module_name,
+      },
+      {
+        type: 'input',
+        name: 'name',
+        message: '中文别名是什么?',
+        default: defaultValues.name,
+      },
+      {
+        type: 'list',
+        name: 'template',
+        message: '要添加哪种模版?',
+        choices: templateValues,
+      },
+    ])
+    .then((answers) => {
+      let { moduleName, name, template } = answers;
+      const base = {
+        name: !add ? name : '##name##',
+        module_name: !add ? moduleName : '##module_name##',
+        version: '1.0.0',
+        show: 1,
+      };
 
-            // 重写配置
-            const templatePath = path.join(templates, template);
-            const configPath = 'config/main.json';
+      const copyPath = path.join(appComponents, moduleName);
+      // 检查重名
+      if (fs.existsSync(copyPath)) {
+        console.log(chalk.red(`组件名称已存在`));
+        process.exit();
+      }
 
-            fse.copySync(templatePath, copyPath, {
-                filter: (src, dest) => {
-                    if (src === path.join(templatePath, configPath)) {
-                        const config = require(src)
-                        config.base = base;
-                        fs.writeFileSync(path.join(copyPath, configPath), JSON.stringify(config, null, 2))
-                        return 0;
-                    }
-                    return 1;
-                },
-            });
+      if (template.includes('custom-')) {
+        generateCustom(name, moduleName, template.split('custom-')[1]);
+      } else {
+        // 重写配置
+        const templatePath = path.join(templates, template);
+        const configPath = 'config/main.json';
+
+        fse.copySync(templatePath, copyPath, {
+          filter: (src, dest) => {
+            if (src === path.join(templatePath, configPath)) {
+              const config = require(src);
+              config.base = base;
+              fs.writeFileSync(
+                path.join(copyPath, configPath),
+                JSON.stringify(config, null, 2),
+              );
+              return 0;
+            }
+            return 1;
+          },
+        });
+      }
 
-            console.log()
-            console.log(chalk.green(`模版添加成功`))
-            cb && cb()
-        })
-        .catch((error) => cb && cb(error));
-}
+      console.log();
+      console.log(chalk.green(`模版添加成功`));
+      cb && cb();
+    })
+    .catch((error) => cb && cb(error));
+};

package/loaders/react-entry-loader.js

@@ -1,49 +1,49 @@
 /**
  * 给导出的组件添加static方法获取配置文件
  */
-const path = require('path');
-const glob = require('glob');
-const fs = require('fs');
+const path = require("path");
+const glob = require("glob");
+const fs = require("fs");
 
-const parser = require('@babel/parser').parse;
-const traverse = require('@babel/traverse').default;
-const generate = require('@babel/generator').default;
-const t = require('@babel/types');
+const parser = require("@babel/parser").parse;
+const traverse = require("@babel/traverse").default;
+const generate = require("@babel/generator").default;
+const t = require("@babel/types");
 
 function getOldDimension(width, height, hasUndeline) {
   if (hasUndeline) {
     return {
-      _name: 'dimension', // 定义位置宽高
-      _displayName: '位置尺寸',
+      _name: "dimension", // 定义位置宽高
+      _displayName: "位置尺寸",
       _value: [
         {
-          _name: 'chartPosition',
-          _displayName: '图表位置',
+          _name: "chartPosition",
+          _displayName: "图表位置",
           _value: [
             {
-              _name: 'left',
-              _displayName: 'X轴坐标',
+              _name: "left",
+              _displayName: "X轴坐标",
               _value: 100, // 开发环境默认显示位置
             },
             {
-              _name: 'top',
-              _displayName: 'Y轴坐标',
+              _name: "top",
+              _displayName: "Y轴坐标",
               _value: 100, // 开发环境默认显示位置
             },
           ],
         },
         {
-          _name: 'chartDimension',
-          _displayName: '图表尺寸',
+          _name: "chartDimension",
+          _displayName: "图表尺寸",
           _value: [
             {
-              _name: 'width',
-              _displayName: '宽度',
+              _name: "width",
+              _displayName: "宽度",
               _value: width, // 组件默认宽
             },
             {
-              _name: 'height',
-              _displayName: '高度',
+              _name: "height",
+              _displayName: "高度",
               _value: height, // 组件默认高
             },
           ],
@@ -52,37 +52,37 @@ function getOldDimension(width, height, hasUndeline) {
     };
   }
   return {
-    name: 'dimension', // 定义位置宽高
-    displayName: '位置尺寸',
+    name: "dimension", // 定义位置宽高
+    displayName: "位置尺寸",
     value: [
       {
-        name: 'chartPosition',
-        displayName: '图表位置',
+        name: "chartPosition",
+        displayName: "图表位置",
         value: [
           {
-            name: 'left',
-            displayName: 'X轴坐标',
+            name: "left",
+            displayName: "X轴坐标",
             value: 100, // 开发环境默认显示位置
           },
           {
-            name: 'top',
-            displayName: 'Y轴坐标',
+            name: "top",
+            displayName: "Y轴坐标",
             value: 100, // 开发环境默认显示位置
           },
         ],
       },
       {
-        name: 'chartDimension',
-        displayName: '图表尺寸',
+        name: "chartDimension",
+        displayName: "图表尺寸",
         value: [
           {
-            name: 'width',
-            displayName: '宽度',
+            name: "width",
+            displayName: "宽度",
             value: width, // 组件默认宽
           },
           {
-            name: 'height',
-            displayName: '高度',
+            name: "height",
+            displayName: "高度",
             value: height, // 组件默认高
           },
         ],
@@ -99,7 +99,7 @@ module.exports = function (content, map, meta) {
   let file = content;
 
   // 兼容旧的写法
-  if (~file.indexOf('getDefaultConfig')) {
+  if (~file.indexOf("getDefaultConfig")) {
     return callback(null, file);
   }
   const configPath = `${modulePath}/config`;
@@ -131,26 +131,26 @@ module.exports = function (content, map, meta) {
         const names = new Set();
         if (
           matches
-            .map((filename) => filename.split('.')[0])
+            .map((filename) => filename.split(".")[0])
             .some((name, i) => {
               let config;
               try {
                 let jsonFile = fs.existsSync(
-                  path.join(configPath, name + '.json')
+                  path.join(configPath, name + ".json")
                 );
 
                 if (jsonFile) {
                   config = JSON.parse(
-                    fs.readFileSync(path.resolve(configPath, name + '.json')),
-                    { encoding: 'utf8' }
+                    fs.readFileSync(path.resolve(configPath, name + ".json")),
+                    { encoding: "utf8" }
                   );
                 } else {
                   delete require.cache[
-                    require.resolve(path.resolve(configPath, name + '.js'))
+                    require.resolve(path.resolve(configPath, name + ".js"))
                   ];
                   config = require(path.resolve(
                     configPath,
-                    name + '.js'
+                    name + ".js"
                   )).default;
                 }
               } catch (error) {
@@ -162,23 +162,23 @@ module.exports = function (content, map, meta) {
               let data;
               try {
                 let dataJsonFile = fs.existsSync(
-                  path.join(configPath, name + '.data.json')
+                  path.join(configPath, name + ".data.json")
                 );
 
                 if (dataJsonFile) {
                   data = JSON.parse(
                     fs.readFileSync(
-                      path.resolve(configPath, name + '.data.json'),
-                      { encoding: 'utf8' }
+                      path.resolve(configPath, name + ".data.json"),
+                      { encoding: "utf8" }
                     )
                   );
                 } else {
                   delete require.cache[
-                    require.resolve(path.resolve(configPath, name + '.data.js'))
+                    require.resolve(path.resolve(configPath, name + ".data.js"))
                   ];
                   data = require(path.resolve(
                     configPath,
-                    name + '.data.js'
+                    name + ".data.js"
                   )).default;
                 }
               } catch (error) {
@@ -197,7 +197,7 @@ module.exports = function (content, map, meta) {
               } else {
                 names.add(config.base.module_name);
               }
-              if (name === 'main') {
+              if (name === "main") {
                 main.config = config;
                 main.data = data;
                 return;
@@ -212,17 +212,17 @@ module.exports = function (content, map, meta) {
           return;
 
         // 解析导出变量名
-        let vname = '',
+        let vname = "",
           exportName = `__EASYV_COMPONENT__`;
         const ast = parser(content, {
-          sourceType: 'module',
-          plugins: ['jsx', 'typescript', 'classProperties'],
+          sourceType: "module",
+          plugins: ["jsx", "typescript", "classProperties"],
         });
         traverse(ast, {
           ExportDefaultDeclaration(path) {
             const child = path.node.declaration;
 
-            if (child.type === 'ClassDeclaration') {
+            if (child.type === "ClassDeclaration") {
               // e.g: export default class a {}
               if (child.id) {
                 vname = child.id.name;
@@ -235,26 +235,26 @@ module.exports = function (content, map, meta) {
               // e.g: export default () => {}
             } else if (
               !!~[
-                'CallExpression',
-                'ArrowFunctionExpression',
-                'FunctionExpression',
+                "CallExpression",
+                "ArrowFunctionExpression",
+                "FunctionExpression",
               ].indexOf(child.type)
             ) {
               const exportIdentifier = t.identifier(exportName);
               path.insertBefore(
-                t.variableDeclaration('const', [
+                t.variableDeclaration("const", [
                   t.variableDeclarator(exportIdentifier, child),
                 ])
               );
               path.node.declaration = exportIdentifier;
               vname = exportName;
               // e.g: export default function(){}
-            } else if (!!~['FunctionDeclaration'].indexOf(child.type)) {
+            } else if (!!~["FunctionDeclaration"].indexOf(child.type)) {
               const exportIdentifier = t.identifier(exportName);
               child.id = exportIdentifier;
               vname = exportName;
               // e.g: export default a;
-            } else if (child.type === 'Identifier') {
+            } else if (child.type === "Identifier") {
               vname = child.name;
             }
             path.stop();
@@ -262,13 +262,13 @@ module.exports = function (content, map, meta) {
           ExportNamedDeclaration(path) {
             const child = path.node.declaration;
             // e.g: export const a = {};
-            if (child.type === 'VariableDeclaration') {
+            if (child.type === "VariableDeclaration") {
               const exportIdentifier = child.declarations[0].id;
               vname = exportIdentifier.name;
               path.replaceWith(child);
               path.insertAfter(t.exportDefaultDeclaration(exportIdentifier));
               // e.g: export function a(){};
-            } else if (child.type === 'FunctionDeclaration') {
+            } else if (child.type === "FunctionDeclaration") {
               const exportIdentifier = child.id;
               path.replaceWith(child);
               path.insertAfter(t.exportDefaultDeclaration(exportIdentifier));
@@ -276,12 +276,12 @@ module.exports = function (content, map, meta) {
             path.stop();
           },
         });
-        file = generate(ast, { quotes: 'single', retainLines: false }).code;
+        file = generate(ast, { quotes: "single", retainLines: false }).code;
         if (!vname) {
           return callback(
             `cannot found default export object in ${path.join(
               modulePath,
-              'index'
+              "index"
             )}`
           );
         }
@@ -294,20 +294,20 @@ module.exports = function (content, map, meta) {
         // 添加width/height属性兼容老版本
         let updateChart = false;
         const hasUnderline = mainConfig.configuration[0]
-          ? '_value' in mainConfig.configuration[0]
+          ? "_value" in mainConfig.configuration[0]
           : false;
         const keys = {
-          name: hasUnderline ? '_name' : 'name',
-          displayName: hasUnderline ? '_displayName' : 'displayName',
-          value: hasUnderline ? '_value' : 'value',
-          type: hasUnderline ? '_type' : 'type',
-          children: hasUnderline ? '_children' : 'children',
+          name: hasUnderline ? "_name" : "name",
+          displayName: hasUnderline ? "_displayName" : "displayName",
+          value: hasUnderline ? "_value" : "value",
+          type: hasUnderline ? "_type" : "type",
+          children: hasUnderline ? "_children" : "children",
         };
         mainConfig.configuration = mainConfig.configuration.map((item) => {
-          if (item[keys.name] === 'chart') {
+          if (item[keys.name] === "chart") {
             let values = item._value || item.value;
             values = values.map((item) => {
-              if (item[keys.name] === 'dimension') {
+              if (item[keys.name] === "dimension") {
                 updateChart = true;
                 return item;
                 // return getOldDimension(mainConfig.width, mainConfig.height, hasUnderline)
@@ -331,8 +331,8 @@ module.exports = function (content, map, meta) {
         });
         if (!updateChart) {
           const chart = {
-            [keys.name]: 'chart',
-            [keys.displayName]: '组件',
+            [keys.name]: "chart",
+            [keys.displayName]: "组件",
             [keys.value]: [
               getOldDimension(
                 mainConfig.width,
@@ -367,23 +367,23 @@ module.exports = function (content, map, meta) {
             const presetChidlren = mainConfig.presetChildren || [];
 
             const children = {
-              [keys.name]: 'children',
-              [keys.displayName]: '子组件',
+              [keys.name]: "children",
+              [keys.displayName]: "子组件",
               [keys.value]: [
                 {
-                  [keys.name]: 'component',
-                  [keys.displayName]: '管理',
+                  [keys.name]: "component",
+                  [keys.displayName]: "管理",
                   [keys.value]: [
                     {
-                      [keys.name]: 'list',
-                      [keys.displayName]: '',
+                      [keys.name]: "list",
+                      [keys.displayName]: "",
                       [keys.value]: presetChidlren
                         .filter((id) => defineMap[id])
                         .map((id) => {
                           const { base } = defineMap[id];
                           return { label: base.name, name: base.module_name };
                         }),
-                      [keys.type]: 'children',
+                      [keys.type]: "children",
                       [keys.children]: defineChildren
                         .filter((id) => defineMap[id])
                         .map((id) => {
@@ -399,14 +399,14 @@ module.exports = function (content, map, meta) {
           }
           // 替换modulename
           if (query.uniqueId) {
-            mainConfig.base.module_name += '.' + query.uniqueId;
+            mainConfig.base.module_name += "." + query.uniqueId;
           }
           // 删除平台无法识别的参数
           delete mainConfig.children;
           delete mainConfig.presetChildren;
         }
 
-        file += '\n';
+        file += "\n";
         file += `${vname}.getDefaultConfig=function(){return ${JSON.stringify(
           mainConfig
         )}};`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-component-builder",
-  "version": "0.16.3",
+  "version": "0.17.1",
   "files": [
     "launcher",
     "templates",
@@ -18,14 +18,14 @@
     "@babel/core": "7.9.0",
     "@babel/register": "^7.10.4",
     "@easyv/react-gui": "^1.6.6",
-    "@easyv/simulator": "^0.3.1",
+    "@easyv/simulator": "^0.4.0",
     "@svgr/webpack": "4.3.3",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
     "antd": "^4.0.3",
     "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
-    "babel-preset-react-app": "^10.0.1",
+    "babel-preset-react-app": "^9.1.2",
     "classnames": "^2.2.6",
     "css-loader": "3.4.2",
     "d3": "^5.16.0",