@dckj-npm/lowcode-plugin-code-generator 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alibaba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# 集团低代码引擎 - 出码插件（浏览器里进行出码）
+
+## 简介
+
+本项目是出码模块的对应的浏览器里进行出码的插件
+
+## 使用方法
+
+1. 安装依赖 `npm install --save @alilc/lowcode-plugin-code-generator`
+2. 注册插件:
+
+```ts
+import { plugins } from '@alilc/lowcode-engine';
+import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
+
+// 在你的初始化函数中：
+await plugins.register(CodeGenPlugin);
+
+// 如果您不希望自动加上出码按钮，则可以这样注册
+await plugins.register(CodeGenPlugin, { disableCodeGenActionBtn: true });
+
+```
+
+然后运行你的低代码编辑器项目即可。
+
+参考：低代码编辑器的 Demo: <https://github.com/alibaba/lowcode-demo>
+
+## 插件 API
+
+本插件提供了出码的 API，注册了插件后, 可以这么样来用:
+
+```js
+import { plugins } from '@alilc/lowcode-engine';
+
+const codeGenResult = plugins.codeGenerator.generateCode({
+  solution: 'icejs',
+  schema: await ctx.project.exportSchema(),
+});
+
+console.log('出码结果:', codeGenResult); // 这里就是出码结果
+
+```
+
+## 本地开发
+
+常规两步即可开发调试：`npm i && npm start`
+
+## 共建
+
+欢迎参与共建，欢迎直接 fork 一份改改，补充您所需要的特性或修复 bug，然后提 PR 过来:
+
+-- 代码仓库：<https://github.com/alibaba/lowcode-code-generator-demo>

package/es/components/CodeGenActionBtn/CodeGenActionBtn.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './CodeGenActionBtn.scss';
+import type { ILowCodePluginContext } from '@alilc/lowcode-engine';
+import { ProjectSchema } from '@alilc/lowcode-types';
+export declare function CodeGenActionBtn({ ctx }: {
+    ctx: ILowCodePluginContext;
+}): JSX.Element;
+export declare function fixSchema(schema: ProjectSchema): Promise<ProjectSchema>;

package/es/components/CodeGenActionBtn/CodeGenActionBtn.js

