@tschk/moonshine-solid 0.4.0 → 0.4.4

package/src/index.ts

@@ -1,272 +1,46 @@
-/**
- * @tschk/moonshine-solid
- *
- * Solid gets a separate adapter — no shared vnode with React (AGENTS.md).
- * IR types come from `@tschk/crepuscularity-wasm`; host elements via solid-js/h.
- *
- * Prefer Solid signals in Solid apps. Bridge helpers exist only when sharing
- * a moonshine signal across host boundaries.
- */
-
-import type { TabItem, ViewIr, ViewNode } from "@tschk/crepuscularity-wasm";
+/** Independent native runtime surface and explicit kernel signal bridge. */
 import {
   createSignal as msCreateSignal,
   type Signal as MsSignal,
 } from "@tschk/moonshine";
 import {
-  createEffect,
-  createSignal as solidCreateSignal,
+  createSignal,
+  onCleanup,
+  untrack as nativeUntrack,
   type Accessor,
-  type JSX,
   type Setter,
-} from "solid-js";
-import { createComponent, Dynamic } from "solid-js/web";
+} from "@tschk/moonshine-dom/reactive";
+import { h, type DOMChild } from "@tschk/moonshine-dom/dom";
+import { createIrRenderer } from "./ir";
 
-/** Host elements go through `Dynamic` so the same tree renders on server and client. */
-function el(
-  type: string,
-  props: Record<string, unknown> | null,
-  ...children: unknown[]
-): JSX.Element {
-  const merged: Record<string, unknown> = { component: type };
-  for (const [name, value] of Object.entries(props ?? {})) {
-    if (value !== undefined) merged[name] = value;
-  }
-  if (children.length > 0) merged.children = children;
-  return createComponent(Dynamic, merged as never) as unknown as JSX.Element;
-}
+export type { CrepusNode, CrepusIr, RenderCrepusOptions } from "./ir";
+export const { renderCrepusNodeSolid, renderCrepusIrSolid } =
+  /* @__PURE__ */ createIrRenderer<DOMChild>(h);
 
-/**
- * One-way mirror: moonshine signal → Solid accessor.
- * Prefer native `createSignal` from solid-js when staying in Solid.
- */
+/** Mirror a kernel signal while its native owner lives; writes still target the kernel. */
 export function fromMoonshineSignal<T>(
   signal: MsSignal<T>,
 ): [Accessor<T>, Setter<T>] {
-  const [get, set] = solidCreateSignal(signal());
-  createEffect(() => {
-    const unsub = signal.subscribe(() => set(() => signal()));
-    return unsub;
-  });
+  const [read, write] = createSignal(nativeUntrack(signal));
+  const stop = signal.subscribe(() => write(() => nativeUntrack(signal)));
+  onCleanup(stop);
   return [
-    get,
-    ((v: T | ((prev: T) => T)) => {
-      if (typeof v === "function") {
-        signal.set(v as (prev: T) => T);
-      } else {
-        signal.set(v as T);
-      }
-      return signal();
-    }) as Setter<T>,
+    read,
+    (next) => {
+      signal.set(next);
+      return nativeUntrack(signal);
+    },
   ];
 }
 
-/** Create a Solid pair backed by moonshine createSignal (cross-host share). */
 export function createBridgedSignal<T>(initial: T): [Accessor<T>, Setter<T>] {
   return fromMoonshineSignal(msCreateSignal(initial));
 }
 
