@dckj-npm/lowcode-plugin-code-generator 1.0.0

package/lib/demo/index.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+require("./index.scss");
+var _react = _interopRequireDefault(require("react"));
+var _lowcodeEngine = require("@alilc/lowcode-engine");
+var _lowcodePluginComponentsPane = _interopRequireDefault(require("@alilc/lowcode-plugin-components-pane"));
+var _lowcodePluginInject = _interopRequireWildcard(require("@alilc/lowcode-plugin-inject"));
+var _ = _interopRequireDefault(require("../"));
+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 preference = new Map();
+preference.set('DataSourcePane', {
+  importPlugins: [],
+  dataSourceTypes: [{
+    type: 'fetch'
+  }, {
+    type: 'jsonp'
+  }]
+});
+(function () {
+  var _main = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var setterRegistry;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.next = 2;
+          return _lowcodeEngine.plugins.register(_lowcodePluginInject["default"]);
+        case 2:
+          _context4.next = 4;
+          return _lowcodeEngine.plugins.register(Object.assign(function (ctx) {
+            return {
+              name: 'editor-init',
+              init: function init() {
+                return (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+                  var assets, schema;
+                  return _regenerator["default"].wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return fetchJSON('/assets.json');
+                      case 2:
+                        assets = _context.sent;
+                        _context.t0 = ctx.material;
+                        _context.next = 6;
+                        return (0, _lowcodePluginInject.injectAssets)(assets);
+                      case 6:
+                        _context.t1 = _context.sent;
+                        _context.t0.setAssets.call(_context.t0, _context.t1);
+                        _context.next = 10;
+                        return fetchJSON('/schema.json');
+                      case 10:
+                        schema = _context.sent;
+                        // 加载 schema
+                        ctx.project.openDocument(schema);
+                      case 12:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }))();
+              }
+            };
+          }, {
+            pluginName: 'editorInit'
+          }));
+        case 4:
+          _context4.next = 6;
+          return _lowcodeEngine.plugins.register(Object.assign(function (ctx) {
+            return {
+              name: 'builtin-plugin-registry',
+              init: function init() {
+                return (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+                  var _componentsPane$disab;
+                  var skeleton, project, componentsPane;
+                  return _regenerator["default"].wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        skeleton = ctx.skeleton, project = ctx.project; // 注册组件面板
+                        componentsPane = skeleton.add({
+                          area: 'leftArea',
+                          type: 'PanelDock',
+                          name: 'componentsPane',
+                          content: _lowcodePluginComponentsPane["default"],
+                          contentProps: {},
+                          props: {
+                            align: 'top',
+                            icon: 'zujianku',
+                            description: '组件库'
+                          }
+                        });
+                        componentsPane === null || componentsPane === void 0 ? void 0 : (_componentsPane$disab = componentsPane.disable) === null || _componentsPane$disab === void 0 ? void 0 : _componentsPane$disab.call(componentsPane);
+                        project.onSimulatorRendererReady(function () {
+                          var _componentsPane$enabl;
+                          componentsPane === null || componentsPane === void 0 ? void 0 : (_componentsPane$enabl = componentsPane.enable) === null || _componentsPane$enabl === void 0 ? void 0 : _componentsPane$enabl.call(componentsPane);
+                        });
+
+                        // 注册 logo 面板
+                        skeleton.add({
+                          area: 'topArea',
+                          type: 'Widget',
+                          name: 'logo',
+                          content: /*#__PURE__*/_react["default"].createElement("div", {
+                            className: "editor-logo"
+                          }, /*#__PURE__*/_react["default"].createElement("img", {
+                            width: "137",
+                            height: "26",
+                            src: "https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg"
+                          }), /*#__PURE__*/_react["default"].createElement("strong", {
+                            style: {
+                              lineHeight: '26px',
+                              fontSize: '20px',
+                              verticalAlign: '6px',
+                              marginLeft: '4px'
+                            }
+                          }, "\u51FA\u7801\u793A\u4F8B")),
+                          props: {
+                            align: 'left'
+                          }
+                        });
+                      case 5:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }))();
+              }
+            };
+          }, {
+            pluginName: 'builtinPluginRegistry'
+          }));
+        case 6:
+          _context4.next = 8;
+          return _lowcodeEngine.plugins.register(_["default"]);
+        case 8:
+          // 设置内置 setter 和事件绑定、插件绑定面板
+          setterRegistry = function setterRegistry(ctx) {
+            var _AliLowCodeEngineExt = window.AliLowCodeEngineExt,
+              setterMap = _AliLowCodeEngineExt.setterMap,
+              pluginMap = _AliLowCodeEngineExt.pluginMap;
+            return {
+              name: 'ext-setters-registry',
+              init: function init() {
+                return (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+                  var setters, skeleton;
+                  return _regenerator["default"].wrap(function _callee3$(_context3) {
+                    while (1) switch (_context3.prev = _context3.next) {
+                      case 0:
+                        setters = ctx.setters, skeleton = ctx.skeleton; // 注册setterMap
+                        setters.registerSetter(setterMap);
+                        // 注册插件
+                        // 注册事件绑定面板
+                        skeleton.add({
+                          area: 'centerArea',
+                          type: 'Widget',
+                          content: pluginMap.EventBindDialog,
+                          name: 'eventBindDialog',
+                          props: {}
+                        });
+
+                        // 注册变量绑定面板
+                        skeleton.add({
+                          area: 'centerArea',
+                          type: 'Widget',
+                          content: pluginMap.VariableBindDialog,
+                          name: 'variableBindDialog',
+                          props: {}
+                        });
+                      case 4:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }, _callee3);
+                }))();
+              }
+            };
+          };
+          setterRegistry.pluginName = 'setterRegistry';
+          _context4.next = 12;
+          return _lowcodeEngine.plugins.register(setterRegistry);
+        case 12:
+          // 初始化设计器
+          (0, _lowcodeEngine.init)(document.getElementById('lce-container'), {
+            // designMode: 'live',
+            // locale: 'zh-CN',
+            enableCondition: true,
+            enableCanvasLock: true,
+            // 默认绑定变量
+            supportVariableGlobally: true,
+            // simulatorUrl 在当 engine-core.js 同一个路径下时是不需要配置的！！！
+            // 这里因为用的是 unpkg，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
+            simulatorUrl: ['https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@beta/dist/css/react-simulator-renderer.css', 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@beta/dist/js/react-simulator-renderer.js']
+          }, preference);
+        case 13:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  function main() {
+    return _main.apply(this, arguments);
+  }
+  return main;
+})()();
+function fetchJSON(_x) {
+  return _fetchJSON.apply(this, arguments);
+}
+function _fetchJSON() {
+  _fetchJSON = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(url) {
+    var res;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
+          return fetch(url);
+        case 2:
+          res = _context5.sent;
+          return _context5.abrupt("return", res.json());
+        case 4:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return _fetchJSON.apply(this, arguments);
+}

package/lib/demo/index.scss

@@ -0,0 +1,56 @@
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
+  font-size: 12px;
+  * {
+    box-sizing: border-box;
+  }
+}
+
+body,
+#lce-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+  #engine {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+html {
+  min-width: 1024px;
+}
+
+.save-sample {
+  width: 80px;
+  height: 30px;
+  background-color: #5584ff;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+}
+
+.load-assets {
+  width: 100px;
+  height: 30px;
+  background-color: #5584ff;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+}

package/lib/index.d.ts

@@ -0,0 +1,30 @@
+import * as CodeGenerator from '@dckj-npm/lowcode-code-generator/standalone-loader';
+export interface ICodeGenPlugin {
+    generateCode: typeof CodeGenerator.generateCode;
+}
+export declare type CodeGenPluginOptions = {
+    /** 是否要禁用出码的动作按钮(默认: 否) */
+    disableCodeGenActionBtn?: boolean;
+};
+declare const codeGeneratorPlugin: {
+    (ctx: any, options?: CodeGenPluginOptions): {
+        exports(): {
+            generateCode: typeof CodeGenerator.generateCode;
+        };
+        init(): Promise<void>;
+        destroy(): void;
+    };
+    pluginName: string;
+    meta: {
+        dependencies: any[];
+        preferenceDeclaration: {
+            title: string;
+            properties: {
+                key: string;
+                type: string;
+                description: string;
+            }[];
+        };
+    };
+};
+export default codeGeneratorPlugin;

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("@dckj-npm/lowcode-code-generator/standalone-loader"));
+var _CodeGenActionBtn = require("./components/CodeGenActionBtn");
+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 codeGeneratorPlugin = function codeGeneratorPlugin(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: _CodeGenActionBtn.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() {}
+  };
+};
+codeGeneratorPlugin.pluginName = 'codeGenerator';
+codeGeneratorPlugin.meta = {
+  dependencies: [],
+  preferenceDeclaration: {
+    title: 'codeGenerator 的参数定义',
+    properties: [{
+      key: 'disableCodeGenActionBtn',
+      type: 'boolean',
+      description: '是否要禁用出码的动作按钮'
+    }]
+  }
+};
+var _default = exports["default"] = codeGeneratorPlugin;

