@ebiz/designer-components 0.1.0 → 0.1.2

package/src/utils/formatCode.js

@@ -1,24 +1,24 @@
-import prettier from 'prettier'
-import parserHtml from 'prettier/parser-html'
-import parseCss from 'prettier/parser-postcss'
-import parserBabel from 'prettier/parser-babel'
-
-const defaultOption = {
-  singleQuote: true,
-  printWidth: 120,
-  semi: false,
-  trailingComma: 'none'
-}
-
-export const formatCode = (content, parser, options = {}) => {
-  if (!content || typeof content !== 'string') {
-    return content
-  }
-
-  return prettier.format(content, {
-    parser,
-    plugins: [parserBabel, parseCss, parserHtml],
-    ...defaultOption,
-    ...options
-  })
-}
+import prettier from 'prettier'
+import parserHtml from 'prettier/parser-html'
+import parseCss from 'prettier/parser-postcss'
+import parserBabel from 'prettier/parser-babel'
+
+const defaultOption = {
+  singleQuote: true,
+  printWidth: 120,
+  semi: false,
+  trailingComma: 'none'
+}
+
+export const formatCode = (content, parser, options = {}) => {
+  if (!content || typeof content !== 'string') {
+    return content
+  }
+
+  return prettier.format(content, {
+    parser,
+    plugins: [parserBabel, parseCss, parserHtml],
+    ...defaultOption,
+    ...options
+  })
+}

package/src/utils/generateImportStatement.js

@@ -1,52 +1,52 @@
-// TODO: 支持4种 import 的形式
-export function generateImportStatement(config) {
-  const { moduleName, exportName, alias, destructuring } = config
-
-  let statementName = `${exportName}`
-
-  if (alias && alias !== exportName) {
-    statementName = `${exportName} as ${alias}`
-  }
-
-  if (destructuring) {
-    statementName = `{ ${statementName} }`
-  }
-
-  return `import ${statementName} from '${moduleName}'`
-}
-
-export function generateImportByPkgName(config) {
-  const { pkgName, imports } = config
-
-  const importStatements = imports
-    .filter(({ destructuring }) => destructuring)
-    .map(({ componentName, exportName }) => {
-      if (componentName === exportName) {
-        return componentName
-      }
-
-      return `${exportName} as ${componentName}`
-    })
-
-  // 默认导出如果存在，应该只有一个
-  let defaultImports = imports.find(({ destructuring }) => !destructuring)
-  let defaultImportStatement = ''
-
-  if (defaultImports) {
-    const { componentName, exportName } = defaultImports
-
-    if (exportName && exportName !== componentName) {
-      defaultImportStatement = `${exportName} as ${componentName}`
-    } else {
-      defaultImportStatement = `${exportName || componentName || ''}`
-    }
-
-    defaultImportStatement = `import ${defaultImportStatement} from "${pkgName}"\n`
-  }
-
-  if (!importStatements.length && defaultImportStatement) {
-    return defaultImportStatement
-  }
-
-  return `${defaultImportStatement}import { ${importStatements.join(',')} } from "${pkgName}"`
-}
+// TODO: 支持4种 import 的形式
+export function generateImportStatement(config) {
+  const { moduleName, exportName, alias, destructuring } = config
+
+  let statementName = `${exportName}`
+
+  if (alias && alias !== exportName) {
+    statementName = `${exportName} as ${alias}`
+  }
+
+  if (destructuring) {
+    statementName = `{ ${statementName} }`
+  }
+
+  return `import ${statementName} from '${moduleName}'`
+}
+
+export function generateImportByPkgName(config) {
+  const { pkgName, imports } = config
+
+  const importStatements = imports
+    .filter(({ destructuring }) => destructuring)
+    .map(({ componentName, exportName }) => {
+      if (componentName === exportName) {
+        return componentName
+      }
+
+      return `${exportName} as ${componentName}`
+    })
+
+  // 默认导出如果存在，应该只有一个
+  let defaultImports = imports.find(({ destructuring }) => !destructuring)
+  let defaultImportStatement = ''
+
+  if (defaultImports) {
+    const { componentName, exportName } = defaultImports
+
+    if (exportName && exportName !== componentName) {
+      defaultImportStatement = `${exportName} as ${componentName}`
+    } else {
+      defaultImportStatement = `${exportName || componentName || ''}`
+    }
+
+    defaultImportStatement = `import ${defaultImportStatement} from "${pkgName}"\n`
+  }
+
+  if (!importStatements.length && defaultImportStatement) {
+    return defaultImportStatement
+  }
+
+  return `${defaultImportStatement}import { ${importStatements.join(',')} } from "${pkgName}"`
+}

package/src/utils/hasJsx.js

