Skip to content

Instantly share code, notes, and snippets.

@victorporof

victorporof/alina-framework.js

Created June 27, 2022 09:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save victorporof/54fd7f5b9b2f06515acc71aa3ff2f0dd to your computer and use it in GitHub Desktop.
Save victorporof/54fd7f5b9b2f06515acc71aa3ff2f0dd to your computer and use it in GitHub Desktop.
Download ZIP
Framework templating example
Raw
alina-framework.js
const queue = [];
const elements = new Map();
let counter = 0;
export function addWork(work) {
const id = counter++;
queue.push({ ...work, id });
return id;
}
export function runWork() {
for (const work of queue) {
const element = document.createElement(work.type);
elements.set(work.id, element);
if ("textContent" in work) {
element.textContent = work.textContent;
}
if (typeof work.appendTo === "number") {
elements.get(work.appendTo).appendChild(element);
} else {
work.appendTo.appendChild(element);
}
}
queue.length = 0;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module" src="index.js"></script>
</body>
</html>
Raw
index.js
import { addWork, runWork } from "./alina-framework.js";
function createParent() {
return addWork({
type: "div",
appendTo: document.body,
});
}
function createChild(parent) {
addWork({
type: "p",
textContent: "hello world",
appendTo: parent,
});
}
const parent = createParent();
createChild(parent);
runWork();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment