✨feat: 添加15.6_代码生成

Author: cycleccc

第15章编译器核心技术概览/15.6_代码生成/15.6_代码生成.js

@@ -0,0 +1,383 @@
+const State = {
+    initial: 1,
+    tagOpen: 2,
+    tagName: 3,
+    text: 4,
+    tagEnd: 5,
+    tagEndName: 6
+}
+
+function isAlpha (char) {
+    return char >= 'a' && char <= 'z' || char >= 'A' && char <= 'Z'
+}
+
+function tokenize (str) {
+    let currentState = State.initial
+    const chars = []
+    const tokens = []
+    while (str) {
+        const char = str[0]
+        switch (currentState) {
+            case State.initial:
+                if (char === '<') {
+                    currentState = State.tagOpen
+                    str = str.slice(1)
+                } else if (isAlpha(char)) {
+                    currentState = State.text
+                    chars.push(char)
+                    str = str.slice(1)
+                }
+                break
+            case State.tagOpen:
+                if (isAlpha(char)) {
+                    currentState = State.tagName
+                    chars.push(char)
+                    str = str.slice(1)
+                } else if (char === '/') {
+                    currentState = State.tagEnd
+                    str = str.slice(1)
+                }
+                break
+            case State.tagName:
+                if (isAlpha(char)) {
+                    chars.push(char)
+                    str = str.slice(1)
+                } else if (char === '>') {
+                    currentState = State.initial
+                    tokens.push({
+                        type: 'tag',
+                        name: chars.join('')
+                    })
+                    chars.length = 0
+                    str = str.slice(1)
+                }
+                break
+            case State.text:
+                if (isAlpha(char)) {
+                    chars.push(char)
+                    str = str.slice(1)
+                } else if (char === '<') {
+                    currentState = State.tagOpen
+                    tokens.push({
+                        type: 'text',
+                        content: chars.join('')
+                    })
+                    chars.length = 0
+                    str = str.slice(1)
+                }
+                break
+            case State.tagEnd:
+                if (isAlpha(char)) {
+                    currentState = State.tagEndName
+                    chars.push(char)
+                    str = str.slice(1)
+                }
+                break
+            case State.tagEndName:
+                if (isAlpha(char)) {
+                    chars.push(char)
+                    str = str.slice(1)
+                } else if (char === '>') {
+                    currentState = State.initial
+                    tokens.push({
+                        type: 'tagEnd',
+                        name: chars.join('')
+                    })
+                    chars.length = 0
+                    str = str.slice(1)
+                }
+                break
+        }
+    }
+
+    return tokens
+}
+
+function parse (str) {
+    const tokens = tokenize(str)
+
+    const root = {
+        type: 'Root',
+        children: []
+    }
+    const elementStack = [root]
+
+    while (tokens.length) {
+        const parent = elementStack[elementStack.length - 1]
+        const t = tokens[0]
+        switch (t.type) {
+            case 'tag':
+                const elementNode = {
+                    type: 'Element',
+                    tag: t.name,
+                    children: []
+                }
+                parent.children.push(elementNode)
+                elementStack.push(elementNode)
+                break
+            case 'text':
+                const textNode = {
+                    type: 'Text',
+                    content: t.content
+                }
+                parent.children.push(textNode)
+                break
+            case 'tagEnd':
+                elementStack.pop()
+                break
+        }
+        tokens.shift()
+    }
+
+    return root
+}
+
+function traverseNode (ast, context) {
+    context.currentNode = ast
+
+    const exitFns = []
+    const transforms = context.nodeTransforms
+    for (let i = 0;i < transforms.length;i++) {
+        const onExit = transforms[i](context.currentNode, context)
+        if (onExit) {
+            exitFns.push(onExit)
+        }
+        if (!context.currentNode) return
+    }
+
+    const children = context.currentNode.children
+    if (children) {
+        for (let i = 0;i < children.length;i++) {
+            context.parent = context.currentNode
+            context.childIndex = i
+            traverseNode(children[i], context)
+        }
+    }
+
+    let i = exitFns.length
+    while (i--) {
+        exitFns[i]()
+    }
+}
+
+
+function transform (ast) {
+    const context = {
+        currentNode: null,
+        parent: null,
+        replaceNode (node) {
+            context.currentNode = node
+            context.parent.children[context.childIndex] = node
+        },
+        removeNode () {
+            if (context.parent) {
+                context.parent.children.splice(context.childIndex, 1)
+                context.currentNode = null
+            }
+        },
+        nodeTransforms: [
+            transformRoot,
+            transformElement,
+            transformText
+        ]
+    }
+    // 调用 traverseNode 完成转换
+    traverseNode(ast, context)
+}
+
+
+
+
+
+// =============================== AST 工具函数 ===============================
+
+function createStringLiteral (value) {
+    return {
+        type: 'StringLiteral',
+        value
+    }
+}
+
+function createIdentifier (name) {
+    return {
+        type: 'Identifier',
+        name
+    }
+}
+
+function createArrayExpression (elements) {
+    return {
+        type: 'ArrayExpression',
+        elements
+    }
+}
+
+function createCallExpression (callee, arguments) {
+    return {
+        type: 'CallExpression',
+        callee: createIdentifier(callee),
+        arguments
+    }
+}
+
+// =============================== AST 工具函数 ===============================
+
+function transformText (node) {
+    if (node.type !== 'Text') {
+        return
+    }
+
+    node.jsNode = createStringLiteral(node.content)
+}
+
+
+function transformElement (node) {
+
+    return () => {
+        if (node.type !== 'Element') {
+            return
+        }
+
+        const callExp = createCallExpression('h', [
+            createStringLiteral(node.tag)
+        ])
+        node.children.length === 1
+            ? callExp.arguments.push(node.children[0].jsNode)
+            : callExp.arguments.push(
+                createArrayExpression(node.children.map(c => c.jsNode))
+            )
+
+        node.jsNode = callExp
+    }
+}
+
+function transformRoot (node) {
+    return () => {
+        if (node.type !== 'Root') {
+            return
+        }
+
+        const vnodeJSAST = node.children[0].jsNode
+
+        node.jsNode = {
+            type: 'FunctionDecl',
+            id: { type: 'Identifier', name: 'render' },
+            params: [],
+            body: [
+                {
+                    type: 'ReturnStatement',
+                    return: vnodeJSAST
+                }
+            ]
+        }
+    }
+}
+
+const ast = parse(`<div><p>Vue</p><p>Template</p></div>`)
+transform(ast)
+
+console.log(ast)
+
+console.log(generate(ast.jsNode))
+
+// ============================ code generate ============================
+
+function generate (node) {
+    const context = {
+        code: '',
+        push (code) {
+            context.code += code
+        },
+        currentIndent: 0,
+        newline () {
+            context.code += '\n' + `  `.repeat(context.currentIndent)
+        },
+        indent () {
+            context.currentIndent++
+            context.newline()
+        },
+        deIndent () {
+            context.currentIndent--
+            context.newline()
+        }
+    }
+
+    genNode(node, context)
+
+    return context.code
+}
+
+function genNode (node, context) {
+    switch (node.type) {
+        case 'FunctionDecl':
+            genFunctionDecl(node, context)
+            break
+        case 'ReturnStatement':
+            genReturnStatement(node, context)
+            break
+        case 'CallExpression':
+            genCallExpression(node, context)
+            break
+        case 'StringLiteral':
+            genStringLiteral(node, context)
+            break
+        case 'ArrayExpression':
+            genArrayExpression(node, context)
+            break
+    }
+}
+
+function genFunctionDecl (node, context) {
+    const { push, indent, deIndent } = context
+
+    push(`function ${ node.id.name } `)
+    push(`(`)
+    genNodeList(node.params, context)
+    push(`) `)
+    push(`{`)
+    indent()
+
+    node.body.forEach(n => genNode(n, context))
+
+    deIndent()
+    push(`}`)
+}
+
+function genNodeList (nodes, context) {
+    const { push } = context
+    for (let i = 0;i < nodes.length;i++) {
+        const node = nodes[i]
+        genNode(node, context)
+        if (i < nodes.length - 1) {
+            push(', ')
+        }
+    }
+}
+
+function genReturnStatement (node, context) {
+    const { push } = context
+
+    push(`return `)
+    genNode(node.return, context)
+}
+
+function genCallExpression (node, context) {
+    const { push } = context
+    const { callee, arguments: args } = node
+    push(`${ callee.name }(`)
+    genNodeList(args, context)
+    push(`)`)
+}
+
+function genStringLiteral (node, context) {
+    const { push } = context
+
+    push(`'${ node.value }'`)
+}
+
+function genArrayExpression (node, context) {
+    const { push } = context
+    push('[')
+    genNodeList(node.elements, context)
+    push(']')
+}