Skip to content

jack-jjm/create.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

create.js

This is a frontend framework for reusable HTML components. There are no actual source code files in this repo because this is the whole library, just copy-paste it:

function create(name)
{
    let content;
    let template = document.querySelector("template[name=\"" + name + "\"]");
    
    if (template)
    {
        content = template.content.cloneNode(true /* deep clone */);

        if (template.hasAttribute("rooted"))
        {
            content = content.firstElementChild;
        }

        let boundTags = content.querySelectorAll("[id]");
        for (let tag of boundTags)
        {
            content[tag.id] = tag;
            tag.removeAttribute("id");
        }
    }
    else
    {
        content = document.createElement(name);
    }
    
    return content;
}

Example usage:

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="create.js"></script>
        <script src="main.js" defer></script>
    </head>
    <body>
        <div id="commentsContainer">
        </div>
    </body>
    <template name="comment" rooted>
        <div>
            <span id="author"></span>
            <span id="content"></span>
        </div>
    </template>
</html>

main.js

{
    let comment = create("comment");
    comment.author.innerText = "Jack";
    comment.content.innerText = "hello";
    commentsContainer.appendChild(comment);
}

{
    let comment = create("comment");
    comment.author.innerText = "John";

    let content = create("strong");
    content.innerText = "hi";
    comment.content.appendChild(content);

    commentsContainer.appendChild(comment);
}

About

The only web components library you really need

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published