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

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

@@ -0,0 +1,207 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _Empty from "antd/es/empty";
+import _message from "antd/es/message";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import FileSaver from "file-saver";
+import JSZip from "jszip";
+// import { CodeGenPreview } from "../code-gen-preview/index";
+import { SourcesView } from "../sources-view/index";
+import "./index.less";
+export var CodeGenResult = /*#__PURE__*/forwardRef(function CodeGenResult(_ref, ref) {
+  var result = _ref.result,
+    schema = _ref.schema;
+  var _useState = useState({
+      expandedKeys: ["sources", "preview"]
+    }),
+    paneState = _useState[0],
+    setPaneState = _useState[1];
+  var _useState2 = useState(null),
+    gravityCode = _useState2[0],
+    setGravityCode = _useState2[1];
+  var _useState3 = useState(0),
+    refresh = _useState3[0],
+    setRefresh = _useState3[1];
+  useEffect(function () {
+    console.log("--result, schema", result, schema);
+    setGravityCode(convertCodeGenResult(result, schema));
+  }, [result]);
+  var codeZip = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var zip;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            zip = new JSZip();
+            Object.values((gravityCode === null || gravityCode === void 0 ? void 0 : gravityCode.modules) || {}).forEach(function (file) {
+              zip.file(file.fpath.replace(/^\/+/, ""), file.code);
+            });
+            _context.next = 4;
+            return zip.generateAsync({
+              type: "blob"
+            });
+          case 4:
+            return _context.abrupt("return", _context.sent);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function codeZip() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useImperativeHandle(ref, function () {
+    return {
+      codeZip: codeZip
+    };
+  });
+  if (!result) {
+    return null;
+  }
+  var handleDownloadSources = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
+      var content;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            e.preventDefault();
+            e.stopPropagation();
+            _context2.next = 5;
+            return codeZip();
+          case 5:
+            content = _context2.sent;
+            FileSaver.saveAs(content, "gant-lowcode-generated-sources.zip");
+            _context2.next = 13;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](0);
+            console.log("failed to download sources: ", _context2.t0);
+            _message.error("下载失败！");
+          case 13:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 9]]);
+    }));
+    return function handleDownloadSources(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  console.log("--gravityCode", gravityCode);
+
+  // const items: TabsProps["items"] = [
+  //   {
+  //     key: "sources",
+  //     label: (
+  //       <span>
+  //         出码生成的源代码{" "}
+  //         <a href="javascript:void(0)" onClick={handleDownloadSources}>
+  //           导出/下载 zip 包
+  //         </a>
+  //       </span>
+  //     ),
+  //     children: gravityCode != null && (
+  //       <SourcesView code={gravityCode} onCodeChange={setGravityCode} />
+  //     ),
+  //   },
+  //   {
+  //     key: "preview",
+  //     label: (
+  //       <span>
+  //         在线预览{" "}
+  //         <a
+  //           href="#refresh"
+  //           onClick={(e) => {
+  //             e.preventDefault();
+  //             e.stopPropagation();
+  //             setRefresh(Date.now());
+  //           }}
+  //         >
+  //           刷新
+  //         </a>
+  //       </span>
+  //     ),
+  //     children: (
+  //       <div
+  //         className="code-gen-result-gravity-demo"
+  //         style={{ height: "100%" }}
+  //       >
+  //         <CodeGenPreview
+  //           code={gravityCode}
+  //           height={"100%"}
+  //           refresh={refresh}
+  //         />
+  //       </div>
+  //     ),
+  //   },
+  // ];
+
+  // return <Tabs className="code-gen-tabs" items={items} />;
+
+  if (!gravityCode) return /*#__PURE__*/React.createElement(_Empty, null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-source-view"
+  }, /*#__PURE__*/React.createElement(SourcesView, {
+    code: gravityCode,
+    onCodeChange: setGravityCode
+  }));
+});
+function convertCodeGenResult(result, schema) {
+  var schemaFiles = {
+    "/.project-schema.json": {
+      fpath: "/.project-schema.json",
+      code: JSON.stringify(schema, null, 2) + "\n"
+    }
+  };
+  if (!result || !Array.isArray(result) || !result.length) {
+    return {
+      type: "demo",
+      modules: schemaFiles
+    };
+  }
+  var code = {
+    type: "demo",
+    modules: result.reduce(function (acc, file) {
+      var _extends2;
+      return _extends({}, acc, (_extends2 = {}, _extends2["/" + file.pathName] = {
+        fpath: "/" + file.pathName,
+        code: file.content,
+        entry: undefined,
+        packagejson: ["package.json"].includes(file.pathName) ? 1 : undefined
+      }, _extends2));
+    }, {})
+  };
+  var foundEntry = false;
+
+  // 设置入口文件
+  ["index.js", "index.ts", "index.tsx", "app.js", "app.ts", "app.tsx"].forEach(function (fileName) {
+    if (!foundEntry) {
+      var filePath = "/src/" + fileName;
+      if (code.modules[filePath]) {
+        foundEntry = true;
+        if (fileName === "index.js") {
+          code.modules[filePath].entry = 1;
+        } else {
+          code.modules["/src/index.js"] = {
+            fpath: "/src/index.js",
+            entry: 1,
+            code: "import \"./" + fileName.replace(/\.\w+$/, "") + "\""
+          };
+        }
+      }
+    }
+  });
+  if (!foundEntry) {
+    console.warn("Failed to find entry file for demo.");
+  }
+
+  // 补充 schema 文件
+  // Object.assign(code.modules, schemaFiles);
+
+  return code;
+}

