如何基于JSON组件树在Node端生成React组件源码？

我正在开发一款React组件元代码生成器，内置<TwoCol>、<Heading>、<Image>等预构建React组件，这些组件采用命名插槽机制，使用方式类似：

<TwoCol slot1={<Heading/>} slot2={<Image/>}/>

可以通过传入包含插槽组件的JSON格式props，生成组件的不同版本。目前在客户端React应用中能正常渲染这些组件，但现在需要搭建一个基于Node的后端API服务——这个服务接收组件树的JSON表示，要返回组合后的React组件源码。目前我们能用React.renderToString返回HTML内容，但不知道怎么实现返回更新后的React组件源码？

示例 #

输入JSON

{
  "componentId": "TwoColShell",
  "props": {},
  "slots": [
    {
      "slotId": "slot1",
      "components": [
        {
          "componentId": "Heading",
          "props": {
            "heading": "My Heading"
          }
        }
      ]
    },
    {
      "slotId": "slot2",
      "components": [
        {
          "componentId": "Image",
          "props": {
            "src": "https://www.example.com/assets/image.png",
            "alt": "alt text"
          }
        }
      ]
    }
  ]
}

预构建组件代码

TwoColShell.jsx

import * as React from "react";

export const TwoColShell = (props) => {
  const { slot1, slot2 } = props;

  return (
    <div className="container">
      <div className="grid">
        <div>{slot1}</div>
        <div>{slot2}</div>
      </div>
    </div>
  );
};

Image.jsx

import * as React from "react";

const Image = (props) => {
  return <img {...props} />;
};

export { Image };

Heading.jsx

import * as React from "react";

const Heading = ({ heading, ...props }) => {
  return <h1 {...props}>{heading}</h1>;
};

export { Heading };

期望输出的组合后组件源码

import * as React from "react";
import { Heading } from "./Heading";
import { Image } from "./Image";

export const TwoColShell = (props) => {
  return (
    <div className="container">
      <div className="grid">
        <div>
          <Heading heading="My Heading" />
        </div>
        <div>
          <Image src="https://www.example.com/assets/image.png" alt="alt text" />
        </div>
      </div>
    </div>
  );
};

要实现从JSON生成React组件源码，核心是解析JSON结构、替换模板中的插槽占位符、生成合法的JSX代码，可以按以下步骤实现：

1. 准备组件元数据映射 #

先维护一个预构建组件的元数据映射表，记录每个组件的导入路径：

const componentMeta = {
  TwoColShell: {
    importPath: "./TwoColShell",
  },
  Heading: {
    importPath: "./Heading",
  },
  Image: {
    importPath: "./Image",
  }
};

2. 解析输入JSON #

解析传入的JSON，提取根组件ID、插槽信息，收集所有需要导入的组件：

function parseComponentJson(inputJson) {
  const { componentId, slots } = inputJson;
  const importedComponents = new Set();
  const slotMap = {};

  slots.forEach(slot => {
    slotMap[slot.slotId] = slot.components.map(comp => {
      importedComponents.add(comp.componentId);
      return {
        id: comp.componentId,
        props: comp.props
      };
    });
  });

  return {
    rootComponentId: componentId,
    importedComponents: Array.from(importedComponents),
    slotMap
  };
}

3. 生成JSX代码片段 #

针对每个插槽中的组件，生成对应的JSX代码字符串，处理props的格式：

function generateJsxComponent(comp) {
  const propsStr = Object.entries(comp.props)
    .map(([key, value]) => {
      if (typeof value === "string") {
        return `${key}="${value}"`;
      }
      // 处理数字、布尔值等类型
      return `${key}={${JSON.stringify(value)}}`;
    })
    .join(" ");
  
  return `<${comp.id} ${propsStr} />`;
}

4. 读取并修改根组件模板 #

读取根组件的源码，替换插槽占位符，添加必要的导入语句：

const fs = require("fs").promises;
const path = require("path");

async function generateComponentSource(inputJson) {
  const { rootComponentId, importedComponents, slotMap } = parseComponentJson(inputJson);
  
  // 读取根组件源码
  const rootComponentPath = path.join(__dirname, `${rootComponentId}.jsx`);
  let source = await fs.readFile(rootComponentPath, "utf8");

  // 添加导入语句
  const importStatements = importedComponents.map(compId => {
    const { importPath } = componentMeta[compId];
    return `import { ${compId} } from "${importPath}";`;
  }).join("\n");
  source = source.replace(
    /import \* as React from "react";/,
    `import * as React from "react";\n${importStatements}`
  );

  // 移除根组件的props解构和插槽变量声明
  source = source.replace(/const {.*} = props;/, "");

  // 替换插槽占位符为生成的JSX
  Object.entries(slotMap).forEach(([slotId, components]) => {
    const jsxStr = components.map(generateJsxComponent).join("\n          ");
    source = source.replace(new RegExp(`\\{${slotId}\\}`, "g"), jsxStr);
  });

  return source;
}

5. 搭建Node API服务 #

用Express框架搭建API，接收JSON请求并返回生成的源码：

const express = require("express");
const app = express();
app.use(express.json());

app.post("/generate-component", async (req, res) => {
  try {
    const componentSource = await generateComponentSource(req.body);
    res.setHeader("Content-Type", "text/javascript");
    res.send(componentSource);
  } catch (err) {
    res.status(500).send("生成组件源码失败");
  }
});

app.listen(3000, () => {
  console.log("服务启动在3000端口");
});

优化建议 #

• 代码格式化：生成的代码可以用prettier自动格式化：

  const prettier = require("prettier");
  source = prettier.format(source, { parser: "babel" });
  

• 嵌套组件支持：如果插槽有多层组件嵌套，需要递归生成JSX代码；
• 缓存优化：频繁读取组件源码会影响性能，可以缓存组件模板字符串。

内容的提问来源于stack exchange，提问作者Robert Austin