@plugin-light/cli 1.0.2

package/script/generate-component-config/6.docs-url.js

@@ -0,0 +1,67 @@
+const fs = require('fs');
+const path = require('path');
+
+const { readFileSync, writeFileSync, hyphenate } = require('t-comm');
+
+const {
+  DEMO_DIR_MAP,
+} = require('../utils/utils');
+
+
+function updateDocsData(config, targetDir) {
+  const compList = Object.values(config);
+  compList.forEach((item) => {
+    const { list } = item;
+    list.forEach((comp) => {
+      updateDocsUrl({ targetDir, comp });
+    });
+  });
+}
+
+
+function updateDocsUrl({ targetDir, comp }) {
+  const demoUrl = getDemoUrl(comp);
+  const { name } = comp;
+  const hyphenatedName = hyphenate(name);
+
+  // 这里组件都是放在 `targetDir/packages/press-xxx` 中
+  const compDir = path.resolve(targetDir, 'packages', `press-${hyphenatedName}`);
+
+  const readme = path.resolve(compDir, 'README.md');
+  const readmeEn = path.resolve(compDir, 'README.en-US.md');
+
+  realUpdateDocsUrl({
+    readme,
+    demoUrl,
+  });
+  realUpdateDocsUrl({
+    readme: readmeEn,
+    demoUrl,
+  });
+}
+
+
+function realUpdateDocsUrl({ readme, demoUrl }) {
+  if (fs.existsSync(readme)) {
+    const content = readFileSync(readme);
+    const newContent = content.replace(/(url\s*:\s*)pages\/[\w-]+\/[\w/\-?=]+\n/, `$1${demoUrl}\n`);
+    writeFileSync(readme, newContent);
+  }
+}
+
+
+function getDemoUrl(compConfig) {
+  const { name, demoRedirect, subPackage = DEMO_DIR_MAP.PRESS } = compConfig;
+  const hyphenatedName = hyphenate(name);
+  if (!demoRedirect) {
+    return `pages/${subPackage}/${hyphenatedName}/${hyphenatedName}`;
+  }
+  const hyphenatedRedirect = hyphenate(demoRedirect);
+
+  return `pages/${subPackage}/${hyphenatedRedirect}/${hyphenatedRedirect}?comp=${hyphenatedName}`;
+}
+
+
+module.exports = {
+  updateDocsData,
+};

package/script/generate-component-config/core.js

@@ -0,0 +1,43 @@
+
+const { writeDocSidebar } = require('./1.docs-sidebar');
+const { writeDemoIndexConfig } = require('./2.demo-index');
+const { writeDemoPagesJson } = require('./3.demo-pages');
+
+const { writeDemoTitleI18n } = require('./4.demo-title');
+const { writeBuildConfig } = require('./5.build-config');
+const { updateDocsData } = require('./6.docs-url');
+const {
+  writeSrcIndexJs,
+} = require('./generate-entry');
+
+const { PATH_MAP } = require('./helper');
+
+
+function generateComponentConfig({
+  componentConfig,
+  scssPath,
+  globMatch,
+  targetDir,
+  needAct = false,
+}) {
+  writeDocSidebar(componentConfig);
+  writeDemoIndexConfig(componentConfig);
+  writeDemoPagesJson(componentConfig, needAct);
+
+  writeDemoTitleI18n(componentConfig);
+  writeBuildConfig(componentConfig);
+  updateDocsData(componentConfig, targetDir);
+
+  writeSrcIndexJs({
+    componentConfig,
+    filePath: PATH_MAP.SRC_INDEX,
+    allComponent: true,
+    scssPath,
+    globMatch,
+    targetDir,
+  });
+}
+
+module.exports = {
+  generateComponentConfig,
+};

package/script/generate-component-config/generate-entry.js

