udomsay

^{_{EXPERIMENTAL ⚠ Social Media Image from Know Your Meme}}

A stricter, signals driven, ESX based library.

What

This library includes, in about 2.2Kb, logic to parse a specialized form of JSX, or its template literal based variant, and use signals from various authors, handling rendering automatically and avoiding side effects when used as SSR.

How

Given the following counter.jsx file:

// grab signals from various libaries, here the simplest I know
import {Signal, signal, effect} from 'https://unpkg.com/@webreflection/signal';

// import the `createRender` utility
import createRender from 'https://unpkg.com/udomsay';
const render = createRender({Signal, effect});

// Counter Component example
function Counter({clicks}) {
  return (
    <div>
      <button onclick={() => { clicks.value--; }}>-</button>
      <span>{clicks}</span>
      <button onclick={() => { clicks.value++; }}>+</button>
    </div>
  );
}

render(
  <Counter clicks={signal(0)} />,
  document.body
);

Providing the following babel.config.json transformer:

{
  "plugins": [
    ["@ungap/babel-plugin-transform-esx"]
  ]
}

The result can be tested in CodePen.io.

Custom Signals Library

Bringing in your favorite signals libraries is almost a no brainer with udomsay: check the fews already tested within this project!

• preact, implemented through this file and live tested here. Try import {createRender, signal} from "udomsay/preact" yourself!
• @webreflection/signal, implemented through this file and live tested here. Try import {createRender, signal} from "udomsay/signal" yourself!
• solid-js, implemented through this file and live tested here. Try import {createRender, createSignal} from "udomsay/solid" yourself!

Current udomsay ESX Interpolations Rules

Following the current set of stricter rules around JSX usage and how to avoid/prevent issues:

• if an interpolation contains a primitive value (e.g. a string, a number, a boolean or undefined) or a signal which value is primitive, every future update of such interpolation will expect a primitive value or signal carrying a primitive value. Conditional primitives values or signals are fine, but {condition ? "string" : <Component />} is not supported.
• if a signal is used as interpolation and its value is primitive, an effect is used to update its value on the target text node only if the signal changes or its value did. This allows to fine-tune and confine updates per each component or even regular element node, without needing to re-trigger the outer component logic.
• if a signal is used as interpolation and its value is not primitive, every future update of such interpolation will expect a signal. Conditional signals are fine, but {condition ? signal : (<Component /> || "string")} is not supported.
• if an interpolation contains an array of items, every future update of such interpolation will expect an array. Conditional arrays are fine, but {condition ? [..items] : (<Component /> || "string")} is not supported.

Library Goals

The goal of this library is:

• explore if a better instrumented JSX can actually help performance and memory consumption
• avoid the need of vDOM, still diffing when necessary through arrays in interpolations
• create once and map on the fly (JIT) templates for both nodes, fragments, and components
• fine-tune operations per each interpolation, such as spread properties VS known static properties, conditional holes or signals and, last but not least, arrays of items