synstate-dom 0.0.0-stage → 0.2.0

package/src/jsx/mountable.mts

@@ -0,0 +1,31 @@
+import { mountableTag } from '../internal/index.mjs';
+
+/**
+ * What a JSX expression evaluates to: a description that creates DOM nodes
+ * when mounted, not the nodes themselves (SPEC.md 6.1).
+ *
+ * The children of a JSX element are evaluated before the element, so a
+ * description that created its nodes at once would create both branches of
+ * `<If cond={c$} then={<A />} else={<B />} />` before either was chosen.
+ *
+ * It is an object rather than a function: a props object with a `then` prop
+ * holding a function would be taken for a thenable.
+ *
+ * The same description may be mounted any number of times; each mount
+ * creates new nodes.
+ */
+export type Mountable = Readonly<{
+  [mountableTag]: true;
+  /** Called inside the current scope; creates the nodes and returns them. */
+  mount: () => MountedNodes;
+}>;
+
+/** What one mount produced. */
+export type MountedNodes = ChildNode | readonly ChildNode[];
+
+/** Makes a {@link Mountable} from the function that mounts it. */
+export const mountable = (mount: () => MountedNodes): Mountable =>
+  ({
+    [mountableTag]: true,
+    mount,
+  }) as const;

package/src/jsx-dev-runtime.mts

@@ -0,0 +1,6 @@
+/**
+ * The module `"jsxImportSource": "synstate-dom"` makes TypeScript import for
+ * `"jsx": "react-jsxdev"`. The extra arguments (`key`, source location) are
+ * not used.
+ */
+export { Fragment, createMountable as jsxDEV, type JSX } from './jsx/index.mjs';

package/src/jsx-runtime.mts

@@ -0,0 +1,11 @@
+/**
+ * The module `"jsxImportSource": "synstate-dom"` makes TypeScript import for
+ * `"jsx": "react-jsx"`. `jsxs` is the call for an element with several
+ * children; both are the same factory.
+ */
+export {
+  Fragment,
+  createMountable as jsx,
+  createMountable as jsxs,
+  type JSX,
+} from './jsx/index.mjs';

package/src/render.mts

@@ -0,0 +1,32 @@
+import { createScope } from 'synstate';
+import { type JSX, toNodes } from './jsx/index.mjs';
+
+/**
+ * Mounts `app` into `container` and returns the function that unmounts it
+ * (SPEC.md 6.5).
+ *
+ * `app` is called once, inside a new root scope; everything created while it
+ * and the description it returns are mounted belongs to that scope, and
+ * unmounting disposes it and removes the nodes.
+ *
+ * `render(App, el)` rather than `render(<App />, el)`: taking the component
+ * makes it plain that it is evaluated here.
+ */
+export const render = (
+  app: () => JSX.Element,
+  container: Element,
+): (() => void) => {
+  const root = createScope(undefined);
+
+  const nodes = root.run(() => toNodes(app().mount()));
+
+  container.append(...nodes);
+
+  return () => {
+    root.dispose();
+
+    for (const node of nodes) {
+      node.remove();
+    }
+  };
+};