package/es/components/code-gen-result/index.less

@@ -0,0 +1,20 @@
+.code-gen-tabs {
+  height: 100%;
+
+  .ant-tabs-nav {
+    margin: 0;
+  }
+  .ant-tabs-content, .ant-tabs-tabpane {
+    height: 100%;
+  }
+}
+
+.code-gen-source-view {
+  height: 100%;
+}
+
+.source-view-header {
+  position: absolute;
+  top: 18px;
+  right: 20px;
+}

package/{dist → es}/components/codesandbox-preview/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CodeGenPreviewProps } from "../code-gen-preview/index";
 import "./index.less";
-export declare function CodeSandboxPreview({ code, height }: CodeGenPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeSandboxPreview({ code, height }: CodeGenPreviewProps): JSX.Element;

package/es/components/codesandbox-preview/index.js

@@ -0,0 +1,192 @@
+import _Spin from "antd/es/spin";
+import _Alert from "antd/es/alert";
+import _Button from "antd/es/button";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useMemo, useState, useEffect } from "react";
+import { fixPreviewCode } from "../code-gen-preview/fixPreviewCode";
+import "./index.less";
+// 使用 CodeSandbox 来进行预览
+// @see https://codesandbox.io/docs/api#get-request
+export function CodeSandboxPreview(_ref) {
+  var code = _ref.code,
+    height = _ref.height;
+  var parameters = useMemo(function () {
+    var files = {};
+    if (code && code.modules) {
+      var fixedCode = fixPreviewCode(code);
+      if (fixedCode) {
+        Object.values(fixedCode.modules).forEach(function (file) {
+          var _file$fpath;
+          files[file === null || file === void 0 ? void 0 : (_file$fpath = file.fpath) === null || _file$fpath === void 0 ? void 0 : _file$fpath.slice(1)] = {
+            isBinary: false,
+            content: file.code
+          };
+        });
+      }
+
+      // 入口文件需要顺便引入下样式
+      files["src/index.js"] = {
+        isBinary: false,
+        content: "\n          // \u76EE\u524D\u9700\u8981\u5355\u72EC\u5F15\u5165\u4E0B\u6837\u5F0F\u6587\u4EF6\n          import \"@alifd/next/dist/next.css\";\n          import \"@alifd/pro-layout/dist/AlifdProLayout.css\";\n\n          // \u5F15\u5165\u5165\u53E3\u6587\u4EF6\n          import './app';\n"
+      };
+    }
+    return {
+      files: files,
+      template: "create-react-app"
+    };
+  }, [code]);
+  var _useState = useState({
+      parameters: parameters,
+      sandboxId: "",
+      isCreating: false,
+      hasError: false,
+      error: null
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  useEffect(function () {
+    if (state.parameters !== parameters || state.sandboxId === "retry" || !state.sandboxId) {
+      var hasCanceled = false;
+      setState(function (prev) {
+        return _extends({}, prev, {
+          hasError: false,
+          code: code,
+          parameters: parameters,
+          isCreating: true
+        });
+      });
+      _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var sandboxId;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return createCodeSandbox(parameters);
+            case 3:
+              sandboxId = _context.sent;
+              if (!hasCanceled) {
+                setState(function (prev) {
+                  return _extends({}, prev, {
+                    hasError: false,
+                    isCreating: false,
+                    sandboxId: sandboxId
+                  });
+                });
+              }
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              if (!hasCanceled) {
+                setState(function (prev) {
+                  return _extends({}, prev, {
+                    hasError: true,
+                    error: _context.t0,
+                    isCreating: false
+                  });
+                });
+              }
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }))();
+      return function () {
+        hasCanceled = true;
+      };
+    }
+    return function () {};
+  }, [parameters, state.sandboxId, state.parameters]);
+  var handleRetry = function handleRetry() {
+    setState(function (prev) {
+      return _extends({}, prev, {
+        hasError: false,
+        sandboxId: "retry"
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-plugin-code-sandbox-preview",
+    style: {
+      height: height
+    },
+    "data-code-sandbox-id": state.sandboxId
+  }, function () {
+    if (state.hasError) {
+      return /*#__PURE__*/React.createElement(_Alert, {
+        message: "\u751F\u6210 CodeSandbox \u9884\u89C8\u5E94\u7528\u5931\u8D25",
+        description: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "\u8BE6\u7EC6\u9519\u8BEF\uFF1A", "" + (state.error || "网络开小差了")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(_Button, {
+          onClick: handleRetry
+        }, "\u91CD\u65B0\u5C1D\u8BD5\u4E0B")))
+      });
+    }
+    return state.sandboxId ? /*#__PURE__*/React.createElement("iframe", {
+      src: "https://codesandbox.io/embed/" + state.sandboxId + "?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview",
+      title: "CodeSandbox Preview",
+      allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
+      sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    }) : /*#__PURE__*/React.createElement(_Spin, {
+      spinning: true,
+      tip: "\u6B63\u5728\u751F\u6210 CodeSandbox \u9884\u89C8\u5E94\u7528..."
+    });
+  }());
+}
+function createCodeSandbox(_x) {
+  return _createCodeSandbox.apply(this, arguments);
+}
+function _createCodeSandbox() {
+  _createCodeSandbox = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(parameters) {
+    var res, json, _ref3, sandbox_id;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (Object.entries((parameters === null || parameters === void 0 ? void 0 : parameters.files) || {}).length) {
+            _context2.next = 2;
+            break;
+          }
+          return _context2.abrupt("return", "");
+        case 2:
+          _context2.next = 4;
+          return fetch("https://codesandbox.io/api/v1/sandboxes/define?json=1", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json"
+            },
+            body: JSON.stringify(parameters)
+          });
+        case 4:
+          res = _context2.sent;
+          if (res.ok) {
+            _context2.next = 7;
+            break;
+          }
+          throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u9519\u8BEF\u7801\uFF1A" + res.status + " " + res.statusText);
+        case 7:
+          _context2.next = 9;
+          return res.json()["catch"](function (err) {
+            throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u670D\u52A1\u5F02\u5E38(" + ((err === null || err === void 0 ? void 0 : err.message) || err || "未知异常") + ")");
+          });
+        case 9:
+          json = _context2.sent;
+          _ref3 = json || {}, sandbox_id = _ref3.sandbox_id;
+          if (!(!sandbox_id || typeof sandbox_id !== "string")) {
+            _context2.next = 13;
+            break;
+          }
+          throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u670D\u52A1\u54CD\u5E94\u5F02\u5E38");
+        case 13:
+          return _context2.abrupt("return", sandbox_id);
+        case 14:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _createCodeSandbox.apply(this, arguments);
+}

