@cuipengyu5/build-plugin-lowcode 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,47 @@
+## 概述
+
+## 使用文档
+
+```ts
+export interface LowcodeOptions {
+  builtinAssets?: Array<string|Assets>; // 会作为内置资产保存到构建产物中
+  extraAssets?: Array<string|Assets>; // 只在调试环境加载到资产包中
+  noParse?: boolean; // 关闭自动解析生成 lowcode meta
+  categories?: string[]; // 组件在组件面板中的分类
+  groups?: string[]; // 组件在组件面板中的 tab 分组
+  baseLibrary?: 'react'|'rax';
+  setterMap?: SetterMap; // 注入 setter
+}
+
+export interface SetterMap {
+  [SetterName: string]: string;
+}
+
+export type Assets = {
+  package: string;
+  version: string;
+  urls: string[];
+  library: string;
+};
+// 示例
+// {
+//   package: 'antd',
+//   version: '4.17.3',
+//   urls: [
+//     'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.js',
+//     'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.css',
+//   ],
+//   library: 'antd',
+// }
+```
+## 开发调试
+### 组件开发
+
+`demo/component`目录下是测试组件的项目，改项目引用了 build-plugin-lowcode，相关配置在在 `demo/component/build.lowcode.js` 中；
+
+可以修改 build-plugin-lowcode 的代码、修改 demo/component/build.lowcode.js 的配置进行调试；
+
+```bash
+# 在 build-plugin-lowcode 根目录下执行启动调试环境
+npm run component:dev
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuipengyu5/build-plugin-lowcode",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "build plugin for component-to-lowcode",
   "main": "src/index.js",
   "keywords": [
@@ -15,7 +15,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitee.com/cuipengyu/cui-lowcode-tools.git",
+    "url": "https://github.com/cuipy2004/lowcode-tools.git",
     "directory": "packages/build-plugin-lowcode"
   },
   "author": "",

package/src/compile/babel.js

@@ -0,0 +1,198 @@
+const glob = require("glob");
+const babel = require("@babel/core");
+const path = require("path");
+const fs = require("fs-extra");
+const getRaxBabelConfig = require("rax-babel-config");
+const getCompileBabel = require("build-plugin-component/src/utils/getCompileBabel");
+const dts = require('build-plugin-component/src/compiler/dts');
+
+const defaultDynamicImportLibraries = [
+  "antd",
+  "@alifd/next",
+  "@alife/next",
+  "@icedesign/base",
+];
+
+const getBabelConfig = ({
+  target,
+  componentLibs = defaultDynamicImportLibraries,
+  rootDir,
+  babelPlugins,
+  babelOptions,
+  type,
+  alias,
+  root = 'lowcode',
+}) => {
+  const params = target === "es" ? { modules: false } : {};
+  let babelConfig;
+  if (type === "react") {
+    babelConfig = getCompileBabel(params, {
+      babelPlugins,
+      babelOptions,
+      rootDir,
+    });
+  } else {
+    babelConfig = getRaxBabelConfig({
+      // Be careful~ change it's value by inlineStyle may cause break-change
+      styleSheet: true,
+      custom: {
+        ignore: ["**/**/*.d.ts"],
+      },
+      ...params,
+    });
+    babelConfig.presets.push([
+      require.resolve("@babel/preset-typescript"),
+      { jsxPragma: "createElement" },
+    ]);
+
+    babelConfig.plugins = [...babelConfig.plugins, ...(babelPlugins || [])];
+  }
+  // generate babel-plugin-import config
+  const plugins = [];
+  componentLibs.forEach((libraryName) => {
+    // check es folder if target is es
+    const pluginOption = {
+      libraryName,
+      style: false, // style file will be require in style.js
+    };
+    if (target === "es") {
+      ["es", "esm"].some((item) => {
+        const dirPath = path.join(rootDir, "node_modules", libraryName, item);
+        const dirExist = fs.existsSync(dirPath);
+
+        if (dirExist) {
+          pluginOption.libraryDirectory = item;
+        }
+
+        return dirExist;
+      });
+    }
+    plugins.push([
+      require.resolve("babel-plugin-import"),
+      pluginOption,
+      libraryName,
+    ]);
+  });
+  babelConfig.plugins = babelConfig.plugins.concat(plugins);
+  if (alias) {
+    const aliasRelative = {};
+    Object.keys(alias).forEach((aliasKey) => {
+      let aliasValue = alias[aliasKey];
+      aliasValue = aliasValue.replace('src', target);
+      aliasRelative[aliasKey] = aliasValue.startsWith("./")
+        ? aliasValue
+        : `./${aliasValue}`;
+    });
+    babelConfig.plugins = babelConfig.plugins.concat([
+      [
+        require.resolve("babel-plugin-module-resolver"),
+        {
+          root: [root, target],
+          alias: aliasRelative,
+        },
+      ],
+    ]);
+  }
+  return babelConfig;
+};
+
+const findGitIgnorePath = (rootDir) => {
+  let dir = rootDir;
+  let gitignorePath;
+  while (dir !== '/') {
+    const tempPath = path.join(dir, ".gitignore")
+    const fileExists = fs.pathExistsSync(tempPath);
+    if (fileExists) {
+      gitignorePath = tempPath;
+      break;
+    } else {
+      dir = path.dirname(dir);
+    }
+  }
+  return gitignorePath;
+}
+
+const reg = {
+  REG_TS: /\.(tsx?)$/,
+  REG_D_TS: /\.d\.ts$/,
+
+  REG_JS: /\.(jsx?|tsx?)$/,
+  REG_SASS: /\.(sa|sc|c)ss$/,
+  REG_LESS: /\.(le|c)ss$/,
+
+  REG_JS_INDEX: /index\.(jsx?|tsx?)$/,
+  REG_SASS_INDEX: /index\.(sa|sc|c)ss$/,
+  REG_LESS_INDEX: /index\.(le|c)ss$/,
+};
+
+
+const babelCompile = async ({
+  source,
+  target,
+  rootDir,
+  userOptions,
+  type = "react",
+}) => {
+  const { REG_SASS, REG_LESS, REG_JS, REG_D_TS } = reg;
+  const filesPath = glob.sync("**/*.*", {
+    cwd: source,
+    ignore: ["node_modules/**"],
+  });
+  const compileInfo = [];
+  ['lib', 'es'].forEach((target) => {
+    const targetPath = `${source}_${target}`;
+    const distDirPath = path.join(rootDir, targetPath);
+    const { babelPlugins = [], babelOptions = [], alias } = userOptions;
+    fs.removeSync(distDirPath);
+    fs.ensureDirSync(distDirPath);
+    filesPath.forEach((filePath) => {
+      const sourceFile = path.join(rootDir, source, filePath);
+      if (!REG_JS.test(filePath) || REG_D_TS.test(filePath)) {
+        // copy file if it does not match REG_JS
+        try {
+          fs.copySync(sourceFile, path.join(distDirPath, filePath));
+          console.log(`file ${filePath} copied`);
+        } catch (err) {
+          throw new Error(err);
+        }
+      } else {
+        const distFile = path.join(distDirPath, filePath.replace(REG_JS, ".js"));
+        const babelConfig = getBabelConfig({
+          target,
+          rootDir,
+          babelOptions,
+          babelPlugins,
+          type,
+          alias,
+        });
+        const { code } = babel.transformFileSync(sourceFile, {
+          filename: distFile,
+          ...babelConfig,
+        });
+        fs.ensureDirSync(path.dirname(distFile));
+        fs.writeFileSync(distFile, code, "utf-8");
+        compileInfo.push({
+          filePath,
+          sourceFile,
+          destPath: distDirPath,
+        });
+      }
+    });
+    // 检查 .gitignore 如果没有产出路径，则增加该配置
+    const gitignorePath = findGitIgnorePath(rootDir);
+    if (gitignorePath) {
+      const gitignoreFile = fs.readFileSync(gitignorePath, "utf-8");
+      if (!(new RegExp(`${targetPath}/`)).test(gitignoreFile)) {
+        const newGitignoreFile = `${targetPath}/\r\n${gitignoreFile}`;
+        fs.writeFileSync(gitignorePath, newGitignoreFile);
+      }
+    }
+  });
+  // 生成声明文件
+  dts(compileInfo, {
+    log: console,
+  })
+};
+
+babelCompile.getBabelConfig = getBabelConfig;
+module.exports = babelCompile;

package/src/compile/meta.js

@@ -0,0 +1,87 @@
+/** 生成 lowcode 的入口文件（meta.js, view.js） */
+const fs = require("fs-extra");
+const path = require("path");
+const babel = require("@babel/core");
+const { getBabelConfig } = require("./babel");
+const { glob } = require("glob");
+
+const getAvailableFileName = ({ fileName, lowcodeDir, rootDir }) => {
+  let finalName = fileName;
+  
+  while (true) {
+    const files = glob.sync(`${finalName}.*`, {
+      cwd: lowcodeDir,
+      ignore: ["node_modules/**"],
+    });
+    const fileHasExists = files.some((f) => {
+      return /\.j|tsx?$/.test(f);
+    });
+    if (fileHasExists) {
+      finalName = `${finalName}_entry`
+    } else {
+      break;
+    }
+  }
+  return finalName;
+};
+
+module.exports = async ({
+  rootDir,
+  tmpDir = ".tmp",
+  lowcodeDir = "lowcode",
+  userOptions,
+  type = "react",
+  package,
+}) => {
+  const { babelPlugins = [], babelOptions = [], alias } = userOptions;
+  const exportsData = {
+    "./prototype": {},
+    "./prototypeView": {},
+    "./*": './*',
+  };
+  const targetExportsMap = {
+    'lib': 'require',
+    'es': 'import',
+  };
+  const fileNameEntryMap = {
+    meta: './prototype',
+    view: './prototypeView',
+  };
+  ['lib', 'es'].forEach((target) => {
+    const babelConfigOptions = {
+      target,
+      babelOptions,
+      babelPlugins,
+      type,
+      alias,
+      rootDir,
+    };
+    const babelConfig = getBabelConfig(babelConfigOptions);
+    ["meta", "view"].forEach((fileName) => {
+      const filePath = path.join(rootDir, tmpDir, `${fileName}.js`);
+      let fileContent = fs.readFileSync(filePath, "utf-8");
+      fileContent = fileContent
+        .replace(new RegExp(path.join(rootDir, "lowcode"), "g"), ".")
+        .replace(new RegExp(path.join(rootDir, "src"), "g"), `../${target}`)
+        .replace(/\.ts(x)?('|")/g, "$2")
+        .replace(/\\\\/g, "/");
+      const targetPath = `${lowcodeDir}_${target}`;
+      if (!package.files.includes(`${targetPath}/`)) {
+        package.files.push(`${targetPath}/`);
+      }
+      const entryName = getAvailableFileName({ fileName, lowcodeDir, rootDir });
+      exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `./${targetPath}/${entryName}.js`;
+      const distFilePath = path.join(rootDir, targetPath, `${entryName}.js`);
+      const { code } = babel.transformSync(fileContent, {
+        filename: distFilePath,
+        ...babelConfig,
+      });
+      fs.ensureDirSync(path.dirname(distFilePath));
+      fs.writeFileSync(distFilePath, code, "utf-8");
+    });
+  });
+  package.exports = {
+    ...package.exports,
+    ...exportsData,
+  };
+};

package/src/config/user-config.js

@@ -0,0 +1,71 @@
+const path = require('path');
+
+module.exports = [
+  {
+    name: 'alias',
+    validation: 'object',
+    configWebpack: (config, alias, context) => {
+      const { rootDir } = context;
+      const aliasWithRoot = {};
+      Object.keys(alias).forEach((key) => {
+        if (path.isAbsolute(alias[key])) {
+          aliasWithRoot[key] = alias[key];
+        } else {
+          aliasWithRoot[key] = path.resolve(rootDir, alias[key]);
+        }
+      });
+      config.merge({
+        resolve: {
+          alias: aliasWithRoot,
+        },
+      });
+    },
+  },
+  {
+    name: 'library',
+    validation: 'string',
+  },
+  {
+    name: 'libraryExport',
+    validation: 'string',
+  },
+  {
+    name: 'libraryTarget',
+    validation: 'string',
+  },
+  {
+    name: 'filename',
+    validation: 'string',
+  },
+  {
+    name: 'sourceMap',
+    validation: 'boolean',
+  },
+  {
+    name: 'minify',
+    validation: 'boolean',
+  },
+  {
+    name: 'type',
+    validation: 'string',
+  },
+  {
+    name: 'devServer',
+    validation: 'object',
+    defaultValue: {
+      logLevel: 'silent',
+      compress: true,
+      disableHostCheck: true,
+      clientLogLevel: 'error',
+      hot: true,
+      quiet: true,
+      overlay: false,
+    },
+    configWebpack: (config, devServer, context) => {
+      const { command } = context;
+      if (command === 'start' && devServer) {
+        config.merge({ devServer });
+      }
+    },
+  },
+];

package/src/constants.js

@@ -0,0 +1,135 @@
+const SUPPORTED_COMMAND = ['start', 'build'];
+
+const COMMON_EXTERNALS = {
+  react: 'var window.React',
+  'react-dom': 'var window.ReactDOM',
+  'prop-types': 'var window.PropTypes',
+  '@alifd/next': 'var window.Next',
+  '@alifd/meet': 'var window.Meet',
+  '@ali/visualengine': 'var window.VisualEngine',
+  '@ali/visualengine-utils': 'var window.VisualEngineUtils',
+  '@ali/lowcode-engine': 'var window.AliLowCodeEngine',
+  '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+  '@ali/lowcode-rax-renderer': 'var window.alilcLowcodeRaxRenderer',
+  rax: 'var window.Rax',
+  antd: 'var window.antd',
+  '@alifd/lowcode-preset-plugin': 'var window.PluginLowcodeEditor',
+  'monaco-editor/esm/vs/editor/editor.api': 'var window.monaco',
+  'monaco-editor/esm/vs/editor/editor.main.js': 'var window.monaco',
+};
+
+const ALILC_COMMON_EXTERNALS = {
+  ...COMMON_EXTERNALS,
+  '@alifd/lowcode-preset-plugin': 'var window.LowcodePresetPlugin',
+};
+
+const DEFAULT_GROUPS = ['精选组件', '原子组件'];
+const DEFAULT_CATEGORIES = [
+  '基础元素',
+  '布局容器类',
+  '表格类',
+  '表单详情类',
+  '帮助类',
+  '对话框类',
+  '业务类',
+  '通用',
+  '引导',
+  '信息输入',
+  '信息展示',
+  '信息反馈',
+];
+
+const STATIC_RESOURCES = {
+  themeVariableUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/variables.css',
+  themeStyleUrl:
+    'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/dist/next.var.min.css',
+  engineCoreCssUrl:
+    'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.16.6/engine-core.css',
+  enginePresetCssUrl:
+    'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.css',
+  engineExtCssUrl: 'https://g.alicdn.com/ali-lowcode/lowcode-engine-ext/1.0.20/engine-ext.css',
+  engineCoreJsUrl: 'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.16.6/engine-core.js',
+  engineExtJsUrl: 'https://g.alicdn.com/ali-lowcode/lowcode-engine-ext/1.0.20/engine-ext.js',
+  enginePresetJsUrl:
+    'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.js',
+  raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.umd.js',
+  raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.css',
+};
+
+const ALILC_STATIC_RESOURCES = {
+  themeVariableUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css',
+  themeStyleUrl:
+    'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css',
+  engineCoreCssUrl:
+    'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.1.7-beta.11/dist/css/engine-core.css',
+  engineExtCssUrl:
+    'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6-beta.25/dist/css/engine-ext.css',
+  enginePresetCssUrl:
+    'https://alifd.alicdn.com/npm/@alilc/lowcode-preset-plugin@0.1.2/dist/lowcode-preset-plugin.css',
+  engineCoreJsUrl:
+    'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.1.7-beta.11/dist/js/engine-core.js',
+  engineExtJsUrl:
+    'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6-beta.25/dist/js/engine-ext.js',
+  enginePresetJsUrl:
+    'https://alifd.alicdn.com/npm/@alilc/lowcode-preset-plugin@0.1.2/dist/lowcode-preset-plugin.js',
+  raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.umd.js',
+  raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.css',
+};
+
+const STATIC_RESOURCES_MAP = {
+  '@ali': STATIC_RESOURCES,
+  '@alilc': ALILC_STATIC_RESOURCES,
+};
+
+const COMMON_EXTERNALS_MAP = {
+  '@ali': COMMON_EXTERNALS,
+  '@alilc': ALILC_COMMON_EXTERNALS,
+};
+
+const BASIC_LIBRARY_VERSION = {
+  '@alifd/next': '1.25.23',
+  '@alifd/meet': '2.6.3',
+  antd: '4.17.3',
+};
+const COMPONENT_PROPS = [
+  'componentName',
+  'title',
+  'description',
+  'docUrl',
+  'screenshot',
+  'icon',
+  'tags',
+  'keywards',
+  'devMode',
+  'npm',
+
+  'props',
+  'configure',
+  'snippets',
+  'group',
+  'category',
+  'priority',
+];
+
+const UNPKG_BASE_URL_MAP = {
+  '@ali': 'https://unpkg.alibaba-inc.com',
+  '@alilc': 'https://unpkg.com',
+};
+
+const META_TYPES = ['', 'dev', 'web', 'mobile', 'design', 'sketch'];
+
+module.exports = {
+  SUPPORTED_COMMAND,
+  COMMON_EXTERNALS,
+  ALILC_COMMON_EXTERNALS,
+  COMMON_EXTERNALS_MAP,
+  DEFAULT_GROUPS,
+  DEFAULT_CATEGORIES,
+  STATIC_RESOURCES,
+  ALILC_STATIC_RESOURCES,
+  STATIC_RESOURCES_MAP,
+  BASIC_LIBRARY_VERSION,
+  COMPONENT_PROPS,
+  UNPKG_BASE_URL_MAP,
+  META_TYPES,
+};