@tschk/moonshine-solid 0.4.1 → 0.4.4

package/src/dynamic.ts

@@ -0,0 +1,90 @@
+import { h } from "./component-factory";
+/** Native dynamic components; not Solid's compiled web instruction ABI. */
+import { eventRegistration, type DOMChild } from "@tschk/moonshine-dom/dom";
+import {
+  createMemo,
+  getOwner,
+  createRenderEffect,
+  onCleanup,
+  untrack,
+  type Accessor,
+} from "@tschk/moonshine-dom/reactive";
+import { isSSRRendering } from "@tschk/moonshine-dom/ssr-owner";
+import { peekComponentContext } from "@tschk/moonshine-dom/component";
+import { splitProps } from "./props";
+import { registerSolidEvent } from "./events";
+
+export type DynamicComponent<R = DOMChild> = string | ((props: any) => R);
+export type DynamicProps<T> = T extends (props: infer P) => unknown
+  ? P
+  : Record<string, unknown>;
+
+function intrinsicProps(props: object): Record<string, unknown> {
+  return new Proxy(
+    {},
+    {
+      ownKeys: () => Reflect.ownKeys(props),
+      has: (_, key) => Reflect.has(props, key),
+      getOwnPropertyDescriptor: (_, key) =>
+        Reflect.has(props, key)
+          ? {
+              configurable: true,
+              enumerable:
+                Reflect.getOwnPropertyDescriptor(props, key)?.enumerable ??
+                true,
+            }
+          : undefined,
+      get: (_, key) => {
+        if (key === eventRegistration)
+          return (element: Element, name: string, read: () => unknown) => {
+            const listener = createMemo(read);
+            let dispose: ReturnType<typeof registerSolidEvent> | undefined;
+            onCleanup(() => dispose?.());
+            createRenderEffect(() => {
+              const value = listener();
+              if (dispose?.update?.(value)) return;
+              const previous = dispose;
+              dispose = undefined;
+              previous?.();
+              dispose = registerSolidEvent(element, name, value);
+            });
+            return () => {};
+          };
+        if (key === "ref" || key === "xmlns")
+          return Reflect.get(props, key, props);
+        return () => Reflect.get(props, key, props);
+      },
+    },
+  );
+}
+
+export function createDynamic<T extends DynamicComponent>(
+  component: () => T | undefined,
+  props: DynamicProps<NoInfer<T>>,
+): Accessor<DOMChild | undefined> {
+  if (isSSRRendering() || peekComponentContext()?.mode === "ssr")
+    throw new Error(
+      "Server dynamic components require the explicit /ssr entry",
+    );
+  const owner = getOwner();
+  if (!owner || owner.disposed)
+    throw new Error(
+      "Dynamic component invocation requires a live native owner",
+    );
+  const selected = createMemo(component);
+  return createMemo(() => {
+    const value = selected();
+    if (typeof value === "function")
+      return untrack(() => h(value, props as Record<string, unknown>));
+    if (typeof value === "string")
+      return untrack(() => h(value, intrinsicProps(props as object)));
+    return undefined;
+  });
+}
+
+export function Dynamic<T extends DynamicComponent>(
+  props: { component: T | undefined } & DynamicProps<NoInfer<T>>,
+): Accessor<DOMChild | undefined> {
+  const [, rest] = splitProps(props, ["component"]);
+  return createDynamic(() => props.component, rest as DynamicProps<T>);
+}

package/src/events.ts

