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

package/es/components/CodeGenResult/CodeGenResult.js

@@ -0,0 +1,162 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import './CodeGenResult.scss';
+import React, { useEffect, useState } from 'react';
+import FileSaver from 'file-saver';
+import JSZip from 'jszip';
+import { Collapse, Message } from '@alifd/next';
+import { CodeGenPreview } from '../CodeGenPreview';
+import { SourcesView } from '../SourcesView';
+export function CodeGenResult(_ref) {
+  var result = _ref.result,
+    schema = _ref.schema;
+  var _useState = useState({
+      expandedKeys: ['sources', 'preview']
+    }),
+    paneState = _useState[0],
+    setPaneState = _useState[1];
+  var _useState2 = useState(null),
+    gravityCode = _useState2[0],
+    setGravityCode = _useState2[1];
+  var _useState3 = useState(0),
+    refresh = _useState3[0],
+    setRefresh = _useState3[1];
+  useEffect(function () {
+    setGravityCode(convertCodeGenResult(result, schema));
+  }, [result]);
+  if (!result) {
+    return null;
+  }
+  var sourcesViewHeight = paneState.expandedKeys.includes('preview') ? '40vh' : '80vh';
+  var gravityDemoHeight = paneState.expandedKeys.includes('sources') ? '40vh' : '80vh';
+  var handleDownloadSources = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var zip;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            e.preventDefault();
+            e.stopPropagation();
+            zip = new JSZip();
+            Object.values((gravityCode === null || gravityCode === void 0 ? void 0 : gravityCode.modules) || {}).forEach(function (file) {
+              zip.file(file.fpath.replace(/^\/+/, ''), file.code);
+            });
+            _context.next = 7;
+            return zip.generateAsync({
+              type: 'blob'
+            }).then(function (content) {
+              FileSaver.saveAs(content, 'ali-lowcode-generated-sources.zip');
+            });
+          case 7:
+            _context.next = 13;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            console.log('failed to download sources: ', _context.t0);
+            Message.error('下载失败！');
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+    return function handleDownloadSources(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-result"
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    expandedKeys: paneState.expandedKeys,
+    onExpand: function onExpand(expandedKeys) {
+      setPaneState({
+        expandedKeys: expandedKeys
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Collapse.Panel, {
+    title: /*#__PURE__*/React.createElement("span", null, "\u51FA\u7801\u751F\u6210\u7684\u6E90\u4EE3\u7801", ' ', /*#__PURE__*/React.createElement("a", {
+      href: "javascript:void(0)",
+      onClick: handleDownloadSources
+    }, "\u5BFC\u51FA/\u4E0B\u8F7D zip \u5305")),
+    key: "sources"
+  }, gravityCode != null && /*#__PURE__*/React.createElement(SourcesView, {
+    height: sourcesViewHeight,
+    code: gravityCode,
+    onCodeChange: setGravityCode
+  })), /*#__PURE__*/React.createElement(Collapse.Panel, {
+    title: /*#__PURE__*/React.createElement("span", null, "\u5728\u7EBF\u9884\u89C8", ' ', /*#__PURE__*/React.createElement("a", {
+      href: "#refresh",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setRefresh(Date.now());
+      }
+    }, "\u5237\u65B0")),
+    key: "preview"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-result-gravity-demo",
+    style: {
+      height: gravityDemoHeight
+    }
+  }, /*#__PURE__*/React.createElement(CodeGenPreview, {
+    code: gravityCode,
+    height: gravityDemoHeight,
+    refresh: refresh
+  })))));
+}
+function convertCodeGenResult(result, schema) {
+  var schemaFiles = {
+    '/.project-schema.json': {
+      fpath: '/.project-schema.json',
+      code: JSON.stringify(schema, null, 2) + "\n"
+    }
+  };
+  if (!result || !Array.isArray(result) || !result.length) {
+    return {
+      type: 'demo',
+      modules: schemaFiles
+    };
+  }
+  var code = {
+    type: 'demo',
+    modules: result.reduce(function (acc, file) {
+      var _extends2;
+      return _extends({}, acc, (_extends2 = {}, _extends2["/" + file.pathName] = {
+        fpath: "/" + file.pathName,
+        code: file.content,
+        entry: undefined,
+        packagejson: ['package.json'].includes(file.pathName) ? 1 : undefined
+      }, _extends2));
+    }, {})
+  };
+  var foundEntry = false;
+
+  // 设置入口文件
+  ['index.js', 'index.ts', 'index.tsx', 'app.js', 'app.ts', 'app.tsx'].forEach(function (fileName) {
+    if (!foundEntry) {
+      var filePath = "/src/" + fileName;
+      if (code.modules[filePath]) {
+        foundEntry = true;
+        if (fileName === 'index.js') {
+          code.modules[filePath].entry = 1;
+        } else {
+          code.modules['/src/index.js'] = {
+            fpath: '/src/index.js',
+            entry: 1,
+            code: "import \"./" + fileName.replace(/\.\w+$/, '') + "\""
+          };
+        }
+      }
+    }
+  });
+  if (!foundEntry) {
+    console.warn('Failed to find entry file for demo.');
+  }
+
+  // 补充 schema 文件
+  Object.assign(code.modules, schemaFiles);
+  return code;
+}