-export type CrepusNode = ViewNode;
-export type CrepusIr = ViewIr;
-
-export interface RenderCrepusOptions {
-  /** Wrapper element for the document root. */
-  rootTag?: string;
-}
-
-/**
- * Class tokens are carried verbatim from the template, so UnoCSS/Tailwind
- * styles the output. The lowered `style` hints exist for native targets and are
- * deliberately not converted to inline CSS here.
- */
-function classOf(node: ViewNode): string | undefined {
-  const classes = (node as { style?: { classes?: string[] } }).style?.classes;
-  if (!classes || classes.length === 0) return undefined;
-  const joined = classes.filter(Boolean).join(" ");
-  return joined.length > 0 ? joined : undefined;
-}
-
-function renderChildren(children: ViewNode[]): JSX.Element[] {
-  return children.map((child) => renderCrepusNodeSolid(child));
-}
-
-const RENDERERS: Record<
-  string,
-  (node: any, cls: string | undefined) => JSX.Element
-> = {
-  text: (node, cls) => el("span", { class: cls }, node.content),
-  link: (node, cls) =>
-    el(
-      "a",
-      { class: cls, href: node.href, target: node.target, rel: node.rel },
-      ...renderChildren(node.children),
-    ),
-  stack: (node, cls) =>
-    el("div", { class: cls }, ...renderChildren(node.children)),
-  scroll: (node, cls) =>
-    el("div", { class: cls }, ...renderChildren(node.children)),
-  dropzone: (node, cls) =>
-    el(
-      "div",
-      { class: cls, "aria-label": node.label },
-      ...renderChildren(node.children),
-    ),
-  list: (node, cls) =>
-    el(
-      node.ordered ? "ol" : "ul",
-      { class: cls },
-      ...renderChildren(node.children),
-    ),
-  listItem: (node, cls) =>
-    el("li", { class: cls }, ...renderChildren(node.children)),
-  button: (node, cls) =>
-    el("button", { class: cls, type: "button" }, node.label),
-  badge: (node, cls) =>
-    el("span", { class: cls, "data-tone": node.tone }, node.label),
-  divider: (node, cls) => el("hr", { class: cls }),
-  spacer: (node, cls) => el("div", { class: cls, "aria-hidden": true }),
-  image: (node, cls) =>
-    el("img", { class: cls, src: node.src, alt: node.alt ?? "" }),
-  webView: (node, cls) => el("iframe", { class: cls, src: node.src }),
-  toggle: (node, cls) =>
-    el(
-      "button",
-      {
-        class: cls,
-        type: "button",
-        role: "switch",
-        "aria-checked": node.checked,
-      },
-      node.label,
-    ),
-  checkbox: (node, cls) =>
-    el(
-      "label",
-      { class: cls },
-      el("input", { type: "checkbox", checked: node.checked, name: node.bind }),
-      node.label,
-    ),
-  slider: (node, cls) =>
-    el("input", {
-      class: cls,
-      type: "range",
-      value: node.value,
-      min: node.min,
-      max: node.max,
-      step: node.step,
-      name: node.bind,
-    }),
-  progress: (node, cls) =>
-    el("progress", { class: cls, value: node.value, max: node.max }),
-  meter: (node, cls) =>
-    el("meter", {
-      class: cls,
-      value: node.value,
-      min: node.min,
-      max: node.max,
-    }),
-  input: (node, cls) =>
-    el(node.multiline ? "textarea" : "input", {
-      class: cls,
-      type: node.multiline ? undefined : node.secure ? "password" : "text",
-      placeholder: node.placeholder,
-      name: node.bind,
-    }),
-  picker: (node, cls) =>
-    el(
-      "select",
-      { class: cls, name: node.bind },
-      ...node.options.map((option: any) =>
-        el("option", { value: option.value }, option.label),
-      ),
-    ),
-  filePicker: (node, cls) =>
-    el(
-      "label",
-      { class: cls },
-      el("input", {
-        type: "file",
-        accept: node.accept?.join(","),
-        multiple: node.multiple,
-      }),
-      node.label,
-    ),
-  slotRotate: (node, cls) =>
-    el(
-      "span",
-      {
-        class: cls,
-        "data-crepus-slot-rotate": node.phrases.join("|"),
-        "data-interval-ms": node.intervalMs,
-      },
-      node.phrases[0] ?? "",
-    ),
-  tabs: (node, cls) =>
-    el(
-      "div",
-      { class: cls },
-      el(
-        "div",
-        { role: "tablist" },
-        ...node.tabs.map((tab: TabItem) =>
-          el("button", { type: "button", role: "tab" }, tab.label),
-        ),
-      ),
-      ...node.tabs.map((tab: TabItem) =>
-        el("div", { role: "tabpanel" }, ...renderChildren(tab.children)),
-      ),
-    ),
-  if: (node, cls) =>
-    el(
-      "div",
-      { class: cls, "data-crepus-if": node.condition },
-      ...renderChildren(node.thenChildren),
-    ),
-  forEach: (node, cls) =>
-    el(
-      "div",
-      {
-        class: cls,
-        "data-crepus-for-each": node.bind,
-        "data-crepus-item": node.itemName,
-      },
-      ...renderChildren(node.itemBody),
-    ),
-};
-
-export function renderCrepusNodeSolid(node: ViewNode): JSX.Element {
-  const cls = classOf(node);
-  const renderer = RENDERERS[node.kind];
-  if (renderer) {
-    return renderer(node, cls);
-  }
-  return null as unknown as JSX.Element;
-}
-
-/**
- * Map View IR → Solid elements (separate from the React renderer).
- * Same kind surface as `@tschk/crepus-moonshine`, one IR source of truth.
- */
-export function renderCrepusIrSolid(
-  ir: ViewIr,
-  options: RenderCrepusOptions = {},
-): JSX.Element {
-  const kids = (ir.root ?? []).map((node) => renderCrepusNodeSolid(node));
-  return el(
-    options.rootTag ?? "div",
-    {
-      "data-crepus-root": "true",
-      "data-crepus-target": "solid",
-      "data-crepus-ir-version": ir.version,
-    },
-    ...kids,
-  );
-}
-
 export { msCreateSignal as createMoonshineSignal };
 export type { MsSignal as MoonshineSignal };
 
