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

package/lib/components/GravityPreview/GravityPreview.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.GravityPreview = GravityPreview;
+var _react = _interopRequireWildcard(require("react"));
+var _GravitySdk = _interopRequireDefault(require("./GravitySdk"));
+var _ForceUpdate = require("./ForceUpdate");
+var _fixPreviewCode = require("../CodeGenPreview/fixPreviewCode");
+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; }
+function GravityPreview(_ref) {
+  var code = _ref.code,
+    height = _ref.height,
+    refresh = _ref.refresh;
+  var fixedCode = (0, _react.useMemo)(function () {
+    return fixGravityCode(code, refresh);
+  }, [code, refresh]);
+  if (!code || !fixedCode) {
+    return null;
+  }
+  console.log('GravityPreview', fixedCode);
+  return /*#__PURE__*/_react["default"].createElement(_ForceUpdate.ForceUpdate, {
+    watchKey: refresh
+  }, /*#__PURE__*/_react["default"].createElement(_GravitySdk["default"], {
+    code: fixedCode,
+    width: "100%",
+    height: height
+  }));
+}
+function fixGravityCode(code, refresh) {
+  if (!code) {
+    return null;
+  }
+  var fixed = (0, _fixPreviewCode.fixPreviewCode)(code);
+  Object.assign(fixed.modules, {
+    '/src/html.js': {
+      fpath: '/src/html.js',
+      code: "function runScript(script){\n  const newScript = document.createElement('script');\n  newScript.innerHTML = script.innerHTML;\n  const src = script.getAttribute('src');\n  if (src) newScript.setAttribute('src', src);\n\n  document.head.appendChild(newScript);\n  document.head.removeChild(newScript);\n}\n\nfunction setHTMLWithScript(container, rawHTML){\n  container.innerHTML = rawHTML;\n  const scripts = container.querySelectorAll('script');\n  for (let script of scripts) {\n    runScript(script);\n  }\n} var html = window.BrowserFS.BFSRequire('fs').readFileSync('/~/src/index.html').toString();setHTMLWithScript(document.getElementById(\"riddleContainer\"), html);",
+      entry: 1
+    }
+  });
+  return fixed;
+}

package/lib/components/GravityPreview/GravitySdk.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare function getHeight(): any;
+export declare function refresh(): void;
+export declare function clear(): void;
+export declare function getBoostState(): any;
+export declare function toggleBoostState(): void;
+export declare function isPrivateMode(): any;
+export declare function change(filename: any, content: any): void;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/lib/components/GravityPreview/GravitySdk.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.change = change;
+exports.clear = clear;
+exports["default"] = void 0;
+exports.getBoostState = getBoostState;
+exports.getHeight = getHeight;
+exports.isPrivateMode = isPrivateMode;
+exports.refresh = refresh;
+exports.toggleBoostState = toggleBoostState;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+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; }
+// 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;
+function getHeight() {
+  return height;
+}
+function refresh() {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_reload"
+    }, '*');
+  }
+}
+function clear() {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_remove_cache"
+    }, '*');
+  }
+}
+function getBoostState() {
+  return boostState;
+}
+function toggleBoostState() {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_toggle_boost_state"
+    }, '*');
+  }
+}
+function isPrivateMode() {
+  return isPrivate;
+}
+function change(filename, content) {
+  var channel = GRAVITY_PREFIX;
+  if (iframe) {
+    iframe.current.contentWindow.postMessage({
+      type: channel + "_file_change",
+      filename: filename,
+      content: content
+    }, '*');
+  }
+}
+var _default = exports["default"] = function _default(props) {
+  var iframeEl = (0, _react.useRef)(null);
+  iframe = iframeEl;
+  // let iframeElOnload = useRef(false);
+  (0, _react.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 = (0, _extends2["default"])({}, 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["default"].createElement("iframe", (0, _extends2["default"])({
+      ref: iframeEl
+    }, _final))
+  );
+};

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

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

package/lib/components/GravityPreview/index.js

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

package/lib/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/lib/components/SourcesView/SourcesView.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SourcesView = SourcesView;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("./SourcesView.scss");
+var _react = _interopRequireWildcard(require("react"));
+var _stringNaturalCompare = _interopRequireDefault(require("string-natural-compare"));
+var _next = require("@alifd/next");
+var _lowcodePluginBaseMonacoEditor = _interopRequireDefault(require("@alilc/lowcode-plugin-base-monaco-editor"));
+require("@alilc/lowcode-plugin-base-monaco-editor/lib/style");
+var _FileTypeIcon = require("../FileTypeIcon");
+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 FILE_TYPES_ICON_MAP = {
+  js: 'js',
+  jsx: 'jsx',
+  ts: 'ts',
+  tsx: 'ts',
+  json: 'json'
+};
+var DEBOUNCE_UPDATE_INTERVAL_IN_MS = 500;
+function SourcesView(_ref) {
+  var _state$currentFile, _state$currentFile2, _state$currentFile3;
+  var height = _ref.height,
+    code = _ref.code,
+    onCodeChange = _ref.onCodeChange;
+  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 ref = (0, _react.useRef)({
+    debounceTimer: null
+  });
+  var fileTreeNodes = (0, _react.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["default"].createElement(_FileTypeIcon.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 = (0, _react.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["default"].createElement("div", {
+    className: "code-gen-sources-view",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sources-panes"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-tree-pane"
+  }, /*#__PURE__*/_react["default"].createElement(_next.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["default"].createElement("div", {
+    className: "source-code-pane",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_lowcodePluginBaseMonacoEditor["default"], {
+    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((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 getFileIcon(file) {
+  var type = FILE_TYPES_ICON_MAP[(file || '').split('.').pop() || ''] || 'text';
+  return /*#__PURE__*/_react["default"].createElement(_FileTypeIcon.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 (0, _stringNaturalCompare["default"])(a.label, b.label);
+  }).map(function (node) {
+    var _node$children2;
+    if ((_node$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.length) {
+      return (0, _extends3["default"])({}, 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/lib/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/lib/components/SourcesView/index.d.ts

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

package/lib/components/SourcesView/index.js

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

package/lib/demo/index.d.ts

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