43-mini-vue 实现代码生成 string 类型

实现代码生成 string 类型

1. 整体转换流程，本节考虑的是 generate 将 ast 转换为 function render 函数
   

2. 展示生成 render 函数的样子

https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PkhlbGxvIFdvcmxkPC9kaXY+Iiwib3B0aW9ucyI6e319

3. 单测

// compiler-core/src/tests/codegen.spec.tsimport{generate}from'../src/codegen'import{baseParse}from'../src/parse'describe("codegen",()=>{it("string",()=>{constast=baseParse('hi')const{code}=generate(ast)// 快照测试 把我们的代码拍了张照片// 1. 抓 bug// 2. 更新快照expect(code).toMatchSnapshot()})})

4. 先简单跑通

// compiler-core/src/codegen.tsexportfunctiongenerate(ast){return{code:`return function render(_ctx, _cache, $props, $setup, $data, $options) { return "hi" }`}}

5. 我们稍作修改对快照功能进行熟悉

// codegen.spec.tsexportfunctiongenerate(ast){return{code:`return function render(_ctx, _cache, $props, $setup, $data, $options) { return "hi 1" // ✅ 这里多了1 }`}}

• 可以看到，修改完毕以后，这里会报错

›1snapshot failed.Snapshot Summary ›1snapshot failed from1test suite.Inspect your code changes or press`u`to update them.

• 我们使用命令进行主动修改： pnpm test codegen.spec.ts -t ‘codegen string’ -u, 执行完毕以后，发现测试通过了，
  在生成的 __snapshots__里面的文件已经主动进行了修改

6. tips: jest 是给 react 创建的一个测试的概念，为了让开发人员更容易得去写测试，等于我们这里不用手动更新 codegen.spec.ts , -u 替我们在快照层面进行了相关操作
7. 后续实现思路,

• render后续可能更改可以提出去，
• 参数可以提出去，
• 返回参数可以提出去

returnfunctionrender(_ctx,_cache,$props,$setup,$data,$options){return"hi 1"// ✅ 这里多了1}

8. 简单的先实现一版

exportfunctiongenerate(ast){// ✅️letcode=""code+="return "constfunctionName="render"constargs=["_ctx","_cache"]constsignature=args.join(",")code+=`function${functionName}(${signature}){`code+="return hi 1"code+="}"return{code}}

9. 将返回值使用模板字符串进行动态展示

exportfunctiongenerate(ast){letcode=""code+="return "constfunctionName="render"constargs=["_ctx","_cache"]constsignature=args.join(",")code+=`function${functionName}(${signature}){`// code += "return 'hi 1'"constnode=ast.children[0]// ✅️code+=`return '${node.content}'`// ✅️code+="}"return{code}}

10. 我们检查代码, 发现这里的 node 的获取并不灵活，有一些场景没有考虑到

• 我们现在取得是 children[0] ,但实际情况我们并不知道这个入口是在哪个下标，此时 children 有多个, 所以这块逻辑需要放在 transform.ts 文件里面

exportfunctiongenerate(ast){letcode=""code+="return "constfunctionName="render"constargs=["_ctx","_cache"]constsignature=args.join(",")code+=`function${functionName}(${signature}){`constnode=ast.children[0]// 💡code+=`return '${node.content}'`code+="}"return{code}}

11. 标记入口进行优化

// transform.ts// 标识入口 nodeexportfunctiontransform(root,options={}){constcontext=createTransformContext(root,options)traverseNode(root,context)// 这里处理 返回参数逻辑createRootCodegen(root)// ✅️}functioncreateRootCodegen(root:any){// ✅️root.codegenNode=root.children[0]}

// transform.spec.ts// 调用transform 函数✅入口 node 进行标识describe("codegen",()=>{it("string",()=>{constast=baseParse('hi')transform(ast)// ✅const{code}=generate(ast)expect(code).toMatchSnapshot()})})

12. 获取 node 代码抽离

exportfunctiongenerate(ast){letcode=""code+="return "constfunctionName="render"constargs=["_ctx","_cache"]constsignature=args.join(",")code+=`function${functionName}(${signature}){`code=getNode(ast,code)// ✅code+="}"return{code}}functiongetNode(ast:any,code:string){// ✅constnode=ast.codegenNode code+=`return '${node.content}'`returncode}

13. 对上下文进行抽离封装

exportfunctiongenerate(ast){constcontext=createCodegenContext()// ✅const{push}=context// ✅constfunctionName="render"constargs=["_ctx","_cache"]constsignature=args.join(",")push("return ")// ✅push(`function${functionName}(${signature}){`)// ✅getNode(ast.codegenNode,context)// ✅push("}")// ✅return{code:context.code// ✅}}functioncreateCodegenContext(){// ✅constcontext={code:"",push(source){context.code+=source}}returncontext}functiongetNode(node:any,context){const{push}=contextpush(`return '${node.content}'`)}