@gant-lowcode/plugin-code-generator 1.0.10 → 2.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/{dist → es}/components/code-gen-action/index.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { IPublicTypeProjectSchema, IPublicModelPluginContext } from "@gant-lowcode/lowcode-types";
 import "./index.less";
 export declare function CodeGenActionBtn({ ctx }: {
     ctx: IPublicModelPluginContext;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function fixSchema(schema: IPublicTypeProjectSchema): Promise<IPublicTypeProjectSchema>;

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

@@ -0,0 +1,330 @@
+import _Drawer from "antd/es/drawer";
+import _Space from "antd/es/space";
+import _Button from "antd/es/button";
+import _Spin from "antd/es/spin";
+import _Alert from "antd/es/alert";
+import _message from "antd/es/message";
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useRef, useState } from "react";
+import { generateCode } from "@gant-lowcode/code-generator/standalone-loader";
+import { IPublicEnumTransformStage } from "@gant-lowcode/lowcode-types";
+import coerce from "semver/functions/coerce.js";
+import compare from "semver/functions/compare.js";
+import { CodeGenResult } from "../code-gen-result/index";
+import "./index.less";
+import { CodeOutlined } from "@ant-design/icons";
+import FileSaver from "file-saver";
+import { useRequest } from "ahooks";
+export function CodeGenActionBtn(_ref) {
+  var ctx = _ref.ctx;
+  var _useState = useState({
+      open: false,
+      hasError: false,
+      error: null,
+      loading: false,
+      result: null,
+      schema: null,
+      originalSchema: null
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var codeGenResultRef = useRef(null);
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var getProjectSchema, 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,
+                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(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 _extends({}, prev, {
+                schema: schema,
+                originalSchema: originalSchema
+              });
+            });
+
+            // 出码...
+            _context.next = 20;
+            return 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 _extends({}, 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 _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 29:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 25]]);
+    }));
+    return function handleClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var _useRequest = useRequest(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var codeGen, content;
+      return _regeneratorRuntime.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.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);
+            _message.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 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(e) {
+      return _regeneratorRuntime.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 = useRequest(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var codeGen, blob, setCodeUpload;
+      return _regeneratorRuntime.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);
+            _message.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, {
+      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, {
+      className: "code-gen-plugin-loading",
+      spinning: true,
+      tip: "\u6B63\u5728\u51FA\u7801..."
+    });
+  }
+  drawerChildren = /*#__PURE__*/React.createElement(CodeGenResult, {
+    ref: codeGenResultRef,
+    result: state.result,
+    schema: state.schema,
+    originalSchema: state.originalSchema
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "text",
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(CodeOutlined, null)), /*#__PURE__*/React.createElement(_Drawer, {
+    open: state.open,
+    title: "\u51FA\u7801\u7ED3\u679C",
+    width: "95vw",
+    rootClassName: "code-gen-drawer",
+    extra: /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(_Button, {
+      type: "link",
+      onClick: handleUpload,
+      loading: uploading
+    }, "\u4E0A\u4F20git"), /*#__PURE__*/React.createElement(_Button, {
+      type: "link",
+      onClick: handleDownload,
+      loading: downloading
+    }, "\u4E0B\u8F7D\u6E90\u4EE3\u7801")),
+    onClose: function onClose() {
+      setState(function (prev) {
+        return _extends({}, prev, {
+          open: false
+        });
+      });
+    }
+  }, drawerChildren));
+}
+export function fixSchema(_x2) {
+  return _fixSchema.apply(this, arguments);
+}
+function _fixSchema() {
+  _fixSchema = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(schema) {
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          return _context5.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"
+                });
+              }
+
+              // 修正 gantd-lowcode-materials 的版本，最小为1.1.0
+              if (c["package"] === 'gantd-lowcode-materials' && compare(coerce(c.version) || '', '1.1.0') <= 0) {
+                return _extends({}, 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 coerce(version) !== null;
+}

package/es/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/es/components/code-gen-preview/fixPreviewCode.js

@@ -0,0 +1,100 @@
+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\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"] = _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\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/{dist → es}/components/code-gen-preview/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import { CodeSandboxPreview } from "../codesandbox-preview/index";
+import "./index.less";
+export function CodeGenPreview(props) {
+  return /*#__PURE__*/React.createElement(CodeSandboxPreview, props);
+}

package/es/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/{dist → es}/components/code-gen-result/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 import { IPublicTypeProjectSchema } from "@gant-lowcode/lowcode-types";
 import { Result } from "@gant-lowcode/code-generator/standalone-loader";
 import "./index.less";
@@ -10,5 +10,5 @@ interface CodeGenResultProps {
 export interface CodeGenResultRef {
     codeZip: () => Promise<Blob>;
 }
-export declare const CodeGenResult: React.ForwardRefExoticComponent<CodeGenResultProps & React.RefAttributes<CodeGenResultRef>>;
+export declare const CodeGenResult: import("react").ForwardRefExoticComponent<CodeGenResultProps & import("react").RefAttributes<CodeGenResultRef>>;
 export {};