@@ -0,0 +1,185 @@
+/** Adapter-scoped events, independent of Solid's runtime. */
+type Handler =
+  EventListenerOrEventListenerObject | readonly [Function, unknown];
+const delegated = new Set([
+  "beforeinput",
+  "click",
+  "dblclick",
+  "contextmenu",
+  "focusin",
+  "focusout",
+  "input",
+  "keydown",
+  "keyup",
+  "mousedown",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "pointerdown",
+  "pointermove",
+  "pointerout",
+  "pointerover",
+  "pointerup",
+  "touchend",
+  "touchmove",
+  "touchstart",
+]);
+const handlers = new WeakMap<Node, Map<string, Handler>>();
+const documents = new WeakMap<
+  Document,
+  Map<string, { count: number; listener: EventListener }>
+>();
+export const portalHosts = new WeakMap<Node, () => Node | null>();
+function invoke(
+  handler: Handler,
+  node: Node,
+  event: Event,
+  isDelegated = false,
+) {
+  if (Array.isArray(handler))
+    Reflect.apply(
+      handler[0],
+      node,
+      isDelegated && handler[1] === undefined ? [event] : [handler[1], event],
+    );
+  else if (typeof handler === "function") Reflect.apply(handler, node, [event]);
+  else (handler as EventListenerObject).handleEvent(event);
+}
+function dispatch(event: Event, document: Document) {
+  const path = event.composedPath();
+  let node: Node | null =
+    path[0] instanceof Node ? path[0] : (event.target as Node);
+  const originalTarget = event.target;
+  Object.defineProperty(event, "currentTarget", {
+    configurable: true,
+    get: () => node ?? document,
+  });
+  if (node !== originalTarget)
+    Object.defineProperty(event, "target", { configurable: true, value: node });
+  try {
+    while (node) {
+      const handler = handlers.get(node)?.get(event.type);
+      if (handler && !(node as HTMLButtonElement).disabled)
+        invoke(handler, node, event, true);
+      if (event.cancelBubble) break;
+      // Ordinary shadow boundaries retarget; a portal keeps its logical target.
+      if (
+        node instanceof ShadowRoot &&
+        !portalHosts.has(node.host) &&
+        node.contains(event.target as Node)
+      )
+        Object.defineProperty(event, "target", {
+          configurable: true,
+          value: node.host,
+        });
+      node = portalHosts.has(node)
+        ? portalHosts.get(node)!()
+        : (node.parentNode ?? (node as ShadowRoot).host ?? null);
+    }
+  } finally {
+    Object.defineProperty(event, "target", {
+      configurable: true,
+      value: originalTarget,
+    });
+  }
+}
+type Registration = (() => void) & { update?: (value: unknown) => boolean };
+export function registerSolidEvent(
+  element: Element,
+  name: string,
+  value: unknown,
+): Registration {
+  if (value == null) return () => {};
+  const capture = name.startsWith("oncapture:");
+  const direct = name.startsWith("on:");
+  const type = capture
+    ? name.slice(10)
+    : direct
+      ? name.slice(3)
+      : name.slice(2).toLowerCase();
+  if (
+    typeof value !== "function" &&
+    !(
+      value &&
+      typeof value === "object" &&
+      typeof (value as EventListenerObject).handleEvent === "function"
+    ) &&
+    !(Array.isArray(value) && typeof value[0] === "function")
+  )
+    throw TypeError("Invalid Solid event handler");
+  const object = typeof value === "object" && !Array.isArray(value);
+  if (direct || capture || object || !delegated.has(type)) {
+    const handler = Array.isArray(value)
+      ? (event: Event) => invoke(value as unknown as Handler, element, event)
+      : (value as EventListenerOrEventListenerObject);
+    const input = object ? (value as AddEventListenerOptions) : undefined;
+    const options = capture
+      ? true
+      : input
+        ? {
+            capture: !!input.capture,
+            once: !!input.once,
+            passive: !!input.passive,
+            signal: input.signal,
+          }
+        : undefined;
+    const registeredCapture =
+      typeof options === "boolean" ? options : !!options?.capture;
+    element.addEventListener(type, handler, options);
+    return () => element.removeEventListener(type, handler, registeredCapture);
+  }
+  let own = handlers.get(element);
+  if (!own) handlers.set(element, (own = new Map()));
+  own.set(type, value as unknown as Handler);
+  const release = acquireDocument(element.ownerDocument, type);
+  let active = true;
+  const dispose: Registration = () => {
+    if (!active) return;
+    active = false;
+    own!.delete(type);
+    release();
+  };
+  dispose.update = (next) => {
+    if (
+      !active ||
+      !(
+        typeof next === "function" ||
+        (Array.isArray(next) && typeof next[0] === "function")
+      )
+    )
+      return false;
+    own!.set(type, next as Handler);
+    return true;
+  };
+  return dispose;
+}
+
+function acquireDocument(document: Document, type: string): () => void {
+  let counts = documents.get(document);
+  if (!counts) documents.set(document, (counts = new Map()));
+  let record = counts.get(type);
+  if (!record) {
+    record = { count: 0, listener: (event) => dispatch(event, document) };
+    counts.set(type, record);
+    document.addEventListener(type, record.listener);
+  }
+  record.count++;
+  let active = true;
+  return () => {
+    if (!active) return;
+    active = false;
+    if (!--record!.count) {
+      document.removeEventListener(type, record!.listener);
+      counts!.delete(type);
+    }
+  };
+}
+export function acquirePortalDocument(document: Document): () => void {
+  const releases = Array.from(delegated, (type) =>
+    acquireDocument(document, type),
+  );
+  return () => {
+    for (const release of releases) release();
+  };
+}

package/src/framework-native.ts

@@ -0,0 +1 @@
+export * from "@tschk/moonshine-dom/framework-native";

package/src/framework.ts

@@ -1,124 +1,41 @@
 import type { RenderContext, Renderer } from "@tschk/moonshine-framework";