@@ -0,0 +1,196 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import './CodeGenActionBtn.scss';
+import React, { useState } from 'react';
+import * as CodeGenerator from '@dckj-npm/lowcode-code-generator/standalone-loader';
+import { TransformStage } from '@alilc/lowcode-types';
+import { Button, Drawer, Loading, Message } from '@alifd/next';
+import coerce from 'semver/functions/coerce';
+import { CodeGenResult } from '../CodeGenResult';
+export function CodeGenActionBtn(_ref) {
+  var ctx = _ref.ctx;
+  var _useState = useState({
+      visible: false,
+      hasError: false,
+      error: null,
+      loading: false,
+      result: null,
+      schema: null,
+      originalSchema: null
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var originalSchema, schema, result;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            // 打开基于 Gravity 的编辑器/出码预览器
+            setState(function (prev) {
+              return _extends({}, prev, {
+                loading: true,
+                visible: true,
+                hasError: false
+              });
+            });
+
+            // 获取 schema，并修正
+            _context.next = 4;
+            return ctx.project.exportSchema(TransformStage.Save);
+          case 4:
+            originalSchema = _context.sent;
+            _context.next = 7;
+            return fixSchema(originalSchema);
+          case 7:
+            schema = _context.sent;
+            console.log('got schema:222222 ', schema);
+            setState(function (prev) {
+              return _extends({}, prev, {
+                schema: schema,
+                originalSchema: originalSchema
+              });
+            });
+
+            // 出码...
+            _context.next = 12;
+            return CodeGenerator.generateCode({
+              solution: 'vuejs3',
+              schema: schema,
+              flattenResult: true
+            });
+          case 12:
+            result = _context.sent;
+            console.log('generated: ', result);
+            setState(function (prev) {
+              return _extends({}, prev, {
+                loading: false,
+                result: result
+              });
+            });
+            _context.next = 21;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](0);
+            console.error('failed to run code generator: ', _context.t0);
+            setState(function (prev) {
+              return _extends({}, prev, {
+                hasError: true,
+                error: _context.t0 instanceof Error ? _context.t0 : new Error("" + ((_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message) || _context.t0))
+              });
+            });
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 17]]);
+    }));
+    return function handleClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: handleClick
+  }, "\u51FA\u7801"), /*#__PURE__*/React.createElement(Drawer, {
+    visible: state.visible,
+    title: "\u51FA\u7801\u7ED3\u679C",
+    width: "95vw",
+    onClose: function onClose() {
+      setState(function (prev) {
+        return _extends({}, prev, {
+          visible: false
+        });
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-plugin-result"
+  }, function () {
+    if (state.hasError) {
+      var _state$error;
+      return /*#__PURE__*/React.createElement(Message, {
+        type: "error",
+        title: "\u51FA\u9519\u4E86"
+      }, (_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.message);
+    }
+    if (state.loading) {
+      return /*#__PURE__*/React.createElement(Loading, {
+        className: "code-gen-plugin-loading",
+        tip: "\u6B63\u5728\u51FA\u7801..."
+      });
+    }
+    return /*#__PURE__*/React.createElement(CodeGenResult, {
+      result: state.result,
+      schema: state.schema,
+      originalSchema: state.originalSchema
+    });
+  }())));
+}
+export function fixSchema(_x) {
+  return _fixSchema.apply(this, arguments);
+}
+function _fixSchema() {
+  _fixSchema = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(schema) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", deepClone(_extends({}, schema, {
+            componentsMap: schema.componentsMap.filter(function (c) {
+              return c["package"];
+            }) // 去掉没有 package 的组件
+            .map(function (c) {
+              // 修正版本号（对于没有有效版本号的组件，默认使用 latest）
+              if (!isValidVersion(c.version)) {
+                console.warn('[WARN] got invalid version "%o" for component "%s", use "latest" as fallback', c.version, c);
+                return _extends({}, c, {
+                  version: 'latest'
+                });
+              }
+
+              // 修正 @alifd/pro-layout 的版本
+              // -- 这个包没有 ^0.1.0 的版本，这里暂且替换下
+              if (c["package"] === '@alifd/pro-layout' && c.version === '^0.1.0') {
+                console.warn('[WARN] got invalid version "%o" for "@alifd/pro-layout"! use "latest" as fallback', c.version);
+                return _extends({}, c, {
+                  version: 'latest'
+                });
+              }
+              return c;
+            })
+          })));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _fixSchema.apply(this, arguments);
+}
+function deepClone(x) {
+  try {
+    return JSON.parse(JSON.stringify(x));
+  } catch (e) {
+    throw new Error("failed to clone schema -- " + e);
+  }
+}
+function isValidVersion(version) {
+  if (!version) {
+    return false;
+  }
+
+  // 对于一些明显非法的版本号过滤下
+  if (version === '{{version}}' || version === 'null' || version === 'undefined') {
+    return false;
+  }
+
+  // 对于 latest/beta/rc 这样的 tag 版本号要支持下
+  if (/^[a-z][a-z0-9]+([a-z0-9-]+)?$/i.test(version)) {
+    return true;
+  }
+
+  // 最后支持下所有 semver 能识别的版本
+  return coerce(version) !== null;
+}

package/es/components/CodeGenActionBtn/CodeGenActionBtn.scss

@@ -0,0 +1,13 @@
+.code-gen-plugin-loading {
+  width: 100%;
+  margin: 2em auto;
+}
+
+.code-gen-plugin-result {
+  width: 100%;
+  .next-message-error {
+    .next-message-content {
+      white-space: pre-wrap;
+    }
+  }
+}

package/es/components/CodeGenActionBtn/index.d.ts

@@ -0,0 +1 @@
+export * from './CodeGenActionBtn';

package/es/components/CodeGenActionBtn/index.js

@@ -0,0 +1 @@
+export * from './CodeGenActionBtn';

package/es/components/CodeGenPreview/CodeGenPreview.d.ts

@@ -0,0 +1,8 @@
+import type { GravityCode } from '../GravityCode';
+import './CodeGenPreview.scss';
+export declare type CodeGenPreviewProps = {
+    code: GravityCode | null;
+    height: string | number;
+    refresh: string | number;
+};
+export declare function CodeGenPreview(props: CodeGenPreviewProps): any;

package/es/components/CodeGenPreview/CodeGenPreview.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Tab } from '@alifd/next';
+import { useIsInIntranet } from './useIsInIntranet';
+import { GravityPreview } from '../GravityPreview';
+import { CodeSandboxPreview } from '../CodeSandboxPreview';
+import { ForceUpdate } from '../GravityPreview/ForceUpdate';
+import './CodeGenPreview.scss';
+export function CodeGenPreview(props) {
+  var isInIntranet = useIsInIntranet();
+  var previewPanes = [{
+    title: '基于 Gravity 预览',
+    available: isInIntranet,
+    render: function render() {
+      return /*#__PURE__*/React.createElement(GravityPreview, props);
+    }
+  }, {
+    title: '基于 CodeSandbox 预览',
+    available: true,
+    render: function render() {
+      return /*#__PURE__*/React.createElement(CodeSandboxPreview, props);
+    }
+  }];
+  var availablePreviewPanes = previewPanes.filter(function (pane) {
+    return pane.available;
+  });
+  if (availablePreviewPanes.length === 1) {
+    return availablePreviewPanes[0].render();
+  }
+  return /*#__PURE__*/React.createElement(Tab, {
+    className: "code-gen-preview-tabs",
+    size: "small"
+  }, availablePreviewPanes.map(function (pane) {
+    return /*#__PURE__*/React.createElement(Tab.Item, {
+      title: pane.title,
+      key: pane.title
+    }, /*#__PURE__*/React.createElement(ForceUpdate, {
+      watchKey: props.refresh
+    }, pane.render()));
+  }));
+}

