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

package/lib/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/lib/components/file-type-icon/index.d.ts

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

package/lib/components/file-type-icon/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.FileTypeIcon = FileTypeIcon;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+require("./index.less");
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["type"];
+function FileTypeIcon(_ref) {
+  var type = _ref.type,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("i", (0, _extends2["default"])({}, props, {
+    className: "file-types-iconfont file-types-icon-" + type + " " + (props.className || '')
+  }));
+}

package/lib/components/file-type-icon/index.less

@@ -0,0 +1,77 @@
+@font-face {
+  font-family: "file-types-iconfont"; /* Project id 4778352 */
+  /* Color fonts */
+  src: 
+  url('//at.alicdn.com/t/c/font_4778352_c4wg236tblh.woff2?t=1734587113843') format('woff2'),
+  url('//at.alicdn.com/t/c/font_4778352_c4wg236tblh.woff?t=1734587113843') format('woff'),
+  url('//at.alicdn.com/t/c/font_4778352_c4wg236tblh.ttf?t=1734587113843') format('truetype');
+}
+
+.file-types-iconfont {
+  font-family: "file-types-iconfont" !important;
+  font-size: 14px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.file-types-icon-css:before {
+  content: "\e61e";
+}
+
+.file-types-icon-editorconfig:before {
+  content: "\e628";
+}
+
+.file-types-icon-eslintignore:before {
+  content: "\e62a";
+}
+
+.file-types-icon-gitignore:before {
+  content: "\e62d";
+}
+
+.file-types-icon-git:before {
+  content: "\e897";
+}
+
+.file-types-icon-html:before {
+  content: "\e68c";
+}
+
+.file-types-icon-tsconfig:before {
+  content: "\e622";
+}
+
+.file-types-icon-less:before {
+  content: "\e63d";
+}
+
+.file-types-icon-scss:before {
+  content: "\e657";
+}
+
+.file-types-icon-json:before {
+  content: "\e7bd";
+}
+
+.file-types-icon-text:before {
+  content: "\e734";
+}
+
+.file-types-icon-js:before {
+  content: "\e63b";
+}
+
+.file-types-icon-jsx:before {
+  content: "\e63c";
+}
+
+.file-types-icon-ts:before {
+  content: "\e664";
+}
+
+.file-types-icon-tsx:before {
+  content: "\e665";
+}
+

package/lib/components/sources-view/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "@gant-lowcode/lowcode-plugin-base-monaco-editor/lib/style.js";
+import { GravityCode } from "../../types";
+import "./index.less";
+export declare function SourcesView({ code, onCodeChange, }: {
+    code: GravityCode;
+    onCodeChange: (code: GravityCode) => void;
+}): JSX.Element;

package/lib/components/sources-view/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SourcesView = SourcesView;
+var _splitter = _interopRequireDefault(require("antd/lib/splitter"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _lowcodePluginBaseMonacoEditor = _interopRequireDefault(require("@gant-lowcode/lowcode-plugin-base-monaco-editor"));
+require("@gant-lowcode/lowcode-plugin-base-monaco-editor/lib/style.js");
+var _index = require("../file-tree/index");
+require("./index.less");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var DEBOUNCE_UPDATE_INTERVAL_IN_MS = 500;
+function SourcesView(_ref) {
+  var _state$currentFile, _state$currentFile2, _state$currentFile3, _state$currentFile4, _state$currentFile5;
+  var code = _ref.code,
+    onCodeChange = _ref.onCodeChange;
+  var editorContainerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(function () {
+      var allFiles = Object.values(code.modules);
+      var currentFile = [allFiles.find(function (x) {
+        return /pages.+(js|ts)x?$/.test(x.fpath);
+      }), allFiles.find(function (m) {
+        return m.entry;
+      })].filter(Boolean)[0];
+      return {
+        currentFile: currentFile,
+        selectedKeys: [currentFile === null || currentFile === void 0 ? void 0 : currentFile.fpath]
+      };
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var _useState2 = (0, _react.useState)(0),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var observer = new ResizeObserver(function () {
+      if (editorContainerRef.current) {
+        var _editorContainerRef$c = editorContainerRef.current.getBoundingClientRect(),
+          _height = _editorContainerRef$c.height;
+        setHeight(_height - 2);
+      }
+    });
+    if (editorContainerRef.current) {
+      observer.observe(editorContainerRef.current);
+    }
+    return function () {
+      if (editorContainerRef.current) {
+        observer.unobserve(editorContainerRef.current);
+      }
+    };
+  }, []);
+  var ref = (0, _react.useRef)({
+    debounceTimer: null
+  });
+  var onSelect = function onSelect(key) {
+    setState(function (prev) {
+      if (ref.current.debounceTimer) {
+        ref.current.debounceTimer = null;
+      }
+      return (0, _extends3["default"])({}, prev, {
+        currentFile: code.modules[key] || prev.currentFile
+      });
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_splitter["default"], {
+    className: "sources-panes"
+  }, /*#__PURE__*/_react["default"].createElement(_splitter["default"].Panel, {
+    defaultSize: 300,
+    min: 300,
+    max: "70%",
+    className: "file-tree-pane"
+  }, /*#__PURE__*/_react["default"].createElement(_index.FileTree, {
+    modules: code.modules,
+    onSelect: onSelect,
+    selectedKeys: (_state$currentFile = state.currentFile) !== null && _state$currentFile !== void 0 && _state$currentFile.fpath ? [(_state$currentFile2 = state.currentFile) === null || _state$currentFile2 === void 0 ? void 0 : _state$currentFile2.fpath] : undefined
+  })), /*#__PURE__*/_react["default"].createElement(_splitter["default"].Panel, {
+    className: "source-code-pane"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: editorContainerRef,
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_lowcodePluginBaseMonacoEditor["default"], {
+    height: height,
+    language: getFileLanguage((_state$currentFile3 = state.currentFile) === null || _state$currentFile3 === void 0 ? void 0 : _state$currentFile3.fpath),
+    saveViewState: true,
+    defaultValue: (_state$currentFile4 = state.currentFile) === null || _state$currentFile4 === void 0 ? void 0 : _state$currentFile4.code,
+    path: (_state$currentFile5 = state.currentFile) === null || _state$currentFile5 === void 0 ? void 0 : _state$currentFile5.fpath,
+    onChange: function onChange(value) {
+      console.debug("[monaco editor] onChange: %o (currentFile: %o)", {
+        value: value
+      }, state.currentFile);
+      var currentFile = state.currentFile;
+      if (currentFile) {
+        if (ref.current.debounceTimer) {
+          clearTimeout(ref.current.debounceTimer);
+        }
+        ref.current.debounceTimer = setTimeout(function () {
+          var _extends2;
+          ref.current.debounceTimer = null;
+          onCodeChange((0, _extends3["default"])({}, code, {
+            modules: (0, _extends3["default"])({}, code.modules, (_extends2 = {}, _extends2[currentFile.fpath] = (0, _extends3["default"])({}, currentFile, {
+              code: value || ""
+            }), _extends2))
+          }));
+        }, DEBOUNCE_UPDATE_INTERVAL_IN_MS);
+      }
+    }
+  }))));
+}
+function getFileLanguage(file) {
+  switch ((file || "").split(".").pop()) {
+    case "ts":
+    case "tsx":
+      return "typescript";
+    case "js":
+    case "jsx":
+      return "javascript";
+    case "css":
+      return "css";
+    case "scss":
+      return "scss";
+    case "less":
+      return "less";
+    case "json":
+      return "json";
+    case "md":
+      return "markdown";
+    default:
+      return "text";
+  }
+}

package/lib/components/sources-view/index.less

@@ -0,0 +1,12 @@
+.sources-panes {
+  .file-tree-pane {
+    overflow: hidden;
+    border-right: 1px solid #e0e0e0;
+  }
+  .source-code-pane {
+    flex: 1;
+    overflow-y: auto;
+    height: 100%;
+  }
+}
+

package/lib/index.d.ts

@@ -0,0 +1,27 @@
+import type { IPublicModelPluginContext } from "@gant-lowcode/lowcode-types";
+export declare type CodeGenPluginOptions = {
+    /** 是否要禁用出码的动作按钮(默认: 否) */
+    disableCodeGenActionBtn?: boolean;
+};
+declare const plugin: {
+    (ctx: IPublicModelPluginContext, options?: CodeGenPluginOptions): {
+        exports(): {
+            generateCode: any;
+        };
+        init(): Promise<void>;
+        destroy(): void;
+    };
+    pluginName: string;
+    meta: {
+        dependencies: any[];
+        preferenceDeclaration: {
+            title: string;
+            properties: {
+                key: string;
+                type: string;
+                description: string;
+            }[];
+        };
+    };
+};
+export default plugin;

package/lib/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var CodeGenerator = _interopRequireWildcard(require("@gant-lowcode/code-generator/standalone-loader"));
+var _codeGenAction = require("./components/code-gen-action");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var plugin = function plugin(ctx, options) {
+  return {
+    // 插件对外暴露的数据和方法
+    exports: function exports() {
+      return {
+        generateCode: CodeGenerator.generateCode
+      };
+    },
+    // 插件的初始化函数，在引擎初始化之后会立刻调用
+    init: function init() {
+      return (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              if (!(options !== null && options !== void 0 && options.disableCodeGenActionBtn)) {
+                ctx.skeleton.add({
+                  type: "Custom",
+                  name: "code-generator",
+                  area: "topArea",
+                  props: {
+                    align: "right",
+                    width: 100
+                  },
+                  content: _codeGenAction.CodeGenActionBtn,
+                  contentProps: {
+                    ctx: ctx
+                  }
+                });
+              }
+
+              // 提前初始化下，这样后面用的时候更快
+              CodeGenerator.init();
+              _context.next = 9;
+              break;
+            case 5:
+              _context.prev = 5;
+              _context.t0 = _context["catch"](0);
+              console.error("[plugin-code-geneator] failed to init: ", _context.t0);
+              throw _context.t0;
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 5]]);
+      }))();
+    },
+    destroy: function destroy() {}
+  };
+};
+plugin.pluginName = "codeGenerator";
+plugin.meta = {
+  dependencies: [],
+  preferenceDeclaration: {
+    title: "codeGenerator 的参数定义",
+    properties: [{
+      key: "disableCodeGenActionBtn",
+      type: "boolean",
+      description: "是否要禁用出码的动作按钮"
+    }]
+  }
+};
+var _default = exports["default"] = plugin;