-// Core re-exports for Solid apps that share moonshine resources
+// Kernel APIs keep their existing names and contracts.
 export {
   createResource,
   createSignal as createMsSignal,

package/src/ir.ts

@@ -0,0 +1,213 @@
+/** Static View IR mapping parameterized by independent DOM or SSR factories. */
+import type { TabItem, ViewIr, ViewNode } from "@tschk/crepuscularity-wasm";
+
+export type CrepusNode = ViewNode;
+export type CrepusIr = ViewIr;
+
+export interface RenderCrepusOptions {
+  /** Wrapper element for the document root. */
+  rootTag?: string;
+}
+
+/**
+ * Class tokens are carried verbatim from the template, so UnoCSS/Tailwind
+ * styles the output. The lowered `style` hints exist for native targets and are
+ * deliberately not converted to inline CSS here.
+ */
+function classOf(node: ViewNode): string | undefined {
+  const classes = (node as { style?: { classes?: string[] } }).style?.classes;
+  if (!classes || classes.length === 0) return undefined;
+  const joined = classes.filter(Boolean).join(" ");
+  return joined.length > 0 ? joined : undefined;
+}
+
+export function createIrRenderer<Child>(
+  el: (
+    tag: string,
+    props: Record<string, unknown> | null,
+    ...children: Array<Child | string | number | boolean | null | undefined>
+  ) => Child,
+) {
+  function renderChildren(children: ViewNode[]): Child[] {
+    return children.map((child) => renderCrepusNodeSolid(child));
+  }
+
+  const RENDERERS: Record<
+    string,
+    (node: any, cls: string | undefined) => Child
+  > = {
+    text: (node, cls) => el("span", { class: cls }, node.content),
+    link: (node, cls) =>
+      el(
+        "a",
+        { class: cls, href: node.href, target: node.target, rel: node.rel },
+        ...renderChildren(node.children),
+      ),
+    stack: (node, cls) =>
+      el("div", { class: cls }, ...renderChildren(node.children)),
+    scroll: (node, cls) =>
+      el("div", { class: cls }, ...renderChildren(node.children)),
+    dropzone: (node, cls) =>
+      el(
+        "div",
+        { class: cls, "aria-label": node.label },
+        ...renderChildren(node.children),
+      ),
+    list: (node, cls) =>
+      el(
+        node.ordered ? "ol" : "ul",
+        { class: cls },
+        ...renderChildren(node.children),
+      ),
+    listItem: (node, cls) =>
+      el("li", { class: cls }, ...renderChildren(node.children)),
+    button: (node, cls) =>
+      el("button", { class: cls, type: "button" }, node.label),
+    badge: (node, cls) =>
+      el("span", { class: cls, "data-tone": node.tone }, node.label),
+    divider: (node, cls) => el("hr", { class: cls }),
+    spacer: (node, cls) => el("div", { class: cls, "aria-hidden": true }),
+    image: (node, cls) =>
+      el("img", { class: cls, src: node.src, alt: node.alt ?? "" }),
+    webView: (node, cls) => el("iframe", { class: cls, src: node.src }),
+    toggle: (node, cls) =>
+      el(
+        "button",
+        {
+          class: cls,
+          type: "button",
+          role: "switch",
+          "aria-checked": node.checked,
+        },
+        node.label,
+      ),
+    checkbox: (node, cls) =>
+      el(
+        "label",
+        { class: cls },
+        el("input", {
+          type: "checkbox",
+          checked: node.checked,
+          name: node.bind,
+        }),
+        node.label,
+      ),
+    slider: (node, cls) =>
+      el("input", {
+        class: cls,
+        type: "range",
+        value: node.value,
+        min: node.min,
+        max: node.max,
+        step: node.step,
+        name: node.bind,
+      }),
+    progress: (node, cls) =>
+      el("progress", { class: cls, value: node.value, max: node.max }),
+    meter: (node, cls) =>
+      el("meter", {
+        class: cls,
+        value: node.value,
+        min: node.min,
+        max: node.max,
+      }),
+    input: (node, cls) =>
+      el(node.multiline ? "textarea" : "input", {
+        class: cls,
+        type: node.multiline ? undefined : node.secure ? "password" : "text",
+        placeholder: node.placeholder,
+        name: node.bind,
+      }),
+    picker: (node, cls) =>
+      el(
+        "select",
+        { class: cls, name: node.bind },
+        ...node.options.map((option: any) =>
+          el("option", { value: option.value }, option.label),
+        ),
+      ),
+    filePicker: (node, cls) =>
+      el(
+        "label",
+        { class: cls },
+        el("input", {
+          type: "file",
+          accept: node.accept?.join(","),
+          multiple: node.multiple,
+        }),
+        node.label,
+      ),
+    slotRotate: (node, cls) =>
+      el(
+        "span",
+        {
+          class: cls,
+          "data-crepus-slot-rotate": node.phrases.join("|"),
+          "data-interval-ms": node.intervalMs,
+        },
+        node.phrases[0] ?? "",
+      ),
+    tabs: (node, cls) =>
+      el(
+        "div",
+        { class: cls },
+        el(
+          "div",
+          { role: "tablist" },
+          ...node.tabs.map((tab: TabItem) =>
+            el("button", { type: "button", role: "tab" }, tab.label),
+          ),
+        ),
+        ...node.tabs.map((tab: TabItem) =>
+          el("div", { role: "tabpanel" }, ...renderChildren(tab.children)),
+        ),
+      ),
+    if: (node, cls) =>
+      el(
+        "div",
+        { class: cls, "data-crepus-if": node.condition },
+        ...renderChildren(node.thenChildren),
+      ),
+    forEach: (node, cls) =>
+      el(
+        "div",
+        {
+          class: cls,
+          "data-crepus-for-each": node.bind,
+          "data-crepus-item": node.itemName,
+        },
+        ...renderChildren(node.itemBody),
+      ),
+  };
+
+  function renderCrepusNodeSolid(node: ViewNode): Child {
+    if (!Object.hasOwn(RENDERERS, node.kind)) {
+      throw new TypeError(`Unsupported View IR node kind: ${node.kind}`);
+    }
+    const cls = classOf(node);
+    const renderer = RENDERERS[node.kind];
+    return renderer(node, cls);
+  }
+
+  /**
+   * Static mapping only: if/forEach preserve their authored placeholder children.
+   * Compile source through Crepus for executable conditions, loops and handlers.
+   */
+  function renderCrepusIrSolid(
+    ir: ViewIr,
+    options: RenderCrepusOptions = {},
+  ): Child {
+    const kids = (ir.root ?? []).map((node) => renderCrepusNodeSolid(node));
+    return el(
+      options.rootTag ?? "div",
+      {
+        "data-crepus-root": "true",
+        "data-crepus-target": "solid",
+        "data-crepus-ir-version": ir.version,
+      },
+      ...kids,
+    );
+  }
+
+  return { renderCrepusNodeSolid, renderCrepusIrSolid };
+}

package/src/lazy.ts

@@ -0,0 +1,62 @@
+import { createComponent } from "./component-factory";
+/** Independent client component loading; no Suspense, hydration or async SSR. */
+import { createResource } from "@tschk/moonshine-dom/resource";
+import {
+  createMemo,
+  getOwner,
+  untrack,
+  type Accessor,
+} from "@tschk/moonshine-dom/reactive";
+import { peekComponentContext } from "@tschk/moonshine-dom/component";
+import { isSSRRendering } from "@tschk/moonshine-dom/ssr-owner";
+
+function guard() {
+  if (isSSRRendering() || peekComponentContext()?.mode === "ssr")
+    throw new Error("Native lazy components are client-only");
+}
+
+export function lazy<P, T>(
+  loader: () => Promise<{ default: (props: P) => T }>,
+): ((props: P) => Accessor<T | "">) & {
+  preload: () => Promise<{ default: (props: P) => T }>;
+} {
+  let pending: Promise<{ default: (props: P) => T }> | undefined;
+  let component: ((props: P) => T) | undefined;
+  const load = () => {
+    guard();
+    if (!pending) {
+      // Invoke before assigning: synchronous loader failures remain retryable.
+      const result = untrack(loader);
+      pending = Promise.resolve(result).then((module) => {
+        const resolved = module?.default;
+        if (typeof resolved !== "function")
+          throw new TypeError(
+            "Lazy modules require a default component function",
+          );
+        component = resolved;
+        return module;
+      });
+      // Observe the internal cache; callers still receive its rejecting promise.
+      void pending.catch(() => {});
+    }
+    return pending;
+  };
+  return Object.assign(
+    (props: P) => {
+      guard();
+      const owner = getOwner();
+      if (!owner || owner.disposed)
+        throw new Error(
+          "Lazy component invocation requires a live native owner",
+        );
+      if (component)
+        return createMemo(() => createComponent(component!, props));
+      const [module] = createResource(load);
+      return createMemo(() => {
+        const ready = module();
+        return ready ? createComponent(component!, props) : "";
+      });
+    },
+    { preload: load },
+  );
+}

package/src/portal-h.ts

@@ -0,0 +1,42 @@
+import {
+  h as nativeH,
+  eventRegistration,
+  type DOMChild,
+} from "@tschk/moonshine-dom/dom";
+import { registerSolidEvent } from "./events";
+const eventProps: ProxyHandler<object> = {
+  get(target, key) {
+    return key === eventRegistration
+      ? registerSolidEvent
+      : Reflect.get(target, key, target);
+  },
+};
+export function h<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  props?: Record<string, unknown> | null,
+  ...children: DOMChild[]
+): HTMLElementTagNameMap[K];
+export function h<K extends keyof SVGElementTagNameMap>(
+  tag: K,
+  props?: Record<string, unknown> | null,
+  ...children: DOMChild[]
+): SVGElementTagNameMap[K];
+export function h<P extends object>(
+  component: (props: P & { children?: DOMChild }) => DOMChild,
+  props: P | null,
+  ...children: DOMChild[]
+): DOMChild;
+export function h(
+  tag: string,
+  props?: Record<string, unknown> | null,
+  ...children: DOMChild[]
+): HTMLElement | SVGElement;
+export function h<P extends Record<string, unknown>>(
+  tag: string | ((props: P & { children?: DOMChild }) => DOMChild),
+  props: P | null = null,
+  ...children: DOMChild[]
+): DOMChild {
+  if (typeof tag === "string")
+    return nativeH(tag, new Proxy(props ?? {}, eventProps), ...children);
+  return nativeH(tag, props, ...children);
+}

