boreDOMAnother boring JS framework |
Version | v0.bored.10 | |
---|---|---|---|
Updated | |||
Author | Hugo Daniel | License | CC0 |
<a-boredom-component></a-boredom-component>
<template data-component="a-boredom-component">
<p>boreDOM components html is defined in template tags</p>
<p>the `data-component` defines the web-component tag that will
be registered to render this html</p>
</template>
<script>
import { inflictBoredom } from "boreDOM.js";
inflictBoredom();
// ^^^ a `querySelectorAll("template[data-component]")`
// that registers web components
</script>
Here is a boring counter:
<-- In `index.html` -->
<another-boring-counter></another-boring-counter>
<template data-component="another-boring-counter">
<p>Count: <span data-ref="value"> </span> </p>
<button onclick="dispatch('increase')">Increase</button>
<button onclick="dispatch('decrease')">Decrease</button>
</template>
<script>
import { inflictBoredom } from "boreDOM.js";
// Provide the initial app state:
inflictBoredom({ count: 0 });
</script>
<-- In `another-boring-counter.js` -->
import { webComponent } from "boreDOM.js";
export const AnotherBoringCounter = webComponent(({ on }) => {
// This is the initialization function (called on component mount)
on("increase", ({ state }) => state.count++);
on("decrease", ({ state }) => state.count--);
return ({ state, refs }) => {
// This is the rendering function (called on state update)
refs.value.textContent = `${state.count}`;
};
});
Too many JavaScript frameworks exist. So I made another one. It's called boreDOM. It manipulates the DOM. It's probably buggy and definitely not optimized. It exists because I am bored. That's it.
Updating 1,000 Elements:
│ React ││ 49.3ms │ Solid ││ 38ms │ Svelte ││ 38.6ms │ Vue ││ 44ms │ boreDOM │███████████████████████ 2-3 business days │ └──────────────────────────────────────────
Creating 10,000 Elements:
│ React ││ 587.8ms │ Solid ││ 380ms │ Svelte ││ 377.9ms │ Vue ││ 439.8ms │ 4 dog years boreDOM │█████████████████████████████████████████ │ └──────────────────────────────────────────
You don't need a tutorial for this, just run this command and go for it:
pnpm create boredom@latest my-project
If you have any doubts, questions or ideas send me an e-mail:
The API consists of 2 functions
Queries all <template>
elements in the DOM and registers them.
Run this function at least once in your code and it will register all boreDOM web components that it can find and set the internal runtime logic.
Use this function when a web component requires JS. It receives a function that is run when the component is connected (on mount) and a component render function.
It keeps track of which state attributes are being changed in order to allow for auto-updates to happen seamlessly in the component in a fine-grained manner.
The function that is passed as argument will be getting a few utility methods to ease your component script efforts.