@ebiz/designer-components 0.0.18-tj.1

package/src/utils/generateImportStatement.js

@@ -0,0 +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}"`
+}

package/src/utils/hasJsx.js

@@ -0,0 +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
+  }
+}

package/src/utils/index.js

@@ -0,0 +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
+}

package/src/utils/mergeOptions.js

@@ -0,0 +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
+}

package/src/utils/parseRequiredBlocks.js

@@ -0,0 +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
+}

package/src/utils/upload.ts

@@ -0,0 +1,126 @@
+import {request} from "./request";
+import COS from "cos-js-sdk-v5";
+import OSS from "ali-oss";
+import moment from "moment/moment";
+
+const defaultOnPercent = () => {
+}
+const defaultOnSuccess = () => {
+}
+const defaultOnFail = () => {
+}
+
+export const upload = (options: any) => {
+  const path: string = options.path;
+  const file: any = options.file;
+  const onPercent: Function = options.onProgress || defaultOnPercent;
+  const onSuccess: Function = options.onSuccess || defaultOnSuccess;
+  const onFail: Function = options.onFail || defaultOnFail;
+
+  let credentials: any, url;
+  request.get({
+    url: "/file/getSecretKey"
+  }).then((res) => {
+    if (res.oss_type === 'ALIYUN') {
+      const client = new OSS({
+        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+        region: res.region,
+        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+        accessKeyId: res.accessKeyId,
+        accessKeySecret: res.accessKeySecret,
+        // 从STS服务获取的安全令牌（SecurityToken）。
+        stsToken: res.securityToken,
+        // 刷新临时访问凭证的时间间隔，单位为毫秒。
+        refreshSTSTokenInterval: 300000,
+        // 填写Bucket名称。
+        bucket: res.bucket
+      });
+      const options = {
+        mime: "json",
+        headers: {"Content-Type": "text/plain"},
+      };
+      client.put(handleUploadName("img", path, file.name), file.raw, options).then((uploadRes: any) => {
+        console.log(uploadRes)
+        // 创建一个 URL 对象
+        const urlObj = new URL(uploadRes.url);
+        // 从 URL 对象中获取路径部分
+        const url = res.host + urlObj.pathname.substring(1);
+
+        request.get({
+          url: "/file/getAccessUrl",
+          params: {
+            url,
+          }
+        }).then(res => {
+          console.log(res)
+          onSuccess({url: res})
+        })
+      }).catch((e: any) => {
+        onFail(e)
+      });
+    } else {
+      credentials = res.credentials;
+      let cos = new COS({
+        getAuthorization: function (options, callback) {
+          callback({
+            TmpSecretId: credentials.tmpSecretId,
+            TmpSecretKey: credentials.tmpSecretKey,
+            SecurityToken: credentials.sessionToken,
+            StartTime: credentials.startTime,
+            ExpiredTime: credentials.expiredTime
+          });
+        }
+      });
+      cos.uploadFile(
+        {
+          Bucket: credentials.bucket,
+          Region: credentials.region,
+          Key: handleUploadName("img", path, file.name),
+          Body: file.raw,
+          SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+          onProgress: (progressData) => {
+            if (!!onPercent) {
+              onPercent({file, percent: progressData.percent});
+            }
+          },
+          onFileFinish: (err, data, options) => {
+            url = credentials.path + "/" + options.Key;
+            request.get({
+              url: "/file/getAccessUrl",
+              params: {
+                url,
+              }
+            }).then(res => {
+              console.log(res)
+              onPercent({file, percent: 100});
+              onSuccess({url: res})
+            })
+          }
+        },
+        function (err, data) {
+          onFail(err)
+        }
+      );
+    }
+
+  });
+}
+
+
+// 规范上传图片格式
+const handleUploadName = function (type: string, path: string, file_name: string) {
+  // /img/类型（avatar/category/article）/年月日/md5(文件名+随机字符串+毫秒数)+时间.文件后缀
+  let newFileName =
+    type +
+    '/' +
+    path +
+    '/' +
+    moment(new Date()).format('YYMMDD') +
+    '/' +
+    file_name.split(file_name.substring(file_name.lastIndexOf('.')))[0] +
+    Math.random().toString(36).substring(2) +
+    Date.now() +
+    moment(new Date()).format('HHmm') +
+    file_name.substring(file_name.lastIndexOf('.'));
+  return newFileName;
+};

package/src/utils/vue-sfc-validator.js

