安装

npm

$ npm install @lite-code/transcoder

Yarn

$ yarn add @lite-code/transcoder

pnpm

$ pnpm install @lite-code/transcoder

将 JSONSchema 转 esModuleString

tsx

import { useState } from "react";
import { getEsModuleString } from "@lite-code/transcoder";
import { Monaco } from "@lite-code/editor";

const schema = JSON.stringify(
  {
    type: "Crud",
    search: {
      column: 3,
      schema: [
        {
          type: "InputNumber",
          label: "数字输入框",
          props: {
            placeholder: "请输入",
            allowClear: true,
          },
          key: "1094ef646e",
          name: "1094ef646e",
        },
        {
          type: "Input",
          label: "文本框",
          props: {
            placeholder: "请输入",
            allowClear: true,
          },
          key: "2d97f64264",
          name: "2d97f64264",
        },
      ],
    },
    width: 1000,
    title: "用户列表",
    keygen: "id",
    autoNo: false,
    autoQuery: true,
    useRefresh: true,
    columns: [
      {
        title: "列1",
        dataIndex: "1",
      },
      {
        title: "列2",
        dataIndex: "2",
      },
      {
        title: "列3",
        dataIndex: "3",
      },
      {
        title: "列4",
        dataIndex: "4",
      },
      {
        title: "列5",
        dataIndex: "5",
      },
      {
        title: "列6",
        dataIndex: "6",
      },
    ],
    tools: [
      {
        label: "新增",
        type: "primary",
        onClick: null,
        bindModal: "<%snap.visible_addUser%>",
        onBindModal: "<%() => { store.visible_addUser = true }%>",
        bindModalTitle: "新增用户",
        onBindModalTitle: "<%() => { store.title = '新增用户' }%>",
      },
    ],
    bordered: false,
    pageNumAlias: "",
    tabs: [],
    rowOperations: {
      width: 210,
      menus: [
        {
          label: "编辑",
        },
        {
          label: "查看",
        },
        {
          label: "删除",
        },
      ],
    },
    pagination: true,
    pages: {
      ad21413880: {
        id: "ad21413880",
        type: "modal",
        name: "addUser",
        column: 1,
        vertical: true,
        width: 500,
        schema: [
          {
            type: "CheckGroup",
            label: "多选组",
            props: {
              disabled: false,
              data: [
                {
                  label: "选项1",
                  value: 1,
                },
                {
                  label: "选项2",
                  value: 2,
                },
                {
                  label: "选项3",
                  value: 3,
                },
              ],
            },
            key: "e7248c3198",
            name: "e7248c3198",
          },
          {
            type: "Input",
            label: "单行文本",
            props: {
              placeholder: "请输入",
              clearable: true,
            },
            key: "1e9ed8045c",
            name: "1e9ed8045c",
          },
          {
            type: "TextArea",
            label: "多行文本",
            props: {
              placeholder: "请输入",
              clearable: true,
            },
            key: "be23a959e2",
            name: "be23a959e2",
          },
        ],
        defaultValue: "<%snap.record%>",
        visible: "<%snap.visible_addUser%>",
        onClose: "<%() => { store.visible_addUser = false; }%>",
        selectKey: "be23a959e2",
      },
    },
    currentPage: "page",
    bindVariables: {
      "pages.ad21413880.title": "<%snap.title%>",
    },
    url: "",
    method: "POST",
  },
  null,
  2
);

export default () => {
  const [esModuleString, setEsModuleString] = useState("{}");
  return (
    <>
      <a
        onClick={() => {
          setEsModuleString(getEsModuleString(JSON.parse(schema)));
        }}
      >
        点击转换
      </a>
      <div style={{ display: "flex", gap: 10, marginTop: 10 }}>
        <Monaco
          readOnly
          style={{ height: 400, width: "50%" }}
          language="json"
          value={schema}
        />
        <Monaco
          readOnly
          style={{ height: 400, width: "50%" }}
          value={esModuleString}
        />
      </div>
    </>
  );
};

渲染引擎 TranscoderAsync

tsx

import { TranscoderAsync } from "@lite-code/transcoder";

