DOM Expressions


DOM Expressions is a Rendering Runtime for reactive libraries that do fine grained change detection. These libraries rely on concepts like Observables and Signals rather than Lifecycle functions and the Virtual DOM. Standard JSX transformers are not helpful to these libraries as they need to evaluate their expressions in isolation to avoid re-rendering unnecessary parts of the DOM.

This package wraps libraries like KnockoutJS or MobX and use them independent of their current render systems using a small library to render pure DOM expressions. This approach has been proven to be incredibly fast, dominating the highest rankings in the JS Framework Benchmark.

It is designed to be used with a companion render API. Currently there is a JSX Babel Plugin, and Tagged Template Literals, and HyperScript runtime APIs. Most developers will not use this package directly. It is intended to help author your own Reactive Libraries and not to be used directly in projects.

Example Implementations

- Solid: A declarative JavaScript library for building user interfaces.
- mobx-jsx: Ever wondered how much more performant MobX is without React? A lot.
- vuerx-jsx: Ever wondered how much more performant Vue is without Vue? ...renderer built on @vue/reactivity
- ko-jsx: Knockout JS with JSX rendering.
- s-jsx: Testbed for trying new techniques in the fine grained space.

Runtime Generator

Dom Expressions is designed to allow you to create a runtime to be tree shakeable. It does that by using "babel-plugin-transform-rename-import" to rename the import to your reactive core file. Setup the babel plugin and then export * from "dom-expressions/src/runtime"from your runtime. Be sure to not exclude the dom-expressions node_module.

``js
{
plugins: [
[
"babel-plugin-transform-rename-import",
{
original: "rxcore",
replacement: "../src/core"
}
]
];
}
`
What is the reactive core file. It exports an object with the methods required by the runtime.
Example:

`js
import S, { root, value, sample } from "s-js";

const currentContext = null;
const sharedConfig = {};

function memo(fn, equal) {
if (typeof fn !== "function") return fn;
if (!equal) return S(fn);
const s = value(sample(fn));
S(() => s(fn()));
return s;
}

function createComponent(Comp, props) {
return sample(() => Comp(props));
}

export { root, S as effect, memo, createComponent, currentContext, sharedConfig };
`

Runtime Renderers

Once you have generated a runtime it can be used with companion render APIs:

$3

Babel Plugin JSX DOM Expressions is by far the best way to use this library. Pre-compilation lends to the best performance since the whole template can be analyzed and optimal compiled into the most performant JavaScript. This allows for not only the most performant code, but the cleanest and the smallest.

$3

If precompilation is not an option Tagged Template Literals are the next best thing. Lit DOM Expressions provides a similar experience to the JSX, compiling templates at runtime into similar code on first run. This option is the largest in size and memory usage but it keeps most of the performance and syntax from the JSX version.

$3

While not as performant as the other options this library provides a mechanism to expose a HyperScript version. Hyper DOM Expressions offers the greatest flexibility working with existing tooling for HyperScript and enables pure JS DSLs.

Work in Progress

This is still a work in progress. My goal here is to better understand and generalize this approach to provide non Virtual DOM alternatives to developing web applications.

Updating JSX Types

JSX types are located in packages/dom-expressions/src/jsx-h.d.ts.

To update JSX types:

1. modify/update jsx-h.d.ts
2. run npm run jsx-sync-types

NOTE: The file jsx.d.ts is autogenerated taking jsx-h.d.ts as source. Changes to jsx.d.ts` will be discarded!