@@ -0,0 +1,215 @@
+const fs = require('fs');
+const path = require('path');
+
+const { replaceAllPolyfill, hyphenate } = require('t-comm');
+// eslint-disable-next-line import/order
+const glob = require('glob');
+
+replaceAllPolyfill();
+const PACKAGE_ENTRY_JS = './src/packages/index.js';
+
+const MAIN_TEMPLATE = `/* eslint-disable import/order */
+/* Automatically generated by 'press-ui/script/generate-component-config/generate-entry.js' */
+{{install}}
+
+const components = {
+  {{components}}
+};
+
+const install = function (Vue) {
+  Object.values(components).forEach((component) => {
+    Vue.component(component.name, component);
+  });
+};
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  install,
+  ...components,
+};
+export * from './packages/common/public/public';
+`;
+const CSS_BASE = `/* 基础样式 */
+@import './packages/common/style/press/index.scss';
+@import './packages/common/style/press/var.scss';
+
+/* 组件样式 */
+`;
+
+
+function getAllPressComponents(globMatch) {
+  const list = glob.sync(globMatch);
+  const preNames = {};
+
+  const compList = list.map((item) => {
+    const list = item.split('/');
+    const file = list[list.length - 1];
+    const componentName = file.replace(/^press-/, '').replace(/\.vue$/, '');
+
+    const parsedComponentName = componentName.replace(/(?:^|-)(\w)/g,  (_, c) => (c ? c.toUpperCase() : ''));
+    preNames[parsedComponentName] = (preNames[parsedComponentName] || 0) + 1;
+
+    return {
+      dir: path.dirname(item),
+      name: componentName,
+      folder: list[list.length - 2],
+      componentName: preNames[parsedComponentName] > 1
+        ? parsedComponentName + preNames[parsedComponentName]
+        : parsedComponentName,
+    };
+  });
+
+  const componentNameList = compList.map(item => item.componentName);
+  const importList = compList.map(item => `import ${item.componentName} from './packages/${item.folder}/press-${item.name}.vue';`);
+
+  sortByStr(compList, 'name');
+  sortByStr(importList);
+  sortByStr(componentNameList);
+
+  return {
+    compList,
+    importList,
+    componentNameList,
+  };
+}
+
+
+function generateIndexScss({ scssPath, globMatch, targetDir }) {
+  const { compList } = getAllPressComponents(globMatch);
+  let result = [];
+
+  for (const comp of compList) {
+    const globMatch = `${comp.dir}/css/*`;
+    const list = glob.sync(globMatch);
+
+    sortByStr(list);
+
+    result.push(...list.map((item) => {
+      let relativePath = path.relative(targetDir, item);
+      if (process.platform === 'win32') {
+        relativePath = relativePath.replace(/\\/g, '/');
+      }
+
+      const str = `@import './${relativePath}';`;
+      return str;
+    }));
+  }
+
+  result = Array.from(new Set(result));
+  const resultStr = `${CSS_BASE}${result.join('\n')}`;
+
+  fs.writeFileSync(scssPath, resultStr, {
+    encoding: 'utf-8',
+  });
+}
+
+
+function getComponentPath(component) {
+  const SPECIAL_COMPONENT_MAP = {
+    'message-board': 'message-board-list',
+  };
+  return SPECIAL_COMPONENT_MAP[component] || component;
+}
+
+function sortByStr(list, key) {
+  list.sort((a, b) => {
+    const valueA = key ? a[key] : a;
+    const valueB = key ? b[key] : b;
+    return valueA.localeCompare(valueB);
+
+
+    // if (valueA - valueB > 0) {
+    //   return 1;
+    // }
+    // if (valueA - valueB < 0) {
+    //   return -1;
+    // }
+    // return 0;
+  });
+}
+
+function getCompList(componentConfig) {
+  const importList = [];
+  const componentNameList = [];
+
+  Object.keys(componentConfig)
+    .forEach((key) => {
+      const value = componentConfig[key];
+      const { list } = value;
+
+
+      list.forEach((item) => {
+        const hyphenatedName = hyphenate(item.name);
+        const shortName = item.name.replace(/$Press/, '');
+        const compPath = getComponentPath(hyphenatedName);
+        importList.push(`import ${shortName} from './packages/press-${hyphenatedName}/press-${compPath}.vue';`);
+
+        componentNameList.push(shortName);
+      });
+    });
+  sortByStr(importList);
+  sortByStr(componentNameList);
+
+  return {
+    importList,
+    componentNameList,
+  };
+}
+
+function getSrcIndexJs({ componentConfig, allComponent = false, globMatch }) {
+  let {
+    importList,
+    componentNameList,
+  } = getCompList(componentConfig);
+
+  if (allComponent) {
+    const info = getAllPressComponents(globMatch);
+    importList = info.importList;
+    componentNameList = info.componentNameList;
+  }
+
+  const res = MAIN_TEMPLATE
+    .replace('{{install}}', importList.join('\n'))
+    .replaceAll('{{components}}', componentNameList.map(item => `${item},`).join('\n  '));
+
+  return res;
+}
+
+
+function writeSrcIndexJs({
+  componentConfig,
+  filePath,
+  allComponent = false,
+  scssPath,
+  globMatch,
+  targetDir,
+}) {
+  const js = getSrcIndexJs({ componentConfig, allComponent, globMatch });
+  fs.writeFileSync(filePath, js, {
+    encoding: 'utf-8',
+  });
+  const packageEntryJsContent = getAllPressComponents(globMatch)
+    .compList
+    .map((item) => {
+      const result = (`export { default as ${item.componentName} } from './${item.folder}/press-${item.name}.vue';`);
+      return result;
+    })
+    .join('\n');
+
+
+  generateIndexScss({ scssPath, globMatch, targetDir });
+
+  fs.writeFileSync(PACKAGE_ENTRY_JS, `/* eslint-disable no-duplicate-imports */\n${packageEntryJsContent}\n`, {
+    encoding: 'utf-8',
+  });
+}
+
+
+module.exports = {
+  hyphenate,
+  getComponentPath,
+  writeSrcIndexJs,
+};

