@dom-expressions/babel-plugin-jsx 0.50.0-next.15

package/CHANGELOG.md

@@ -0,0 +1,254 @@
+# babel-plugin-jsx-dom-expressions
+
+## 0.50.0-next.15
+
+### Patch Changes
+
+- df03fb8: Move all packages under the `@dom-expressions` npm scope with new names:
+  - `dom-expressions` → `@dom-expressions/runtime`
+  - `babel-plugin-jsx-dom-expressions` → `@dom-expressions/babel-plugin-jsx`
+  - `jsx-dom-expressions-compiler` → `@dom-expressions/jsx-compiler`
+  - `hyper-dom-expressions` → `@dom-expressions/hyperscript`
+  - `tagged-jsx-dom-expressions` → `@dom-expressions/tagged-jsx`
+
+  The old unscoped names stop receiving `next` prereleases and remain in use
+  only by the Solid 1.x maintenance line published from `main`.
+
+  `lit-dom-expressions` is dropped from the prerelease line; it has been
+  superseded by `@dom-expressions/tagged-jsx`.
+
+  `@dom-expressions/jsx-compiler` now distributes prebuilt native binaries
+  through per-platform packages (`@dom-expressions/jsx-compiler-darwin-x64`,
+  `-darwin-arm64`, `-linux-x64-gnu`, `-linux-arm64-gnu`, `-win32-x64-msvc`)
+  resolved automatically via `optionalDependencies`, instead of shipping a
+  binary inside the main package.
+
+## 0.50.0-next.14
+
+### Patch Changes
+
+- 9a64f1f: Preserve SSR child evaluation order for deferred hydratable insert slots.
+
+## 0.50.0-next.13
+
+### Patch Changes
+
+- f1bcd5f: Stop giving special compiler handling to `style:foo` and `class:foo` JSX namespace syntax, and rename the static compiler marker from `@once` to `@static`. `style:foo` and `class:foo` now fall through to literal HTML attributes (e.g. `<div style:border="1px solid black">` emits `style:border` verbatim).
+
+  Internal optimizations still split `style={{...}}` into `setStyleProperty` calls and `class={{...}}` into `classList.toggle` calls.
+
+- f17f7a1: Rename the generated event listener helper from `addEventListener` to `addEvent` so compiled browser bundles no longer introduce a binding that can shadow the native `window.addEventListener` method.
+
+## 0.50.0-next.12
+
+### Patch Changes
+
+- Port relevant maintenance fixes from the stable branch. Add `omitAttributeSpacing` for strict template attribute spacing, and align `server.js`/`server.d.ts` with the current `client.d.ts` export surface so isomorphic imports continue to resolve on the server.
+
+## 0.50.0-next.11
+
+### Patch Changes
+
+- d5cd499: Remove `on:` namespace event support from compiler, runtime, JSX types, and renderer packages.
+
+## 0.50.0-next.10
+
+### Patch Changes
+
+- ba2c493: Update the JSX compiler source to TypeScript and refresh its generated output expectations for the current Babel and Rollup toolchain.
+
+## 0.50.0-next.9
+
+## 0.50.0-next.8
+
+## 0.50.0-next.7
+
+### Patch Changes
+
+- 0bd165e: Preserve shared class tokens when diffing object keys that contain multiple class names.
+  Ensure class-method JSX captures `this` before lifted DOM setup statements run.
+- e7831bd: Optimize class arrays with leading static class strings and a fixed-shape class object so the static classes are emitted in the template and dynamic object entries compile to class toggles.
+- 10f3250: SSR: group contiguous attribute and `textContent` closures into a single
+  `_$ssrGroup(() => […], N)` call per element so the runtime can resolve
+  all `N` hole positions with one closure invocation instead of `N`. The
+  compiler walks each top-level element's `templateValues`, identifies
+  runs of `≥2` groupable entries (inserts/children break a run, preserving
+  child isolation), and replaces them with one grouped declarator repeated
+  `N` times in the `ssr(...)` argument list. `_$ssrGroup` tags the
+  function with `fn.$g = N` so `ssr()` can dispatch through a fast path
+  that's gated at the end of the typeof chain — non-function holes pay
+  nothing for the new branch.
+
+  For the async escalation path (group fn throws `NotReadyError`), every
+  retry slot for the group shares a module-scoped cache keyed on `fn`:
+  slot 0 evaluates and caches `arr` (success) or `err` (still-pending),
+  slots `1..N-1` short-circuit on the cached outcome, and the cache
+  invalidates when slot 0 re-fires next pass. Net retry cost: 1 evaluation
+  per group per pass on either outcome — `N²` → `N` on success, `N²` → `1`
+  on failure — with no per-state bookkeeping.
+
+  Bench: `+15%` on `search-results` (heavy attribute usage), neutral on
+  `color-picker` (no qualifying groups). Hydration ids are unaffected:
+  attribute/textContent expressions never allocate ids, and inserts (which
+  do) stay outside groups by construction.
+
+- 3574228: SSR rendering performance pass.
+
+  **Runtime (`dom-expressions`):**
+  - Inline hole resolution in `ssr()`. Switch from a `(t, ...nodes)` rest
+    parameter to an `arguments` walk, eliminating the per-call holes-array
+    allocation. Inline `string`/`number`/`null`/`boolean` fast paths skip
+    `tryResolveString` for the typical "all-static-after-eval" hole shape; only
+    the heavy path (async escalation) materializes the `{ t, h, p }` result.
+  - Single forward-pass `escape()`. The previous implementation walked the
+    string twice in the hot path (`indexOf(delim)` + `indexOf("&")` upfront
+    then early-exit on the no-hit case). Replaced with a `charCodeAt` loop
+    that bails after one pass for clean strings (the common case), and
+    resumes the slow path from the first hit so the clean prefix isn't
+    re-scanned.
+  - Remove the `ssrRunInScope` public export. The function had been a true
+    pass-through identity (`fn => fn`) since owner-capture moved into
+    `tryResolveString`'s `NotReadyError` handler, and the compiler stopped
+    emitting it. With no internal callers and no behavior, the export was
+    dead surface area. User code that called it can drop the wrap (it was a
+    no-op) or replicate the original deferred-callback owner-capture intent
+    in two lines with `getOwner()` + `runWithOwner()`.
+
+  **Compiler (`babel-plugin-jsx-dom-expressions`):**
+  - IIFE elision in statement-position JSX. When `<jsx/>` is the argument of
+    a `return` or the initializer of a `const` (the overwhelmingly common
+    shapes), the surrounding IIFE is removed and the body lifts to flat
+    statements before the parent. Saves one closure allocation + one
+    function-call frame per render. Applies to `dom`, `ssr`, and `universal`
+    emissions; expression-position JSX (ternary branches, array elements,
+    function args) keeps the IIFE since lifting would change observable
+    evaluation semantics.
+  - SSR templates emit hoisted `var` declarations for dynamic-expression temp
+    vars instead of wrapping the whole thing in an IIFE. In statement
+    position the declarations precede the `ssr(...)` call; in expression
+    position they hoist to the enclosing function scope and the
+    assignment + call become a comma sequence expression.
+  - Drop `ssrRunInScope` emission around dynamic SSR expressions. The
+    temp-var hoist stays — it's a V8 IC-stability tactic (keeps the `ssr()`
+    call site specialized on `Identifier` argument shapes), not an
+    evaluation-order requirement. Ordering is preserved by JS left-to-right
+    semantics.
+  - Drop `createComponent` wrap on SSR component invocations. The SSR
+    runtime's `createComponent` is `Comp(props || {})`; the compiler always
+    emits a real `props` object, so the `|| {}` fallback never fires. Inline
+    to a direct `Comp(props)` call. DOM / dev modes keep the wrapper since
+    it does real work (`untrack`, dev metadata).
+
+  Net effect on representative SSR shapes (color-picker, search-results) is
+  fewer allocations per render and a flatter call graph through the hot path.
+
+- 6ae1a40: Replace the `wrapDynamics` previous-value default-object initializer with optional chaining for both DOM and universal generators. The combined-effect arrow now takes `(_v$, _p$) => …` and reads `_p$?.<n>` instead of receiving an `_p$ = { 0: undefined, 1: undefined, … }` defaulted object literal. Removes a per-render-effect setup allocation, shrinks compiled output, and matches the shape used elsewhere in the runtime. The DOM generator special-cases `textContent` (`!_p$ || a !== _p$.a`) to keep the first-run write semantics.
+
+## 0.50.0-next.6
+
+## 0.50.0-next.5
+
+## 0.50.0-next.4
+
+## 0.50.0-next.3
+
+### Patch Changes
+
+- 4dae801: Normalize the `repository` field in every package to the standard npm
+  convention: a `git+https://github.com/ryansolid/dom-expressions.git` URL
+  with a `directory` pointing at the package within the monorepo. Restores
+  "View source" / "Open in repo" links on the npm registry and unblocks
+  tooling that resolves source from package metadata.
+- 1cc342c: Unify the compiler's void-element list with the runtime's `VoidElements` set in `dom-expressions/src/constants`. The compiler previously kept its own array (`src/VoidElements.ts`) that still contained the long-deprecated `keygen` and `menuitem` tags. Both have been removed from the HTML standard and are no longer parsed as void by modern browsers, so the compiler now emits closing tags for them — which is the correct behaviour in current browsers and was a latent bug otherwise. All other void elements are unaffected.
+
+## 0.50.0-next.2
+
+### Patch Changes
+
+- 4d14c82: Fix single-dynamic attribute accessors being silently invoked with the
+  previous value. Given `<div style={source()} />`, the compiler previously
+  emitted `effect(source, (v, p) => style(el, v, p))`, which causes the
+  reactive core to call `source(p)` — leaking `prev` into a user-authored
+  accessor that the source expression wrote as a zero-arg call. Polymorphic
+  accessors (e.g. atom-style signals) would observe an unexpected argument
+  and misbehave.
+
+  The compute position now emits `() => source()` so the user's call shape
+  is preserved. The prior optimization of unwrapping an IIFE
+  (`(() => x)()` → `() => x`) is retained since IIFEs are zero-arg and
+  cannot leak `prev`.
+
+  Fixes #510.
+
+- 39c207c: Fix a SyntaxError when an element has 222+ merged dynamic attributes
+  (solidjs/solid#2682). The internal identifier generator produced `in` at
+  index 221, and since these identifiers are emitted as object shorthand
+  destructuring bindings, the resulting `({ …, in }) => …` could not be parsed.
+  `getNumberedId` now shifts past any natural index that would encode to a JS
+  reserved word, keeping the mapping injective and the output at 2 characters
+  for all practical dynamic counts.
+- 03da8a5: Fix SSR escaping gaps reachable from JSX, and tighten the compiler so
+  redundant runtime `escape` calls drop out of the output.
+
+  Security fixes:
+  - `ssrStyle` and `ssrClassName` now attribute-escape object keys, not
+    just values. Previously a user-controlled key in `<div style={{…}} />`
+    or `<div class={{…}} />` could break out of the surrounding attribute.
+  - Dynamic fragment-child expressions (`<>{state.text}</>`) now compile
+    to `_$memo(() => _$escape(expr))`. Element-child expressions already
+    escaped via `escapeExpression`; fragment children reached SSR through
+    a separate path and were concatenated raw.
+  - Computed-key object styles (`style={{ [k]: v }}`) escape the key at
+    compile time.
+
+  Compiler alignment:
+  - SSR now matches DOM in rejecting fragments placed directly inside an
+    element: `<div><>…</></div>` is a compile error in both renderers.
+    Fragments reached via conditionals (`<div>{cond && <>…</>}</div>`)
+    remain legal.
+
+  Compiler optimizations:
+  - `escapeExpression` drops the outer `_$escape` wrap on a `JSXFragment`
+    when its single significant child is either a dynamic expression
+    (compiles to a memoized accessor function, `escape(fn)` is a no-op)
+    or a native element (compiles to an `_$ssr(…)` SSR node object,
+    `escape(object)` is a no-op). This turns
+    `cond && _$escape(_$memo(() => _$escape(state.text)))` into
+    `cond && _$memo(() => _$escape(state.text))`, and
+    `cond && _$escape(_$ssr(_tmpl$N))` into `cond && _$ssr(_tmpl$N)`.
+
+  SSR fixtures for `components`, `conditionalExpressions`, `fragments`,
+  and `attributeExpressions` regenerate. Each security fix has a JSX
+  round-trip test in `packages/dom-expressions/test/ssr/jsx.spec.jsx`
+  that feeds hostile input through `renderToString`.
+
+- 305d9ce: - SSR: Duplicate attributes in JSX without spreads are now deduplicated —
+  `<div class="a" class="b" />` correctly renders as `<div class="b" />`
+  (last-wins), matching client behavior. Previously the compiler kept both
+  attributes in the output.
+  - Client: `setAttributeNS` / `removeAttributeNS` now use matching names when
+    clearing namespaced attributes (e.g. `xlink:href`). Previously removal could
+    leave the attribute in place because it used the local name while the set
+    used the qualified name.
+  - Expanded test coverage across all four packages; no other behavior changes.
+
+## 0.50.0-next.1
+
+### Patch Changes
+
+- ee365e0: - `insert()` accepts an optional 5th `options` argument that is forwarded to the
+  internal `effect()` call, letting callers (e.g. Solid's `render()`) opt into
+  transition-aware initial mounts without otherwise changing `insert`'s
+  behavior.
+  - SSR: `$dflj(ids)` now materializes every id in the list in a single call
+    instead of stopping after the first successful `$dfl`. Callers pass only the
+    keys they intend to materialize, which simplifies the primitive and composes
+    cleanly for bulk-uncollapse cases (e.g. a group activation revealing several
+    held fallbacks at once).
+  - SSR: Fix cascading async root holes in the streaming shell. When an inner
+    Loading boundary resolved its first chunk while the outer shell was still
+    pending, `flushEnd` could call `serializer.flush()` before `doShell()` had
+    written the root `_assets` module map, causing seroval to silently drop the
+    writes and client hydration to fail with "module was not preloaded". Root
+    asset serialization is now memoized and gated on both paths.
+  - Type formatting cleanup in `jsx-properties.d.ts`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-2019 Ryan Carniato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,301 @@
+# Babel Plugin JSX DOM Expressions
+
+[![Build Status](https://github.com/ryansolid/dom-expressions/workflows/DOMExpressions%20CI/badge.svg)](https://github.com/ryansolid/dom-expressions/actions/workflows/main-ci.yml)
+[![NPM Version](https://img.shields.io/npm/v/@dom-expressions/babel-plugin-jsx.svg?style=flat)](https://www.npmjs.com/package/@dom-expressions/babel-plugin-jsx)
+![](https://img.shields.io/npm/dt/@dom-expressions/babel-plugin-jsx.svg?style=flat)
+[![Gitter](https://img.shields.io/gitter/room/dom-expressions/community)](https://gitter.im/dom-expressions/community)
+
+This package is a JSX compiler built for [DOM Expressions](https://github.com/ryansolid/dom-expressions) to provide a general JSX to DOM transformation for reactive libraries that do fine grained change detection. This package aims to convert JSX statements to native DOM statements and wrap JSX expressions with functions that can be implemented with the library of your choice. Sort of like a JSX to Hyperscript for fine change detection.
+
+## Features
+
+This plugin treats all lowercase tags as html elements and mixed cased tags as Custom Functions. This enables breaking up your view into components. This library supports Web Component Custom Elements spec. Support for common camelcase event handlers like React, dom safe attributes like class and for, a simple ref property, and parsing of objects for style, and class properties.
+
+In general JSX Attribute Expressions are treated as attributes by default, with exception custom elements that will to properties and special fields like `class` and `style`. Plain string attributes will be treated as attributes.
+
+This library uses a heuristic to decide whether JSX expressions need dynamic wrapping based on whether they contain function calls or property access. Simple literals and variable expressions won't be wrapped.
+
+## Example
+
+```jsx
+const view = ({ item }) => {
+  const itemId = item.id;
+  return (
+    <tr class={itemId === selected() ? "danger" : ""}>
+      <td class="col-md-1">{itemId}</td>
+      <td class="col-md-4">
+        <a onClick={e => select(item, e)}>{item.label}</a>
+      </td>
+      <td class="col-md-1">
+        <a onClick={e => del(item, e)}>
+          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+        </a>
+      </td>
+      <td class="col-md-6"></td>
+    </tr>
+  );
+};
+```
+
+Compiles to:
+
+```jsx
+import { template as _$template } from "dom";
+import { delegateEvents as _$delegateEvents } from "dom";
+import { className as _$className } from "dom";
+import { effect as _$effect } from "dom";
+import { insert as _$insert } from "dom";
+
+const _tmpl$ = /*#__PURE__*/ _$template(
+  `<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`,
+  16
+);
+const view = ({ item }) => {
+  const itemId = item.id;
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$3.nextSibling,
+      _el$6 = _el$5.firstChild;
+    _$insert(_el$2, itemId);
+    _el$4.$$click = e => select(item, e);
+    _$insert(_el$4, () => item.label);
+    _el$6.$$click = e => del(item, e);
+    _$effect(
+      () => selected(),
+      _v$ => _$className(_el$, itemId === _v$ ? "danger" : "")
+    );
+    return _el$;
+  })();
+};
+_$delegateEvents(["click"]);
+```
+
+The use of cloneNode improves repeat insert performance and precompilation reduces the number of references to the minimal traversal path. This is a basic example which doesn't leverage event delegation or any of the more advanced features described below.
+
+## Example Implementations
+
+- [Solid](https://github.com/ryansolid/solid): A declarative JavaScript library for building user interfaces.
+- [ko-jsx](https://github.com/ryansolid/ko-jsx): Knockout JS with JSX rendering.
+- [mobx-jsx](https://github.com/ryansolid/mobx-jsx): Ever wondered how much more performant MobX is without React? A lot.
+
+## Plugin Options
+
+### moduleName
+
+- Type: `string`
+- Required: Yes
+
+The name of the runtime module to import the methods from.
+
+### generate
+
+- Type: `'dom' | 'ssr'`
+- Default: `'dom'`
+
+The output mode of the compiler. Can be "dom"(default), "ssr". "dom" is standard output. "ssr" is for server side rendering of strings.
+
+### hydratable
+
+- Type: `boolean`
+- Default: `false`
+
+Indicate whether the output should contain hydratable markers.
+
+### delegateEvents
+
+- Type: `boolean`
+- Default: `true`
+
+Boolean to indicate whether to enable automatic event delegation on camelCase.
+
+### wrapConditionals
+
+- Type: `boolean`
+- Default: `true`
+
+Boolean indicates whether smart conditional detection should be used. This optimizes simple boolean expressions and ternaries in JSX.
+
+### contextToCustomElements
+
+- Type: `boolean`
+- Default: `false`
+
+Boolean indicates whether to set current render context on Custom Elements and slots. Useful for seemless Context API with Web Components.
+
+### builtIns
+
+- Type: `boolean`
+- Default: `string[]`
+
+Array of Component exports from module, that aren't included by default with the library. This plugin will automatically import them if it comes across them in the JSX.
+
+### effectWrapper
+
+- Type: `string`
+- Default: `effect`
+
+This plugin leverages a heuristic for reactive wrapping and lazy evaluation of JSX expressions. This option indicates the reactive wrapper function name (`effect`), defaults to `effect`.
+
+### staticMarker
+
+- Type: `string`
+- Default: `@static`
+
+Advanced compiler assertion marker. When an expression starts with this comment, the compiler treats it as static and does not wrap it in an `effect` call.
+
+This is not a reactivity primitive and should not be used to read reactive values once. Only use it when you can prove the expression is non-reactive for the lifetime of the rendered element, and the compiler heuristic cannot infer that on its own.
+
+### memoWrapper
+
+- Type: `string`
+- Default: `memo`
+
+Memos let you efficiently use a derived value in many reactive computations. This option indicates the memo function name, defaults to `memo`.
+
+### validate
+
+- Type: `boolean`
+- Default: `true`
+
+Checks for properly formed HTML by checking for elements that would not be allowed in certain parent elements. This validation isn't complete but includes places where browser would "correct" it and break the DOM walks.
+
+### omitNestedClosingTags
+
+- Type: `boolean`
+- Default: `false`
+
+Removes unnecessary closing tags from the template output. This may not work in all browser-like environments the same. The solution has been tested again Chrome/Edge/Firefox/Safari.
+
+### omitLastClosingTag
+
+- Type: `boolean`
+- Default: `true`
+
+Removes tags from the template output if they have no closing parents and are the last element. This may not work in all browser-like environments the same. The solution has been tested again Chrome/Edge/Firefox/Safari.
+
+### omitQuotes
+
+- Type: `boolean`
+- Default: `true`
+
+Removes quotes for html attributes when possible from the template output. This may not work in all browser-like environments the same. The solution has been tested again Chrome/Edge/Firefox/Safari.
+
+### omitAttributeSpacing
+
+- Type: `boolean`
+- Default: `true`
+
+When `true`, quoted attributes may omit the space before the next attribute. Set this to `false` to emit strictly spaced attributes for stricter HTML/SVG parsers.
+
+### requireImportSource
+
+- Type: `string | false`
+- Default: `false`
+
+When set to a string value, this option restricts JSX transformation to only files that contain a specific JSX import source pragma comment. The plugin will only transform JSX in files that include a comment with `@jsxImportSource` followed by the specified value. If the comment is missing or specifies a different import source, the transformation is skipped for that file.
+Example usage:
+
+```jsx
+// In babel configuration:
+{
+  plugins: [
+    [
+      "jsx-dom-expressions",
+      {
+        requireImportSource: "r-dom"
+      }
+    ]
+  ];
+}
+// In your component file:
+/** @jsxImportSource r-dom */
+const template = <div>Hello</div>;
+```
+
+### inlineStyles
+
+- Type: `boolean`
+- Default: `true`
+
+Style attributes in templates are inlined when possible: value is a string, `Record<string, string>`, etc. Inlining styles may not be desired when using strong CSP configurations. Disabling `inlineStyles` will cause all of the style definitions to be set at runtime.
+
+## Special Binding
+
+### ref
+
+This binding will assign the variable you pass to it with the DOM element or if a function will call it with the element.
+
+```jsx
+const Child = props => <div ref={props.ref} />;
+
+const Parent = () => {
+  let ref;
+  return <Child ref={ref} />;
+};
+```
+
+### on(eventName)
+
+CamelCase event attributes such as `onClick` are treated as event handlers expecting a function. The compiler will delegate events where possible (events that bubble or can be composed), otherwise it falls back to Level 1 spec `on_____` events.
+
+If you wish to make it into a Bound Event, you can bind a value to your delegated event by passing an array handler instead and the second argument will be passed to your event handler as the first argument (the event will be second).
+
+```jsx
+function handler(itemId, e) {
+  /*...*/
+}
+
+<ul>
+  {list().map(item => (
+    <li onClick={[handler, item.id]} />
+  ))}
+</ul>;
+```
+
+This delegation solution works with Web Components and the Shadow DOM as well if the events are composed. That limits the list to custom events and most UA UI events like onClick, onKeyUp, onKeyDown, onDblClick, onInput, onMouseDown, onMouseUp, etc..
+Important:
+
+- To allow for casing to work, custom delegated events should follow the all lowercase convention of native events. Use a ref/directive that calls `addEventListener` when you need native listener options or custom event casing.
+
+- Event delegates are owned by render roots and are removed when those roots dispose.
+
+### ... (spreads)
+
+Spreads let you pass multiple props at once:
+
+```jsx
+<div {...props} />
+```
+
+Keep in mind given the independent nature of binding updates there is no guarantee of order using spreads at this time. It's under consideration.
+
+## Components
+
+Components are just Capital Cased tags. Instead of wrapping with computation dynamic props will just be getter accessors. \* Remember property access triggers so don't destructure outside of computations unless you intend the content to be static.
+
+```jsx
+const MyComp = props => {
+  const staticProp = props.other;
+  return (
+    <>
+      <div>{props.param}</div>
+      <div>{staticProp}</div>
+    </>
+  );
+};
+
+<MyComp param={dynamic()} other={static} />;
+```
+
+Components may have children. This is available as props.children. It may be a node, a function, or a string, or an array of the aforementioned. Non-expression children like DOM nodes are set to evaluate lazily (upon access by default).
+
+## Fragments
+
+This plugin also supports JSX Fragments with `<></>` notation. These will be compiled to arrays. The fragment syntax provides the convenience of being able to use the template syntax to wrap expressions.
+
+## Acknowledgements
+
+The concept of using JSX to DOM instead of html strings and context based binding usually found in these libraries was inspired greatly by [Surplus](https://github.com/adamhaile/surplus).