package/es/components/CodeGenPreview/CodeGenPreview.scss

@@ -0,0 +1,16 @@
+.code-gen-preview-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .next-tabs-bar {
+    flex-shrink: 0;
+  }
+
+  .next-tabs-content {
+    flex: 1;
+    .next-tabs-tabpane {
+      height: 100%;
+    }
+  }
+}

package/es/components/CodeGenPreview/fixPreviewCode.d.ts

@@ -0,0 +1,2 @@
+import { GravityCode } from '../GravityCode/GravityCode';
+export declare function fixPreviewCode(code: GravityCode | null, unused?: unknown): GravityCode | null;

package/es/components/CodeGenPreview/fixPreviewCode.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+// 默认生成的代码不符合在线预览的规则，需要处理下
+export function fixPreviewCode(code, unused) {
+  var _JSON$parse, _fixedCode$modules$P;
+  if (!code) {
+    return null;
+  }
+  var fixedModules = Object.entries(code.modules || {})
+  // 去掉隐藏文件和 html 以及 md 等无用文件:
+  .filter(function (_ref) {
+    var fpath = _ref[0];
+    return !fpath.startsWith('/.') && !fpath.endsWith('.html') && !fpath.endsWith('.md');
+  })
+  // 所有的 jsx 文件改成 js 文件（因为 gravity 不支持 jsx）
+  .map(function (_ref2) {
+    var fpath = _ref2[0],
+      module = _ref2[1];
+    return [fpath.replace(/\.jsx$/, '.js'), module];
+  }).map(function (_ref3) {
+    var fpath = _ref3[0],
+      module = _ref3[1];
+    return [fpath.replace(/\.scss$/, '.css'), module];
+  }).reduce(function (acc, _ref4) {
+    var _extends2;
+    var fpath = _ref4[0],
+      module = _ref4[1];
+    return _extends({}, acc, (_extends2 = {}, _extends2[fpath] = _extends({}, module, {
+      fpath: fpath,
+      code: module.code
+      // 所有的 import xxx from '@/yyy' 转换为 import xxx from '/src/yyy'
+      .replace(/import\s+([^\s]+)\s+from\s+['"]@\/([^'"]+)['"]/g, function (_, name, path) {
+        return "import " + name + " from '/src/" + path + "'";
+      })
+      // 所有的 import styles from 'xxx.scss' 转换为 import styles from '/src/xxx.css'
+      .replace(/import\s+([^\s]+)\s+from\s+['"]([^'"]+)\.scss['"]/g, function (_, name, path) {
+        return "import " + name + " from '" + path + ".css'";
+      })
+    }), _extends2));
+  }, {});
+  var fixedCode = _extends({}, code, {
+    modules: fixedModules
+  });
+  fixedCode.modules['/src/app.js'] = _extends({}, fixedCode.modules['/src/app.js'], {
+    code: "\n// \u6CE8\u610F\uFF1A\u4E3A\u4E86\u65B9\u4FBF\u5728\u6D4F\u89C8\u5668\u4E2D\u8FDB\u884C\u9884\u89C8\uFF0C\u8FD9\u91CC\u7B80\u5316\u4E86\u4E00\u4E9B\u5185\u5BB9\nimport './shims';\nimport './global.css';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport Page from '" + Object.keys(fixedModules).find(function (fpath) {
+      return fpath.startsWith('/src/pages/');
+    }) + "';\n\nReactDOM.render(<Page/>, document.getElementById('root'));\n"
+  });
+
+  // 一些垫片，用于解决一些不能被 gravity 解析的问题
+  // 1. @alilc/lowcode-materials 中有部分代码直接使用了全局变量 PropTypes...
+  fixedCode.modules['/src/shims.js'] = {
+    fpath: '/src/shims.js',
+    code: "\n// \u4E00\u4E9B\u57AB\u7247\u4EE3\u7801\uFF0C\u7528\u6765\u89E3\u51B3\u76F4\u63A5\u5728\u6D4F\u89C8\u5668\u4E2D\u9884\u89C8\u7684\u65F6\u5019\u7684\u95EE\u9898\nimport PropTypes from 'prop-types';\n\nwindow.PropTypes = PropTypes;\n"
+  };
+  fixedCode.modules['/package.json'] = _extends({}, fixedCode.modules['/package.json'], {
+    code: JSON.stringify({
+      name: 'demo',
+      version: '1.0.0',
+      dependencies: _extends({
+        react: '^16.8.3',
+        'react-dom': '^16.8.3'
+      }, (_JSON$parse = JSON.parse(((_fixedCode$modules$P = fixedCode.modules['/package.json']) === null || _fixedCode$modules$P === void 0 ? void 0 : _fixedCode$modules$P.code) || '{}')) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.dependencies)
+    })
+  });
+  fixedCode.modules = pickKeys(fixedCode.modules, [
+  // '/tsconfig.json',
+  // '/jsconfig.json',
+  // '/build.json',
+  // '/abc.json',
+  '/package.json', '/src/routes.js', '/src/app.js', '/src/constants.js', '/src/utils.js', '/src/i18n.js', '/src/global.css', '/src/index.js', '/src/shims.js'].concat(Object.keys(fixedModules).filter(function (fpath) {
+    return fpath.startsWith('/src/pages/');
+  })));
+  fixedCode.modules['/src/routes.js'] = _extends({}, fixedCode.modules['/src/routes.js'], {
+    code: "\n"
+  });
+  fixedCode.modules['/src/global.css'] = {
+    fpath: '/src/global.css',
+    code: "\nbody {\n  -webkit-font-smoothing: antialiased;\n}\n"
+  };
+  Object.assign(fixedCode.modules, {
+    '/src/index.html': {
+      code: '<div id="root"></div>',
+      fpath: '/src/index.html'
+    },
+    '/src/index.less': {
+      fpath: '/src/index.less',
+      code: "\n@import \"~@alifd/next/dist/next.css\";\n@import '~@alifd/pro-layout/dist/AlifdProLayout.css';\n"
+    }
+  });
+  fixedCode.type = 'riddle';
+  return fixedCode;
+}
+function pickKeys(data, keys) {
+  return keys.reduce(function (acc, key) {
+    if (data[key]) {
+      var _extends3;
+      return _extends({}, acc, (_extends3 = {}, _extends3[key] = data[key], _extends3));
+    }
+    return acc;
+  }, {});
+}