package/script/generate-component-config/helper.js

@@ -0,0 +1,29 @@
+const { writeFileSync } = require('t-comm');
+
+const {
+  IS_INNER_DOCS,
+} = require('../utils/utils');
+
+
+const PATH_MAP = {
+  DOC_SIDE_BAR_CONFIG: `./${IS_INNER_DOCS ? 'docs/' : ''}docs/.vuepress/sidebar/sidebar.json`,
+  DOC_SIDE_BAR_EN_CONFIG: `./${IS_INNER_DOCS ? 'docs/' : ''}docs/.vuepress/sidebar/sidebar-en.json`,
+
+  DEMO_INDEX_CONFIG: 'src/pages/index/page-config.json',
+  DEMO_PAGES_JSON: './src/pages.json',
+  DEMO_I18N: 'src/utils/i18n/title-i18n.json',
+
+  BUILD_CONFIG: 'config/components.json',
+  SRC_INDEX: 'src/index.js',
+};
+
+
+function saveJsonToFile(filePath, data) {
+  writeFileSync(filePath, data, true);
+}
+
+
+module.exports = {
+  PATH_MAP,
+  saveJsonToFile,
+};

package/script/generate-new-component/copy-dir.js

@@ -0,0 +1,158 @@
+const fs = require('fs');
+const path = require('path');
+
+const { copyDir, execCommand, getPureCompName, getFullCompName } = require('t-comm');
+
+const { isActComponent, COMP_PREFIX } = require('../utils/utils');
+
+const TEMPLATE_PATH = './script/new/template';
+const COMP_TARGET_PATH = './src/packages';
+const DEFAULT_COMP_NAME = 'press.vue';
+const DEFAULT_README_NAME = 'README.md';
+const DEFAULT_README_EN_NAME = 'README.en-US.md';
+const DEFAULT_DEMO_NAME = 'demo.vue';
+
+
+function copyComponentDir(config) {
+  const { name, title  } = config;
+  if (!name) {
+    throw new Error('请输入组件名称');
+  }
+  console.log(`[NEW] 正在创建 ${name} 组件...`);
+
+  const fullName = getFullCompName(name, COMP_PREFIX);
+  const pureName = getPureCompName(name, COMP_PREFIX);
+  const targetDir = path.resolve(COMP_TARGET_PATH, fullName);
+
+
+  if (fs.existsSync(targetDir)) {
+    throw new Error(`${name} 已经存在，请移除后重试`);
+  }
+  copyDir(TEMPLATE_PATH, targetDir, () => {
+    console.log(`[NEW] ${fullName} 拷贝成功`);
+  });
+
+  if (isActComponent(fullName)) {
+    execCommand('rm -rf demo.vue && mv demo-act.vue demo.vue', targetDir, 'inherit');
+  } else {
+    execCommand('rm -rf demo-act.vue', targetDir, 'inherit');
+  }
+
+  const compVue = path.resolve(COMP_TARGET_PATH, fullName, DEFAULT_COMP_NAME);
+  const newCompName = path.resolve(COMP_TARGET_PATH, fullName, `${fullName}.vue`);
+
+  fs.renameSync(compVue, newCompName);
+  console.log(`[NEW] ${fullName}.vue 重命名成功`);
+
+  changeReadme({
+    fullName,
+    pureName,
+    title,
+    name,
+  });
+  changeReadme({
+    fullName,
+    pureName,
+    title,
+    name,
+    isEn: true,
+  });
+  changeDemo({
+    fullName,
+    pureName,
+    title,
+    name,
+    newCompName,
+  });
+  changeComponent({
+    fullName,
+    pureName,
+    title,
+    name,
+    newCompName,
+  });
+  console.log(`[NEW] ${fullName} 文档变量替换成功`);
+}
+
+
+function changeReadme({
+  fullName,
+  pureName,
+  title,
+  name,
+  isEn,
+}) {
+  const docPath = path.resolve(COMP_TARGET_PATH, fullName, isEn ? DEFAULT_README_EN_NAME : DEFAULT_README_NAME);
+  const data = fs.readFileSync(docPath, {
+    encoding: 'utf-8',
+  });
+
+  const newData = data
+    .replace(/COMP/g, pureName)
+    .replace(/SUBTITLE/g, name)
+    .replace(/TITLE/g, title);
+
+  fs.writeFileSync(docPath, newData, {
+    encoding: 'utf-8',
+  });
+
+  fs.writeFileSync(docPath, newData, {
+    encoding: 'utf-8',
+  });
+}
+
+
+function changeDemo({
+  fullName,
+  pureName,
+  name,
+  title,
+  newCompName,
+}) {
+  const filePath = path.resolve(COMP_TARGET_PATH, fullName, newCompName);
+  const data = fs.readFileSync(filePath, {
+    encoding: 'utf-8',
+  });
+
+  const newData = data
+    .replace(/COMP/g, pureName)
+    .replace(/SUBTITLE/g, name)
+    .replace(/TITLE/g, title);
+
+  fs.writeFileSync(filePath, newData, {
+    encoding: 'utf-8',
+  });
+
+  fs.writeFileSync(filePath, newData, {
+    encoding: 'utf-8',
+  });
+}
+
+
+function changeComponent({
+  fullName,
+  pureName,
+  name,
+  title,
+}) {
+  const filePath = path.resolve(COMP_TARGET_PATH, fullName, DEFAULT_DEMO_NAME);
+  const data = fs.readFileSync(filePath, {
+    encoding: 'utf-8',
+  });
+
+  const newData = data
+    .replace(/COMP/g, pureName)
+    .replace(/SUBTITLE/g, name)
+    .replace(/TITLE/g, title);
+
+  fs.writeFileSync(filePath, newData, {
+    encoding: 'utf-8',
+  });
+
+  fs.writeFileSync(filePath, newData, {
+    encoding: 'utf-8',
+  });
+}
+module.exports = {
+  copyComponentDir,
+};