package/es/components/codesandbox-preview/index.less

@@ -0,0 +1,18 @@
+.code-gen-plugin-code-sandbox-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  height: 100%;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    border: 0;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

package/{dist → es}/components/file-tree/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CodeModules } from "../../types";
 import "./index.less";
 interface FileTreeProps {
@@ -5,8 +6,8 @@ interface FileTreeProps {
     onSelect?(key: string): void;
     selectedKeys?: string[];
 }
-export declare const FileTree: (props: FileTreeProps) => import("react/jsx-runtime").JSX.Element;
-type TreeNode = {
+export declare const FileTree: (props: FileTreeProps) => JSX.Element;
+declare type TreeNode = {
     id: string;
     label: string;
     folder: boolean;

package/es/components/file-tree/index.js

@@ -0,0 +1,162 @@
+import React, { useState, memo } from "react";
+import { FixedSizeList as List, areEqual } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+import cls from "classnames";
+import memoizeOne from "memoize-one";
+import naturalCompare from "string-natural-compare";
+import { FileTypeIcon } from "../file-type-icon/index";
+import "./index.less";
+var FILE_TYPES_ICON_MAP = {
+  js: "js",
+  jsx: "jsx",
+  ts: "ts",
+  tsx: "ts",
+  json: "json",
+  scss: "scss",
+  css: "css",
+  less: "less",
+  tsconfig: "tsconfig",
+  html: "html"
+};
+function getFileIcon(file) {
+  var type = FILE_TYPES_ICON_MAP[(file || "").split(".").pop() || ""] || "text";
+  return /*#__PURE__*/React.createElement(FileTypeIcon, {
+    type: type
+  });
+}
+var Row = /*#__PURE__*/memo(function (_ref) {
+  var data = _ref.data,
+    index = _ref.index,
+    style = _ref.style;
+  var flattenedData = data.flattenedData,
+    onOpen = data.onOpen,
+    onSelect = data.onSelect,
+    selectedKeys = data.selectedKeys;
+  var node = flattenedData[index];
+  var left = node.depth * 20;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls("tree-node", {
+      "tree-node-selected": selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(node.id)
+    }),
+    style: style,
+    onClick: function onClick() {
+      return onOpen(node);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls("tree-item", {
+      "tree-folder": node.folder,
+      "tree-item-expanded": node.expanded,
+      "tree-item-open": !node.expanded
+    }),
+    onClick: function onClick(e) {
+      return onSelect(e, node);
+    },
+    style: {
+      left: left + "px",
+      width: "calc(100% - " + left + "px)"
+    }
+  }, !node.folder && getFileIcon(node.label), /*#__PURE__*/React.createElement("span", {
+    className: "label-name"
+  }, node.label)));
+}, areEqual);
+var getItemData = memoizeOne(function (onOpen, onSelect, flattenedData, selectedKeys) {
+  return {
+    onOpen: onOpen,
+    onSelect: onSelect,
+    flattenedData: flattenedData,
+    selectedKeys: selectedKeys
+  };
+});
+export var FileTree = function FileTree(props) {
+  var modules = props.modules,
+    _props$selectedKeys = props.selectedKeys,
+    selectedKeys = _props$selectedKeys === void 0 ? [] : _props$selectedKeys;
+  var _useState = useState([]),
+    openedNodeIds = _useState[0],
+    setOpenedNodeIds = _useState[1];
+  var onOpen = function onOpen(node) {
+    if (!node.folder) return;
+    !node.expanded ? setOpenedNodeIds([].concat(openedNodeIds, [node.id])) : setOpenedNodeIds(openedNodeIds.filter(function (id) {
+      return id !== node.id;
+    }));
+  };
+  var onSelect = function onSelect(e, node) {
+    var _props$onSelect;
+    //e.stopPropagation();
+    if (node.folder) return;
+    (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, node.id);
+  };
+  var flattenedData = createFlattenTree(modules, openedNodeIds);
+  var itemData = getItemData(onOpen, onSelect, flattenedData, selectedKeys);
+  return /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref2) {
+    var height = _ref2.height,
+      width = _ref2.width;
+    return /*#__PURE__*/React.createElement(List, {
+      className: "code-file-tree",
+      height: height,
+      itemCount: flattenedData.length,
+      itemSize: 22,
+      width: width,
+      itemKey: function itemKey(index) {
+        return flattenedData[index].id;
+      },
+      itemData: itemData
+    }, Row);
+  });
+};
+export function createFlattenTree(data, expandedKeys) {
+  var flatTree = [];
+  var filePaths = Object.keys(data);
+  // console.log(JSON.parse(JSON.stringify(filePaths)))
+  // filePaths.sort((a, b) => {
+  //   // 检查字符串a是否包含斜杠
+  //   const hasSlashA = a.substring(1).lastIndexOf('/');
+  //   // 检查字符串b是否包含斜杠
+  //   const hasSlashB = b.substring(1).lastIndexOf('/');
+  //   console.log('---a', hasSlashA)
+  //   console.log('---b', hasSlashB)
+  //   // 如果a包含斜杠，而b不包含，则a应该排在b之后
+  //   if (hasSlashA > -1 && hasSlashB > -1) {
+  //     return hasSlashB - hasSlashA;
+  //   }
+
+  //   return naturalCompare(a, b, {
+  //     caseInsensitive: true,
+  //   }); // 包含斜杠的字符串按字典顺序排序
+  // });
+  // console.log(filePaths)
+  filePaths.forEach(function (key) {
+    var parts = key.split("/");
+    var fileNames = [];
+    var _loop = function _loop() {
+      var path = parts.slice(0, i).join("/");
+      var expanded = expandedKeys.includes(path);
+      if (path && !flatTree.some(function (node) {
+        return node.id === path;
+      })) {
+        fileNames.push({
+          id: path,
+          label: parts[i - 1] || "/",
+          // 当前层的名称
+          folder: i < parts.length,
+          // 如果不是最后一层，则为文件夹
+          depth: i - 1,
+          // 层级深度，从 0 开始
+          expanded: expanded // 默认展开
+        });
+      }
+      if (expanded) return 1; // break
+    };
+    for (var i = 1; i <= parts.length; i++) {
+      if (_loop()) break;
+    }
+    // console.log('--fileNames', fileNames);
+    fileNames.sort(function (a, b) {
+      return naturalCompare(a.id, b.id, {
+        caseInsensitive: true
+      });
+    });
+    flatTree.push.apply(flatTree, fileNames);
+  });
+  return flatTree;
+}

