@gant-lowcode/plugin-code-generator 0.0.0

package/README.md

@@ -0,0 +1,23 @@
+# Rslib Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```

package/dist/components/code-gen-action/index.css

@@ -0,0 +1,18 @@
+.code-gen-plugin-loading {
+  width: 100%;
+  margin: 2em auto;
+}
+
+.code-gen-drawer .ant-drawer-body {
+  margin: 0;
+  padding: 0;
+}
+
+.code-gen-plugin-result {
+  width: 100%;
+}
+
+.code-gen-plugin-result .next-message-error .next-message-content {
+  white-space: pre-wrap;
+}
+

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

@@ -0,0 +1,6 @@
+import { IPublicTypeProjectSchema, IPublicModelPluginContext } from "@gant-lowcode/lowcode-types";
+import "./index.less";
+export declare function CodeGenActionBtn({ ctx }: {
+    ctx: IPublicModelPluginContext;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function fixSchema(schema: IPublicTypeProjectSchema): Promise<IPublicTypeProjectSchema>;

package/dist/components/code-gen-action/index.js

@@ -0,0 +1,143 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__gant_lowcode_code_generator_standalone_loader__ from "@gant-lowcode/code-generator/standalone-loader";
+import * as __WEBPACK_EXTERNAL_MODULE__gant_lowcode_lowcode_types__ from "@gant-lowcode/lowcode-types";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE_semver_functions_coerce__ from "semver/functions/coerce";
+import * as __WEBPACK_EXTERNAL_MODULE__code_gen_result_index_js__ from "../code-gen-result/index.js";
+import "./index.css";
+import * as __WEBPACK_EXTERNAL_MODULE__ant_design_icons__ from "@ant-design/icons";
+function CodeGenActionBtn({ ctx }) {
+    const [state, setState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
+        open: false,
+        hasError: false,
+        error: null,
+        loading: false,
+        result: null,
+        schema: null,
+        originalSchema: null
+    });
+    const handleClick = async ()=>{
+        try {
+            // 打开基于 Gravity 的编辑器/出码预览器
+            setState((prev)=>({
+                    ...prev,
+                    loading: true,
+                    open: true,
+                    hasError: false
+                }));
+            console.log('--ctx', ctx);
+            const getProjectSchema = ctx.config.get('getProjectSchema');
+            let originalSchema;
+            originalSchema = getProjectSchema ? await getProjectSchema() : await ctx.project.exportSchema(__WEBPACK_EXTERNAL_MODULE__gant_lowcode_lowcode_types__.IPublicEnumTransformStage.Save);
+            // 获取 schema，并修正
+            const schema = await fixSchema(originalSchema);
+            console.log("got schema: ", schema);
+            setState((prev)=>({
+                    ...prev,
+                    schema,
+                    originalSchema
+                }));
+            // 出码...
+            const result = await (0, __WEBPACK_EXTERNAL_MODULE__gant_lowcode_code_generator_standalone_loader__.generateCode)({
+                solution: "gantLegacy",
+                schema,
+                flattenResult: true,
+                builderOptions: {
+                    // mode: 'fully',
+                    rootPaths: [
+                        'packages',
+                        'icost'
+                    ],
+                    pagePaths: [],
+                    configPaths: []
+                }
+            });
+            console.log("generated: ", result);
+            setState((prev)=>({
+                    ...prev,
+                    loading: false,
+                    result
+                }));
+        } catch (e) {
+            console.error("failed to run code generator: ", e);
+            setState((prev)=>({
+                    ...prev,
+                    hasError: true,
+                    error: e instanceof Error ? e : new Error(`${e?.message || e}`)
+                }));
+        }
+    };
+    let drawerChildren = null;
+    if (state.hasError) drawerChildren = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Alert, {
+        type: "error",
+        message: "出错了",
+        description: state.error?.message
+    });
+    if (state.loading) drawerChildren = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Spin, {
+        className: "code-gen-plugin-loading",
+        spinning: true,
+        tip: "正在出码..."
+    });
+    drawerChildren = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__code_gen_result_index_js__.CodeGenResult, {
+        result: state.result,
+        schema: state.schema,
+        originalSchema: state.originalSchema
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
+                type: "text",
+                onClick: handleClick,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons__.CodeOutlined, {})
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Drawer, {
+                open: state.open,
+                title: "出码结果",
+                width: "95vw",
+                rootClassName: "code-gen-drawer",
+                onClose: ()=>{
+                    setState((prev)=>({
+                            ...prev,
+                            open: false
+                        }));
+                },
+                children: drawerChildren
+            })
+        ]
+    });
+}
+async function fixSchema(schema) {
+    return deepClone({
+        ...schema,
+        componentsMap: schema.componentsMap.filter((c)=>c.package) // 去掉没有 package 的组件
+        .map((c)=>{
+            // 修正版本号（对于没有有效版本号的组件，默认使用 latest）
+            if (!isValidVersion(c.version)) {
+                console.warn('[WARN] got invalid version "%o" for component "%s", use "latest" as fallback', c.version, c);
+                return {
+                    ...c,
+                    version: "latest"
+                };
+            }
+            return c;
+        })
+    });
+}
+function deepClone(x) {
+    try {
+        return JSON.parse(JSON.stringify(x));
+    } catch (e) {
+        throw new Error(`failed to clone schema -- ${e}`);
+    }
+}
+function isValidVersion(version) {
+    if (!version) return false;
+    // 对于一些明显非法的版本号过滤下
+    if ("{{version}}" === version || "null" === version || "undefined" === version) return false;
+    // 对于 latest/beta/rc 这样的 tag 版本号要支持下
+    if (/^[a-z][a-z0-9]+([a-z0-9-]+)?$/i.test(version)) return true;
+    // 最后支持下所有 semver 能识别的版本
+    return null !== (0, __WEBPACK_EXTERNAL_MODULE_semver_functions_coerce__["default"])(version);
+}
+export { CodeGenActionBtn, fixSchema };

