boreDOM

Code

    
<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>

    
  

    
<-- 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}`;
  };
});
    
  

Introduction

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.

The Basics

Performance

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 │█████████████████████████████████████████
        │
        └──────────────────────────────────────────

    

Documentation

Tutorial

Lets make a simple tic-tac-toe game with boreDOM.

There is a special repository for this which can be followed through in a commit-by-commit fashion.

Go through the commits here.

API

The API consists of 2 functions

inflictBoreDOM()

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.

webComponent()

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.