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

package/es/components/GravityPreview/GravitySdk.js

@@ -0,0 +1,183 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useEffect } from 'react';
+
+// const GRAVITY_PREFIX = 'lowcodeGravityPreview';
+// const GRAVITY_PREFIX = 'gravityDemoSdk';
+var GRAVITY_PREFIX = 'gravityRiddleSdk';
+var defaultProps = {
+  // src: "https://gw.alipayobjects.com/as/g/Gravity/gravity/5.0.0-beta.10/gravityDemoSdk/index.html"
+  src: 'https://gw.alipayobjects.com/as/g/Gravity/gravity/5.0.0-beta.10/gravityRiddleSdk/index.html',
+  code: {},
+  target: null,
+  style: {
+    backgroundColor: '#fff',
+    border: 'none',
+    position: null,
+    display: 'block',
+    overflow: null
+  },
+  scrolling: null,
+  importance: null,
+  sandbox: null,
+  loading: null,
+  styles: null,
+  name: null,
+  className: null,
+  referrerPolicy: null,
+  title: null,
+  allow: 'clipboard-read;clipboard-write;camera;microphone',
+  id: null,
+  'aria-labelledby': null,
+  'aria-hidden': null,
+  'aria-label': null,
+  width: null,
+  height: null,
+  onLoad: null,
+  onMouseOver: null,
+  onMouseOut: null
+};
+var height;
+var boostState;
+var iframe;
+var isPrivate;
+export function getHeight() {
+  return height;
+}
+export function refresh() {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_reload"
+    }, '*');
+  }
+}
+export function clear() {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_remove_cache"
+    }, '*');
+  }
+}
+export function getBoostState() {
+  return boostState;
+}
+export function toggleBoostState() {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_toggle_boost_state"
+    }, '*');
+  }
+}
+export function isPrivateMode() {
+  return isPrivate;
+}
+export function change(filename, content) {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_file_change",
+      filename: filename,
+      content: content
+    }, '*');
+  }
+}
+export default (function (props) {
+  var iframeEl = useRef(null);
+  iframe = iframeEl;
+  // let iframeElOnload = useRef(false);
+  useEffect(function () {
+    // iframeEl.current.contentWindow.location.reload();
+    var channel = GRAVITY_PREFIX;
+    iframeEl.current.contentWindow.postMessage({
+      type: channel + "_reload"
+    }, '*');
+    function handler(msg) {
+      var channel = GRAVITY_PREFIX;
+      var type = msg.data.type;
+      if (type) {
+        if (type === channel + "_force_update") {
+          if (props.force) {
+            props.force();
+          }
+        }
+        if (type === channel + "_code_fetch") {
+          if (props.code && props.code.modules) {
+            var modules = props.code.modules;
+            var imn = '';
+            var im = Object.keys(modules).some(function (m) {
+              if (modules[m].code === null || modules[m].code === undefined) {
+                imn = m;
+                return m;
+              }
+              return false;
+            });
+            if (!im) {
+              iframeEl.current.contentWindow.postMessage({
+                type: channel + "_code_fetch",
+                code: props.code
+              }, '*');
+            } else {
+              console.warn("\u6A21\u5757 " + imn + " \u4EE3\u7801\u5B58\u5728\u5F02\u5E38\uFF0Ccode \u4E3A " + modules[imn].code);
+            }
+          }
+        }
+        if (type === channel + "_get_height") {
+          height = msg.data && msg.data.height || 0;
+        }
+        if (type === channel + "_boost_state") {
+          boostState = msg.data && msg.data.boostState;
+        }
+        if (type === channel + "_is_private_mode") {
+          isPrivate = msg.data && msg.data.isPrivateMode;
+        }
+      }
+    }
+    window.addEventListener('message', handler);
+    return function () {
+      window.removeEventListener('message', handler);
+    };
+
+    // return iframeEl.current.addEventListener('load', () => {
+    //   iframeElOnload = true;
+    //   iframeEl.current.contentWindow.postMessage({
+    //     type: 'demo_fetch_code',
+    //     code,
+    //   });
+    // });
+  }, [props.code]);
+
+  // useEffect(() => {
+  //   if (iframeElOnload) {
+  //     iframeEl.current.contentWindow.postMessage({
+  //       type: 'demo_fetch_code',
+  //       code,
+  //     });
+  //   }
+  // }, [
+  //   props.code
+  // ]);
+
+  var newProps = _extends({}, defaultProps, props);
+  var _final = Object.create(null);
+  for (var _i = 0, _Object$keys = Object.keys(newProps); _i < _Object$keys.length; _i++) {
+    var prop = _Object$keys[_i];
+    if (newProps[prop] != null) {
+      _final[prop] = newProps[prop];
+    }
+  }
+  for (var _i2 = 0, _Object$keys2 = Object.keys(_final.style); _i2 < _Object$keys2.length; _i2++) {
+    var i = _Object$keys2[_i2];
+    if (_final.style[i] == null) {
+      delete _final.style[i];
+    }
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line
+    React.createElement("iframe", _extends({
+      ref: iframeEl
+    }, _final))
+  );
+});

