If you find boreDOM to be inspiring, helpful, or even just interesting, please help the project grow by giving it a ⭐️ on GitHub.
Performant, simple, and lightweight templates and rendering for making the DOM boring.
boreDOM requires ES6 features and will refuse to run on older browsers on Internet Explorer without polyfills and transpiling. If you want to deploy boreDOM to older browsers, it is suggested you bundle it and then process it with Babel by yourself. Visit https://hereiskevin.github.io/boreDOM/docs/ for documentation.
boreDOM is beta software. The general algorithm for rendering implemented is stable and handles most cases well, while remaining fast enough to render at over 2000 times per second. The dom module is stable enough for production, with full API documentation and some examples. The component module is still undergoing development, being stable enough for casual development, but still not quite ready for production.
Expect no API changes in the dom module, but be aware the API of the component module is subject to change, though it should remain close to the same. The old element module, the predecessor of the component module has been fully removed since v0.6.0, please use v0.5.0 for the latest version of the element module if you require it. It is deprecated and should not be use in new code. The documentation for the dom module is mostly complete, though undergoing major changes, while the component module lacks proper documentation.
There are multiple ways to install boreDOM, with the easiest being through npm.
With NPM:
Execute the following command, replacing the <version> with the version number, currently v0.6.0.
npm install https://github.com/HereIsKevin/boreDOM/releases/download/<version>/boredom-<version>.tgzWithout NPM:
Go to the latest release on GitHub and download boredom-prebuilt-<version>.zip, replacing <version> with the release version. After extracting it, documentation should be found in the docs folder, while the release files should be found in the dist. Documentation can be download alone from boredom-docs-<version>.zip on the release page.
From Source:
Open a terminal or shell of your choice with npm and node on the path. The same commands should work in PowerShell or any POSIX compliant shell.
-
Clone the
masterbranch from GitHub with (or download a tarball)git clone https://github.com/HereIsKevin/boreDOM.git
-
Go to the directory with, replacing
/path/to/boreDOM/with the actual path (probably./boreDOM/)cd /path/to/boreDOM/ -
Install all the build dependencies through
npmnpm install
-
Build the release
npm run build:release
-
Build the documentation
npm run build:docs
-
Build the examples
npm run build:examples
-
Start the preview server
npm run preview
-
Go to https://localhost:5000/, then
examplesfor examples anddocsfor documentation
The release files should be found in the dist folder, with the ESM being at index.esm.min.js and index.esm.js, and the CommonJS being at index.cjs.min.js and index.cjs.js. TypeScript type definitions are included with the files. The documentation can be found in the docs folder, while the examples should be in the examples folder.
Check out examples/todo for a simple example powered by boreDOM. boreDOM is extremely simple. Just import html and render from the one file, then use html with a string or template to create the element, and render with the parent node and element to be rendered. render automatically diffs all elements, so it remains performant even in large applications.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="hello.js"></script>
</body>
</html>JavaScript:
import { dom } from "/dist/index.esm.js";
// or `const { dom } = require("/dist/index.cjs.js");` for CommonJS
// or `const { dom } = require("boredom");` for Electron
const name = "world";
dom.render(document.getElementById("root"), dom.html(`Hello, ${name}!`));