使用抽象语法树把低代码配置转换成源码

思路： 前端的低代码平台拖出来的组件数据格式为json，然后将json传给后端。后端通过babel/types、babel/generator 生成jsx代码。

前端低代码数据结构：

{
  "components": [
    {
      "id": 1,
      "name": "Page",
      "props": {},
      "desc": "页面",
      "fileName": "page",
      "children": [
        {
          "id": 1740045570763,
          "fileName": "button",
          "name": "Button",
          "props": {
            "text": {
              "type": "static",
              "value": "按钮"
            }
          },
          "desc": "按钮",
          "parentId": 1
        }
      ]
    }
  ]
}

服务端实现：

const t = require('@babel/types');
const g = require('@babel/generator')
const prettier = require('prettier');

let importStatements = new Map();
let eventHandleStatements = [];
let refStatements = [];
let stateStatements = [];

// 首字母大写
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

function generateEventHandleStatement(config) {
  if (config.type === 'ComponentMethod') {
    return t.expressionStatement(
      t.callExpression(
        t.memberExpression(
          t.memberExpression(
            t.identifier(`component_${config.config.componentId}_ref`),
            t.identifier("current")
          ),
          t.identifier(config.config.method)
        ),
        []
      ),
    )
  } else if (config.type === 'SetVariable') {
    return t.expressionStatement(
      t.callExpression(
        t.identifier(`set${capitalize(config.config.variable)}`),
        [t.stringLiteral(config.config.value)]
      )
    )
  } 
}

function createJsxStatement(component) {
  const attrs = [];

  Object.keys(component.props).forEach(key => {
    const propValue = component.props[key];
    // 处理事件
    if (key.startsWith('on')) {

      // 事件流里动作配置
      const config = component.props[key].children[0].config;

      // 方法名称
      const handleName = `${component.name}_${component.id}_${key}_Handle`;
      // 动态生成方法
      eventHandleStatements.push(
        t.functionDeclaration(
          t.identifier(handleName),
          [],
          // 方法内部实现
          t.blockStatement(
            [
              generateEventHandleStatement(config)
            ]
          )
        )
      );

      // 给组件添加事件
      attrs.push(
        t.jsxAttribute(
          t.jsxIdentifier(key),
          t.jsxExpressionContainer(
            t.identifier(handleName)
          )
        )
      );
    } else if (typeof propValue === 'object') {
      if (propValue.type === 'variable') {
        attrs.push(
          t.jsxAttribute(
            t.jsxIdentifier(key),
            t.jsxExpressionContainer(
              t.identifier(propValue.value)
            )
          )
        )
      } else {
        attrs.push(
          t.jsxAttribute(
            t.jsxIdentifier(key),
            t.stringLiteral(propValue.value)
          )
        )
      }
    }
  });

  // 生成导入语句，如果已经导入了则跳过
  if (!importStatements.has(component.name)) {
    importStatements.set(component.name,
      t.importDeclaration(
        [t.importDefaultSpecifier(t.identifier(component.name))],
        t.stringLiteral(`@/editor/components/${component.fileName}/prod`)
      )
    )
  }

  refStatements.push(
    t.variableDeclaration(
      'const',
      [t.variableDeclarator(
        t.identifier(`component_${component.id}_ref`),
        t.callExpression(
          t.identifier("useRef"),
          []
        )
      )]
    )
  );
  attrs.push(
    t.jsxAttribute(
      t.jsxIdentifier("ref"),
      t.jsxExpressionContainer(
        t.identifier(`component_${component.id}_ref`)
      )
    )
  );

  // 创建 jsx 元素
  return t.jsxElement(
    t.jsxOpeningElement(
      t.jsxIdentifier(component.name),
      attrs
    ),
    t.jsxClosingElement(
      t.jsxIdentifier(component.name),
    ),
    // 递归创建子元素
    (component.children || []).map(createJsxStatement)
  );
}

function generateCode(components, variables) {
  importStatements = new Map();
  eventHandleStatements = [];
  refStatements = [];
  stateStatements = [];
  
  // 默认导入 react和 useRef、useState
  importStatements.set("react",
    t.importDeclaration(
      [
        t.importDefaultSpecifier(t.identifier('React')),
        t.importSpecifier(
          t.identifier('useRef'),
          t.identifier('useRef')
        ),
        t.importSpecifier(
          t.identifier('useState'),
          t.identifier('useState')
        )
      ],
      t.stringLiteral('react')
    )
  );

  variables.forEach(item => {
    const stateStatement = t.variableDeclaration("const", [
      t.variableDeclarator(
        t.arrayPattern([
          t.identifier(item.name),
          // capitalize把首字母转为大写
          t.identifier(`set${capitalize(item.name)}`)
        ]),
        t.callExpression(
          t.identifier("useState"),
          [
            t.stringLiteral(item.defaultValue)
          ]
        )
      )
    ]);
    stateStatements.push(stateStatement);
  });

  const elementStatements = components.map(createJsxStatement);

  // 创建一个 App 方法
  const funcStatement = t.functionDeclaration(
    t.identifier("App"),
    [],
    // 创建方法内部的语句
    t.blockStatement([
      ...stateStatements,
      ...refStatements,
      ...eventHandleStatements,
      // 创建 return 语句
      t.returnStatement(
        // 创建 <></
        t.jsxFragment(
          t.jsxOpeningFragment(),
          t.jsxClosingFragment(),
          elementStatements,
        )
      )
    ])
  );


  const ast = t.program(
    [
      ...importStatements.values(),
      funcStatement,
      // 生成默认导出 App 方法
      t.exportDefaultDeclaration(
        t.identifier("App")
      )
    ]
  )

  // 格式化代码
  return prettier.format(
    g.default(ast, {
      jsescOption: { minimal: true },
    }).code,
    { parser: 'babel' }
  );
}

module.exports = {
  generateCode
}

https://juejin.cn/post/7473339693947273226