package/dist/components/code-gen-preview/fixPreviewCode.d.ts

@@ -0,0 +1,2 @@
+import { GravityCode } from "../../types";
+export declare function fixPreviewCode(code: GravityCode | null, unused?: unknown): GravityCode | null;

package/dist/components/code-gen-preview/fixPreviewCode.js

@@ -0,0 +1,119 @@
+// 默认生成的代码不符合在线预览的规则，需要处理下
+function fixPreviewCode(code, unused) {
+    if (!code) return null;
+    const fixedModules = Object.entries(code.modules || {}) // 去掉隐藏文件和 html 以及 md 等无用文件:
+    .filter(([fpath])=>!fpath.startsWith("/.") && !fpath.endsWith(".html") && !fpath.endsWith(".md")) // 所有的 jsx 文件改成 js 文件（因为 gravity 不支持 jsx）
+    .map(([fpath, module])=>[
+            fpath.replace(/\.jsx$/, ".js"),
+            module
+        ]).map(([fpath, module])=>[
+            fpath.replace(/\.scss$/, ".css"),
+            module
+        ]).reduce((acc, [fpath, module])=>({
+            ...acc,
+            [fpath]: {
+                ...module,
+                fpath,
+                code: module.code // 所有的 import xxx from '@/yyy' 转换为 import xxx from '/src/yyy'
+                .replace(/import\s+([^\s]+)\s+from\s+['"]@\/([^'"]+)['"]/g, (_, name, path)=>`import ${name} from '/src/${path}'`) // 所有的 import styles from 'xxx.scss' 转换为 import styles from '/src/xxx.css'
+                .replace(/import\s+([^\s]+)\s+from\s+['"]([^'"]+)\.scss['"]/g, (_, name, path)=>`import ${name} from '${path}.css'`)
+            }
+        }), {});
+    const fixedCode = {
+        ...code,
+        modules: fixedModules
+    };
+    fixedCode.modules["/src/app.js"] = {
+        ...fixedCode.modules["/src/app.js"],
+        code: `
+    // 注意：为了方便在浏览器中进行预览，这里简化了一些内容
+    import './shims';
+    import './global.css';
+
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+
+    import Page from '${Object.keys(fixedModules).find((fpath)=>fpath.startsWith("/src/pages/"))}';
+
+    ReactDOM.render(<Page/>, document.getElementById('root'));
+`
+    };
+    // 一些垫片
+    fixedCode.modules["/src/shims.js"] = {
+        fpath: "/src/shims.js",
+        code: ""
+    };
+    fixedCode.modules["/package.json"] = {
+        ...fixedCode.modules["/package.json"],
+        code: JSON.stringify({
+            name: "demo",
+            version: "1.0.0",
+            dependencies: {
+                react: "^16.8.3",
+                "react-dom": "^16.8.3",
+                ...JSON.parse(fixedCode.modules["/package.json"]?.code || "{}")?.dependencies
+            }
+        })
+    };
+    fixedCode.modules = pickKeys(fixedCode.modules, [
+        // '/tsconfig.json',
+        // '/jsconfig.json',
+        // '/build.json',
+        // '/abc.json',
+        "/package.json",
+        "/src/routes.js",
+        "/src/app.js",
+        "/src/constants.js",
+        "/src/utils.js",
+        "/src/i18n.js",
+        "/src/global.css",
+        "/src/index.js",
+        "/src/shims.js",
+        // layouts 暂时先不加载吧
+        // '/src/layouts/BasicLayout/index.js',
+        // '/src/layouts/BasicLayout/menuConfig.js',
+        // '/src/layouts/BasicLayout/components/Footer/index.js',
+        // '/src/layouts/BasicLayout/components/Footer/index.module.css',
+        // '/src/layouts/BasicLayout/components/Logo/index.js',
+        // '/src/layouts/BasicLayout/components/Logo/index.module.css',
+        // '/src/layouts/BasicLayout/components/PageNav/index.js',
+        ...Object.keys(fixedModules).filter((fpath)=>fpath.startsWith("/src/pages/"))
+    ]);
+    fixedCode.modules["/src/routes.js"] = {
+        ...fixedCode.modules["/src/routes.js"],
+        code: `
+`
+    };
+    fixedCode.modules["/src/global.css"] = {
+        fpath: "/src/global.css",
+        code: `
+body {
+  -webkit-font-smoothing: antialiased;
+}
+`
+    };
+    Object.assign(fixedCode.modules, {
+        "/src/index.html": {
+            code: '<div id="root"></div>',
+            fpath: "/src/index.html"
+        },
+        "/src/index.less": {
+            fpath: "/src/index.less",
+            code: `
+
+      `
+        }
+    });
+    fixedCode.type = "riddle";
+    return fixedCode;
+}
+function pickKeys(data, keys) {
+    return keys.reduce((acc, key)=>{
+        if (data[key]) return {
+            ...acc,
+            [key]: data[key]
+        };
+        return acc;
+    }, {});
+}
+export { fixPreviewCode };