package/lib/style.js

@@ -0,0 +1,9 @@
+require('antd/lib/drawer/style');
+require('antd/lib/space/style');
+require('antd/lib/button/style');
+require('antd/lib/spin/style');
+require('antd/lib/alert/style');
+require('antd/lib/message/style');
+require('antd/lib/empty/style');
+require('antd/lib/splitter/style');
+require('@gant-lowcode/lowcode-plugin-base-monaco-editor/lib/style');

package/lib/types/index.d.ts

@@ -0,0 +1,17 @@
+export declare type SyncCodeGenResult = {
+    type: "SYNC_RESULT";
+    sourceFiles: Array<{
+        pathName: string;
+        content: string;
+    }>;
+};
+export declare type CodeModules = Record<string, {
+    entry?: 1;
+    packagejson?: 1;
+    code: string;
+    fpath: string;
+}>;
+export declare type GravityCode = {
+    type: string;
+    modules: CodeModules;
+};

package/lib/types/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/package.json

@@ -1,24 +1,28 @@
 {
   "name": "@gant-lowcode/plugin-code-generator",
-  "version": "1.0.10",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "version": "2.0.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
   "files": [
-    "dist"
+    "lib",
+    "es",
+    "README.md"
   ],
   "devDependencies": {
+    "@alib/build-scripts": "^0.1.18",
+    "@rsbuild/plugin-less": "^1.2.2",
+    "@rsbuild/plugin-react": "^1.2.0",
+    "@rslib/core": "^0.6.3",
     "@types/file-saver": "^2.0.7",
     "@types/react": "^18.3.12",
     "@types/react-window": "^1.8.8",
     "@types/semver": "^7.5.8",
     "@types/string-natural-compare": "^3.0.4",
+    "build-plugin-component": "^0.2.10",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
+    "build-plugin-react-app": "^1.1.2",
     "react": "^18.3.1",
     "typescript": "^5.6.3"
   },
@@ -28,10 +32,10 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.2",
-    "@gant-lowcode/lowcode-engine": "^1.3.7",
     "@gant-lowcode/lowcode-plugin-base-monaco-editor": "^2.1.3",
-    "@gant-lowcode/lowcode-plugin-code-editor": "^2.1.3",
-    "@gant-lowcode/lowcode-types": "^1.3.7",
+    "@gant-lowcode/lowcode-plugin-code-editor": "^3.0.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "ahooks": "^3.8.4",
     "antd": "^5.22.4",
     "classnames": "^2.5.1",
@@ -42,16 +46,20 @@
     "react-window": "^1.8.10",
     "semver": "^7.6.3",
     "string-natural-compare": "^3.0.1",
-    "@gant-lowcode/eslint-config": "0.0.0",
-    "@gant-lowcode/typescript-config": "0.0.0",
-    "@gant-lowcode/code-generator": "0.0.8"
+    "@gant-lowcode/code-generator": "1.0.0",
+    "@gant-lowcode/eslint-config": "1.0.0",
+    "@gant-lowcode/typescript-config": "1.0.0",
+    "@gant-lowcode/lowcode-types": "2.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch"
+    "start:plugin": "npm run dev",
+    "dev:plugin": "cross-env NODE_ENV=development build-scripts start --config build.dev.json --host localhost",
+    "build": "build-scripts build --skip-demo",
+    "clean": "rimraf es lib dist",
+    "prettier": "prettier --write 'src/**/*.{js,jsx,tsx,ts,less,md,json}'"
   }
 }

package/dist/components/code-gen-action/index.css

@@ -1,18 +0,0 @@
-.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%;
-}
-
-.code-gen-plugin-result .next-message-error .next-message-content {
-  white-space: pre-wrap;
-}
-