JS - create element

Będziemy pisać własną bibliotekę React. Nie mam tego rozplanowanego, więc zobaczymy, gdzie to nas zaprowadzi. Na razie początki.

Po pierwsze, dekompozycja parametrów, którą już znać powinniśmy:

function createElement_v1({type, content, ...attributes}){

    console.log("Type: ", type);
    console.log("Content: ", content);

    for(const [key, value] of Object.entries(attributes)){
        console.log(key, " : ", value);
    }

}

Przykład użycia:

createElement_v1({type: "h2", content: "HelloWorld", id: "myID", class: "text-secondary"});

// Type:  h2 
// Content:  HelloWorld 
// id  :  myID 
// class  :  text-secondary

Ok, teraz tworzenie textNode:

function createElement_v2({type, content, ...attributes}){

    if(type === "text"){
        let textNode = document.createTextNode(content);
        return textNode;
    }

    for(const [key, value] of Object.entries(attributes)){
        console.log(key, " : ", value);
    }

}

console.log(createElement_v2({type: "text", content: "HelloWorld"}));
//#text "HelloWorld"

Ok, tworzenie elementu:

function createElement_v3({type, content, ...attributes}){

    if(type === "text"){
        let textNode = document.createTextNode(content);
        return textNode;
    }

    let element = document.createElement(type);
    element.textContent = content;
    
    for(const [key, value] of Object.entries(attributes)){
        element.setAttribute(key, value);
    }

    return element;

}

console.log(createElement_v3({type: "text", content: "HelloWorld"}));
//#text "HelloWorld"

console.log(createElement_v3({type: "h2", content: "HelloWorld", id: "myID", class: "text-secondary"}));
//<h2 id="myID" class="text-secondary">HelloWorld</h2>

Staramy się uprościć ten kod:

function createElement_v4({type, content, ...attributes}){

    let textNode = document.createTextNode(content);

    if(type === "text"){
        return textNode;
    }

    let element = document.createElement(type);
    
    element.appendChild(textNode);
    
    for(const [key, value] of Object.entries(attributes)){
        element.setAttribute(key, value);
    }

    return element;

}

Ok, na początek to tyle. Będziemy musieli pomyśleć o jakiejś rekurencji i obsługi dzieci.

JS – create element