@praxisjs/runtime 0.1.0 → 0.2.0

package/src/component.ts

@@ -0,0 +1,60 @@
+import { initSlots } from "@praxisjs/decorators";
+import { isComponent, type ComponentConstructor  } from "@praxisjs/shared/internal";
+
+import { mountChildren } from "./children";
+import { runInScope } from "./context";
+
+import type { Scope } from "./scope";
+
+export function mountComponent(
+  ctor: ComponentConstructor,
+  props: Record<string, unknown>,
+  parentScope: Scope,
+): Node[] {
+  const scope = parentScope.fork();
+
+  const instance = new ctor({ ...props });
+
+  const rawChildren = props.children;
+  if (rawChildren != null) {
+    initSlots(instance, rawChildren);
+  }
+
+  const start = document.createComment(`[${ctor.name}]`);
+  const end = document.createComment(`[/${ctor.name}]`);
+
+  // Expose anchor so decorators like @Virtual can find the parent element
+  instance._anchor = end;
+
+  instance.onBeforeMount?.();
+
+  const container = document.createDocumentFragment();
+  container.appendChild(start);
+
+  let dom: Node | Node[] | null = null;
+  runInScope(scope, () => {
+    try {
+      dom = instance.render();
+    } catch (e) {
+      instance.onError?.(e instanceof Error ? e : new Error(String(e)));
+    }
+  });
+
+  mountChildren(container, dom, scope);
+  container.appendChild(end);
+
+  queueMicrotask(() => {
+    instance._mounted = true;
+    instance.onMount?.();
+  });
+
+  scope.add(() => {
+    instance.onUnmount?.();
+    instance._mounted = false;
+  });
+
+  // Return the nodes from the fragment as an array so the caller can append them
+  return Array.from(container.childNodes);
+}
+
+export { isComponent };

package/src/context.ts

@@ -0,0 +1,22 @@
+import type { Scope } from "./scope";
+
+let _currentScope: Scope | null = null;
+
+export function getCurrentScope(): Scope {
+  if (!_currentScope) {
+    throw new Error(
+      "[PraxisJS] jsx() called outside of a render context. Make sure to call render() with a factory function.",
+    );
+  }
+  return _currentScope;
+}
+
+export function runInScope<T>(scope: Scope, fn: () => T): T {
+  const prev = _currentScope;
+  _currentScope = scope;
+  try {
+    return fn();
+  } finally {
+    _currentScope = prev;
+  }
+}

package/src/dom/constants.ts

@@ -0,0 +1,63 @@
+export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+export const SVG_TAGS = new Set([
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "ellipse",
+  "text",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "marker",
+  "clipPath",
+  "mask",
+  "pattern",
+  "image",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "filter",
+  "feGaussianBlur",
+  "tspan",
+  "textPath",
+  "foreignObject",
+]);
+
+export const EVENT_MAP: Record<string, string> = {
+  onClick: "click",
+  onDblClick: "dblclick",
+  onChange: "change",
+  onInput: "input",
+  onSubmit: "submit",
+  onReset: "reset",
+  onKeyDown: "keydown",
+  onKeyUp: "keyup",
+  onKeyPress: "keypress",
+  onFocus: "focus",
+  onBlur: "blur",
+  onMouseDown: "mousedown",
+  onMouseUp: "mouseup",
+  onMouseEnter: "mouseenter",
+  onMouseLeave: "mouseleave",
+  onMouseMove: "mousemove",
+  onContextMenu: "contextmenu",
+  onScroll: "scroll",
+  onWheel: "wheel",
+  onDragStart: "dragstart",
+  onDragEnd: "dragend",
+  onDragOver: "dragover",
+  onDrop: "drop",
+  onTouchStart: "touchstart",
+  onTouchEnd: "touchend",
+  onTouchMove: "touchmove",
+  onAnimationEnd: "animationend",
+  onTransitionEnd: "transitionend",
+};
+
+export const VALUE_PROPS = new Set(["checked", "value", "disabled", "selected"]);

package/src/dom/create.ts

@@ -0,0 +1,7 @@
+import { SVG_NAMESPACE, SVG_TAGS } from "./constants";
+
+export function createElement(tag: string): HTMLElement | SVGElement {
+  return SVG_TAGS.has(tag)
+    ? (document.createElementNS(SVG_NAMESPACE, tag))
+    : document.createElement(tag);
+}

package/src/dom/events.ts

@@ -0,0 +1,11 @@
+import type { Scope } from "../scope";
+
+export function addEvent(
+  el: Element,
+  eventName: string,
+  handler: EventListener,
+  scope: Scope,
+): void {
+  el.addEventListener(eventName, handler);
+  scope.add(() => { el.removeEventListener(eventName, handler); });
+}

package/src/dom/props.ts

