@easyv/react-component-builder 0.15.0 → 0.16.2

package/config/webpack.config.build.js

@@ -1,18 +1,22 @@
-const fs = require('fs');
-const path = require('path');
-const commonConfig = require('./webpack.config.common');
-const { appComponents, appBuild, webpackConfigExtend } = require('./paths');
-const webpack = require('webpack');
+const fs = require("fs");
+const path = require("path");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+const commonConfig = require("./webpack.config.common");
+const { appComponents, appBuild, webpackConfigExtend } = require("./paths");
+const webpack = require("webpack");
 
 let webpackConfigExtendFn;
 if (fs.existsSync(webpackConfigExtend)) {
   webpackConfigExtendFn = require(webpackConfigExtend);
 }
 
-process.env.NODE_ENV = 'production';
+process.env.NODE_ENV = "production";
 
-module.exports = ({ filename, module_name, version }, { uniqueId }) => {
-  const entry = path.resolve(appComponents, filename, 'index')
+module.exports = (
+  { filename, module_name, version },
+  { uniqueId, removeConsole }
+) => {
+  const entry = path.resolve(appComponents, filename, "index");
   const cf = {
     ...commonConfig({ isProduction: true, uniqueId, entrys: [entry] }),
     mode: process.env.NODE_ENV,
@@ -21,23 +25,46 @@ module.exports = ({ filename, module_name, version }, { uniqueId }) => {
       path: appBuild,
       filename: `${filename}.${version}.js`,
       library: `${module_name}@${version}`,
-      libraryTarget: 'amd',
+      libraryTarget: "amd",
     },
-    externals: ['react', 'react-dom', 'three', 'lodash', 'd3', '@material-ui/styles'],
+    externals: [
+      "react",
+      "react-dom",
+      "three",
+      "lodash",
+      "d3",
+      "@material-ui/styles",
+    ],
     devtool: false,
     plugins: [
       new webpack.ProvidePlugin({
-        THREE: 'three',
-        React: 'react',
-        ReactDom: 'react-dom',
-      })
-    ]
-  }
+        THREE: "three",
+        React: "react",
+        ReactDom: "react-dom",
+      }),
+    ],
+  };
 
   if (webpackConfigExtendFn) {
     return webpackConfigExtendFn(cf, {
-      production: true
-    })
+      production: true,
+    });
+  }
+
+  if (removeConsole) {
+    cf["optimization"] = {
+      minimizer: [
+        new TerserWebpackPlugin({
+          parallel: true,
+          terserOptions: {
+            compress: {
+              drop_console: true,
+            },
+          },
+        }),
+      ],
+    };
   }
+
   return cf;
 };

package/config/webpack.config.common.js

@@ -16,13 +16,6 @@ module.exports = function ({ isProduction, uniqueId, entrys }) {
             },
           },
         },
-        {
-          test: /\.worker\.(js|ts)$/,
-          use: {
-            loader: "worker-loader",
-          },
-        },
-
         {
           test: /\.(js|mjs|jsx|ts|tsx)$/,
           include: appSrc,
@@ -126,7 +119,7 @@ module.exports = function ({ isProduction, uniqueId, entrys }) {
     },
 
     resolve: {
-      extensions: [".js", ".jsx"],
+      extensions: [".js", ".jsx", ".tsx", ".ts"],
       modules: ["node_modules", cliNodeModules],
     },
   };

package/launcher/build.js

@@ -16,7 +16,7 @@ function canReadAsset(asset) {
 }
 
 module.exports = (name, option = {}) => {
-  const { unique = true } = option;
+  const { unique = true, removeConsole } = option;
   return new Promise((resolve, reject) => {
     // 检查组件是否存在
     // 开始打包
@@ -43,7 +43,9 @@ module.exports = (name, option = {}) => {
     const { base } = checkComponentFiles(sourcePath);
     base.filename = `${base.module_name}`;
     base.module_name = `${base.module_name}${unique ? "." + easyvcid : ""}`;
-    const compiler = webpack(getWebpackConfig(base, { uniqueId: easyvcid }));
+    const compiler = webpack(
+      getWebpackConfig(base, { uniqueId: easyvcid, removeConsole })
+    );
 
     console.log("Creating an optimized production build...");
 

package/launcher/start.js

@@ -148,7 +148,7 @@ function start({ port, modules }) {
 
 function getBuildEntrys(modules = []) {
   // 优先级
-  const suffix = ["jsx", "js"];
+  const suffix = ["jsx", "tsx", "js", "ts"];
 
   return new Promise((resolve, reject) => {
     // 两种获取方式配置方式

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,25 +131,27 @@ 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"))
-                    .default;
+                  config = require(path.resolve(
+                    configPath,
+                    name + '.js'
+                  )).default;
                 }
               } catch (error) {
                 error.message += ` in ${configPath}${name}.json or ${configPath}${name}.js`;
@@ -160,22 +162,24 @@ 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"))
-                    .default;
+                  data = require(path.resolve(
+                    configPath,
+                    name + '.data.js'
+                  )).default;
                 }
               } catch (error) {
                 error.message += ` in ${configPath}${name}.data.json or ${configPath}${name}.data.js`;
@@ -193,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;
@@ -208,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", "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;
@@ -231,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();
@@ -258,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));
@@ -272,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'
             )}`
           );
         }
@@ -290,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)
@@ -327,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,
@@ -363,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) => {
@@ -395,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.15.0",
+  "version": "0.16.2",
   "files": [
     "launcher",
     "templates",
@@ -48,14 +48,14 @@
     "url-loader": "2.3.0",
     "webpack": "4.42.0",
     "webpack-dev-server": "3.10.3",
-    "webpack-manifest-plugin": "2.2.0",
-    "worker-loader": "^3.0.8"
+    "webpack-manifest-plugin": "2.2.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.157",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0"
+    "@types/react-dom": "^16.9.0",
+    "terser-webpack-plugin": "^4.2.3"
   },
   "easyv": {
     "src": "examples",