package/script/generate-new-component/generate-new-component.js

@@ -0,0 +1,128 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+const { pascalCase, getPureCompName } = require('t-comm');
+const inquirer = require('inquirer');
+
+
+const { COMP_PREFIX } = require('../utils/utils');
+
+const { copyComponentDir } = require('./copy-dir');
+const { sortComponentConfig } = require('./sort');
+
+
+function getTypeMap(componentConfigPath) {
+  const json = require(componentConfigPath);
+
+  const typeMap = Object.keys(json).reduce((cAcc, key) => {
+    const value = json[key];
+    const { title, list } = value;
+
+    let desc = `${title}，如 `;
+
+    desc += list.slice(0, 2)
+      .reduce((acc, item) => {
+        acc.push(item.name);
+        return acc;
+      }, [])
+      .join('、');
+
+    cAcc[desc] = key;
+
+    return cAcc;
+  }, {});
+
+  return typeMap;
+}
+
+
+async function getComponentConfig(componentConfigPath) {
+  const typeMap = getTypeMap(componentConfigPath);
+  const typeList = Object.keys(typeMap);
+
+  const result = await inquirer
+    .prompt([
+      {
+        type: 'input',
+        name: 'name',
+        message: '请输入组件英文名称，格式为大驼峰，如 MessageList、Cell？',
+        validate: (val) => {
+          if (val && val.trim()) {
+            return true;
+          }
+          return '请输入组件英文名称';
+        },
+      },
+      {
+        type: 'input',
+        name: 'title',
+        message: '请输入组件中文名称？',
+        validate: (val) => {
+          if (val && val.trim()) {
+            return true;
+          }
+          return '请输入组件中文名称';
+        },
+      },
+      {
+        type: 'list',
+        name: 'type',
+        message: '请选择组件分类？',
+        choices: typeList,
+      },
+
+    ]);
+
+  const { name, title, type } = result;
+  const typeDesc = type.split('组件')[0];
+  const confirm = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: `确认创建英文名为 ${name}，中文名为 ${title}，类型为 ${typeDesc} 的组件吗？`,
+    },
+  ]);
+
+  if (!confirm.confirm) {
+    return;
+  }
+
+  return {
+    name: pascalCase(getPureCompName(name.trim(), COMP_PREFIX)),
+    title: title.trim(),
+    type: typeMap[type],
+  };
+}
+
+function writeCompConfig(config, componentConfigPath) {
+  const json = require(componentConfigPath);
+  const { type, name, title } = config;
+  json[type].list.push({
+    name,
+    title,
+  });
+
+  const sortedJson = sortComponentConfig(json);
+  fs.writeFileSync(componentConfigPath, JSON.stringify(sortedJson, null, 2));
+}
+
+function genDocsAndDemoConfig() {
+  execSync('npm run gen:config', {
+    stdio: 'inherit',
+  });
+}
+
+
+async function generateNewComponent(componentConfigPath) {
+  const config = await getComponentConfig(componentConfigPath);
+  if (!config) return;
+
+  writeCompConfig(config, componentConfigPath);
+  genDocsAndDemoConfig();
+  copyComponentDir(config);
+}
+
+
+module.exports = {
+  generateNewComponent,
+};

package/script/generate-new-component/sort.js

@@ -0,0 +1,23 @@
+function sortComponentConfig(config) {
+  return Object.keys(config).reduce((acc, key) => {
+    const value = config[key];
+
+    value.list.sort((a, b) => {
+      if (a.name > b.name) return 1;
+      if (b.name > a.name) return -1;
+      return 0;
+    });
+    acc = {
+      ...acc,
+      [key]: {
+        ...value,
+      },
+    };
+    return acc;
+  }, {});
+}
+
+module.exports = {
+  sortComponentConfig,
+};
+