package/lib/style.js

@@ -0,0 +1,2 @@
+
+require('@alilc/lowcode-plugin-base-monaco-editor/lib/style');

package/lib/types/SyncCodeGenResult.d.ts

@@ -0,0 +1,7 @@
+export declare type SyncCodeGenResult = {
+    type: 'SYNC_RESULT';
+    sourceFiles: Array<{
+        pathName: string;
+        content: string;
+    }>;
+};

package/lib/types/SyncCodeGenResult.js

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

package/lib/types/index.d.ts

@@ -0,0 +1 @@
+export * from './SyncCodeGenResult';

package/lib/types/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _SyncCodeGenResult = require("./SyncCodeGenResult");
+Object.keys(_SyncCodeGenResult).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SyncCodeGenResult[key]) return;
+  exports[key] = _SyncCodeGenResult[key];
+});

package/lib/typings.d.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@dckj-npm/lowcode-plugin-code-generator",
+  "version": "1.0.0",
+  "description": "集团低代码引擎 - 浏览器出码插件",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "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}'",
+    "prepablishOnly": "npm run clean && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.alibaba-inc.com:ali-lowcode/code-generator-demo.git"
+  },
+  "keywords": [
+    "出码"
+  ],
+  "authors": [
+    {
+      "name": "zgm"
+    }
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@alilc/lowcode-code-generator": "^1.0.4",
+    "@alilc/lowcode-plugin-base-monaco-editor": "^1.0.0",
+    "@alilc/lowcode-types": "^1.0.0",
+    "@dckj-npm/lowcode-code-generator": "^1.0.3",
+    "@types/file-saver": "^2.0.4",
+    "@types/js-base64": "^3.3.1",
+    "@types/string-natural-compare": "^3.0.2",
+    "codesandbox": "^2.2.3",
+    "file-saver": "^2.0.5",
+    "js-base64": "^3.6.1",
+    "jszip": "^3.7.1",
+    "semver": "^7.3.5",
+    "string-natural-compare": "^3.0.1",
+    "tslib": "^2.3.1"
+  },
+  "peerDependencies": {
+    "@alilc/lowcode-engine": "^1.0.0",
+    "react": "16.x || 17.x"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.18",
+    "@alifd/theme-lowcode-light": "^0.2.1",
+    "@alilc/lowcode-engine": "^1.0.0",
+    "@alilc/lowcode-engine-ext": "^1.0.0",
+    "@alilc/lowcode-plugin-code-editor": "^1.0.1",
+    "@alilc/lowcode-plugin-components-pane": "^1.0.2",
+    "@alilc/lowcode-plugin-datasource-pane": "^1.0.3",
+    "@alilc/lowcode-plugin-inject": "^1.0.0",
+    "@alilc/lowcode-plugin-manual": "^1.0.3",
+    "@alilc/lowcode-plugin-schema": "^1.0.0",
+    "@alilc/lowcode-plugin-simulator-select": "^1.0.0",
+    "@alilc/lowcode-plugin-undo-redo": "^1.0.0",
+    "@alilc/lowcode-plugin-zh-en": "^1.0.0",
+    "@alilc/lowcode-react-renderer": "^1.0.0",
+    "@alilc/lowcode-setter-behavior": "^1.0.0",
+    "@alilc/lowcode-setter-title": "^1.0.2",
+    "@alilc/lowcode-types": "^1.0.0",
+    "@types/classnames": "^2.2.7",
+    "@types/events": "^3.0.0",
+    "@types/node": "^13.7.1",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.2",
+    "@types/streamsaver": "^2.0.0",
+    "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",
+    "cross-env": "^7.0.3",
+    "prettier": "^2.5.1",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "rimraf": "^3.0.2",
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "typescript": "^4.5.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}