@easyv/react-component-builder 0.19.3 → 0.19.5-beta.0

package/launcher/generate.js

@@ -1,99 +1,99 @@
-var inquirer = require('inquirer');
-var path = require('path');
-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: '文本',
-};
-let templateValues = [
-  {
-    name: 'React演示',
-    value: 'basic',
-  },
-  {
-    name: 'Three Component',
-    value: 'three-component',
-  },
-];
-
-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 copyPath = path.join(appComponents, moduleName);
-      // 检查重名
-      if (fs.existsSync(copyPath)) {
-        console.log(chalk.red(`组件名称已存在`));
-        process.exit();
-      }
-
-      if (template.includes('custom-')) {
-        generateCustom(name, moduleName, template.substring(7));
-      } 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));
-};
+var inquirer = require('inquirer');
+var path = require('path');
+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: '文本',
+};
+let templateValues = [
+  {
+    name: 'React演示',
+    value: 'basic',
+  },
+  {
+    name: 'Three Component',
+    value: 'three-component',
+  },
+];
+
+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 copyPath = path.join(appComponents, moduleName);
+      // 检查重名
+      if (fs.existsSync(copyPath)) {
+        console.log(chalk.red(`组件名称已存在`));
+        process.exit();
+      }
+
+      if (template.includes('custom-')) {
+        generateCustom(name, moduleName, template.substring(7));
+      } 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));
+};

package/launcher/start.js

