Vue - ast article second edition | | realizing ast/vnode and page rendering

preface

Article ideas article and implement article 】【】, in this paper, for the second edition, at the end of the article has a link to the first edition, synchronous read advice to see two window, or please read – “the Vue | article | implementation ast

Implement the Template to generate the render function

The target

{{name}} 111 =>>
/ / {
// tag: 'div',
// parent: null,
// attrs: [],
// children: [{
// tag: null,
/ / parent: parent div,
// text: name {{name}}"
/ /}, {
// tag: 'span',
/ / parent: parent div,
// attrs: [],
// children: [{
// tag:null,
/ / parent: parent div,
// text: 111
/ /}]
/ /}]
// }
Copy the code

Define the regular

const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`; / / to a-z a-z _ at the beginning Behind can connect \ - \. 0-9 _a - zA - regular basis of Z] / /, matching tag name:
const qnameCapture = ` ((? :${ncname}\ \ :)?${ncname}) `; // Named re is used to match situations like 
      
const startTagOpen = new RegExp(` ^ <${qnameCapture}`); // The re at the beginning of the tag captures the tag name
const endTag = new RegExp(` ^ < \ \ /${qnameCapture}[^ >] * > `); // Match tags like  at the end
const attribute = /^\s*([^\s"'<>\/=]+)(? :\s*(=)\s*(? :"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))? /; // Match attributes
const startTagClose = /^\s*(\/?) >/; // Match tag end >
const defaultTagRE = / \ {\ {((? :.|\r? \n)+?) \}\}/g   // Matches the mustatine syntax
Copy the code

Generate ast syntax trees from HTML strings

Iterates through the HTML string to get tag names, attributes, content, and so on

compiler/index.js

export function compilerToFunction(template){
    let ast = parseHTML(template);
}
function parseHTML(html) {... }Copy the code

Define a “forward” function that intercepts HTML

 // Truncate the string and update the string
    function advance(n) {
        html = html.substring(n)
    }
Copy the code

The re extracts valid information, then intercepts the original HTML string and continues the loop until the HTML is empty

Handling start tags<div id="11">
- Processing label name
- Processing properties

function parseHTML(html) {
     while (html){
        // 1. Tags that start with < must be tags
        let textEnd = html.indexOf('<');
        if(textEnd == 0) {// Process the label name
            const startTagMatch = parseStartTag();
            if(startTagMatch){
                // Pass the information to the corresponding handler
                start(startTagMatch.tagName,startTagMatch.attrs);
                continue; }... }}function parseStartTag(){
        // match match returns object text end extension
        const start = html.match(startTagOpen);
        if(start){
            const match = {
                tagName: start[1].attrs:[]
            }
            advance(start[0].length);
            let attr,end;
            // 1. Not the end (judge by startTagClose) 2. If an attribute exists, the attribute is processed and the matched attribute is passed to the attrs of the return object
            while(! (end = html.match(startTagClose)) && (attr = html.match(attribute))){ match.attrs.push( {name:attr[1].value: attr[3] || attr[4] || attr[5],
                })
                advance(attr[0].length);
            }
            // Attribute processing completes the loop, intercepting the string and returning the retrieved information
            if(end){
                advance(end[0].length);
                returnmatch; }}}... }Copy the code

Handling closing tags


function parseHTML(html) {
    // debugger;
    while (html){
        // 1. Tags that start with < must be tags
        let textEnd = html.indexOf('<');
        if(textEnd == 0){
            ...
            // The end tag intercepts the string and passes the information to the corresponding handler
            const endTagMatch = html.match(endTag);
            if (endTagMatch) {
                advance(endTagMatch[0].length);
                end(endTagMatch[1]);// Pass in the end tag
                continue; }}... }}Copy the code

Handling text


function parseHTML(html) {
    // debugger;
    while (html){
      ...
        let text;
        // If it is text, get text
        if(textEnd >= 0){
            text = html.substring(0,textEnd);
        }
        // If text exists, the string is intercepted and the obtained information is passed to the corresponding handler
        if(text){ advance(text.length); chars(text); }}}Copy the code

Corresponding information processing function

function start(tagName,attrs) {
console.log(tagName,attrs,"====== Start tag properties");
}
function end(tagName){
console.log(tagName,"====== End tag");
}
function chars(text){
    console.log(text,"= = = = = = text");
}
Copy the code

Tree + stack data structure generates ast tree

Generate a tree structure

Process and obtain information to generate ast tree

By a root node continuously divergent, and the subscale (leaf structure) the same, associative tree structure

Note that this scenario fits well with a data structure — a tree — that diverges from a root node and has the same subscale (leaf structure); We can use a tree structure to describe the acquired information, that is, generate an AST tree according to the template

compiler/index.js

Define tree cell structure:

The label corresponding{tag: tagName, // tag type: 1, // tag type: 1, // children:[], // attrs, // attribute set parent:null // parent element};
Text corresponding{type:3,text:text}

    // The tag element generates an AST tree element
    function createASTElement(tagName,attrs) {
        return {
            tag: tagName, / / tag name
            type: 1.// Label type
            children: [].// List of children
            attrs, // Attribute collection
            parent:null // Parent element}}// Store text directly into this structure when processing it
	{
        type: 3,
        text
    }
Copy the code

Generate corresponding tree units according to the obtained information

The corresponding AST element is created in the start handler

  // Information processing functions
    function start(tagName,attrs) {
        console.log(tagName,attrs,"====== Start tag properties");
        let element = createASTElement(tagName,attrs);
        if(! root){ root = element } currentParent = element; stack.push(element) }Copy the code

Using the stack structure record processing label process, the label information object is pushed into the stack when processing the start label, and when processing the close label

   function end(tagName){
        console.log(tagName,"====== End tag");
       // The label's parent information object is added to the stack.
        let element = stack.pop();
       // The child structure is constructed by storing the children attribute of the top element
        currentParent = stack[stack.length - 1];
        // Record the parent of the tag when the tag is closed
        if(currentParent){
            element.parent = currentParent;
            currentParent.children.push(element);
        }
       // Finally, check whether the stack is empty at the end of the processing. If it is not empty, it indicates an exception
    }
Copy the code

Finally, return to root and the AST tree is complete

Generate the render function based on the AST

The AST can convert strings by deep traversal and then string concatenation

The entry function accepts the root and returns a string

"_c('div','{... } ', '[]')"
Copy the code

compiler/generate.js

export function generate(el) {
    let children = genChildren(el);
    let code = `_c('${el.tag}',
    ${el.attrs.length ? `${genProps(el.attrs)}` : 'undefine'}
    ${
        children ? `,${children}`: ' '
    }) `;
    return code;
}
Copy the code

Recursively process the child nodes

If it is a tag element, call generate directly
If it’s text, it’s processed{{}}Variable problem, call _s method to convert variable to string

const defaultTagRE = / \ {\ {((? :.|\r? \n)+?) \}\}/g   / / mustatine syntax
function genChildren(el) {
    const children = el.children;
    if(children){
        return children.map(child= > gen(child)).join(', '); }}function gen(node) {
    if(node.type == 1) {return generate(node);
    }else {
        let text = node.text;
        if(! defaultTagRE.test(text)){// If it is plain text
            return `_v(The ${JSON.stringify(text)}) `
        }else {
            // Store each section of code
            let tokens = [];
            let lastIndex = defaultTagRE.lastIndex = 0; // If the re is in global mode, set the index to 0 before each use
            let match,index;
            while (match = defaultTagRE.exec(text)) {
                index = match.index;// Save the matched index
                if(index > lastIndex){
                    tokens.push(JSON.stringify(text.slice(lastIndex,index)));
                }
                tokens.push(`_s(${match[1].trim()}) `);
                lastIndex = index + match[0].length;
            }
            if(lastIndex < text.length){
                tokens.push(JSON.stringify(text.slice(lastIndex)));
            }
            return `_v(${tokens.join('+')}) `; }}}Copy the code

Processing properties

function genProps(attrs) {
    console.log(attrs);
    let str = "";
    for (let i = 0; i < attrs.length; i++) {
        let attr = attrs[i];
        if (attr.name === 'style') {
            let obj = {};
            attr.value.split('; ').forEach(item= > {
                let [key,value] = item.split(':');
                obj[key] = value;
            })
            attr.value = obj;
        }
        str += `${attr.name} : The ${JSON.stringify(attr.value)}, `

    }
    console.log(str);
    return ` {${str.slice(0, -1)}} `;
}
Copy the code

New Function lets you convert a string to a Function and with lets you specify a global variable within a Function

compiler/index.js

let code = generate(ast);
let render = new Function(`with(this){return ${code}} `);
Copy the code

The last

Mount render before the user delivers it and reuse the patch logic

At this point, the AST is complete

Finally realize

Warehouse address: [email protected]: Sympath/blingSpace. Git
Direct access address: github.com/Sympath/bli…

A link to the

Vue implemented – ast | | the first edition piece render function
Vue | | article implementation ast

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue – ast article second edition | | realizing ast/vnode and page rendering

preface

Implement the Template to generate the render function

The target

Define the regular

Generate ast syntax trees from HTML strings

Iterates through the HTML string to get tag names, attributes, content, and so on

compiler/index.js

Tree + stack data structure generates ast tree

Generate a tree structure

Process and obtain information to generate ast tree

By a root node continuously divergent, and the subscale (leaf structure) the same, associative tree structure

compiler/index.js

Define tree cell structure:

Generate corresponding tree units according to the obtained information

Using the stack structure record processing label process, the label information object is pushed into the stack when processing the start label, and when processing the close label

Finally, return to root and the AST tree is complete

Generate the render function based on the AST

The AST can convert strings by deep traversal and then string concatenation

The entry function accepts the root and returns a string

compiler/generate.js

Recursively process the child nodes

New Function lets you convert a string to a Function and with lets you specify a global variable within a Function

compiler/index.js

The last

Finally realize

A link to the

Vue – ast article second edition | | realizing ast/vnode and page rendering

preface

Implement the Template to generate the render function

The target

Define the regular

Generate ast syntax trees from HTML strings

Iterates through the HTML string to get tag names, attributes, content, and so on

compiler/index.js

Tree + stack data structure generates ast tree

Generate a tree structure

Process and obtain information to generate ast tree

By a root node continuously divergent, and the subscale (leaf structure) the same, associative tree structure

compiler/index.js

Define tree cell structure:

Generate corresponding tree units according to the obtained information

Using the stack structure record processing label process, the label information object is pushed into the stack when processing the start label, and when processing the close label

Finally, return to root and the AST tree is complete

Generate the render function based on the AST

The AST can convert strings by deep traversal and then string concatenation

The entry function accepts the root and returns a string

compiler/generate.js

Recursively process the child nodes

New Function lets you convert a string to a Function and with lets you specify a global variable within a Function

compiler/index.js

The last

Finally realize

A link to the

Related Posts

Talk about style penetration in vue scoped

The Typescript Enums

Html2canvas + file-saver webpage screenshot add save