Template
Template is a simple JS framework for creating interactive applications.
It focuses on using web-native patterns.
Calling it a framework is a bit of an exaggeration, it's a single class that
manages HTML <template>s.
The entire "framework" is here: ./template.ts
Usage
Your Hello World example:
<!DOCTYPE >
<html>
<head></head>
<body>
<div id="app"></div>
<script type="module">
import Template from "./template.js";
// Create an HTMLTemplateElement from the text representation of HTML
const html = Template.createElement(
'<div><h1 class="message">Hello Template</h2></div>'
);
// Create an HTMLStyleElement from the text representation of a style node
const css = Template.createStyle("<style></style>");
class HelloWorld extends Template {
constructor() {
super(html, css);
}
setMessage(msg) {
// We can use getElement to query for child nodes, in this case: class="message"
// Anything you want to update during runtime should be stored on "this"
const message = this.getElement(".message");
// Update the content of <h1 class="message">
message.innerText = msg;
}
}
// Get the div we want to mount into
const app = document.getElementById("app");
// Create an instance of our HelloWorld component
const helloworld = new HelloWorld();
// Mount our component into the dom
helloworld.mount(app);
// Set our message
helloworld.setMessage("Hello Template!");
</script>
</body>
</html>How it works
Template uses HTML
<template>
to create reusable components.
We then "mount" a <template> into an element on the page by creating a
shadow DOM.
The shadow DOM encapsulates the reusable components making sure that the CSS and JS from one component can not interfere with another.
Using .addChild(selector: string, child: Template) allows us to nest these
components. The parent keeps track of all mounted children. When we unmount the
parent, it will recursively unmount all children.
We follow React's philosophy of state flowing down. Our components manage their own children, configuring the child's state. Children manage updating their own DOM to reflect changes in state.
We also follow React's philosophy of state bubbling up. When a user interacts with a child node, the child node emits an event. The parent receives the event and decides what to do.
State management, event propogation, etc. are still early and need more thought.
Build process
You'll want to use a bundler like vite
For example:
index.html
<div class="WelcomeComponent">
<div class="new button">
<div class="icon"></div>
<div class="title">Create New<br />Account</div>
</div>
<div class="pair button">
<div class="icon"></div>
<div class="title">Pair Existing<br />Account</div>
</div>
</div>index.css
.WelcomeComponent {
background-color: hsla(0, 0%, 100%, 1);
border-radius: 5px;
display: flex;
flex-direction: row;
}
.button {
padding: 1em;
margin: 0.5em;
cursor: pointer;
background-color: inherit;
transition: background-color linear 0.1s;
border-radius: inherit;
}
.button:hover {
background-color: hsla(0, 0%, 90%, 1);
transition: background-color linear 0.1s;
}index.ts
import Template from "template";
import Feather from "feather-icons";
import html from "./index.html?raw";
import css from "./index.css?raw";
const template = Template.createElement(html);
const style = Template.createStyle(css);
class Welcome extends Template {
constructor() {
super(template, style);
}
mount(host: HTMLElement) {
super.mount(host);
this.getElement(".new > .icon").innerHTML =
Feather.icons["user-plus"].toSvg();
this.getElement(".new").addEventListener("click", () => {
this.emit("new");
});
this.getElement(".pair > .icon").innerHTML =
Feather.icons["smartphone"].toSvg();
this.getElement(".pair").addEventListener("click", () => {
this.emit("pair");
});
return this;
}
}
export default Welcome;