@gant-lowcode/plugin-code-generator 1.0.10 → 2.0.1

package/lib/components/code-gen-action/index.js

@@ -0,0 +1,336 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CodeGenActionBtn = CodeGenActionBtn;
+exports.fixSchema = fixSchema;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _drawer = _interopRequireDefault(require("antd/lib/drawer"));
+var _space = _interopRequireDefault(require("antd/lib/space"));
+var _button = _interopRequireDefault(require("antd/lib/button"));
+var _spin = _interopRequireDefault(require("antd/lib/spin"));
+var _alert = _interopRequireDefault(require("antd/lib/alert"));
+var _message2 = _interopRequireDefault(require("antd/lib/message"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _standaloneLoader = require("@gant-lowcode/code-generator/standalone-loader");
+var _lowcodeTypes = require("@gant-lowcode/lowcode-types");
+var _coerce = _interopRequireDefault(require("semver/functions/coerce.js"));
+var _compare = _interopRequireDefault(require("semver/functions/compare.js"));
+var _index = require("../code-gen-result/index");
+require("./index.less");
+var _icons = require("@ant-design/icons");
+var _fileSaver = _interopRequireDefault(require("file-saver"));
+var _ahooks = require("ahooks");
+function CodeGenActionBtn(_ref) {
+  var ctx = _ref.ctx;
+  var _useState = (0, _react.useState)({
+      open: false,
+      hasError: false,
+      error: null,
+      loading: false,
+      result: null,
+      schema: null,
+      originalSchema: null
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var codeGenResultRef = (0, _react.useRef)(null);
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var getProjectSchema, originalSchema, schema, result;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            // 打开基于 Gravity 的编辑器/出码预览器
+            setState(function (prev) {
+              return (0, _extends2["default"])({}, prev, {
+                loading: true,
+                open: true,
+                hasError: false
+              });
+            });
+            console.log("--ctx", ctx);
+            getProjectSchema = ctx.config.get("getProjectSchema");
+            if (!getProjectSchema) {
+              _context.next = 10;
+              break;
+            }
+            _context.next = 7;
+            return getProjectSchema();
+          case 7:
+            originalSchema = _context.sent;
+            _context.next = 13;
+            break;
+          case 10:
+            _context.next = 12;
+            return ctx.project.exportSchema(_lowcodeTypes.IPublicEnumTransformStage.Save);
+          case 12:
+            originalSchema = _context.sent;
+          case 13:
+            _context.next = 15;
+            return fixSchema(originalSchema);
+          case 15:
+            schema = _context.sent;
+            console.log("got schema: ", schema);
+            setState(function (prev) {
+              return (0, _extends2["default"])({}, prev, {
+                schema: schema,
+                originalSchema: originalSchema
+              });
+            });
+
+            // 出码...
+            _context.next = 20;
+            return (0, _standaloneLoader.generateCode)({
+              solution: "gantLegacy",
+              schema: schema,
+              flattenResult: true,
+              builderOptions: {
+                // mode: 'fully',
+                rootPaths: ["packages", "icost"],
+                pagePaths: [],
+                configPaths: []
+              }
+            });
+          case 20:
+            result = _context.sent;
+            console.log("generated: ", result);
+            setState(function (prev) {
+              return (0, _extends2["default"])({}, prev, {
+                loading: false,
+                result: result
+              });
+            });
+            _context.next = 29;
+            break;
+          case 25:
+            _context.prev = 25;
+            _context.t0 = _context["catch"](0);
+            console.error("failed to run code generator: ", _context.t0);
+            setState(function (prev) {
+              return (0, _extends2["default"])({}, 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 29:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 25]]);
+    }));
+    return function handleClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var _useRequest = (0, _ahooks.useRequest)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var codeGen, content;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            codeGen = codeGenResultRef.current;
+            if (codeGen) {
+              _context2.next = 4;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 4:
+            _context2.next = 6;
+            return codeGen.codeZip();
+          case 6:
+            content = _context2.sent;
+            _fileSaver["default"].saveAs(content, "gant-lowcode-generated-sources.zip");
+            _context2.next = 14;
+            break;
+          case 10:
+            _context2.prev = 10;
+            _context2.t0 = _context2["catch"](0);
+            console.log("failed to download sources: ", _context2.t0);
+            _message2["default"].error("下载失败！");
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 10]]);
+    })), {
+      manual: true
+    }),
+    run = _useRequest.run,
+    downloading = _useRequest.loading;
+  var handleDownload = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(e) {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            e.preventDefault();
+            e.stopPropagation();
+            run();
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function handleDownload(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var _useRequest2 = (0, _ahooks.useRequest)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+      var codeGen, blob, setCodeUpload;
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            codeGen = codeGenResultRef.current;
+            if (codeGen) {
+              _context4.next = 3;
+              break;
+            }
+            return _context4.abrupt("return");
+          case 3:
+            _context4.prev = 3;
+            _context4.next = 6;
+            return codeGen.codeZip();
+          case 6:
+            blob = _context4.sent;
+            setCodeUpload = ctx.config.get("setCodeUpload");
+            if (!setCodeUpload) {
+              _context4.next = 11;
+              break;
+            }
+            _context4.next = 11;
+            return setCodeUpload({
+              zipFile: blob
+            });
+          case 11:
+            _context4.next = 17;
+            break;
+          case 13:
+            _context4.prev = 13;
+            _context4.t0 = _context4["catch"](3);
+            console.log("failed to git push: ", _context4.t0);
+            _message2["default"].error("上传失败！");
+          case 17:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[3, 13]]);
+    })), {
+      manual: true
+    }),
+    handleUpload = _useRequest2.run,
+    uploading = _useRequest2.loading;
+  var drawerChildren = null;
+  if (state.hasError) {
+    var _state$error;
+    drawerChildren = /*#__PURE__*/React.createElement(_alert["default"], {
+      type: "error",
+      message: "\u51FA\u9519\u4E86",
+      description: (_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.message
+    });
+  }
+  if (state.loading) {
+    drawerChildren = /*#__PURE__*/React.createElement(_spin["default"], {
+      className: "code-gen-plugin-loading",
+      spinning: true,
+      tip: "\u6B63\u5728\u51FA\u7801..."
+    });
+  }
+  drawerChildren = /*#__PURE__*/React.createElement(_index.CodeGenResult, {
+    ref: codeGenResultRef,
+    result: state.result,
+    schema: state.schema,
+    originalSchema: state.originalSchema
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_button["default"], {
+    type: "text",
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(_icons.CodeOutlined, null)), /*#__PURE__*/React.createElement(_drawer["default"], {
+    open: state.open,
+    title: "\u51FA\u7801\u7ED3\u679C",
+    width: "95vw",
+    rootClassName: "code-gen-drawer",
+    extra: /*#__PURE__*/React.createElement(_space["default"], null, /*#__PURE__*/React.createElement(_button["default"], {
+      type: "link",
+      onClick: handleUpload,
+      loading: uploading
+    }, "\u4E0A\u4F20git"), /*#__PURE__*/React.createElement(_button["default"], {
+      type: "link",
+      onClick: handleDownload,
+      loading: downloading
+    }, "\u4E0B\u8F7D\u6E90\u4EE3\u7801")),
+    onClose: function onClose() {
+      setState(function (prev) {
+        return (0, _extends2["default"])({}, prev, {
+          open: false
+        });
+      });
+    }
+  }, drawerChildren));
+}
+function fixSchema(_x2) {
+  return _fixSchema.apply(this, arguments);
+}
+function _fixSchema() {
+  _fixSchema = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(schema) {
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          return _context5.abrupt("return", deepClone((0, _extends2["default"])({}, 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 (0, _extends2["default"])({}, c, {
+                  version: "latest"
+                });
+              }
+
+              // 修正 gantd-lowcode-materials 的版本，最小为1.1.0
+              if (c["package"] === 'gantd-lowcode-materials' && (0, _compare["default"])((0, _coerce["default"])(c.version) || '', '1.1.0') <= 0) {
+                return (0, _extends2["default"])({}, c, {
+                  version: 'latest'
+                });
+              }
+              return c;
+            })
+          })));
+        case 1:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  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 (0, _coerce["default"])(version) !== null;
+}

package/lib/components/code-gen-action/index.less

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

package/lib/components/code-gen-preview/fixPreviewCode.d.ts

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

package/lib/components/code-gen-preview/fixPreviewCode.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.fixPreviewCode = fixPreviewCode;
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+// 默认生成的代码不符合在线预览的规则，需要处理下
+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 (0, _extends4["default"])({}, acc, (_extends2 = {}, _extends2[fpath] = (0, _extends4["default"])({}, 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 = (0, _extends4["default"])({}, code, {
+    modules: fixedModules
+  });
+  fixedCode.modules["/src/app.js"] = (0, _extends4["default"])({}, 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\n    import './shims';\n    import './global.css';\n\n    import React from 'react';\n    import ReactDOM from 'react-dom';\n\n    import Page from '" + Object.keys(fixedModules).find(function (fpath) {
+      return fpath.startsWith("/src/pages/");
+    }) + "';\n\n    ReactDOM.render(<Page/>, document.getElementById('root'));\n"
+  });
+
+  // 一些垫片
+  fixedCode.modules["/src/shims.js"] = {
+    fpath: "/src/shims.js",
+    code: ""
+  };
+  fixedCode.modules["/package.json"] = (0, _extends4["default"])({}, fixedCode.modules["/package.json"], {
+    code: JSON.stringify({
+      name: "demo",
+      version: "1.0.0",
+      dependencies: (0, _extends4["default"])({
+        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"] = (0, _extends4["default"])({}, 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\n      "
+    }
+  });
+  fixedCode.type = "riddle";
+  return fixedCode;
+}
+function pickKeys(data, keys) {
+  return keys.reduce(function (acc, key) {
+    if (data[key]) {
+      var _extends3;
+      return (0, _extends4["default"])({}, acc, (_extends3 = {}, _extends3[key] = data[key], _extends3));
+    }
+    return acc;
+  }, {});
+}

package/lib/components/code-gen-preview/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GravityCode } from "../../types";
+import "./index.less";
+export declare type CodeGenPreviewProps = {
+    code: GravityCode | null;
+    height: string | number;
+    refresh: string | number;
+};
+export declare function CodeGenPreview(props: CodeGenPreviewProps): import("react").JSX.Element;

package/lib/components/code-gen-preview/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CodeGenPreview = CodeGenPreview;
+var _index = require("../codesandbox-preview/index");
+require("./index.less");
+function CodeGenPreview(props) {
+  return /*#__PURE__*/React.createElement(_index.CodeSandboxPreview, props);
+}

package/lib/components/code-gen-preview/index.less

@@ -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/lib/components/code-gen-result/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IPublicTypeProjectSchema } from "@gant-lowcode/lowcode-types";
+import { Result } from "@gant-lowcode/code-generator/standalone-loader";
+import "./index.less";
+interface CodeGenResultProps {
+    result: Result | null | undefined;
+    schema: IPublicTypeProjectSchema | null;
+    originalSchema: IPublicTypeProjectSchema | null;
+}
+export interface CodeGenResultRef {
+    codeZip: () => Promise<Blob>;
+}
+export declare const CodeGenResult: import("react").ForwardRefExoticComponent<CodeGenResultProps & import("react").RefAttributes<CodeGenResultRef>>;
+export {};