package/src/portal.ts

@@ -0,0 +1,56 @@
+import { render, type DOMChild } from "@tschk/moonshine-dom/dom";
+import { getOwner, onCleanup } from "@tschk/moonshine-dom/reactive";
+import { isSSRRendering } from "@tschk/moonshine-dom/ssr-owner";
+import { peekComponentContext } from "@tschk/moonshine-dom/component";
+import { acquirePortalDocument, portalHosts } from "./events";
+export function Portal(props: {
+  mount?: Element;
+  children?: DOMChild;
+  isSVG?: boolean;
+  useShadow?: boolean;
+}): Text | undefined {
+  if (isSSRRendering() || peekComponentContext()?.mode === "ssr") return;
+  if (!getOwner() || getOwner()!.disposed)
+    throw Error("Portal requires a live native owner");
+  const mount = props.mount ?? document.body;
+  if (mount.ownerDocument !== document)
+    onCleanup(acquirePortalDocument(mount.ownerDocument));
+  const marker = document.createTextNode("");
+  if (mount.localName === "head") {
+    let stop: (() => void) | undefined;
+    let disposed = false;
+    onCleanup(() => {
+      disposed = true;
+      stop?.();
+    });
+    stop = render(() => props.children, mount);
+    if (disposed) stop();
+    return marker;
+  }
+  const container = props.isSVG
+    ? document.createElementNS("http://www.w3.org/2000/svg", "g")
+    : document.createElement("div");
+  portalHosts.set(container, () => marker.parentNode);
+  let stop: (() => void) | undefined;
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+    try {
+      stop?.();
+    } finally {
+      portalHosts.delete(container);
+      container.remove();
+    }
+  });
+  const renderRoot =
+    props.useShadow && container.attachShadow
+      ? container.attachShadow({ mode: "open" })
+      : container;
+  stop = render(() => props.children, renderRoot);
+  // Child setup can dispose the parent before this root's disposer is available.
+  if (disposed) stop();
+  else mount.appendChild(container);
+  return marker;
+}
+
+export { h } from "./portal-h";