@@ -1,238 +1,238 @@
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const getWebpackConfig = require('../config/webpack.config');
-const chalk = require('chalk');
-const glob = require('glob');
-const { appComponents, appPackage } = require('../config/paths');
-const { checkComponentFiles } = require('../utils');
-const autoAssignPort = require('../utils/auto-assign-port');
-const path = require('path');
-const openBrowser = require('../utils/openBrowser');
-
-const isInteractive = process.stdout.isTTY;
-const DEFAULT_PORT = 3005;
-const HOST = process.env.HOST || '0.0.0.0';
-let isFirstCompile = true;
-
-function clearConsole() {
-  process.stdout.write(
-    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H',
-  );
-}
-
-function printInstructions(appName, urls) {
-  console.log();
-  console.log(`You can now view ${chalk.bold(appName)} in the browser.`);
-  console.log();
-
-  if (urls.lanUrlForTerminal) {
-    console.log(
-      `  ${chalk.bold('Local:')}            ${urls.localUrlForTerminal}`,
-    );
-    // console.log(
-    //   `  ${chalk.bold('On Your Network:')}  ${urls.lanUrlForTerminal}`
-    // );
-  } else {
-    console.log(`  ${urls.localUrlForTerminal}`);
-  }
-}
-
-function createCompiler({ appName, config, urls }) {
-  let compiler;
-  try {
-    compiler = webpack(config);
-  } catch (err) {
-    console.log(chalk.red('Failed to compile.'));
-    console.log();
-    console.log(err.message || err);
-    console.log();
-    process.exit(1);
-  }
-
-  // "invalid" event fires when you have changed a file, and webpack is
-  // recompiling a bundle. WebpackDevServer takes care to pause serving the
-  // bundle, so if you refresh, it'll wait instead of serving the old one.
-  // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
-  compiler.hooks.invalid.tap('invalid', () => {
-    if (isInteractive) {
-      clearConsole();
-    }
-    console.log('Compiling...');
-  });
-
-  // "done" event fires when webpack has finished recompiling the bundle.
-  // Whether or not you have warnings or errors, you will get this event.
-  compiler.hooks.done.tap('done', async (stats) => {
-    if (isInteractive) {
-      clearConsole();
-    }
-
-    const statsData = stats.toJson({
-      all: false,
-      warnings: true,
-      errors: true,
-    });
-
-    const messages = statsData;
-    const isSuccessful = !messages.errors.length && !messages.warnings.length;
-    if (isSuccessful) {
-      console.log(chalk.green('Compiled successfully!'));
-    }
-    if (isSuccessful && (isInteractive || isFirstCompile)) {
-      printInstructions(appName, urls);
-    }
-    isFirstCompile = false;
-
-    if (messages.errors.length) {
-      if (messages.errors.length > 1) {
-        messages.errors.length = 1;
-      }
-      console.log(chalk.red('Failed to compile.\n'));
-      console.log(messages.errors.join('\n\n'));
-      return;
-    }
-
-    if (messages.warnings.length) {
-      console.log(chalk.yellow('Compiled with warnings.\n'));
-      console.log(messages.warnings.join('\n\n'));
-
-      console.log(
-        '\nSearch for the ' +
-          chalk.underline(chalk.yellow('keywords')) +
-          ' to learn more about each warning.',
-      );
-      console.log(
-        'To ignore, add ' +
-          chalk.cyan('// eslint-disable-next-line') +
-          ' to the line before.\n',
-      );
-    }
-  });
-
-  return compiler;
-}
-
-function start({ port, modules }) {
-  const url = `http://localhost:${port}`;
-
-  const config = getWebpackConfig({ port, modules });
-  const compiler = createCompiler({
-    appName: appPackage.name,
-    config,
-    urls: {
-      localUrlForTerminal: url,
-    },
-  });
-
-  const server = new WebpackDevServer(compiler, config.devServer);
-
-  server.listen(port, HOST, (err) => {
-    if (err) {
-      return console.log(err);
-    }
-    if (isInteractive) {
-      clearConsole();
-    }
-
-    console.log(chalk.cyan('Starting the development server...\n'));
-    openBrowser(url);
-  });
-
-  ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-    process.on(sig, function () {
-      server.close();
-      process.exit();
-    });
-  });
-}
-
-function getBuildEntrys(modules = []) {
-  // 优先级
-  const suffix = ['jsx', 'tsx', 'js', 'ts'];
-
-  return new Promise((resolve) => {
-    // 两种获取方式配置方式
-    // new configs: ['config/main.(json|js)', 'config/main.data.(json|js)']
-    // old configs: ['config/base.js', 'config/config.js', 'mock/data.js']
-
-    glob(
-      `*/index.+(${suffix.join('|')})`,
-      {
-        cwd: appComponents,
-      },
-      function (err, matches) {
-        if (err) {
-          console.error(err);
-          process.exit();
-        }
-
-        if (!matches.length) process.exit();
-
-        const dir = matches.reduce((acc, path) => {
-          const name = path.slice(0, path.indexOf('/'));
-          if (modules.length && modules.indexOf(name) === -1) {
-            // 排除不打包的 如果目录是空的则忽略
-            return acc;
-          }
-          if (!acc[name]) {
-            acc[name] = [path];
-          } else {
-            acc[name].push(path);
-          }
-
-          return acc;
-        }, {});
-
-        const moduleNames = new Set();
-
-        // {a: [a.js, a.jsx, ...], ...}
-        const components = Object.keys(dir).map((dirname) => {
-          let indexPath;
-          suffix.every((ext) => {
-            const i = dir[dirname].findIndex((path) =>
-              path.endsWith('.' + ext),
-            );
-            return i > -1
-              ? ((indexPath = path.join(appComponents, dir[dirname][i])), false)
-              : true;
-          });
-
-          const { base } = checkComponentFiles(
-            path.join(appComponents, dirname),
-          );
-
-          // 组件名称重复检查
-          let name = base.module_name;
-          if (moduleNames.has(moduleNames)) {
-            console.error(chalk.red`component name ${name} is duplicate.`);
-            process.exit();
-          }
-          moduleNames.add(name);
-
-          return {
-            dirname,
-            name,
-            base,
-            path: indexPath,
-          };
-        });
-
-        if (components.length) {
-          resolve(components);
-        } else {
-          process.exit();
-        }
-      },
-    );
-  });
-}
-
-module.exports = (modules) => {
-  getBuildEntrys(modules).then((modules) => {
-    autoAssignPort(DEFAULT_PORT, (port) => {
-      start({ port, modules });
-    });
-  });
-};
-
-module.exports.getBuildEntrys = getBuildEntrys;
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const getWebpackConfig = require('../config/webpack.config');
+const chalk = require('chalk');
+const glob = require('glob');
+const { appComponents, appPackage } = require('../config/paths');
+const { checkComponentFiles } = require('../utils');
+const autoAssignPort = require('../utils/auto-assign-port');
+const path = require('path');
+const openBrowser = require('../utils/openBrowser');
+
+const isInteractive = process.stdout.isTTY;
+const DEFAULT_PORT = 3005;
+const HOST = process.env.HOST || '0.0.0.0';
+let isFirstCompile = true;
+
+function clearConsole() {
+  process.stdout.write(
+    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H',
+  );
+}
+
+function printInstructions(appName, urls) {
+  console.log();
+  console.log(`You can now view ${chalk.bold(appName)} in the browser.`);
+  console.log();
+
+  if (urls.lanUrlForTerminal) {
+    console.log(
+      `  ${chalk.bold('Local:')}            ${urls.localUrlForTerminal}`,
+    );
+    // console.log(
+    //   `  ${chalk.bold('On Your Network:')}  ${urls.lanUrlForTerminal}`
+    // );
+  } else {
+    console.log(`  ${urls.localUrlForTerminal}`);
+  }
+}
+
+function createCompiler({ appName, config, urls }) {
+  let compiler;
+  try {
+    compiler = webpack(config);
+  } catch (err) {
+    console.log(chalk.red('Failed to compile.'));
+    console.log();
+    console.log(err.message || err);
+    console.log();
+    process.exit(1);
+  }
+
+  // "invalid" event fires when you have changed a file, and webpack is
+  // recompiling a bundle. WebpackDevServer takes care to pause serving the
+  // bundle, so if you refresh, it'll wait instead of serving the old one.
+  // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
+  compiler.hooks.invalid.tap('invalid', () => {
+    if (isInteractive) {
+      clearConsole();
+    }
+    console.log('Compiling...');
+  });
+
+  // "done" event fires when webpack has finished recompiling the bundle.
+  // Whether or not you have warnings or errors, you will get this event.
+  compiler.hooks.done.tap('done', async (stats) => {
+    if (isInteractive) {
+      clearConsole();
+    }
+
+    const statsData = stats.toJson({
+      all: false,
+      warnings: true,
+      errors: true,
+    });
+
+    const messages = statsData;
+    const isSuccessful = !messages.errors.length && !messages.warnings.length;
+    if (isSuccessful) {
+      console.log(chalk.green('Compiled successfully!'));
+    }
+    if (isSuccessful && (isInteractive || isFirstCompile)) {
+      printInstructions(appName, urls);
+    }
+    isFirstCompile = false;
+
+    if (messages.errors.length) {
+      if (messages.errors.length > 1) {
+        messages.errors.length = 1;
+      }
+      console.log(chalk.red('Failed to compile.\n'));
+      console.log(messages.errors.join('\n\n'));
+      return;
+    }
+
+    if (messages.warnings.length) {
+      console.log(chalk.yellow('Compiled with warnings.\n'));
+      console.log(messages.warnings.join('\n\n'));
+
+      console.log(
+        '\nSearch for the ' +
+          chalk.underline(chalk.yellow('keywords')) +
+          ' to learn more about each warning.',
+      );
+      console.log(
+        'To ignore, add ' +
+          chalk.cyan('// eslint-disable-next-line') +
+          ' to the line before.\n',
+      );
+    }
+  });
+
+  return compiler;
+}
+
+function start({ port, modules }) {
+  const url = `http://localhost:${port}`;
+
+  const config = getWebpackConfig({ port, modules });
+  const compiler = createCompiler({
+    appName: appPackage.name,
+    config,
+    urls: {
+      localUrlForTerminal: url,
+    },
+  });
+
+  const server = new WebpackDevServer(compiler, config.devServer);
+
+  server.listen(port, HOST, (err) => {
+    if (err) {
+      return console.log(err);
+    }
+    if (isInteractive) {
+      clearConsole();
+    }
+
+    console.log(chalk.cyan('Starting the development server...\n'));
+    openBrowser(url);
+  });
+
+  ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+    process.on(sig, function () {
+      server.close();
+      process.exit();
+    });
+  });
+}
+
+function getBuildEntrys(modules = []) {
+  // 优先级
+  const suffix = ['jsx', 'tsx', 'js', 'ts'];
+
+  return new Promise((resolve) => {
+    // 两种获取方式配置方式
+    // new configs: ['config/main.(json|js)', 'config/main.data.(json|js)']
+    // old configs: ['config/base.js', 'config/config.js', 'mock/data.js']
+
+    glob(
+      `*/index.+(${suffix.join('|')})`,
+      {
+        cwd: appComponents,
+      },
+      function (err, matches) {
+        if (err) {
+          console.error(err);
+          process.exit();
+        }
+
+        if (!matches.length) process.exit();
+
+        const dir = matches.reduce((acc, path) => {
+          const name = path.slice(0, path.indexOf('/'));
+          if (modules.length && modules.indexOf(name) === -1) {
+            // 排除不打包的 如果目录是空的则忽略
+            return acc;
+          }
+          if (!acc[name]) {
+            acc[name] = [path];
+          } else {
+            acc[name].push(path);
+          }
+
+          return acc;
+        }, {});
+
+        const moduleNames = new Set();
+
+        // {a: [a.js, a.jsx, ...], ...}
+        const components = Object.keys(dir).map((dirname) => {
+          let indexPath;
+          suffix.every((ext) => {
+            const i = dir[dirname].findIndex((path) =>
+              path.endsWith('.' + ext),
+            );
+            return i > -1
+              ? ((indexPath = path.join(appComponents, dir[dirname][i])), false)
+              : true;
+          });
+
+          const { base } = checkComponentFiles(
+            path.join(appComponents, dirname),
+          );
+
+          // 组件名称重复检查
+          let name = base.module_name;
+          if (moduleNames.has(moduleNames)) {
+            console.error(chalk.red`component name ${name} is duplicate.`);
+            process.exit();
+          }
+          moduleNames.add(name);
+
+          return {
+            dirname,
+            name,
+            base,
+            path: indexPath,
+          };
+        });
+
+        if (components.length) {
+          resolve(components);
+        } else {
+          process.exit();
+        }
+      },
+    );
+  });
+}
+
+module.exports = (modules) => {
+  getBuildEntrys(modules).then((modules) => {
+    autoAssignPort(DEFAULT_PORT, (port) => {
+      start({ port, modules });
+    });
+  });
+};
+
+module.exports.getBuildEntrys = getBuildEntrys;