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

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

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["type"];
+import './index.less';
+import React from 'react';
+export function FileTypeIcon(_ref) {
+  var type = _ref.type,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("i", _extends({}, props, {
+    className: "file-types-iconfont file-types-icon-" + type + " " + (props.className || '')
+  }));
+}

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

@@ -1,7 +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;
-}): import("react/jsx-runtime").JSX.Element;
+}): JSX.Element;

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

@@ -0,0 +1,128 @@
+import _Splitter from "antd/es/splitter";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useRef, useState } from "react";
+import Editor from "@gant-lowcode/lowcode-plugin-base-monaco-editor";
+import "@gant-lowcode/lowcode-plugin-base-monaco-editor/lib/style.js";
+import { FileTree } from "../file-tree/index";
+import "./index.less";
+var DEBOUNCE_UPDATE_INTERVAL_IN_MS = 500;
+export function SourcesView(_ref) {
+  var _state$currentFile, _state$currentFile2, _state$currentFile3, _state$currentFile4, _state$currentFile5;
+  var code = _ref.code,
+    onCodeChange = _ref.onCodeChange;
+  var editorContainerRef = useRef(null);
+  var _useState = 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 = useState(0),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  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 = useRef({
+    debounceTimer: null
+  });
+  var onSelect = function onSelect(key) {
+    setState(function (prev) {
+      if (ref.current.debounceTimer) {
+        ref.current.debounceTimer = null;
+      }
+      return _extends({}, prev, {
+        currentFile: code.modules[key] || prev.currentFile
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(_Splitter, {
+    className: "sources-panes"
+  }, /*#__PURE__*/React.createElement(_Splitter.Panel, {
+    defaultSize: 300,
+    min: 300,
+    max: "70%",
+    className: "file-tree-pane"
+  }, /*#__PURE__*/React.createElement(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.createElement(_Splitter.Panel, {
+    className: "source-code-pane"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: editorContainerRef,
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Editor, {
+    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(_extends({}, code, {
+            modules: _extends({}, code.modules, (_extends2 = {}, _extends2[currentFile.fpath] = _extends({}, 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/es/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/{dist → es}/index.d.ts

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

package/es/index.js

@@ -0,0 +1,67 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as CodeGenerator from "@gant-lowcode/code-generator/standalone-loader";
+import { CodeGenActionBtn } from "./components/code-gen-action";
+var plugin = function plugin(ctx, options) {
+  return {
+    // 插件对外暴露的数据和方法
+    exports: function exports() {
+      return {
+        generateCode: CodeGenerator.generateCode
+      };
+    },
+    // 插件的初始化函数，在引擎初始化之后会立刻调用
+    init: function init() {
+      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.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: 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: "是否要禁用出码的动作按钮"
+    }]
+  }
+};
+export default plugin;

package/es/style.js

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

package/{dist → es}/types/index.d.ts

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

package/es/types/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +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.Element;
+export declare function fixSchema(schema: IPublicTypeProjectSchema): Promise<IPublicTypeProjectSchema>;