package/es/components/GravityPreview/index.d.ts

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

package/es/components/GravityPreview/index.js

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

package/es/components/SourcesView/SourcesView.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './SourcesView.scss';
+import '@alilc/lowcode-plugin-base-monaco-editor/lib/style';
+import { GravityCode } from '../GravityCode';
+export declare function SourcesView({ height, code, onCodeChange }: {
+    height: string;
+    code: GravityCode;
+    onCodeChange: (code: GravityCode) => void;
+}): JSX.Element;

package/es/components/SourcesView/SourcesView.js

@@ -0,0 +1,197 @@
+import _extends from "@babel/runtime/helpers/extends";
+import './SourcesView.scss';
+import React, { useMemo, useRef, useState } from 'react';
+import naturalCompare from 'string-natural-compare';
+import { Tree } from '@alifd/next';
+import Editor from '@alilc/lowcode-plugin-base-monaco-editor';
+import '@alilc/lowcode-plugin-base-monaco-editor/lib/style';
+import { FileTypeIcon } from '../FileTypeIcon';
+var FILE_TYPES_ICON_MAP = {
+  js: 'js',
+  jsx: 'jsx',
+  ts: 'ts',
+  tsx: 'ts',
+  json: 'json'
+};
+var DEBOUNCE_UPDATE_INTERVAL_IN_MS = 500;
+export function SourcesView(_ref) {
+  var _state$currentFile, _state$currentFile2, _state$currentFile3;
+  var height = _ref.height,
+    code = _ref.code,
+    onCodeChange = _ref.onCodeChange;
+  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 ref = useRef({
+    debounceTimer: null
+  });
+  var fileTreeNodes = useMemo(function () {
+    var files = Object.values(code.modules);
+    var rootNodes = [];
+    files.forEach(function (file) {
+      var _addFileToNodes = function addFileToNodes(currentNodes, basePath, path, file) {
+        var _path$split$filter = path.split('/').filter(Boolean),
+          head = _path$split$filter[0],
+          tail = _path$split$filter.slice(1);
+        if (tail.length === 0) {
+          currentNodes.push({
+            label: head,
+            key: file.fpath,
+            children: [],
+            icon: getFileIcon(file.fpath)
+          });
+        } else {
+          var parentNode = currentNodes.find(function (node) {
+            return node.label === head;
+          });
+          if (!parentNode) {
+            parentNode = {
+              label: head,
+              key: basePath + "/" + head,
+              children: [],
+              icon: /*#__PURE__*/React.createElement(FileTypeIcon, {
+                type: "folder"
+              })
+            };
+            currentNodes.push(parentNode);
+          }
+          parentNode.children = parentNode.children || [];
+          _addFileToNodes(parentNode.children, basePath + "/" + head, tail.join('/'), file);
+        }
+      };
+      _addFileToNodes(rootNodes, '/', file.fpath, file);
+    });
+    return sortNodes(rootNodes);
+  }, [code]);
+  var defaultExpandedKeys = useMemo(function () {
+    return Array.from(new Set([].concat(fileTreeNodes.filter(function (node) {
+      var _node$children;
+      return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length;
+    }).map(function (node) {
+      return node.key;
+    }), state.selectedKeys, ['src', 'src/pages'])).values());
+  }, [fileTreeNodes, state.selectedKeys]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-sources-view",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sources-panes"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file-tree-pane"
+  }, /*#__PURE__*/React.createElement(Tree, {
+    dataSource: fileTreeNodes,
+    selectable: true,
+    selectedKeys: state.selectedKeys,
+    defaultExpandedKeys: defaultExpandedKeys,
+    onSelect: function onSelect(keys) {
+      setState(function (prev) {
+        if (ref.current.debounceTimer) {
+          ref.current.debounceTimer = null;
+        }
+        return {
+          selectedKeys: keys,
+          currentFile: code.modules[keys[0]] || prev.currentFile
+        };
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "source-code-pane",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement(Editor, {
+    height: calcHeightInPx(height) - 2 // 注意：这里的编辑器会有边框所以要减掉一点
+    ,
+    language: getFileLanguage((_state$currentFile = state.currentFile) === null || _state$currentFile === void 0 ? void 0 : _state$currentFile.fpath),
+    saveViewState: true,
+    defaultValue: (_state$currentFile2 = state.currentFile) === null || _state$currentFile2 === void 0 ? void 0 : _state$currentFile2.code,
+    path: (_state$currentFile3 = state.currentFile) === null || _state$currentFile3 === void 0 ? void 0 : _state$currentFile3.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 getFileIcon(file) {
+  var type = FILE_TYPES_ICON_MAP[(file || '').split('.').pop() || ''] || 'text';
+  return /*#__PURE__*/React.createElement(FileTypeIcon, {
+    type: type
+  });
+}
+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';
+  }
+}
+function sortNodes(nodes) {
+  return nodes.sort(function (a, b) {
+    var _a$children, _b$children, _a$children2, _b$children2;
+    if ((_a$children = a.children) !== null && _a$children !== void 0 && _a$children.length && !((_b$children = b.children) !== null && _b$children !== void 0 && _b$children.length)) {
+      return -1;
+    }
+    if (!((_a$children2 = a.children) !== null && _a$children2 !== void 0 && _a$children2.length) && (_b$children2 = b.children) !== null && _b$children2 !== void 0 && _b$children2.length) {
+      return 1;
+    }
+    return naturalCompare(a.label, b.label);
+  }).map(function (node) {
+    var _node$children2;
+    if ((_node$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.length) {
+      return _extends({}, node, {
+        children: sortNodes(node.children)
+      });
+    }
+    return node;
+  });
+}
+function calcHeightInPx(height) {
+  var div = document.createElement('div');
+  div.setAttribute('style', "position:fixed;top:0;left:0;width:0;height:" + height + ";");
+  document.body.appendChild(div);
+  return Number(div.getBoundingClientRect().height.toFixed(0));
+}

package/es/components/SourcesView/SourcesView.scss

@@ -0,0 +1,24 @@
+.code-gen-sources-view {
+  height: 100%;
+  .sources-panes {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+  }
+  .file-tree-pane {
+    width: 230px;
+    overflow-y: auto;
+    height: 100%;
+    border-right: 1px solid #e0e0e0;
+    .file-types-iconfont {
+      font-size: 12px;
+      margin-right: 4px;
+      margin-left: -10px;
+    }
+  }
+  .source-code-pane {
+    flex: 1;
+    overflow-y: auto;
+    height: 100%;
+  }
+}

package/es/components/SourcesView/index.d.ts

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

package/es/components/SourcesView/index.js

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

package/es/demo/index.d.ts

@@ -0,0 +1 @@
+import './index.scss';

package/es/demo/index.js

@@ -0,0 +1,223 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import './index.scss';
+import React from 'react';
+import { init, plugins } from '@alilc/lowcode-engine';
+import ComponentsPane from '@alilc/lowcode-plugin-components-pane';
+import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject';
+import CodeGenPlugin from '../';
+var preference = new Map();
+preference.set('DataSourcePane', {
+  importPlugins: [],
+  dataSourceTypes: [{
+    type: 'fetch'
+  }, {
+    type: 'jsonp'
+  }]
+});
+(function () {
+  var _main = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var setterRegistry;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.next = 2;
+          return plugins.register(Inject);
+        case 2:
+          _context4.next = 4;
+          return plugins.register(Object.assign(function (ctx) {
+            return {
+              name: 'editor-init',
+              init: function init() {
+                return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                  var assets, schema;
+                  return _regeneratorRuntime.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 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 plugins.register(Object.assign(function (ctx) {
+            return {
+              name: 'builtin-plugin-registry',
+              init: function init() {
+                return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                  var _componentsPane$disab;
+                  var skeleton, project, componentsPane;
+                  return _regeneratorRuntime.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: ComponentsPane,
+                          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.createElement("div", {
+                            className: "editor-logo"
+                          }, /*#__PURE__*/React.createElement("img", {
+                            width: "137",
+                            height: "26",
+                            src: "https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg"
+                          }), /*#__PURE__*/React.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 plugins.register(CodeGenPlugin);
+        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 _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+                  var setters, skeleton;
+                  return _regeneratorRuntime.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 plugins.register(setterRegistry);
+        case 12:
+          // 初始化设计器
+          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 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(url) {
+    var res;
+    return _regeneratorRuntime.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);
+}