@valyrianjs/terminal 0.1.0 → 0.1.2

package/src/runtime.ts

@@ -0,0 +1,273 @@
+import { document, Event } from "valyrian.js/node";
+import { mount, setPropNameReserved, unmount, update, v } from "valyrian.js";
+import { createEffect } from "valyrian.js/pulses";
+
+import type { TerminalNode, TerminalPrimitiveTag } from "./types.js";
+
+type DomNode = {
+  nodeType: number;
+  nodeName: string;
+  nodeValue?: string;
+  childNodes?: DomNode[];
+  attributes?: Array<{ nodeName: string; nodeValue: any }>;
+  vnode?: { props?: Record<string, any> };
+  dispatchEvent?(event: Event): boolean;
+};
+
+type ProjectionCallback = () => void;
+
+type TerminalEventPayload = Record<string, any>;
+
+const wrappedComponents = new WeakMap<object, any>();
+let nextRuntimeId = 1;
+let currentRuntimeId: number | null = null;
+
+setPropNameReserved("style");
+
+function isTerminalTag(tag: string): tag is TerminalPrimitiveTag {
+  return tag.startsWith("terminal-");
+}
+
+function propsFromDom(node: DomNode) {
+  if (node.vnode?.props?.__terminalProps) {
+    return { ...node.vnode.props.__terminalProps };
+  }
+  if (node.vnode?.props) {
+    return { ...node.vnode.props };
+  }
+
+  const props: Record<string, any> = {};
+  for (const attr of node.attributes || []) {
+    props[attr.nodeName] = attr.nodeValue;
+  }
+  return props;
+}
+
+function collectTerminalDomNodes(node: DomNode, registry: Map<string, DomNode>) {
+  if (node.nodeType === 1 && isTerminalTag(node.nodeName.toLowerCase())) {
+    const id = propsFromDom(node).id;
+    if (typeof id === "string" && id.length > 0) {
+      registry.set(id, node);
+    }
+  }
+
+  for (const child of node.childNodes || []) {
+    collectTerminalDomNodes(child, registry);
+  }
+}
+
+function hasEventListener(node: DomNode, eventName: string) {
+  return typeof node.vnode?.props?.[`on${eventName}`] === "function";
+}
+
+function resolveDispatchEventName(node: DomNode, eventName: string) {
+  if (eventName === "press" && !hasEventListener(node, "press") && hasEventListener(node, "click")) {
+    return "click";
+  }
+  if (eventName === "change" && !hasEventListener(node, "change") && hasEventListener(node, "input")) {
+    return "input";
+  }
+  return eventName;
+}
+
+function createTerminalEvent(eventName: string, payload: TerminalEventPayload) {
+  const event = new Event(eventName, { bubbles: true, cancelable: true }) as Event & TerminalEventPayload;
+  for (const key of ["bubbles", "cancelable", "currentTarget", "defaultPrevented", "options", "propagationStopped", "target"] as const) {
+    Object.defineProperty(event, key, { enumerable: false, configurable: true, writable: true, value: event[key] });
+  }
+  Object.assign(event, payload, { type: eventName });
+  return event;
+}
+
+function domNodeToTerminalNodes(node: DomNode): TerminalNode[] {
+  if (node.nodeType === 3) {
+    const value = String(node.nodeValue ?? "");
+    return value.length ? [{ type: "text", value }] : [];
+  }
+
+  if (node.nodeType !== 1 && node.nodeType !== 9 && node.nodeType !== 11) {
+    return [];
+  }
+
+  const tag = node.nodeName.toLowerCase();
+  const children = Array.from(node.childNodes || []).flatMap(domNodeToTerminalNodes);
+
+  if (!isTerminalTag(tag)) {
+    return children;
+  }
+
+  const props = propsFromDom(node);
+  Reflect.deleteProperty(props, "v-update");
+
+  return [{ type: "element", tag, props, children }];
+}
+
+
+function isVnodeLike(value: any): value is { tag: any; props: Record<string, any> | null; children: any[]; key?: string | number } {
+  return Boolean(value && typeof value === "object" && "tag" in value && "children" in value);
+}
+
+function isPojoComponent(value: any): value is { view: Function } {
+  return Boolean(value && typeof value === "object" && typeof value.view === "function");
+}
+
+function wrapComponent(component: any) {
+  const key = (typeof component === "function" || isPojoComponent(component)) ? component : null;
+  if (!key) {
+    return component;
+  }
+
+  const existing = wrappedComponents.get(key);
+  if (existing) {
+    return existing;
+  }
+
+  const wrapped = function TerminalValyrianComponent(props: Record<string, any>, children: any[]) {
+    const result = isPojoComponent(component)
+      ? component.view.call(component, props, children)
+      : component(props, children);
+    return normalizeValyrianInput(result);
+  };
+
+  wrappedComponents.set(key, wrapped);
+  return wrapped;
+}
+
+function normalizeValyrianInput(input: any): any {
+  if (Array.isArray(input)) {
+    return input.map(normalizeValyrianInput);
+  }
+
+  if (typeof input === "function" || isPojoComponent(input)) {
+    return v(wrapComponent(input), {}, []);
+  }
+
+  if (!isVnodeLike(input)) {
+    return input;
+  }
+
+  const props = { ...((input.props && input.props.__terminalProps) || input.props || {}) };
+  const children = Array.isArray(input.children)
+    ? input.children.map((child) => {
+      if (props["v-for"] && typeof child === "function") {
+        return (...args: any[]) => normalizeValyrianInput(child(...args));
+      }
+      return normalizeValyrianInput(child);
+    })
+    : [];
+  const tag = typeof input.tag === "string" ? input.tag : wrapComponent(input.tag);
+  if (typeof tag === "string" && isTerminalTag(tag)) {
+    const terminalProps = { ...props };
+    if (tag === "terminal-button" && typeof props.action === "function" && typeof props.onpress !== "function" && typeof props.onclick !== "function") {
+      props.onclick = props.action;
+    }
+    if (typeof props.style === "object") {
+      Reflect.deleteProperty(props, "style");
+    }
+    props.__terminalProps = terminalProps;
+  }
+  return v(tag, props, ...children);
+}
+
+export function projectTerminalDom(container: DomNode): TerminalNode[] {
+  return Array.from(container.childNodes || []).flatMap(domNodeToTerminalNodes);
+}
+
+export interface ValyrianTerminalRuntime {
+  update(): void;
+  project(): TerminalNode[];
+  dispatchTerminalEvent(id: string, eventName: string, payload: TerminalEventPayload): boolean;
+  destroy(): void;
+}
+
+function createContainer() {
+  return document.createElement("div") as unknown as DomNode;
+}
+
+function mountIntoContainer(container: DomNode, input: any) {
+  const TerminalRoot = () => v("div", {}, normalizeValyrianInput(input));
+  mount(container as any, TerminalRoot);
+}
+
+export function createValyrianTerminalRuntime(input: any, onUpdated: ProjectionCallback): ValyrianTerminalRuntime {
+  const container = createContainer();
+  const nodeById = new Map<string, DomNode>();
+  let stopEffect: (() => void) | null = null;
+  const runtimeId = nextRuntimeId++;
+
+  const refreshRegistry = () => {
+    nodeById.clear();
+    collectTerminalDomNodes(container, nodeById);
+  };
+
+  const ensureMounted = () => {
+    if (currentRuntimeId !== runtimeId) {
+      mountIntoContainer(container, input);
+      currentRuntimeId = runtimeId;
+    }
+  };
+
+  const cleanupRuntime = () => {
+    stopEffect?.();
+    if (currentRuntimeId === runtimeId) {
+      unmount();
+      currentRuntimeId = null;
+    }
+  };
+
+  try {
+    ensureMounted();
+    const snapshotMode = globalThis.process?.argv?.includes("--snapshot") || globalThis.process?.env?.VALYRIAN_TERMINAL_EXAMPLE_SNAPSHOT === "1";
+    if (!snapshotMode) {
+      stopEffect = createEffect(() => {
+        ensureMounted();
+        update();
+        onUpdated();
+      });
+    }
+  } catch (error) {
+    cleanupRuntime();
+    throw error;
+  }
+
+  return {
+    update() {
+      ensureMounted();
+      update();
+      refreshRegistry();
+    },
+    project() {
+      refreshRegistry();
+      return projectTerminalDom(container);
+    },
+    dispatchTerminalEvent(id: string, eventName: string, payload: TerminalEventPayload) {
+      ensureMounted();
+      refreshRegistry();
+      const node = nodeById.get(id);
+      if (!node || typeof node.dispatchEvent !== "function") {
+        return false;
+      }
+      const resolvedEventName = resolveDispatchEventName(node, eventName);
+      if (!hasEventListener(node, resolvedEventName)) {
+        return false;
+      }
+      return node.dispatchEvent(createTerminalEvent(resolvedEventName, payload));
+    },
+    destroy() {
+      nodeById.clear();
+      cleanupRuntime();
+    }
+  };
+}
+
+export function renderValyrianTerminal(input: any): TerminalNode[] {
+  const container = createContainer();
+
+  try {
+    mountIntoContainer(container, input);
+    currentRuntimeId = null;
+    return projectTerminalDom(container);
+  } finally {
+    unmount();
+  }
+}

package/src/scheduler.ts

@@ -0,0 +1,33 @@
+export interface RenderScheduler {
+  requestRender(): void;
+  flush(): void;
+  cancel(): void;
+}
+
+export type ScheduleRenderCallback = (callback: () => void) => void;
+
+export function createRenderScheduler(render: () => void, schedule: ScheduleRenderCallback = queueMicrotask): RenderScheduler {
+  let pending = false;
+
+  function flush() {
+    if (!pending) {
+      return;
+    }
+    pending = false;
+    render();
+  }
+
+  return {
+    requestRender() {
+      if (pending) {
+        return;
+      }
+      pending = true;
+      schedule(flush);
+    },
+    flush,
+    cancel() {
+      pending = false;
+    }
+  };
+}