package/dist/components/code-gen-preview/index.css

@@ -0,0 +1,18 @@
+.code-gen-preview-tabs {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+}
+
+.code-gen-preview-tabs .next-tabs-bar {
+  flex-shrink: 0;
+}
+
+.code-gen-preview-tabs .next-tabs-content {
+  flex: 1;
+}
+
+.code-gen-preview-tabs .next-tabs-content .next-tabs-tabpane {
+  height: 100%;
+}
+

package/dist/components/code-gen-preview/index.d.ts

@@ -0,0 +1,8 @@
+import { GravityCode } from "../../types";
+import "./index.less";
+export type CodeGenPreviewProps = {
+    code: GravityCode | null;
+    height: string | number;
+    refresh: string | number;
+};
+export declare function CodeGenPreview(props: CodeGenPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/code-gen-preview/index.js

@@ -0,0 +1,9 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__codesandbox_preview_index_js__ from "../codesandbox-preview/index.js";
+import "./index.css";
+function CodeGenPreview(props) {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__codesandbox_preview_index_js__.CodeSandboxPreview, {
+        ...props
+    });
+}
+export { CodeGenPreview };

package/dist/components/code-gen-result/index.css

@@ -0,0 +1,18 @@
+.code-gen-tabs {
+  height: 100%;
+}
+
+.code-gen-tabs .ant-tabs-nav {
+  margin: 0;
+}
+
+.code-gen-tabs .ant-tabs-content, .code-gen-tabs .ant-tabs-tabpane, .code-gen-source-view {
+  height: 100%;
+}
+
+.source-view-header {
+  position: absolute;
+  top: 18px;
+  right: 20px;
+}
+

package/dist/components/code-gen-result/index.d.ts

