ink-framework 0.1.0-alpha.12 → 0.1.0-alpha.14

package/src/renderer.ts

@@ -1,7 +1,7 @@
 declare const process: { env: { NODE_ENV: string } };
-import { createContext, type ReactNode } from "./react";
-import Reconciler from "react-reconciler";
-import { ConcurrentRoot, DefaultEventPriority, DiscreteEventPriority } from "react-reconciler/constants";
+import { options, render as renderPreact, type Component, type ComponentChildren, type VNode } from "preact";
+import type { ReactNode } from "react";
+import { Activity, activityChanged, isComponentVisible } from "./visibility";
 import { onNativeMessage } from "./native";
 import { pressHandler } from "./press";
 import type { Destination } from "./navigation";
@@ -11,8 +11,74 @@ declare const __inkCommit: (operations: Operation[]) => void;
 declare const __inkPost: (message: string) => void;
 
 type Props = Record<string, unknown>;
-type Instance = { id: number; type: string; props: Props; children: Instance[]; parent: Container | undefined; hidden?: boolean };
-type Container = { id: number; children: Instance[] };
+const hostProperties = Symbol("ink.hostProps");
+type HostProps = Props & { [hostProperties]?: Props };
+// Preact only needs tree links and mutation methods; no browser DOM is involved.
+class HostNode {
+  id: number;
+  props: Props = {};
+  parentNode: HostNode | null = null;
+  firstChild: HostNode | null = null;
+  lastChild: HostNode | null = null;
+  previousSibling: HostNode | null = null;
+  nextSibling: HostNode | null = null;
+  hidden = false;
+  mounted = false;
+  readonly nodeType: number;
+  readonly namespaceURI = "http://www.w3.org/1999/xhtml";
+  constructor(readonly type: string, text?: string) {
+    this.id = type === "#root" ? 0 : allocateHostId();
+    this.nodeType = type === "#text" ? 3 : 1;
+    if (text !== undefined) this.props = { text: String(text) };
+  }
+  get localName() { return this.type; }
+  get childNodes(): HostNode[] {
+    const nodes: HostNode[] = [];
+    for (let child = this.firstChild; child; child = child.nextSibling) nodes.push(child);
+    return nodes;
+  }
+  get data() { return this.props.text; }
+  set data(text: unknown) {
+    this.props = { text: String(text) };
+    if (this.mounted) (textChanges ?? createTextBatch()).push(this.id, String(text));
+  }
+  // Native props and callbacks are read together from the completed host vnode.
+  setAttribute() {}
+  removeAttribute() {}
+  addEventListener() {}
+  removeEventListener() {}
+  appendChild(child: HostNode) { this.insertBefore(child, null); }
+  insertBefore(child: HostNode, before: HostNode | null) {
+    if (child === before) return;
+    if (child.parentNode) child.parentNode.unlink(child);
+    child.parentNode = this;
+    child.previousSibling = before ? before.previousSibling : this.lastChild;
+    child.nextSibling = before;
+    if (child.previousSibling) child.previousSibling.nextSibling = child;
+    else this.firstChild = child;
+    if (before) before.previousSibling = child;
+    else this.lastChild = child;
+    if (this.id === 0 || this.mounted) {
+      publish(child);
+      queue({ op: "insert", id: child.id, parent: this.id, before: before?.id ?? null });
+    }
+  }
+  unlink(child: HostNode) {
+    if (child.previousSibling) child.previousSibling.nextSibling = child.nextSibling;
+    else this.firstChild = child.nextSibling;
+    if (child.nextSibling) child.nextSibling.previousSibling = child.previousSibling;
+    else this.lastChild = child.previousSibling;
+    child.parentNode = child.previousSibling = child.nextSibling = null;
+  }
+  removeChild(child: HostNode) {
+    this.unlink(child);
+    if (child.mounted) {
+      queue({ op: "remove", id: child.id, parent: this.id });
+      forget(child);
+    }
+  }
+}
+type Instance = HostNode;
 type Operation =
   | { op: "create"; id: number; type: string; props: Props }
   | { op: "update"; id: number; props: Props }
@@ -26,8 +92,6 @@ let nextId = 1;
 let operations: Operation[] = [];
 let textChanges: (number | string)[] | undefined;
 let commitScheduled = false;