package/es/components/CodeGenPreview/index.d.ts

@@ -0,0 +1 @@
+export * from './CodeGenPreview';

package/es/components/CodeGenPreview/index.js

@@ -0,0 +1 @@
+export * from './CodeGenPreview';

package/es/components/CodeGenPreview/useIsInIntranet.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 判断是否在内网环境中中
+ */
+export declare function useIsInIntranet(): any;

package/es/components/CodeGenPreview/useIsInIntranet.js

@@ -0,0 +1,66 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect } from 'react';
+
+// 预先检测下是否在内网环境中
+var isInIntranetPromise = detectIsInIntranet();
+
+/**
+ * 判断是否在内网环境中中
+ */
+export function useIsInIntranet() {
+  var _React$useState = React.useState({
+      isInIntranet: false
+    }),
+    state = _React$useState[0],
+    setState = _React$useState[1];
+  useEffect(function () {
+    // 如果预加载失败了，可以尝试重试下
+    isInIntranetPromise["catch"](function () {
+      isInIntranetPromise = detectIsInIntranet();
+      return isInIntranetPromise;
+    }).then(function (isInIntranet) {
+      setState({
+        isInIntranet: isInIntranet
+      });
+    });
+  }, []);
+  return state.isInIntranet;
+}
+
+/**
+ * 判断是否在内网环境中中
+ */
+function detectIsInIntranet() {
+  return _detectIsInIntranet.apply(this, arguments);
+}
+function _detectIsInIntranet() {
+  _detectIsInIntranet = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var res;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return fetch('https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-materials/1.1.0/schema.json');
+        case 3:
+          res = _context.sent;
+          if (!res.ok) {
+            _context.next = 6;
+            break;
+          }
+          return _context.abrupt("return", true);
+        case 6:
+          return _context.abrupt("return", false);
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](0);
+          return _context.abrupt("return", false);
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+  return _detectIsInIntranet.apply(this, arguments);
+}

package/es/components/CodeGenResult/CodeGenResult.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './CodeGenResult.scss';
+import { Result } from '@alilc/lowcode-code-generator/standalone-loader';
+import { ProjectSchema } from '@alilc/lowcode-types';
+export declare function CodeGenResult({ result, schema }: {
+    result: Result | null | undefined;
+    schema: ProjectSchema | null;
+    originalSchema: ProjectSchema | null;
+}): JSX.Element;