export default () => {
  return (
    <TranscoderAsync
      // 接口请求外穿
      axios={({ url, param }: any) => {
        console.log(url, param);
      }}
      // 内部依赖库
      require={{
        dayjs: () => {},
      }}
      // 自定义的一些渲染组件
      widget={{
        MyInput: <input />,
      }}
      // 模拟接口数据，返回数据模型
      getSchema={async () => {
        await new Promise((res) => setTimeout(res, 1000));
        return encodeURIComponent(
          JSON.stringify({
            type: "Crud",
            search: {
              column: 3,
              schema: [
                {
                  type: "InputNumber",
                  label: "数字输入框",
                  props: {
                    placeholder: "请输入",
                    allowClear: true,
                  },
                  key: "1094ef646e",
                  name: "1094ef646e",
                },
                {
                  type: "Input",
                  label: "文本框",
                  props: {
                    placeholder: "请输入",
                    allowClear: true,
                  },
                  key: "2d97f64264",
                  name: "2d97f64264",
                },
              ],
            },
            width: '100%',
            title: "用户列表",
            keygen: "id",
            autoNo: false,
            autoQuery: true,
            useRefresh: true,
            columns: [
              {
                title: "列1",
                dataIndex: "1",
              },
              {
                title: "列2",
                dataIndex: "2",
              },
              {
                title: "列3",
                dataIndex: "3",
              },
              {
                title: "列4",
                dataIndex: "4",
              },
              {
                title: "列5",
                dataIndex: "5",
              },
              {
                title: "列6",
                dataIndex: "6",
              },
            ],
            tools: [
              {
                label: "新增",
                type: "primary",
                onClick: null,
                bindModal: "<%snap.visible_addUser%>",
                onBindModal:
                  "<%() => { store.visible_addUser = true }%>",
                bindModalTitle: "新增用户",
                onBindModalTitle:
                  '<%() => { store.title = "新增用户" }%>',
              },
            ],
            bordered: false,
            pageNumAlias: "",
            tabs: [],
            rowOperations: {
              width: 210,
              menus: [
                {
                  label: "编辑",
                },
                {
                  label: "查看",
                },
                {
                  label: "删除",
                },
              ],
            },
            pagination: true,
            pages: {
              ad21413880: {
                id: "ad21413880",
                type: "modal",
                name: "addUser",
                column: 1,
                vertical: true,
                width: 500,
                schema: [
                  {
                    type: "CheckGroup",
                    label: "多选组",
                    props: {
                      disabled: false,
                      data: [
                        {
                          label: "选项1",
                          value: 1,
                        },
                        {
                          label: "选项2",
                          value: 2,
                        },
                        {
                          label: "选项3",
                          value: 3,
                        },
                      ],
                    },
                    key: "e7248c3198",
                    name: "e7248c3198",
                  },
                  {
                    type: "Input",
                    label: "单行文本",
                    props: {
                      placeholder: "请输入",
                      clearable: true,
                    },
                    key: "1e9ed8045c",
                    name: "1e9ed8045c",
                  },
                  {
                    type: "TextArea",
                    label: "多行文本",
                    props: {
                      placeholder: "请输入",
                      clearable: true,
                    },
                    key: "be23a959e2",
                    name: "be23a959e2",
                  },
                ],
                defaultValue: "<%snap.record%>",
                visible: "<%snap.visible_addUser%>",
                onClose:
                  "<%() => {\n  store.visible_addUser = false;\n}%>",
                selectKey: "be23a959e2",
              },
            },
            currentPage: "page",
            bindVariables: {
              "pages.ad21413880.title": "<%snap.title%>",
            },
            url: "",
            method: "POST",
            lessCode:
              ".module-8adc333556{\n  .wraper {\n    font-size: 12px;\n    &-box {\n      width: 100px;\n      color: #ff00ff;\n    }\n  }\n}",
            stateCode:
              'export const store = create({\n  visible_addUser: false,\n  title: \'\',\n  record: {},\n});\n\n/** 组件渲染完成 */\nexport const init = async () => {\n  console.log("组件渲染完成的生命周期");\n};\n\n/** 组件卸载 */\nexport const destroy = async () => {\n  store.restore();\n  console.log("组件卸载生命周期");\n};\n',
          })
        );
      }}
    />
  );
};