package/es/components/CodeGenResult/CodeGenResult.scss

@@ -0,0 +1,7 @@
+.code-gen-result {
+  .code-gen-result-gravity-demo {
+    iframe {
+      height: 100%;
+    }
+  }
+}

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

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

package/es/components/CodeGenResult/index.js

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

package/es/components/CodeSandboxPreview/CodeSandboxPreview.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CodeGenPreviewProps } from '../CodeGenPreview';
+import './CodeSandboxPreview.scss';
+export declare function CodeSandboxPreview({ code, height }: CodeGenPreviewProps): JSX.Element;

package/es/components/CodeSandboxPreview/CodeSandboxPreview.js

@@ -0,0 +1,186 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useMemo, useState, useEffect } from 'react';
+import { Button, Loading, Message } from '@alifd/next';
+import { fixPreviewCode } from '../CodeGenPreview/fixPreviewCode';
+import './CodeSandboxPreview.scss';
+// 使用 CodeSandbox 来进行预览
+// @see https://codesandbox.io/docs/api#get-request
+export function CodeSandboxPreview(_ref) {
+  var code = _ref.code,
+    height = _ref.height;
+  var parameters = useMemo(function () {
+    var files = {};
+    if (code && code.modules) {
+      var fixedCode = fixPreviewCode(code);
+      Object.values(fixedCode.modules).forEach(function (file) {
+        var _file$fpath;
+        files[file === null || file === void 0 ? void 0 : (_file$fpath = file.fpath) === null || _file$fpath === void 0 ? void 0 : _file$fpath.slice(1)] = {
+          isBinary: false,
+          content: file.code
+        };
+      });
+
+      // 入口文件需要顺便引入下样式
+      files['src/index.js'] = {
+        isBinary: false,
+        content: "\n// \u76EE\u524D\u9700\u8981\u5355\u72EC\u5F15\u5165\u4E0B\u6837\u5F0F\u6587\u4EF6\nimport \"@alifd/next/dist/next.css\";\nimport \"@alifd/pro-layout/dist/AlifdProLayout.css\";\n\n// \u5F15\u5165\u5165\u53E3\u6587\u4EF6\nimport './app';\n"
+      };
+    }
+    return {
+      files: files,
+      template: 'create-react-app'
+    };
+  }, [code]);
+  var _useState = useState({
+      parameters: parameters,
+      sandboxId: '',
+      isCreating: false,
+      hasError: false,
+      error: null
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  useEffect(function () {
+    if (state.parameters !== parameters || state.sandboxId === 'retry' || !state.sandboxId) {
+      var hasCanceled = false;
+      setState(function (prev) {
+        return _extends({}, prev, {
+          hasError: false,
+          code: code,
+          parameters: parameters,
+          isCreating: true
+        });
+      });
+      _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var sandboxId;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return createCodeSandbox(parameters);
+            case 3:
+              sandboxId = _context.sent;
+              if (!hasCanceled) {
+                setState(function (prev) {
+                  return _extends({}, prev, {
+                    hasError: false,
+                    isCreating: false,
+                    sandboxId: sandboxId
+                  });
+                });
+              }
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              if (!hasCanceled) {
+                setState(function (prev) {
+                  return _extends({}, prev, {
+                    hasError: true,
+                    error: _context.t0,
+                    isCreating: false
+                  });
+                });
+              }
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }))();
+      return function () {
+        hasCanceled = true;
+      };
+    }
+    return function () {};
+  }, [parameters, state.sandboxId, state.parameters]);
+  var handleRetry = function handleRetry() {
+    setState(function (prev) {
+      return _extends({}, prev, {
+        hasError: false,
+        sandboxId: 'retry'
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "code-gen-plugin-code-sandbox-preview",
+    style: {
+      height: height
+    },
+    "data-code-sandbox-id": state.sandboxId
+  }, function () {
+    if (state.hasError) {
+      return /*#__PURE__*/React.createElement(Message, {
+        title: "\u751F\u6210 CodeSandbox \u9884\u89C8\u5E94\u7528\u5931\u8D25"
+      }, /*#__PURE__*/React.createElement("p", null, "\u8BE6\u7EC6\u9519\u8BEF\uFF1A", "" + (state.error || '网络开小差了')), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Button, {
+        onClick: handleRetry
+      }, "\u91CD\u65B0\u5C1D\u8BD5\u4E0B")));
+    }
+    return state.sandboxId ? /*#__PURE__*/React.createElement("iframe", {
+      src: "https://codesandbox.io/embed/" + state.sandboxId + "?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview",
+      title: "CodeSandbox Preview",
+      allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
+      sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    }) : /*#__PURE__*/React.createElement(Loading, {
+      tip: "\u6B63\u5728\u751F\u6210 CodeSandbox \u9884\u89C8\u5E94\u7528..."
+    });
+  }());
+}
+function createCodeSandbox(_x) {
+  return _createCodeSandbox.apply(this, arguments);
+}
+function _createCodeSandbox() {
+  _createCodeSandbox = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(parameters) {
+    var res, json, _ref3, sandbox_id;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (Object.entries((parameters === null || parameters === void 0 ? void 0 : parameters.files) || {}).length) {
+            _context2.next = 2;
+            break;
+          }
+          return _context2.abrupt("return", '');
+        case 2:
+          _context2.next = 4;
+          return fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Accept: 'application/json'
+            },
+            body: JSON.stringify(parameters)
+          });
+        case 4:
+          res = _context2.sent;
+          if (res.ok) {
+            _context2.next = 7;
+            break;
+          }
+          throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u9519\u8BEF\u7801\uFF1A" + res.status + " " + res.statusText);
+        case 7:
+          _context2.next = 9;
+          return res.json()["catch"](function (err) {
+            throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u670D\u52A1\u5F02\u5E38(" + ((err === null || err === void 0 ? void 0 : err.message) || err || '未知异常') + ")");
+          });
+        case 9:
+          json = _context2.sent;
+          _ref3 = json || {}, sandbox_id = _ref3.sandbox_id;
+          if (!(!sandbox_id || typeof sandbox_id !== 'string')) {
+            _context2.next = 13;
+            break;
+          }
+          throw new Error("\u521B\u5EFA CodeSandbox \u5931\u8D25\uFF0C\u670D\u52A1\u54CD\u5E94\u5F02\u5E38");
+        case 13:
+          return _context2.abrupt("return", sandbox_id);
+        case 14:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _createCodeSandbox.apply(this, arguments);
+}