@@ -0,0 +1,155 @@
+/**
+ * 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 { parse as parseSFC, compileScript, compileStyle, compileTemplate } from '@vue/compiler-sfc'
+import { generateCodeFrame } from '@vue/shared'
+import { randomString } from '.'
+
+/**
+ * 使用 vue-eslint-parser，校验 vue sfc 是否有效
+ * @param {string} code 源码
+ * @returns {Error[]} 校验出的报错信息
+ */
+export function validateByParse(code) {
+  const { parse: parseVue } = require('vue-eslint-parser')
+  let errors = []
+
+  try {
+    const { templateBody, errors: parseErrors } = parseVue(code, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true
+      }
+    })
+    errors = templateBody?.errors || parseErrors || []
+  } catch (error) {
+    // 此处可捕获到 SyntaxError，如：嵌套双引号未转义的问题
+    errors.push(unify(error))
+  }
+
+  return errors.map(({ message, lineNumber: line, column }) => {
+    if (line && column) {
+      return locateErrorMessage(code, { message, loc: { start: { line, column } } })
+    }
+
+    return { message }
+  })
+}
+
+/**
+ * 使用 @vue/compiler-sfc， 校验 vue sfc 是否有效
+ * @param {string} filename 文件名称
+ * @param {string} code 源码
+ * @returns {Error[]} 校验出的错误信息
+ */
+export function validateByCompile(filename, code) {
+  // validate via parse
+  const { errors, descriptor } = parseSFC(code, {
+    filename,
+    sourceMap: false
+  })
+
+  if (errors.length) {
+    return errors.map((error) => locateErrorMessage(code, error))
+  }
+
+  const id = randomString()
+
+  // validate via compile script
+  let bindingMetadata
+  try {
+    const scriptResult = compileScript(descriptor, { id })
+    bindingMetadata = scriptResult.bindings
+  } catch (error) {
+    // error 可能的类型 string | ParseError (@babel/parser) | CompilerError (compileScript 使用 inlineTemplate 模式时)
+    const scriptError = unify(error)
+
+    // 如果是 ParseError 类型，转换为 locateErrorMessage 可接受的 CompilerError 类型传入
+    if (!scriptError?.loc?.start && scriptError?.loc?.line) {
+      // 只截取原 message 的第一行，后面行数可能已经包含错误的定位信息，避免拼接重复
+      const message = scriptError.message.match(/.*/)[0]
+      const { line, column } = scriptError.loc
+
+      // compileScript 内部抛错误时，可能已定位编译报错信息，但报错所在的行可能有大量字符，此处精简一下
+      return [locateErrorMessage(code, { message, loc: { start: { line, column } } })]
+    }
+
+    return [{ message: scriptError.message }]
+  }
+
+  // validate via compile template
+  const { styles, template, slotted } = descriptor
+  const scoped = styles.some((s) => s.scoped)
+
+  const templateResult = compileTemplate({
+    source: template.content,
+    filename,
+    id,
+    scoped,
+    slotted,
+    compilerOptions: { bindingMetadata }
+  })
+
+  if (templateResult.errors.length) {
+    return templateResult.errors.map(unify).map((error) => locateErrorMessage(code, error))
+  }
+
+  // validate via compile style
+  // 目前暂时没有预处理器，如：less
+  const stylesResult = styles.map(({ content, module }) =>
+    compileStyle({ source: content, filename, id, scoped, modules: Boolean(module) })
+  )
+  const errorsInStyles = stylesResult
+    .filter(({ errors }) => errors.length)
+    .map(({ errors }) => errors)
+    .flat()
+
+  return errorsInStyles
+}
+
+/**
+ * 统一报错的格式
+ * @param {(string | Error)} error 原始错误信息
+ * @returns {Error} 统一格式后的错误信息
+ */
+function unify(error) {
+  if (typeof error === 'string') {
+    return { message: error }
+  }
+
+  return error
+}
+
+/**
+ * 定位报错信息，如果包含报错位置，则追加到 message 中输出
+ * @param {string} originalSource 原始代码
+ * @param {(Error | CompilerError)} error 错误信息
+ * @returns {{message: string}} 可能包含报错位置的错误信息
+ */
+function locateErrorMessage(originalSource, error) {
+  let { loc, message } = error
+
+  if (loc?.start) {
+    const { line, column } = loc.start
+    const errorLineCode = originalSource.split(/\r?\n/)[line - 1]
+
+    // 源码字符串未经格式化，报错所在的行可能有大量字符，截取报错位置附近范围的错误信息，比如：前后 50 字符内
+    const SCOPE = 50
+    const scopeStartIndex = Math.max(0, column - SCOPE)
+    const scopeCode = errorLineCode.slice(scopeStartIndex, column + SCOPE)
+
+    message = `${message} \n ${generateCodeFrame(scopeCode, column - scopeStartIndex)}`
+  }
+
+  return { message }
+}

package/src/views/Button.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-button />
+  </div>
+</template>
+
+<script>
+import { EbizButton } from '@/index.js'
+
+export default {
+  name: 'ButtonDemo',
+  components: {
+    EbizButton
+  }
+}
+</script>
+
+<style scoped>
+</style> 

package/src/views/DataContainer.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-data-container />
+  </div>
+</template>
+
+<script>
+import { EbizDataContainer } from '@/index.js'
+
+export default {
+  name: 'DataContainerDemo',
+  components: {
+    EbizDataContainer
+  }
+}
+</script>
+
+<style scoped>
+</style>