-let priority = DefaultEventPriority;
-const hostContext = {};
 
 function allocateHostId() {
   if (!Number.isSafeInteger(nextId)) throw new RangeError("Host identifiers exhausted");
@@ -47,7 +111,7 @@ function createTextBatch() {
 
 function textContent(type: string, props: Props): string | null {
   if (type !== "Text") return null;
-  const value = props.children;
+  const value = props.text ?? props.children;
   return typeof value === "string" ? value : typeof value === "number" || typeof value === "bigint" ? String(value) : null;
 }
 
@@ -75,36 +139,21 @@ function nativeProps(props: Props, type: string): Props {
 }
 
 function publish(instance: Instance) {
-  if (mounted.has(instance.id)) return;
+  if (instance.mounted) return;
+  instance.mounted = true;
   mounted.set(instance.id, instance);
   queue({ op: "create", id: instance.id, type: instance.type, props: nativeProps(instance.props, instance.type) });
   if (instance.hidden) queue({ op: "hidden", id: instance.id, value: true });
-  for (const child of instance.children) {
+  for (let child = instance.firstChild; child; child = child.nextSibling) {
     publish(child);
     queue({ op: "insert", id: child.id, parent: instance.id, before: null });
   }
 }
 
-function insert(parent: Container, child: Instance, before?: Instance) {
-  // Only a moved child needs searching for; appends stay constant-time.
-  if (child.parent === parent) parent.children.splice(parent.children.indexOf(child), 1);
-  child.parent = parent;
-  if (before) parent.children.splice(parent.children.indexOf(before), 0, child);
-  else parent.children.push(child);
-  publish(child);
-  queue({ op: "insert", id: child.id, parent: parent.id, before: before?.id ?? null });
-}
-
 function forget(instance: Instance) {
+  instance.mounted = false;
   mounted.delete(instance.id);
-  instance.parent = undefined;
-  for (const child of instance.children) forget(child);
-}
-
-function remove(parent: Container, child: Instance) {
-  parent.children.splice(parent.children.indexOf(child), 1);
-  queue({ op: "remove", id: child.id, parent: parent.id });
-  forget(child);
+  for (let child = instance.firstChild; child; child = child.nextSibling) forget(child);
 }
 
 function sameListValue(a: unknown, b: unknown): boolean {
@@ -147,9 +196,11 @@ function compiledListUpdate(previous: Props, props: Props): Props | null {
 
 function update(instance: Instance, type: string, _oldProps: Props, props: Props) {
   const previous = instance.props;
+  if (previous === props) return;
   const isText = type === "Text";
   if (isText) props = hostProps(type, props);
   instance.props = props;
+  if (!instance.mounted) return;
   if (type === "NativeList" && props.keyField === "key" && previous.template === props.template) {
     const next = compiledListUpdate(previous, props);
     if (next) queue({ op: "update", id: instance.id, props: next }, true);
@@ -163,10 +214,11 @@ function update(instance: Instance, type: string, _oldProps: Props, props: Props
       queue({ op: "update", id: instance.id, props: nativeProps(props, type) });
       return;
     }
-    const children = props.children;
-    if (children !== previous.children) {
+    const children = props.text ?? props.children;
+    if (children !== (previous.text ?? previous.children)) {
       if (typeof children === "string") return (textChanges ?? createTextBatch()).push(instance.id, children);
       if (typeof children === "number" || typeof children === "bigint") return (textChanges ?? createTextBatch()).push(instance.id, String(children));
+      if (textContent(type, previous) !== null) (textChanges ?? createTextBatch()).push(instance.id, "");
     }
     return;
   }
@@ -204,8 +256,9 @@ function update(instance: Instance, type: string, _oldProps: Props, props: Props
 }
 
 function hide(instance: Instance, value: boolean) {
+  if (instance.hidden === value) return;
   instance.hidden = value;
-  if (mounted.has(instance.id)) queue({ op: "hidden", id: instance.id, value });
+  if (instance.mounted) queue({ op: "hidden", id: instance.id, value });
 }
 
 function errorMessage(error: unknown, info: { componentStack?: string | null }) {
@@ -217,118 +270,101 @@ function report(error: unknown, info: { componentStack?: string | null }) {
   __inkPost(JSON.stringify({ type: "error", message: errorMessage(error, info) }));
 }
 
-function reportRecovered(error: unknown, info: { componentStack?: string | null }) {
-  __inkPost(JSON.stringify({ type: "log", level: "error", message: errorMessage(error, info) }));
-}
+// These fields are the stable, mangled option-hook ABI in the pinned Preact 10.
+type HostVNode = VNode<Props> & { __e?: HostNode; __?: HostVNode; __k?: (HostVNode | null)[]; __c?: Component };
+const hooks = options as typeof options & {
+  __c?: (vnode: HostVNode, queue: unknown[]) => void;
+  __inkNative?: boolean;
+  __inkHost?: (node: HostNode, type: string, props: Props, vnode: HostVNode) => void;
+};
+hooks.__inkHost = (node, type, props, vnode) => {
+  update(node, type, node.props, props);
+  if (!node.parentNode && isHidden(vnode)) node.hidden = true;
+};
+const previousDiff = options.diffed;
+options.diffed = vnode => {
+  if (typeof vnode.type !== "string" && vnode.type != null) previousDiff?.(vnode);
+  const host = vnode as HostVNode;
+  if (!hooks.__inkNative) {
+    if (typeof host.type === "string" && host.__e) update(host.__e, host.type, host.__e.props, (host.props as HostProps)[hostProperties]!);
+    if (host.__e && (typeof host.type === "string" || host.type == null)) hide(host.__e, isHidden(host));
+  }
+  if (hooks.__inkNative && host.type == null && host.__e) hide(host.__e, isHidden(host));
+  if (host.type === Activity && host.__c && activityChanged(host.__c)) visitVisibility(host);
+};
 
-const reconciler = Reconciler<string, Props, Container, Instance, Instance, never, never, never,
-  Instance, object, never, ReturnType<typeof setTimeout>, -1, null>({
-  supportsMutation: true,
-  supportsPersistence: false,
-  supportsHydration: false,
-  isPrimaryRenderer: true,
-  supportsMicrotasks: true,
-  // Declare `parent` up front so every instance keeps one object shape.
-  createInstance: (type, props) => ({ id: allocateHostId(), type, props: hostProps(type, props), children: [], parent: undefined }),
-  createTextInstance: text => ({ id: allocateHostId(), type: "#text", props: { text }, children: [], parent: undefined }),
-  appendInitialChild: (parent, child) => { parent.children.push(child); child.parent = parent; },
-  finalizeInitialChildren: () => false,
-  shouldSetTextContent: (type, props) => {
-    if (type !== "Text") return false;
-    const kind = typeof props.children;
-    return kind === "string" || kind === "number" || kind === "bigint";
-  },
-  getRootHostContext: () => hostContext,
-  getChildHostContext: () => hostContext,
-  getPublicInstance: instance => instance,
-  prepareForCommit: () => null,
-  resetAfterCommit: () => {
-    if (!operations.length || commitScheduled) return;
-    commitScheduled = true;
-    queueMicrotask(() => {
-      // Revealing an Activity reconnects store subscriptions in passive effects.
-      // Include their synchronous corrections before presenting the page.
-      while (reconciler.flushPassiveEffects()) {}
-      reconciler.flushSyncWork();
-      const committed = operations;
-      operations = [];
-      textChanges = undefined;
-      commitScheduled = false;
-      if (committed.length) __inkCommit(committed);
-    });
-  },
-  preparePortalMount: () => {},
-  scheduleTimeout: setTimeout,
-  cancelTimeout: clearTimeout,
-  noTimeout: -1,
-  scheduleMicrotask: queueMicrotask,
-  getInstanceFromNode: () => null,
-  beforeActiveInstanceBlur: () => {},
-  afterActiveInstanceBlur: () => {},
-  prepareScopeUpdate: () => {},
-  getInstanceFromScope: () => null,
-  detachDeletedInstance: () => {},
-  appendChild: insert,
-  appendChildToContainer: insert,
-  insertBefore: insert,
-  insertInContainerBefore: insert,
-  removeChild: remove,
-  removeChildFromContainer: remove,
-  resetTextContent: instance => { (textChanges ?? createTextBatch()).push(instance.id, ""); },
-  commitTextUpdate: (instance, _oldText, text) => {
-    instance.props = { text };
-    (textChanges ?? createTextBatch()).push(instance.id, text);
-  },
-  commitUpdate: update,
-  hideInstance: instance => hide(instance, true),
-  hideTextInstance: instance => hide(instance, true),
-  unhideInstance: instance => hide(instance, false),
-  unhideTextInstance: instance => hide(instance, false),
-  clearContainer: container => {
-    for (const child of [...container.children]) remove(container, child);
-  },
-  NotPendingTransition: null,
-  // React's public Context type omits the fields consumed by its reconciler.
-  HostTransitionContext: createContext(null) as unknown as Reconciler.ReactContext<null>,
-  setCurrentUpdatePriority: value => { priority = value; },
-  getCurrentUpdatePriority: () => priority,
-  resolveUpdatePriority: () => priority,
-  resetFormInstance: () => {},
-  requestPostPaintCallback: callback => { setTimeout(() => callback(performance.now()), 0); },
-  shouldAttemptEagerTransition: () => false,
-  trackSchedulerEvent: () => {},
-  resolveEventType: () => null,
-  resolveEventTimeStamp: () => performance.now(),
-  maySuspendCommit: () => false,
-  preloadInstance: () => true,
-  startSuspendingCommit: () => {},
-  suspendInstance: () => {},
-  waitForCommitToBeReady: () => null,
-});
+function isHidden(vnode: HostVNode) {
+  let component: Component | undefined;
+  for (let parent = vnode.__; parent; parent = parent.__) {
+    // A native ancestor already carries visibility for this entire branch.
+    if (typeof parent.type === "string") return false;
+    if (parent.__c) {
+      component ??= parent.__c;
+      if (parent.type === Activity) return !isComponentVisible(parent.__c);
+    }
+  }
+  return component ? !isComponentVisible(component) : false;
+}
 
-export function dispatchEvent(id: number, name: string, args: unknown[]) {
-  const handler = mounted.get(id)?.props[name];
-  if (typeof handler !== "function") return;
-  const previous = priority;
-  priority = DiscreteEventPriority;
-  try {
-    handler(...args);
-  } finally {
-    priority = previous;
+function visitVisibility(vnode: HostVNode) {
+  if (typeof vnode.type === "string" || vnode.type == null) {
+    if (vnode.__e) hide(vnode.__e, isHidden(vnode));
+    return;
   }
+  for (const child of vnode.__k ?? []) if (child) visitVisibility(child);
 }
 
-let developmentRoot: ReturnType<typeof reconciler.createContainer> | undefined;
-if (process.env.NODE_ENV === "development") {
-  reconciler.injectIntoDevTools({ bundleType: 1, version: "19.2.8", rendererPackageName: "ink" });
+const previousVNode = options.vnode;
+options.vnode = vnode => {
+  if (typeof vnode.type !== "string") {
+    previousVNode?.(vnode);
+    return;
+  }
+  const props = vnode.props as HostProps;
+  // Preact reconciles children; Ink compares native props once, after the diff.
+  // Keep the original props in this envelope so cloned compiler-cached vnodes
+  // retain them without copying or normalising every native property.
+  if (!hooks.__inkNative && !props[hostProperties]) {
+    (vnode as VNode<HostProps>).props = {
+      children: (textContent(vnode.type, props) === null ? props.children : undefined) as ComponentChildren,
+      [hostProperties]: props,
+    };
+  }
+};
+
+// QuickJS has no browser paint cycle. Run effects before presenting queued ops.
+options.requestAnimationFrame = callback => { queueMicrotask(callback); };
+options.debounceRendering = queueMicrotask;
+const previousCommit = hooks.__c;
+hooks.__c = (vnode, components) => {
+  previousCommit?.(vnode, components);
+  if (commitScheduled) return;
+  commitScheduled = true;
+  queueMicrotask(() => queueMicrotask(() => {
+    const committed = operations;
+    operations = [];
+    textChanges = undefined;
+    commitScheduled = false;
+    if (committed.length) __inkCommit(committed);
+  }));
+};
+
+// Preact creates nodes through document, but all layout and painting stay native.
+Object.assign(globalThis, { document: {
+  createElementNS: (_namespace: string, type: string) => new HostNode(type),
+  createElement: (type: string) => new HostNode(type),
+  createTextNode: (text: string) => new HostNode("#text", text),
+} });
+
+export function dispatchEvent(id: number, name: string, args: unknown[]) {
+  const handler = mounted.get(id)?.props[name];
+  if (typeof handler === "function") handler(...args);
 }
 
+let developmentRoot: HostNode | undefined;
 export function render(element: ReactNode) {
-  if (process.env.NODE_ENV === "development" && developmentRoot) {
-    const root = developmentRoot;
-    reconciler.updateContainer(element, root, null, null);
-    return () => reconciler.updateContainer(null, root, null, null);
-  }
+  const container = process.env.NODE_ENV === "development" && developmentRoot || new HostNode("#root");
+  if (process.env.NODE_ENV === "development") developmentRoot = container;
   onNativeMessage("event", message => {
     if (typeof message.id !== "number" || !Number.isSafeInteger(message.id)
       || typeof message.name !== "string" || !Array.isArray(message.args)) {
@@ -336,9 +372,16 @@ export function render(element: ReactNode) {
     }
     dispatchEvent(message.id, message.name, message.args);
   });
-  const container: Container = { id: 0, children: [] };
-  const root = reconciler.createContainer(container, ConcurrentRoot, null, false, null, "", report, reportRecovered, reportRecovered, () => {});
-  if (process.env.NODE_ENV === "development") developmentRoot = root;
-  reconciler.updateContainer(element, root, null, null);
-  return () => reconciler.updateContainer(null, root, null, null);
+  const updateRoot = () => {
+    try {
+      renderPreact(element as ComponentChildren, container as unknown as Parameters<typeof renderPreact>[1]);
+    } catch (error) {
+      report(error, {});
+    }
+  };
+  // Prefresh replaces mounted component types at the end of the bundle.
+  // Apply the new root afterwards so matching components keep their state.
+  if (process.env.NODE_ENV === "development") queueMicrotask(updateRoot);
+  else updateRoot();
+  return () => renderPreact(null, container as unknown as Parameters<typeof renderPreact>[1]);
 }

package/src/reorder.ts

@@ -1,14 +1,18 @@
 import { createElement } from "./react";
-import { Button, Stack, Text } from "./index";
 import { keyboardArrowDown, keyboardArrowUp } from "./icons";
 import { List } from "./list";
-import { nativeListRow, nativeListTemplate } from "./native-list";
+import { fixedListRow } from "./native-list";
 
-const template = /* @__PURE__ */ nativeListTemplate((node, field) => node("Stack", { axis: "horizontal", align: "center", justify: "space-between", gap: 12 }, [
-  node("Text", { text: field("label"), maxLines: field("maxLines") }),
+type ReorderFields = {
+  label: string; maxLines?: number; first: boolean; last: boolean;
+  down: () => void; up: () => void;
+};
+
+const reorderRow = /* @__PURE__ */ fixedListRow<ReorderFields>((node, field) => node("Stack", { axis: "horizontal", align: "center", justify: "space-between", gap: 12 }, [
+  node("Text", { text: field(values => values.label), maxLines: field(values => values.maxLines) }),
   node("Stack", { axis: "horizontal", align: "center", gap: 4 }, [
-    node("Button", { icon: keyboardArrowDown, disabled: field("last"), onPress: field("down") }),
-    node("Button", { icon: keyboardArrowUp, disabled: field("first"), onPress: field("up") }),
+    node("Button", { icon: keyboardArrowDown, disabled: field(values => values.last), onPress: field(values => values.down) }),
+    node("Button", { icon: keyboardArrowUp, disabled: field(values => values.first), onPress: field(values => values.up) }),
   ]),
 ]));
 
@@ -35,15 +39,8 @@ export function ReorderList<T>({ items, keyExtractor, getLabel, onChange, multil
     keyExtractor,
     gap,
     measurementKey: multiline ? "multiline" : "single-line",
-    renderItem: nativeListRow((item: T, index: number) => createElement(Stack, {
-      axis: "horizontal", align: "center", justify: "space-between", gap: 12,
-    },
-    createElement(Text, { maxLines: multiline ? undefined : 1 }, getLabel(item)),
-    createElement(Stack, { axis: "horizontal", align: "center", gap: 4 },
-      createElement(Button, { icon: keyboardArrowDown, disabled: index === items.length - 1, onPress: () => move(index, 1) }),
-      createElement(Button, { icon: keyboardArrowUp, disabled: index === 0, onPress: () => move(index, -1) }),
-    )), (item, index) => [{ label: getLabel(item), maxLines: multiline ? undefined : 1,
+    renderItem: reorderRow((item: T, index: number) => ({ label: getLabel(item), maxLines: multiline ? undefined : 1,
       first: index === 0, last: index === items.length - 1,
-      down: () => move(index, 1), up: () => move(index, -1) }], template),
+      down: () => move(index, 1), up: () => move(index, -1) })),
   });
 }