Refactor: 重构cli (#238)

* refactor: 重构shared/utils

* fix: 修复shared/utils类型错误

* refactor: 重构cli

Author: GaoNeng-wWw

internals/cli/src/commands/build/handlebars.render.ts

@@ -8,10 +8,11 @@ import Handlebars from 'handlebars'
 let RegCache = {}
 let HandlebarsCompile
 
-const replaceDelimiters = function (str, sourceReg, escape) {
+const replaceDelimiters = function (str, sourceReg, escape?: boolean) {
   let regex = RegCache[sourceReg] || (RegCache[sourceReg] = new RegExp(sourceReg, 'g'))
   let match
 
+  // eslint-disable-next-line no-cond-assign
   while ((match = regex.exec(str))) {
     let prefix = str.slice(0, match.index)
     let inner = (escape ? '\\' : '') + '{{' + match[1] + '}}'
@@ -23,31 +24,34 @@ const replaceDelimiters = function (str, sourceReg, escape) {
   return str
 }
 
-Handlebars.setDelimiter = function (delimiters) {
-  if (delimiters[0].slice(-1) !== '=') {
-    delimiters[0] += '(?!=)'
-  }
+Object.defineProperty(Handlebars, 'setDelimiter', {
+  value(delimiters: string[]) {
+    if (delimiters[0].slice(-1) !== '=') {
+      delimiters[0] += '(?!=)'
+    }
 
-  let source = delimiters[0] + '([\\s\\S]+?)' + delimiters[1]
+    let source = delimiters[0] + '([\\s\\S]+?)' + delimiters[1]
 
-  if (!HandlebarsCompile) {
-    HandlebarsCompile = Handlebars.compile
-  }
+    if (!HandlebarsCompile) {
+      HandlebarsCompile = Handlebars.compile
+    }
 
-  Handlebars.compile = function (str) {
-    let args = [].slice.call(arguments)
+    Handlebars.compile = function (str) {
+      // eslint-disable-next-line prefer-rest-params
+      let args = [].slice.call(arguments)
 
-    if (typeof str === 'string') {
-      if (delimiters[0] !== '{{' && delimiters[1] !== '}}') {
-        args[0] = replaceDelimiters(args[0], '{{([\\s\\S]+?)}}', true)
+      if (typeof str === 'string') {
+        if (delimiters[0] !== '{{' && delimiters[1] !== '}}') {
+          args[0] = replaceDelimiters(args[0], '{{([\\s\\S]+?)}}', true)
+        }
+
+        args[0] = replaceDelimiters(args[0], source)
       }
 
-      args[0] = replaceDelimiters(args[0], source)
+      return HandlebarsCompile.apply(Handlebars, args)
     }
-
-    return HandlebarsCompile.apply(Handlebars, args)
   }
-}
+})
 
 /**
  * 格式化模板
@@ -59,8 +63,13 @@ Handlebars.setDelimiter = function (delimiters) {
  * @param {Object} delimiter
  * @returns {String}
  */
-export default function ({ delimiter, template, options, data }) {
-  delimiter && Handlebars.setDelimiter(delimiter)
-
-  return Handlebars.compile(template, options)(data)
+export default function ({ delimiter, template, options, data }: {
+  delimiter?: string[]
+  template: string
+  options?: CompileOptions
+  data: any
+}) {
+  delimiter && (Handlebars as typeof Handlebars & { setDelimiter: (delimiter: string[]) => any }).setDelimiter(delimiter)
+  const compile = Handlebars.compile(template, options)
+  return compile(data)
 }

internals/cli/src/commands/create/create-ui.ts

@@ -5,21 +5,21 @@
  * yarn create:ui img-preview -single 输出纯净模板（没有 pc 等模板/单层组件）
  * yarn create:ui img-preview -mobile 创建纯移动组件
  */
-const path = require('path')
-const fs = require('fs-extra')
-const semver = require('semver')
-const utils = require('./utils')
-const { createModuleMapping } = require('./module-utils')
-const handlebarsRender = require('./handlebars.render')
+import path from 'path'
+import fs from 'fs-extra'
+import semver from 'semver'
+import * as utils from '../../shared/utils'
+import { createModuleMapping } from '../../shared/module-utils'
+import handlebarsRender from '../build/handlebars.render'
 
 const args = utils.getInputCmd()
 
 if (args.length > 0) {
-  const commands = []
-  const components = []
-  const templateDir = utils.pathJoin('../template/component')
-  const componetDir = utils.pathJoin('../../packages/vue/components')
-  const { version } = fs.readJSONSync(utils.pathJoin('../../packages/vue/package.json'))
+  const commands: string[] = []
+  const components: string[] = []
+  const templateDir = utils.pathJoin('../../public/template/component')
+  const componetDir = utils.pathJoin('../../../../packages/vue/src')
+  const { version } = fs.readJSONSync(utils.pathJoin('../../../../packages/vue/package.json'))
 
   args.forEach((item) => {
     if (item.indexOf('-') === 0) {

internals/cli/src/shared/module-utils.ts

@@ -47,15 +47,15 @@ export interface Module {
  * @param {Boolean} isSort 是否需要排序
  * @returns 模块对象
  */
-const getAllModules = (isSort) => {
+const getAllModules = (isSort: boolean) => {
   return getSortModules({ filterIntercept: () => true, isSort })
 }
 
 /**
  * @param {String} key 根据模块对象的 Key 获取对应的值
  * @returns 模块对象
  */
-const getModuleInfo = (key) => {
+const getModuleInfo = (key: string) => {
   return moduleMap[key] || {}
 }
 
@@ -66,7 +66,10 @@ const getModuleInfo = (key) => {
  * @param {Boolean} isOriginal 是否取原始数据
  * @param {Boolean} isSort 是否需要排序
  */
-const getByName = ({ name, inversion = false, isOriginal = false, isSort = true }) => {
+const getByName = (
+  { name, inversion = false, isOriginal = false, isSort = true }:
+  { name: string;inversion: boolean;isOriginal: boolean;isSort: boolean }
+) => {
   const callback = (item) => {
     const result = new RegExp(`/${name}/|^vue-${name}/`).test(item.path)
     return inversion ? !result : result
@@ -80,7 +83,7 @@ const getByName = ({ name, inversion = false, isOriginal = false, isSort = true
  * @private
  * @param {Function} filterIntercept 搜索条件
  */
-const getModules = (filterIntercept) => {
+const getModules = (filterIntercept: Function) => {
   let modules = {}
 
   if (typeof filterIntercept === 'function') {
@@ -104,7 +107,7 @@ const getModules = (filterIntercept) => {
  * @param {Function} filterIntercept 搜索条件
  * @param {Boolean} isSort 是否需要排序
  */
-const getSortModules = ({ filterIntercept, isSort = true }) => {
+const getSortModules = ({ filterIntercept, isSort = true }: { filterIntercept: Function; isSort: boolean }) => {
   let modules: Module[] = []
   let componentCount = 0
   const importName = '@opentiny/vue'
@@ -119,7 +122,7 @@ const getSortModules = ({ filterIntercept, isSort = true }) => {
       // 这段逻辑暂时没有用到
       const componentName = dirs.slice(1, dirs.indexOf('src'))
       // UpperName: Todo
-      component.UpperName = utils.capitalizeKebabCase(componentName.pop())
+      component.UpperName = utils.capitalizeKebabCase(componentName.pop() ?? '')
 
       // LowerName: todo
       component.LowerName = utils.kebabCase({ str: component.UpperName })
@@ -331,7 +334,7 @@ const isNotArrayObject = (sortData, key, setIndex) => {
       let sortItem = {}
 
       if (typeof dataItem !== 'object') {
-        sortItem.__real_value = dataItem
+        (sortItem as unknown as Record<string, any>).__real_value = dataItem
       } else {
         sortItem = {
           ...sortData[sortKey]
@@ -375,11 +378,13 @@ const getComponents = (mode, isSort = true) => {
  * 获取模块项的模块
  * @param {String} componentName 组件名称（大写，例如：img-preview）
  * @param {Oject} newObj 新增对象
- * @param {Boolean} isMobile 是否为移动组件
  * @returns 模块对象
  */
-export const addModule = ({ componentName, templateName, newObj = {}, isMobile = false }) => {
-  const isEntry = templateName.endsWith('index')
+export const addModule = (
+  { componentName, templateName, newObj = {} }:
+  { componentName: string; templateName?: string; newObj?: object; isMobile: boolean }
+) => {
+  const isEntry = templateName?.endsWith('index') ?? false
   return {
     path: `vue/src/${componentName}/` + (isEntry ? `${templateName}.ts` : `src/${templateName}.vue`),
     type: isEntry ? 'component' : 'template',