@@ -0,0 +1,79 @@
+import { EVENT_MAP, VALUE_PROPS } from "./constants";
+import { addEvent } from "./events";
+
+import type { Scope } from "../scope";
+
+function applyClass(el: Element, value: unknown): void {
+  if (value === null || value === undefined) {
+    el.removeAttribute("class");
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    el.setAttribute("class", String(value));
+  }
+}
+
+function applyStyle(el: Element, value: unknown): void {
+  if (value === null || value === undefined) {
+    el.removeAttribute("style");
+  } else if (typeof value === "object") {
+    const htmlEl = el as HTMLElement;
+    htmlEl.removeAttribute("style");
+    Object.assign(htmlEl.style, value);
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    el.setAttribute("style", String(value));
+  }
+}
+
+function applyAttr(el: Element, key: string, value: unknown): void {
+  if (value === false || value === null || value === undefined) {
+    el.removeAttribute(key);
+  } else if (value === true) {
+    el.setAttribute(key, "");
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    el.setAttribute(key, String(value));
+  }
+}
+
+function setProp(el: Element, key: string, value: unknown): void {
+  if (key === "class" || key === "className") {
+    applyClass(el, value);
+  } else if (key === "style") {
+    applyStyle(el, value);
+  } else if (VALUE_PROPS.has(key)) {
+    (el as unknown as Record<string, unknown>)[key] = value;
+  } else {
+    applyAttr(el, key, value);
+  }
+}
+
+export function applyProp(
+  el: Element,
+  key: string,
+  value: unknown,
+  scope: Scope,
+): void {
+  const normalizedKey = key === "htmlFor" ? "for" : key;
+
+  if (normalizedKey === "key" || normalizedKey === "children") return;
+
+  if (normalizedKey === "ref") {
+    (value as (el: Element) => void)(el);
+    return;
+  }
+
+  if (normalizedKey in EVENT_MAP) {
+    addEvent(el, EVENT_MAP[normalizedKey], value as EventListener, scope);
+    return;
+  }
+
+  if (typeof value === "function") {
+    scope.effect(() => {
+      setProp(el, normalizedKey, (value as () => unknown)());
+    });
+    return;
+  }
+
+  setProp(el, normalizedKey, value);
+}

package/src/element.ts

@@ -0,0 +1,24 @@
+import { mountChildren } from "./children";
+import { createElement } from "./dom/create";
+import { applyProp } from "./dom/props";
+
+import type { Scope } from "./scope";
+
+export function mountElement(
+  tag: string,
+  props: Record<string, unknown>,
+  scope: Scope,
+): HTMLElement | SVGElement {
+  const el = createElement(tag);
+
+  for (const [key, val] of Object.entries(props)) {
+    if (key === "children") continue;
+    applyProp(el, key, val, scope);
+  }
+
+  if (props.children !== undefined) {
+    mountChildren(el, props.children, scope);
+  }
+
+  return el;
+}

package/src/index.ts

@@ -1 +1,36 @@
-export { render } from "./renderer";
+import { mountChildren } from "./children";
+import { runInScope } from "./context";
+import { Scope } from "./scope";
+
+/**
+ * Renders a component tree into a container element.
+ *
+ * The factory function is called once inside the root scope,
+ * so `jsx()` can access the current scope via `getCurrentScope()`.
+ *
+ * @example
+ * render(() => <App />, document.getElementById('app'));
+ */
+export function render(
+  factory: () => Node | Node[] | null,
+  container: HTMLElement,
+): () => void {
+  const rootScope = new Scope();
+
+  container.innerHTML = "";
+
+  runInScope(rootScope, () => {
+    const result = factory();
+    mountChildren(container, result, rootScope);
+  });
+
+  return () => {
+    rootScope.dispose();
+    container.innerHTML = "";
+  };
+}
+
+export { Scope } from "./scope";
+export { runInScope, getCurrentScope } from "./context";
+export { mountElement } from "./element";
+export { mountComponent } from "./component";

package/src/reactive.ts

@@ -0,0 +1,45 @@
+import { runInScope } from "./context";
+
+import type { Scope } from "./scope";
+
+function normalizeToNodes(value: unknown): Node[] {
+  if (value === null || value === undefined || value === false) return [];
+  if (value instanceof Node) return [value];
+  if (Array.isArray(value)) return value.flatMap(normalizeToNodes);
+  if (typeof value === "string" || typeof value === "number") {
+    return [document.createTextNode(String(value))];
+  }
+  return [];
+}
+
+export function mountReactive(
+  parent: Node,
+  fn: () => unknown,
+  parentScope: Scope,
+): void {
+  const end = document.createComment("reactive");
+  parent.appendChild(end);
+
+  let currentNodes: Node[] = [];
+  let childScope = parentScope.fork();
+
+  parentScope.effect(() => {
+    childScope.dispose();
+    childScope = parentScope.fork();
+
+    for (const n of currentNodes) {
+      n.parentNode?.removeChild(n);
+    }
+    currentNodes = [];
+
+    const result = runInScope(childScope, fn);
+    const newNodes = normalizeToNodes(result);
+
+    for (const n of newNodes) {
+      parent.insertBefore(n, end);
+    }
+    currentNodes = newNodes;
+  });
+
+  parentScope.add(() => { childScope.dispose(); });
+}

package/src/scope.ts

@@ -0,0 +1,25 @@
+import { effect as coreEffect } from "@praxisjs/core/internal";
+import type { Cleanup } from "@praxisjs/shared/internal";
+
+export class Scope {
+  #cleanups: Cleanup[] = [];
+
+  effect(fn: Parameters<typeof coreEffect>[0]): void {
+    this.#cleanups.push(coreEffect(fn));
+  }
+
+  add(cleanup: Cleanup): void {
+    this.#cleanups.push(cleanup);
+  }
+
+  fork(): Scope {
+    const child = new Scope();
+    this.#cleanups.push(() => { child.dispose(); });
+    return child;
+  }
+
+  dispose(): void {
+    this.#cleanups.forEach((fn) => { fn(); });
+    this.#cleanups = [];
+  }
+}

package/dist/renderer.d.ts

@@ -1,3 +0,0 @@
-import type { VNode } from "@praxisjs/shared";
-export declare function render(vnode: VNode, container: HTMLElement): () => void;
-//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,KAAK,EAGN,MAAM,kBAAkB,CAAC;AAkc1B,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,cAY1D"}