package/es/components/CodeSandboxPreview/CodeSandboxPreview.scss

@@ -0,0 +1,18 @@
+.code-gen-plugin-code-sandbox-preview {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  height: 100%;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    border: 0;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

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

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

package/es/components/CodeSandboxPreview/index.js

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

package/es/components/FileTypeIcon/FileTypeIcon.d.ts

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

package/es/components/FileTypeIcon/FileTypeIcon.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["type"];
+import './FileTypeIcon.scss';
+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/FileTypeIcon/FileTypeIcon.scss

@@ -0,0 +1,36 @@
+// source: https://at.alicdn.com/t/font_2997782_rtal7ux80t.css
+
+@font-face {
+  font-family: "file-types-iconfont"; /* Project id 2997782 */
+  src: url('//at.alicdn.com/t/font_2997782_rtal7ux80t.woff2?t=1638951976966') format('woff2'),
+       url('//at.alicdn.com/t/font_2997782_rtal7ux80t.woff?t=1638951976966') format('woff'),
+       url('//at.alicdn.com/t/font_2997782_rtal7ux80t.ttf?t=1638951976966') format('truetype');
+}
+
+.file-types-iconfont {
+  font-family: "file-types-iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.file-types-icon-folder:before {
+  content: "\e6e9";
+}
+
+.file-types-icon-text:before {
+  content: "\e6a7";
+}
+
+.file-types-icon-jsx:before {
+  content: "\e63b";
+}
+
+.file-types-icon-js:before {
+  content: "\e618";
+}
+
+.file-types-icon-json:before {
+  content: "\e642";
+}

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

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

package/es/components/FileTypeIcon/index.js

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

package/es/components/GravityCode/GravityCode.d.ts

@@ -0,0 +1,9 @@
+export declare type GravityCode = {
+    type: string;
+    modules: Record<string, {
+        entry?: 1;
+        packagejson?: 1;
+        code: string;
+        fpath: string;
+    }>;
+};

package/es/components/GravityCode/GravityCode.js

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

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

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

package/es/components/GravityCode/index.js

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ForceUpdateProps {
+    watchKey: string | number;
+    children?: React.ReactNode;
+}
+export declare function ForceUpdate({ watchKey, children }: ForceUpdateProps): JSX.Element;

package/es/components/GravityPreview/ForceUpdate.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export function ForceUpdate(_ref) {
+  var watchKey = _ref.watchKey,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, [/*#__PURE__*/React.createElement(ForceUpdateContent, {
+    key: watchKey
+  }, children)]);
+}
+function ForceUpdateContent(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GravityCode } from '../GravityCode/GravityCode';
+export declare function GravityPreview({ code, height, refresh }: {
+    code: GravityCode | null;
+    height: string | number;
+    refresh: string | number;
+}): JSX.Element;

package/es/components/GravityPreview/GravityPreview.js

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import GravityDemoSDK from './GravitySdk';
+import { ForceUpdate } from './ForceUpdate';
+import { fixPreviewCode } from '../CodeGenPreview/fixPreviewCode';
+export function GravityPreview(_ref) {
+  var code = _ref.code,
+    height = _ref.height,
+    refresh = _ref.refresh;
+  var fixedCode = useMemo(function () {
+    return fixGravityCode(code, refresh);
+  }, [code, refresh]);
+  if (!code || !fixedCode) {
+    return null;
+  }
+  console.log('GravityPreview', fixedCode);
+  return /*#__PURE__*/React.createElement(ForceUpdate, {
+    watchKey: refresh
+  }, /*#__PURE__*/React.createElement(GravityDemoSDK, {
+    code: fixedCode,
+    width: "100%",
+    height: height
+  }));
+}
+function fixGravityCode(code, refresh) {
+  if (!code) {
+    return null;
+  }
+  var fixed = 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/es/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;