@@ -0,0 +1,8 @@
+import { IPublicTypeProjectSchema } from "@gant-lowcode/lowcode-types";
+import { Result } from "@gant-lowcode/code-generator/standalone-loader";
+import "./index.less";
+export declare function CodeGenResult({ result, schema, }: {
+    result: Result | null | undefined;
+    schema: IPublicTypeProjectSchema | null;
+    originalSchema: IPublicTypeProjectSchema | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/code-gen-result/index.js

@@ -0,0 +1,162 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE_file_saver__ from "file-saver";
+import * as __WEBPACK_EXTERNAL_MODULE_jszip__ from "jszip";
+import * as __WEBPACK_EXTERNAL_MODULE__sources_view_index_js__ from "../sources-view/index.js";
+import "./index.css";
+function CodeGenResult({ result, schema }) {
+    const [paneState, setPaneState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
+        expandedKeys: [
+            "sources",
+            "preview"
+        ]
+    });
+    const [gravityCode, setGravityCode] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [refresh, setRefresh] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        console.log("--result, schema", result, schema);
+        setGravityCode(convertCodeGenResult(result, schema));
+    }, [
+        result
+    ]);
+    if (!result) return null;
+    const handleDownloadSources = async (e)=>{
+        try {
+            e.preventDefault();
+            e.stopPropagation();
+            const zip = new __WEBPACK_EXTERNAL_MODULE_jszip__["default"]();
+            Object.values(gravityCode?.modules || {}).forEach((file)=>{
+                zip.file(file.fpath.replace(/^\/+/, ""), file.code);
+            });
+            await zip.generateAsync({
+                type: "blob"
+            }).then((content)=>{
+                __WEBPACK_EXTERNAL_MODULE_file_saver__["default"].saveAs(content, "gant-lowcode-generated-sources.zip");
+            });
+        } catch (e) {
+            console.log("failed to download sources: ", e);
+            __WEBPACK_EXTERNAL_MODULE_antd__.message.error("下载失败！");
+        }
+    };
+    console.log("--gravityCode", gravityCode);
+    // const items: TabsProps["items"] = [
+    //   {
+    //     key: "sources",
+    //     label: (
+    //       <span>
+    //         出码生成的源代码{" "}
+    //         <a href="javascript:void(0)" onClick={handleDownloadSources}>
+    //           导出/下载 zip 包
+    //         </a>
+    //       </span>
+    //     ),
+    //     children: gravityCode != null && (
+    //       <SourcesView code={gravityCode} onCodeChange={setGravityCode} />
+    //     ),
+    //   },
+    //   {
+    //     key: "preview",
+    //     label: (
+    //       <span>
+    //         在线预览{" "}
+    //         <a
+    //           href="#refresh"
+    //           onClick={(e) => {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //             setRefresh(Date.now());
+    //           }}
+    //         >
+    //           刷新
+    //         </a>
+    //       </span>
+    //     ),
+    //     children: (
+    //       <div
+    //         className="code-gen-result-gravity-demo"
+    //         style={{ height: "100%" }}
+    //       >
+    //         <CodeGenPreview
+    //           code={gravityCode}
+    //           height={"100%"}
+    //           refresh={refresh}
+    //         />
+    //       </div>
+    //     ),
+    //   },
+    // ];
+    // return <Tabs className="code-gen-tabs" items={items} />;
+    if (!gravityCode) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Empty, {});
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("div", {
+        className: "code-gen-source-view",
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
+                className: "source-view-header",
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("a", {
+                    href: "javascript:void(0)",
+                    onClick: handleDownloadSources,
+                    children: "源代码导出/下载 zip 包"
+                })
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__sources_view_index_js__.SourcesView, {
+                code: gravityCode,
+                onCodeChange: setGravityCode
+            })
+        ]
+    });
+}
+function convertCodeGenResult(result, schema) {
+    const 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
+    };
+    const code = {
+        type: "demo",
+        modules: result.reduce((acc, file)=>({
+                ...acc,
+                [`/${file.pathName}`]: {
+                    fpath: `/${file.pathName}`,
+                    code: file.content,
+                    entry: void 0,
+                    packagejson: [
+                        "package.json"
+                    ].includes(file.pathName) ? 1 : void 0
+                }
+            }), {})
+    };
+    let foundEntry = false;
+    // 设置入口文件
+    [
+        "index.js",
+        "index.ts",
+        "index.tsx",
+        "app.js",
+        "app.ts",
+        "app.tsx"
+    ].forEach((fileName)=>{
+        if (!foundEntry) {
+            const filePath = `/src/${fileName}`;
+            if (code.modules[filePath]) {
+                foundEntry = true;
+                if ("index.js" === fileName) 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;
+}
+export { CodeGenResult };

package/dist/components/codesandbox-preview/index.css

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

package/dist/components/codesandbox-preview/index.d.ts

@@ -0,0 +1,3 @@
+import type { CodeGenPreviewProps } from "../code-gen-preview/index";
+import "./index.less";
+export declare function CodeSandboxPreview({ code, height }: CodeGenPreviewProps): import("react/jsx-runtime").JSX.Element;