@@ -1,25 +1,25 @@
-import { parse } from '@babel/parser'
-import traverse from '@babel/traverse'
-
-export function hasJsx(code) {
-  try {
-    const ast = parse(code, { plugins: ['jsx'] })
-    let res = false
-
-    traverse(ast, {
-      JSXElement(path) {
-        res = true
-        path.stop()
-      },
-      JSXFragment(path) {
-        res = true
-        path.stop()
-      }
-    })
-
-    return res
-  } catch (error) {
-    // 解析失败则认为不存在 jsx
-    return false
-  }
-}
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+
+export function hasJsx(code) {
+  try {
+    const ast = parse(code, { plugins: ['jsx'] })
+    let res = false
+
+    traverse(ast, {
+      JSXElement(path) {
+        res = true
+        path.stop()
+      },
+      JSXFragment(path) {
+        res = true
+        path.stop()
+      }
+    })
+
+    return res
+  } catch (error) {
+    // 解析失败则认为不存在 jsx
+    return false
+  }
+}

package/src/utils/index.js

@@ -1,166 +1,166 @@
-/**
- * Copyright (c) 2023 - present TinyEngine Authors.
- * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-import { capitalize, hyphenate } from '@vue/shared'
-import { tinyIcon as unifyIconName } from '../pre-processor'
-import { TINY_ICON, JS_FUNCTION } from '../constant'
-
-const getTypeOfSchema = (schema) => schema.componentName
-
-const getFunctionInfo = (fnStr) => {
-  const fnRegexp = /(async)?.*?(\w+) *\(([\s\S]*?)\) *\{([\s\S]*)\}/
-  const result = fnRegexp.exec(fnStr)
-  if (result) {
-    return {
-      type: result[1] || '',
-      name: result[2],
-      params: result[3]
-        .split(',')
-        .map((item) => item.trim())
-        .filter((item) => Boolean(item)),
-      body: result[4]
-    }
-  }
-  return null
-}
-
-const safeRandom = () => {
-  const mathConstructor = Math
-
-  return mathConstructor.random()
-}
-
-export const randomString = (length = 4, chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') => {
-  let result = ''
-  for (let i = length; i > 0; --i) {
-    result += chars[Math.floor(safeRandom() * chars.length)]
-  }
-  return result
-}
-
-const avoidDuplicateString = (existings, str) => {
-  let result = str
-  let suffix = 1
-
-  while (existings.includes(result)) {
-    result = `${str}${suffix}`
-    suffix++
-  }
-
-  return result
-}
-
-const lowerFirst = (str) => str[0].toLowerCase() + str.slice(1)
-
-/**
- * 将输入字符串转换为 PascalCase 风格, 默认可转换 kebab-case/camelCase
- * @param {string} input 源字符串
- * @param {string} delimiter 定界符。默认使用连字符，以支持转换 kebab-case
- * @returns {string} PascalCase 风格的字符串
- */
-const toPascalCase = (input, delimiter = '-') => input.split(delimiter).map(capitalize).join('')
-
-const commonOpts = {
-  semi: false,
-  singleQuote: true,
-  printWidth: 120,
-  trailingComma: 'none',
-  endOfLine: 'auto',
-  tabWidth: 2
-}
-const prettierOpts = {
-  vue: { ...commonOpts, parser: 'vue', htmlWhitespaceSensitivity: 'ignore' },
-  js: { ...commonOpts, parser: 'typescript' }
-}
-
-const onRE = /^on([A-Z]\w*)/
-const onUpdateRE = /^on(Update:\w+)/
-export const thisBindRe = /this\.(props\.)?/g
-export const thisPropsBindRe = /this\.(props\.)?/g
-export const thisRegexp = /this\./g
-
-const isOn = (key) => onRE.test(key)
-const isOnUpdate = (key) => onUpdateRE.test(key)
-
-const toEventKey = (str) => {
-  const strRemovedPrefix = str.replace(onRE, '$1')
-
-  if (isOnUpdate(str)) {
-    return lowerFirst(strRemovedPrefix)
-  }
-
-  return hyphenate(strRemovedPrefix)
-}
-
-export const isGetter = (accessor) => accessor?.getter?.type === JS_FUNCTION
-export const isSetter = (accessor) => accessor?.setter?.type === JS_FUNCTION
-export const hasAccessor = (accessor) => isGetter(accessor) || isSetter(accessor)
-
-const addAccessorRecord = (accessor, record) => {
-  if (isGetter(accessor)) {
-    record.push(accessor.getter.value)
-  }
-
-  if (isSetter(accessor)) {
-    record.push(accessor.setter.value)
-  }
-}
-
-/**
- * TinyIcon 需要从方法返回图标组件，所以需要记录生成图标定义语句所需信息
- * @param {Object} description 记录中间产物的描述信息
- * @param {Object} description.iconComponents 记录定义图标组件所需属性，componentNames/exportNames 要保持对应关系
- * @param {string[]} description.iconComponents.componentNames 模板中的图标组件名集合
- * @param {string[]} description.iconComponents.exportNames 与 componentNames 对应的 TinyVue 组件库中图标组件名集合
- * @param {string} componentName 模板中的图标组件名，前缀为 TinyIcon
- */
-const addIconRecord = (description, componentName) => {
-  const { componentNames, exportNames } = description.iconComponents
-
-  if (!componentNames.includes(componentName)) {
-    const exportName = componentName.replace(TINY_ICON, 'icon')
-
-    componentNames.push(componentName)
-    exportNames.push(exportName)
-  }
-}
-
-/**
- * 处理组件中的 icon 属性绑定
- * @param {Object} description 记录中间产物的描述信息
- * @param {Set} description.componentSet 记录 SFC 中的组件
- * @param {Object} iconProp icon 属性值描述
- * @returns {string} iconName 用于属性绑定的图标组件名，前缀为 TinyIcon
- */
-const handleIconInProps = (description, iconProp) => {
-  const { componentName: iconName } = unifyIconName(iconProp)
-
-  description.componentSet.add(iconName)
-  addIconRecord(description, iconName)
-
-  return iconName
-}
-
-export {
-  getTypeOfSchema,
-  getFunctionInfo,
-  safeRandom,
-  avoidDuplicateString,
-  lowerFirst,
-  toPascalCase,
-  prettierOpts,
-  isOn,
-  toEventKey,
-  addAccessorRecord,
-  addIconRecord,
-  handleIconInProps
-}
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { capitalize, hyphenate } from '@vue/shared'
+import { tinyIcon as unifyIconName } from '../pre-processor'
+import { TINY_ICON, JS_FUNCTION } from '../constant'
+
+const getTypeOfSchema = (schema) => schema.componentName
+
+const getFunctionInfo = (fnStr) => {
+  const fnRegexp = /(async)?.*?(\w+) *\(([\s\S]*?)\) *\{([\s\S]*)\}/
+  const result = fnRegexp.exec(fnStr)
+  if (result) {
+    return {
+      type: result[1] || '',
+      name: result[2],
+      params: result[3]
+        .split(',')
+        .map((item) => item.trim())
+        .filter((item) => Boolean(item)),
+      body: result[4]
+    }
+  }
+  return null
+}
+
+const safeRandom = () => {
+  const mathConstructor = Math
+
+  return mathConstructor.random()
+}
+
+export const randomString = (length = 4, chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') => {
+  let result = ''
+  for (let i = length; i > 0; --i) {
+    result += chars[Math.floor(safeRandom() * chars.length)]
+  }
+  return result
+}
+
+const avoidDuplicateString = (existings, str) => {
+  let result = str
+  let suffix = 1
+
+  while (existings.includes(result)) {
+    result = `${str}${suffix}`
+    suffix++
+  }
+
+  return result
+}
+
+const lowerFirst = (str) => str[0].toLowerCase() + str.slice(1)
+
+/**
+ * 将输入字符串转换为 PascalCase 风格, 默认可转换 kebab-case/camelCase
+ * @param {string} input 源字符串
+ * @param {string} delimiter 定界符。默认使用连字符，以支持转换 kebab-case
+ * @returns {string} PascalCase 风格的字符串
+ */
+const toPascalCase = (input, delimiter = '-') => input.split(delimiter).map(capitalize).join('')
+
+const commonOpts = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 120,
+  trailingComma: 'none',
+  endOfLine: 'auto',
+  tabWidth: 2
+}
+const prettierOpts = {
+  vue: { ...commonOpts, parser: 'vue', htmlWhitespaceSensitivity: 'ignore' },
+  js: { ...commonOpts, parser: 'typescript' }
+}
+
+const onRE = /^on([A-Z]\w*)/
+const onUpdateRE = /^on(Update:\w+)/
+export const thisBindRe = /this\.(props\.)?/g
+export const thisPropsBindRe = /this\.(props\.)?/g
+export const thisRegexp = /this\./g
+
+const isOn = (key) => onRE.test(key)
+const isOnUpdate = (key) => onUpdateRE.test(key)
+
+const toEventKey = (str) => {
+  const strRemovedPrefix = str.replace(onRE, '$1')
+
+  if (isOnUpdate(str)) {
+    return lowerFirst(strRemovedPrefix)
+  }
+
+  return hyphenate(strRemovedPrefix)
+}
+
+export const isGetter = (accessor) => accessor?.getter?.type === JS_FUNCTION
+export const isSetter = (accessor) => accessor?.setter?.type === JS_FUNCTION
+export const hasAccessor = (accessor) => isGetter(accessor) || isSetter(accessor)
+
+const addAccessorRecord = (accessor, record) => {
+  if (isGetter(accessor)) {
+    record.push(accessor.getter.value)
+  }
+
+  if (isSetter(accessor)) {
+    record.push(accessor.setter.value)
+  }
+}
+
+/**
+ * TinyIcon 需要从方法返回图标组件，所以需要记录生成图标定义语句所需信息
+ * @param {Object} description 记录中间产物的描述信息
+ * @param {Object} description.iconComponents 记录定义图标组件所需属性，componentNames/exportNames 要保持对应关系
+ * @param {string[]} description.iconComponents.componentNames 模板中的图标组件名集合
+ * @param {string[]} description.iconComponents.exportNames 与 componentNames 对应的 TinyVue 组件库中图标组件名集合
+ * @param {string} componentName 模板中的图标组件名，前缀为 TinyIcon
+ */
+const addIconRecord = (description, componentName) => {
+  const { componentNames, exportNames } = description.iconComponents
+
+  if (!componentNames.includes(componentName)) {
+    const exportName = componentName.replace(TINY_ICON, 'icon')
+
+    componentNames.push(componentName)
+    exportNames.push(exportName)
+  }
+}
+
+/**
+ * 处理组件中的 icon 属性绑定
+ * @param {Object} description 记录中间产物的描述信息
+ * @param {Set} description.componentSet 记录 SFC 中的组件
+ * @param {Object} iconProp icon 属性值描述
+ * @returns {string} iconName 用于属性绑定的图标组件名，前缀为 TinyIcon
+ */
+const handleIconInProps = (description, iconProp) => {
+  const { componentName: iconName } = unifyIconName(iconProp)
+
+  description.componentSet.add(iconName)
+  addIconRecord(description, iconName)
+
+  return iconName
+}
+
+export {
+  getTypeOfSchema,
+  getFunctionInfo,
+  safeRandom,
+  avoidDuplicateString,
+  lowerFirst,
+  toPascalCase,
+  prettierOpts,
+  isOn,
+  toEventKey,
+  addAccessorRecord,
+  addIconRecord,
+  handleIconInProps
+}

