@cuipengyu5/build-plugin-lowcode 0.0.1 → 0.0.2

package/src/utils/index.js

@@ -0,0 +1,252 @@
+const _ = require('lodash');
+const path = require('path');
+const fse = require('fs-extra');
+const hbs = require('handlebars');
+const glob = require('glob');
+const parseProps = require('./parse-props');
+
+/**
+ * @description generate js file as webpack entry
+ * @param {String} template template path
+ * @param {String} filename
+ * @param {String} rootDir
+ * @param {Object} params params for compile template content
+ * @returns {String} path of entry file
+ */
+function generateEntry({ template, filename = 'index.js', rootDir = process.cwd(), params, tmpDirName = '.tmp' }) {
+  const hbsTemplatePath = path.join(__dirname, `../templates/${template}`);
+  const hbsTemplateContent = fse.readFileSync(hbsTemplatePath, 'utf-8');
+  const compileTemplateContent = hbs.compile(hbsTemplateContent);
+
+  const tempDir = path.join(rootDir, tmpDirName);
+  const jsPath = path.join(tempDir, filename);
+
+  const jsTemplateContent = compileTemplateContent(params);
+  fse.outputFileSync(jsPath, jsTemplateContent);
+
+  return jsPath;
+}
+
+function parseNpmName(npmName) {
+  if (typeof npmName !== 'string') {
+    throw new TypeError('Expected a string');
+  }
+  const matched =
+    npmName.charAt(0) === '@' ? /(@[^\/]+)\/(.+)/g.exec(npmName) : [npmName, '', npmName];
+  if (!matched) {
+    throw new Error(`[parse-package-name] "${npmName}" is not a valid string`);
+  }
+  const scope = matched[1];
+  const name = (matched[2] || '').replace(/\s+/g, '').replace(/[\-_]+([^\-_])/g, ($0, $1) => {
+    return $1.toUpperCase();
+  });
+  const uniqueName =
+    (matched[1]
+      ? matched[1].charAt(1).toUpperCase() +
+        matched[1].slice(2).replace(/[\-_]+([^\-_])/g, ($0, $1) => {
+          return $1.toUpperCase();
+        })
+      : '') +
+    name.charAt(0).toUpperCase() +
+    name.slice(1);
+  return {
+    scope,
+    name,
+    uniqueName,
+  };
+}
+
+function camel2KebabComponentName(camel) {
+  return camel
+    .replace(/[A-Z]/g, (item) => {
+      return `-${item.toLowerCase()}`;
+    })
+    .replace(/^\-/, '');
+}
+
+function kebab2CamelComponentName(kebab) {
+  const camel = kebab.charAt(0).toUpperCase() + kebab.substr(1);
+  return camel.replace(/-([a-z])/g, (keb, item) => {
+    return item.toUpperCase();
+  });
+}
+
+function generateComponentList(components) {
+  const componentList = [
+    {
+      title: '常用',
+      icon: '',
+      children: [],
+    },
+    {
+      title: '容器',
+      icon: '',
+      children: [],
+    },
+    {
+      title: '导航',
+      icon: '',
+      children: [],
+    },
+    {
+      title: '内容',
+      icon: '',
+      children: [],
+    },
+    {
+      title: 'Feedback 反馈',
+      icon: '',
+      children: [],
+    },
+  ];
+
+  components.forEach((comp) => {
+    const category = comp.category || '其他';
+    let target = componentList.find((item) => item.title === category);
+    if (!target) {
+      target = {
+        title: category,
+        icon: '',
+        children: [],
+      };
+
+      componentList.push(target);
+    }
+
+    if (comp.snippets) {
+      target.children.push({
+        componentName: comp.componentName,
+        title: comp.title || comp.componentName,
+        icon: '',
+        package: comp.npm.pkg,
+        snippets: comp.snippets || [],
+      });
+    }
+  });
+  return componentList;
+}
+
+function replacer(key, value) {
+  if (typeof value === 'function') {
+    return {
+      type: 'JSFunction',
+      value: String(value),
+    };
+  }
+  return value;
+}
+
+function isAsyncFunction(fn) {
+  return fn[Symbol.toStringTag] === 'AsyncFunction';
+}
+function reviewer(key, value) {
+  if (!value) {
+    return value;
+  }
+  if (key === 'icon') {
+    if (typeof value === 'object') {
+      return {
+        type: 'smile',
+        size: 'small',
+      };
+    }
+  }
+  if (typeof value === 'object') {
+    if (value.type === 'JSFunction') {
+      let _value = value.value && value.value.trim();
+      let template = `
+        return function lowcode() {
+          const self = this;
+          try {
+            return (${_value}).apply(self, arguments);
+          } catch(e) {
+            console.log('call function which parsed by lowcode for key ${key} failed: ', e);
+            return e.message;
+          }
+        };`;
+      try {
+        return Function(template)();
+      } catch (e) {
+        if (e && e.message.includes("Unexpected token '{'")) {
+          console.log('method need add funtion prefix');
+          _value = `function ${_value}`;
+          template = `
+          return function lowcode() {
+            const self = this;
+            try {
+              return (${_value}).apply(self, arguments);
+            } catch(e) {
+              console.log('call function which parsed by lowcode for key ${key} failed: ', e);
+              return e.message;
+            }
+          };`;
+          return Function(template)();
+        }
+        console.error('parse lowcode function error: ', e);
+        console.error(value);
+        return value;
+      }
+    }
+  }
+  return value;
+}
+
+function toJson(object, replacer) {
+  return JSON.stringify(object, replacer || this.replacer, 2);
+}
+
+function parseJson(json) {
+  const input = typeof json === 'string' ? json : JSON.stringify(json);
+  return JSON.parse(input, this.reviewer);
+}
+
+function asyncDebounce(func, wait) {
+  const debounced = _.debounce(async (resolve, reject, bindSelf, args) => {
+    try {
+      const result = await func.bind(bindSelf)(...args);
+      resolve(result);
+    } catch (error) {
+      reject(error);
+    }
+  }, wait);
+
+  // This is the function that will be bound by the caller, so it must contain the `function` keyword.
+  function returnFunc(...args) {
+    return new Promise((resolve, reject) => {
+      debounced(resolve, reject, this, args);
+    });
+  }
+
+  return returnFunc;
+}
+
+function getUsedComponentMetas(rootDir, lowcodeDir = 'lowcode', metaFilename, components) {
+  let metaPaths = glob.sync(
+    path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`),
+  );
+  if (metaPaths && metaPaths.length) {
+    metaPaths = metaPaths.map((item) => {
+      return item.slice(
+        path.resolve(rootDir, lowcodeDir).length + 1,
+        item.lastIndexOf(metaFilename) - 1,
+      );
+    });
+  }
+  return components
+    ? components.filter((component) => {
+        return metaPaths.includes(camel2KebabComponentName(component));
+      })
+    : metaPaths.map((dir) => kebab2CamelComponentName(dir));
+}
+
+module.exports = {
+  toJson,
+  parseProps,
+  parseNpmName,
+  generateEntry,
+  asyncDebounce,
+  generateComponentList,
+  camel2KebabComponentName,
+  kebab2CamelComponentName,
+  getUsedComponentMetas,
+};

package/src/utils/npm.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const { pathExists } = require('fs-extra');
+const spawn = require('cross-spawn-promise');
+
+async function isNPMInstalled(args) {
+  return pathExists(path.join(args.workDir, 'node_modules'));
+}
+
+async function install(args) {
+  if (await isNPMInstalled(args)) return;
+  const { workDir, npmClient = 'tnpm' } = args;
+  try {
+    await spawn(npmClient, ['i'], { stdio: 'inherit', cwd: workDir });
+  } catch (e) {
+    // TODO
+  }
+}
+
+async function isNPMModuleInstalled(args, name) {
+  const modulePkgJsonPath = path.resolve(args.workDir || '', 'node_modules', name, 'package.json');
+  return pathExists(modulePkgJsonPath);
+}
+
+async function installModule(args, name) {
+  if (await isNPMModuleInstalled(args, name)) return;
+  const { workDir, npmClient = 'tnpm' } = args;
+  try {
+    await spawn(npmClient, [
+      'i', 
+      name, 
+      npmClient === 'npm' ? '--registry=https://registry.npmmirror.com' : ''
+    ], { stdio: 'inherit', cwd: workDir });
+  } catch (e) {
+    // TODO
+  }
+}
+
+module.exports = {
+  installModule,
+  install,
+};

package/src/utils/parse-props.js

@@ -0,0 +1,261 @@
+function propConfigToFieldConfig(propConfig) {
+  const { name, description } = propConfig;
+  const title = {
+    label: {
+      type: 'i18n',
+      'en-US': name,
+      'zh-CN': (description && description.slice(0, 10)) || name,
+    },
+    tip: description ? `${name} | ${description}` : undefined,
+  };
+  const setter = propConfig.setter ? propConfig.setter : propTypeToSetter(propConfig.propType);
+  delete propConfig.propType;
+  return {
+    title,
+    ...propConfig,
+    // TODO 这边直接用propConfig，将setter丢在propconfig里，需要确认是否在PropConfig扩展还是换实现
+    setter,
+  };
+}
+
+function propTypeToSetter(propType) {
+  let typeName;
+  let isRequired = false;
+  if (typeof propType === 'string') {
+    typeName = propType;
+  } else if (typeof propType === 'object') {
+    typeName = propType.type;
+    isRequired = propType.isRequired;
+  } else {
+    typeName = 'string';
+  }
+  // TODO: use mixinSetter wrapper
+  switch (typeName) {
+    case 'string':
+      return {
+        componentName: 'StringSetter',
+        isRequired,
+        initialValue: '',
+      };
+    case 'number':
+      return {
+        componentName: 'NumberSetter',
+        isRequired,
+        initialValue: 0,
+      };
+    case 'bool':
+      return {
+        componentName: 'BoolSetter',
+        isRequired,
+        initialValue: false,
+      };
+    case 'oneOf':
+      const dataSource = (propType.value || []).map((value, index) => {
+        const t = typeof value;
+        return {
+          label:
+            t === 'string' || t === 'number' || t === 'boolean' ? String(value) : `value ${index}`,
+          value,
+        };
+      });
+      const componentName = dataSource.length >= 4 ? 'SelectSetter' : 'RadioGroupSetter';
+      return {
+        componentName,
+        props: { dataSource, options: dataSource },
+        isRequired,
+        initialValue: dataSource[0] ? dataSource[0].value : null,
+      };
+
+    case 'element':
+    case 'node': // TODO: use Mixin
+      return {
+        // slotSetter
+        componentName: 'SlotSetter',
+        props: {
+          mode: typeName,
+        },
+        isRequired,
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      };
+    case 'shape':
+    case 'exact':
+      const items = (propType.value || []).map((item) => propConfigToFieldConfig(item));
+      return {
+        componentName: 'ObjectSetter',
+        props: {
+          config: {
+            items,
+            extraSetter: typeName === 'shape' ? propTypeToSetter('any') : null,
+          },
+        },
+        isRequired,
+        initialValue: (field) => {
+          const data = {};
+          items.forEach((item) => {
+            let initial = item.defaultValue;
+            if (initial == null && item.setter && typeof item.setter === 'object') {
+              initial = item.setter.initialValue;
+            }
+            data[item.name] = initial
+              ? typeof initial === 'function'
+                ? initial(field)
+                : initial
+              : null;
+          });
+          return data;
+        },
+      };
+    case 'object':
+    case 'objectOf':
+      return {
+        componentName: 'ObjectSetter',
+        props: {
+          config: {
+            extraSetter: propTypeToSetter(typeName === 'objectOf' ? propType.value : 'any'),
+          },
+        },
+        isRequired,
+        initialValue: {},
+      };
+    case 'array':
+    case 'arrayOf':
+      return {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: propTypeToSetter(typeName === 'arrayOf' ? propType.value : 'any'),
+        },
+        isRequired,
+        initialValue: [],
+      };
+    case 'func':
+      return {
+        componentName: 'FunctionSetter',
+        isRequired,
+      };
+    case 'color':
+      return {
+        componentName: 'ColorSetter',
+        isRequired,
+      };
+    case 'oneOfType':
+      return {
+        componentName: 'MixedSetter',
+        props: {
+          // TODO:
+          setters: (propType.value || []).map((item) => propTypeToSetter(item)),
+        },
+        isRequired,
+      };
+    default:
+    // do nothing
+  }
+  return {
+    componentName: 'MixedSetter',
+    isRequired,
+    props: {},
+  };
+}
+
+const EVENT_RE = /^on|after|before[A-Z][\w]*$/;
+
+module.exports = function (metadata) {
+  const { configure = {} } = metadata;
+  // TODO types后续补充
+  let extendsProps = null;
+  if (configure.props) {
+    if (Array.isArray(configure.props)) {
+      return metadata;
+    }
+    const { isExtends, override = [] } = configure.props;
+    // 不开启继承时，直接返回configure配置
+    if (!isExtends) {
+      return {
+        ...metadata,
+        configure: {
+          ...configure,
+          props: [...override],
+        },
+      };
+    }
+
+    extendsProps = {};
+    // 开启继承后，缓存重写内容的配置
+    override.forEach((prop) => {
+      extendsProps[prop.name] = prop;
+    });
+  }
+
+  if (!metadata.props) {
+    return {
+      ...metadata,
+      configure: {
+        ...configure,
+        props: [],
+      },
+    };
+  }
+  const { component = {}, supports = {} } = configure;
+  const supportedEvents = supports.events ? null : [];
+  const props = [];
+
+  metadata.props.forEach((prop) => {
+    const { name, propType, description } = prop;
+    if (
+      name === 'children' &&
+      (component.isContainer || propType === 'node' || propType === 'element' || propType === 'any')
+    ) {
+      if (component.isContainer !== false) {
+        component.isContainer = true;
+        props.push(propConfigToFieldConfig(prop));
+        return;
+      }
+    }
+
+    if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) {
+      if (supportedEvents) {
+        supportedEvents.push({
+          name,
+          description,
+        });
+        supports.events = supportedEvents;
+      }
+      return;
+    }
+
+    if (name === 'className' && (propType === 'string' || propType === 'any')) {
+      if (supports.className == null) {
+        supports.className = true;
+      }
+      return;
+    }
+
+    if (name === 'style' && (propType === 'object' || propType === 'any')) {
+      if (supports.style == null) {
+        supports.style = true;
+      }
+      return;
+    }
+
+    // 存在覆盖配置时
+    if (extendsProps) {
+      if (name in extendsProps) {
+        prop = extendsProps[name];
+      }
+    }
+
+    props.push(propConfigToFieldConfig(prop));
+  });
+
+  return {
+    ...metadata,
+    configure: {
+      ...configure,
+      props,
+      supports,
+      component,
+    },
+  };
+};

package/demo/antd-setter-map/src/index.tsx

@@ -1,5 +0,0 @@
-
-import Button from './components/button';
-
-export const bizCssPrefix = 'bizpack';
-export { Button };

package/demo/component/src/index.tsx

@@ -1,6 +0,0 @@
-
-import Button from './components/button';
-import Input from './components/input';
-
-export const bizCssPrefix = 'bizpack';
-export { Button, Input };