package/es/components/file-tree/index.less

@@ -0,0 +1,54 @@
+.code-file-tree {
+  white-space: nowrap;
+
+  .tree-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    &:hover,
+    &.tree-node-selected {
+      background-color: rgba(207, 208, 209, 1);
+      cursor: pointer;
+    }
+  }
+
+  .tree-item {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+
+    & > i {
+      margin-right: 8px;
+    }
+
+    .label-name {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .tree-folder::after {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 20px;
+    border-top: 6px solid rgba(0, 0, 0, 0.7);
+    border-right: 6px solid transparent;
+    border-left: 6px solid transparent;
+    opacity: 0.7;
+    position: absolute;
+    left: -36px;
+    transition: transform 0.3s;
+    transform: translate(0, 0);
+  }
+
+  .tree-item-expanded::after {
+    transform: rotate(-90deg);
+  }
+}

package/{dist → es}/components/file-type-icon/index.d.ts

@@ -1,6 +1,6 @@
 import './index.less';
 import React from 'react';
-export type FileTypeIconProps = React.HtmlHTMLAttributes<HTMLSpanElement> & {
+export declare type FileTypeIconProps = React.HtmlHTMLAttributes<HTMLSpanElement> & {
     type: string;
 };
-export declare function FileTypeIcon({ type, ...props }: FileTypeIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileTypeIcon({ type, ...props }: FileTypeIconProps): JSX.Element;