package/src/utils/mergeOptions.js

@@ -1,29 +1,29 @@
-function isObject(target) {
-  return Object.prototype.toString.call(target) === '[object Object]'
-}
-
-export const mergeOptions = (originOptions, newOptions) => {
-  if (!isObject(originOptions) || !isObject(newOptions)) {
-    return originOptions
-  }
-
-  const res = {}
-
-  for (const [key, value] of Object.entries(originOptions)) {
-    if (!Object.prototype.hasOwnProperty.call(newOptions, key)) {
-      res[key] = value
-    }
-
-    if (isObject(value) && isObject(newOptions[key])) {
-      res[key] = mergeOptions(value, newOptions[key])
-    }
-  }
-
-  for (const [key, value] of Object.entries(newOptions)) {
-    if (!Object.prototype.hasOwnProperty.call(res, key)) {
-      res[key] = value
-    }
-  }
-
-  return res
-}
+function isObject(target) {
+  return Object.prototype.toString.call(target) === '[object Object]'
+}
+
+export const mergeOptions = (originOptions, newOptions) => {
+  if (!isObject(originOptions) || !isObject(newOptions)) {
+    return originOptions
+  }
+
+  const res = {}
+
+  for (const [key, value] of Object.entries(originOptions)) {
+    if (!Object.prototype.hasOwnProperty.call(newOptions, key)) {
+      res[key] = value
+    }
+
+    if (isObject(value) && isObject(newOptions[key])) {
+      res[key] = mergeOptions(value, newOptions[key])
+    }
+  }
+
+  for (const [key, value] of Object.entries(newOptions)) {
+    if (!Object.prototype.hasOwnProperty.call(res, key)) {
+      res[key] = value
+    }
+  }
+
+  return res
+}

package/src/utils/parseRequiredBlocks.js

@@ -1,18 +1,18 @@
-export const parseRequiredBlocks = (schema) => {
-  const res = []
-
-  if (!Array.isArray(schema?.children)) {
-    return res
-  }
-
-  for (const item of schema.children) {
-    if (item.componentType === 'Block') {
-      res.push(item.componentName)
-    }
-    if (Array.isArray(item.children)) {
-      res.push(...parseRequiredBlocks(item))
-    }
-  }
-
-  return res
-}
+export const parseRequiredBlocks = (schema) => {
+  const res = []
+
+  if (!Array.isArray(schema?.children)) {
+    return res
+  }
+
+  for (const item of schema.children) {
+    if (item.componentType === 'Block') {
+      res.push(item.componentName)
+    }
+    if (Array.isArray(item.children)) {
+      res.push(...parseRequiredBlocks(item))
+    }
+  }
+
+  return res
+}