-import type { JSX } from "solid-js";
-import {
-  createComponent,
-  escape,
-  hydrate as solidHydrate,
-  isServer,
-  renderToStream,
-  renderToStringAsync,
-  ssr,
-} from "solid-js/web";
-
-type SsrNode = ReturnType<typeof ssr>;
-
-type PageProps = {
-  params: Record<string, string>;
-  data: unknown;
-};
-
-async function loadComponent(
-  file: string,
-): Promise<(props: unknown) => SsrNode> {
-  const mod = await import(file);
-  return (mod.default ?? mod) as (props: unknown) => SsrNode;
-}
-
-function escapeAttr(value: string): string {
-  return (escape as (s: string, attr: boolean) => string)(value, true);
-}
-
-function Shell(props: { mode: string; children: SsrNode }): SsrNode {
-  return ssr(
-    ["<!DOCTYPE html><html><head></head>", "</html>"],
-    ssr(
-      ['<body data-moonshine-mode="', '">', "</body>"],
-      escapeAttr(props.mode),
-      props.children,
-    ),
-  );
-}
-
-async function buildBody(context: RenderContext): Promise<SsrNode> {
-  const Page = await loadComponent(context.route.file);
-  const pageProps: PageProps = { params: context.params, data: context.data };
-  let body = Page(pageProps);
-  if (context.route.layouts) {
-    for (let i = context.route.layouts.length - 1; i >= 0; i--) {
-      const Layout = await loadComponent(context.route.layouts[i]!);
-      body = Layout({ ...pageProps, children: body });
-    }
-  }
-  return Shell({ mode: context.route.mode, children: body });
-}
-
-function buildSpaShell(context: RenderContext): SsrNode {
-  const clientTags = context.route.clientEntries
-    .map((href) => `<script type="module" src="${escapeAttr(href)}"></script>`)
-    .join("");
-  const body = ssr(
-    [
-      '<body data-moonshine-mode="',
-      '"><div id="moonshine-app" data-moonshine-app="',
-      '"></div>',
-      "</body>",
-    ],
-    escapeAttr(context.route.mode),
-    escapeAttr(context.route.id),
-    clientTags,
-  );
-  return ssr(
-    ["<!DOCTYPE html><html><head>", "</head>", "</html>"],
-    clientTags,
-    body,
-  );
-}
-
-async function renderPageToString(context: RenderContext): Promise<string> {
-  const body = await buildBody(context);
-  return renderToStringAsync(() => body);
-}
-
-async function renderPage(context: RenderContext): Promise<Response> {
-  const body = await buildBody(context);
-  const { readable, writable } = new TransformStream();
-  const stream = renderToStream(() => body);
-  stream.pipeTo(writable);
-  return new Response(readable, {
-    headers: { "content-type": "text/html; charset=utf-8" },
-  });
-}
-
+import { escapeHtml } from "@tschk/moonshine-dom/ssr";
+import type { DOMChild } from "@tschk/moonshine-dom/dom";
+
+async function prerender(context: RenderContext): Promise<string> {
+  const { sourceRenderer } =
+    await import("@tschk/moonshine-dom/framework-source");
+  const html = await sourceRenderer.prerender(context);
+  return context.route.mode === "api"
+    ? html
+    : html.replace(
+        "<body>",
+        `<body data-moonshine-mode="${escapeHtml(context.route.mode)}">`,
+      );
+}
+
+/** Compatibility name for the independent, buffered server renderer. */
 export const solidRenderer: Renderer = {
   name: "solid",
-  async prerender(context) {
-    if (context.route.mode === "api") return JSON.stringify(context.data);
-    if (context.route.mode === "spa") {
-      return renderToStringAsync(() => buildSpaShell(context));
-    }
-    return renderPageToString(context);
-  },
+  prerender,
   async render(context) {
-    if (context.route.mode === "api") {
-      return new Response(JSON.stringify(context.data), {
-        headers: { "content-type": "application/json; charset=utf-8" },
-      });
-    }
-    if (context.route.mode === "spa") {
-      const html = await renderToStringAsync(() => buildSpaShell(context));
-      return new Response(html, {
-        headers: { "content-type": "text/html; charset=utf-8" },
-      });
-    }
-    return renderPage(context);
+    return new Response(await prerender(context), {
+      headers: {
+        "content-type":
+          context.route.mode === "api"
+            ? "application/json; charset=utf-8"
+            : "text/html; charset=utf-8",
+      },
+    });
   },
 };
 
 export function hydrateSolid<T>(
-  Component: (props: T) => JSX.Element,
-  props: T,
-  container: Element,
-): (() => void) | undefined {
-  if (isServer) return;
-  return solidHydrate(() => createComponent(Component, props), container);
+  _Component: (props: T) => DOMChild,
+  _props: T,
+  _container: Element,
+): never {
+  throw new Error(
+    "Solid hydration is not implemented; compile with Crepus and use native render for a fresh mount",
+  );
 }

package/src/h.ts

@@ -1,4 +1,2 @@
-/**
- * solid-js/h hyperscript for IR / non-JSX usage.
- */
-export { default } from "solid-js/h";
+export { h as default, h } from "./component-factory";
+export type { DOMChild } from "@tschk/moonshine-dom/dom";