sinho 0.1.0

package/src/intrinsic/ClassComponent.ts

@@ -0,0 +1,17 @@
+import type { DomProps } from "../dom.js";
+import { useRenderer } from "../renderer.js";
+import { createTemplate } from "../template.js";
+import { hydrateElement } from "./TagComponent.js";
+
+export const ClassComponent = <T extends HTMLElement>(
+  type: new () => T,
+  props: DomProps<T> & Record<string, unknown>,
+) =>
+  createTemplate(() => {
+    const node = useRenderer()._node(() => new type());
+    customElements.upgrade(node);
+
+    hydrateElement(node, false, props);
+
+    return [node];
+  });

package/src/intrinsic/For.ts

@@ -0,0 +1,122 @@
+import { useArrayMutation } from "../array_mutation.js";
+import {
+  MaybeSignal,
+  Signal,
+  SignalLike,
+  useEffect,
+  useSignal,
+  useSubscope,
+} from "../scope.js";
+import { useRenderer } from "../renderer.js";
+import { createTemplate, Template } from "../template.js";
+
+interface KeyMeta {
+  _subnodes: Node[];
+  _destroy: () => void;
+}
+
+/**
+ * `For` is a component that can be used to render a list of items.
+ */
+export const For = <T>(props: {
+  each?: MaybeSignal<readonly T[]>;
+  key?: (item: T, index: number) => string | number;
+  children?: (
+    item: Signal<T>,
+    index: Signal<number>,
+    arr: SignalLike<readonly T[]>,
+  ) => Template;
+}): Template =>
+  createTemplate(() => {
+    const renderer = useRenderer();
+    const items = MaybeSignal.upgrade(props.each ?? []);
+    const anchor = renderer._node(() => document.createComment(""));
+    const keyFn = props.key ?? ((_, i) => i);
+    const nodes: Node[] = [anchor];
+    const keyMap = new Map<unknown, KeyMeta>();
+    const mutationResult = useArrayMutation(items, keyFn);
+
+    const lookForAnchor = (index: number): Node => {
+      for (let i = index - 1; i >= 0; i--) {
+        const key = keyFn(items()[index - 1], index - 1);
+        const nodes = keyMap.get(key)?._subnodes ?? [];
+
+        if (nodes.length > 0) {
+          return nodes[nodes.length - 1];
+        }
+      }
+
+      return anchor;
+    };
+
+    useEffect(() => {
+      for (const mutation of mutationResult()._mutations) {
+        if (mutation._type == "r") {
+          const { _subnodes = [], _destroy } = keyMap.get(mutation._key) ?? {};
+          _destroy?.();
+
+          const index = nodes.indexOf(_subnodes[0]);
+          if (index > 0) {
+            nodes.splice(index, _subnodes.length);
+          }
+
+          _subnodes.forEach((node) => node.parentNode?.removeChild(node));
+          keyMap.delete(mutation._key);
+        } else if (mutation._type == "a") {
+          let _subnodes: Node[] = [];
+
+          const [, destroy] = useSubscope(() => {
+            const [index, setIndex] = useSignal(mutation._index);
+            const [item, setItem] = useSignal(items()[mutation._index]);
+
+            useEffect(() => {
+              if (0 <= index() && index() < items().length) {
+                setItem(() => items()[index()]);
+              }
+            });
+
+            useEffect(() => {
+              const index = mutationResult()._map.get(mutation._key);
+
+              if (index != null) {
+                setIndex(index);
+              }
+            });
+
+            _subnodes = props.children?.(item, index, items).build() ?? [];
+
+            const itemAnchor = lookForAnchor(mutation._index);
+            const anchorIndex = nodes.indexOf(itemAnchor);
+            if (anchorIndex >= 0) {
+              nodes.splice(anchorIndex + 1, 0, ..._subnodes);
+            }
+
+            _subnodes.forEach((node) =>
+              itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling),
+            );
+          });
+
+          keyMap.set(mutation._key, { _subnodes, _destroy: destroy });
+        } else if (mutation._type == "m") {
+          const { _subnodes = [] } = keyMap.get(mutation._key) ?? {};
+
+          const index = nodes.indexOf(_subnodes[0]);
+          if (index >= 0) {
+            nodes.splice(index, _subnodes.length);
+          }
+
+          const itemAnchor = lookForAnchor(mutation._to);
+          const anchorIndex = nodes.indexOf(itemAnchor);
+          if (anchorIndex >= 0) {
+            nodes.splice(anchorIndex + 1, 0, ..._subnodes);
+          }
+
+          _subnodes.forEach((node) =>
+            itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling),
+          );
+        }
+      }
+    }, [mutationResult]);
+
+    return nodes;
+  });

package/src/intrinsic/Fragment.ts

@@ -0,0 +1,38 @@
+import { Text } from "./Text.js";
+import { FunctionalComponent } from "../component.js";
+import { createTemplate, Template } from "../template.js";
+import type { MaybeSignal } from "../scope.js";
+
+export type Children =
+  | Template
+  | MaybeSignal<string | number | null | undefined>
+  | Children[];
+
+/**
+ * Fragment is a component that can be used to wrap multiple children without
+ * introducing an extra DOM element.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return (
+ *     <>
+ *       <h1>Hello World</h1>
+ *       <p>This is a paragraph.</p>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const Fragment: FunctionalComponent<{
+  children?: Children;
+}> = ({ children }) =>
+  createTemplate(() => {
+    return !Array.isArray(children)
+      ? children == null
+        ? []
+        : typeof children == "object"
+          ? children
+          : Text({ text: children })
+      : children.flatMap((children) => Fragment({ children }).build());
+  });

package/src/intrinsic/If.ts

@@ -0,0 +1,73 @@
+import type { FunctionalComponent } from "../component.js";
+import { createTemplate, type Template } from "../template.js";
+import { MaybeSignal, useEffect, useMemo, useSubscope } from "../scope.js";
+import { runWithRenderer, useRenderer } from "../renderer.js";
+import { Children, Fragment } from "./Fragment.js";
+
+/**
+ * `If` is a component that can be used to render conditionally.
+ */
+export const If: FunctionalComponent<{
+  condition?: MaybeSignal<boolean>;
+  children?: Children;
+}> = (props) => {
+  const renderer = useRenderer();
+  renderer._ifConditions = [];
+
+  return ElseIf({ condition: props.condition, children: props.children });
+};
+
+/**
+ * `ElseIf` serves as an `else if` block for {@link If}. It can also be chained
+ * multiple times.
+ */
+export const ElseIf: FunctionalComponent<{
+  condition?: MaybeSignal<boolean>;
+  children?: Children;
+}> = (props) => {
+  const renderer = useRenderer();
+  const conditions = renderer._ifConditions;
+  const condition = useMemo(
+    () =>
+      conditions.every((condition) => !condition()) &&
+      MaybeSignal.get<boolean | undefined>(props.condition),
+  );
+
+  renderer._ifConditions = [...conditions, condition];
+
+  return runWithRenderer({ _ifConditions: [] }, () =>
+    createTemplate(() => {
+      const anchor = renderer._node(() => document.createComment(""));
+      const nodes: Node[] = [anchor];
+      const template = useMemo(() =>
+        condition() ? Fragment({ children: props.children }) : null,
+      );
+
+      let subnodes: Node[] = [];
+
+      useEffect(() => {
+        subnodes.forEach((node) => node.parentNode?.removeChild(node));
+        nodes.length = 1;
+
+        const [, destroy] = useSubscope(() => {
+          subnodes = template()?.build() ?? [];
+          anchor.after(...subnodes);
+          nodes.push(...subnodes);
+        });
+
+        return destroy;
+      }, [template]);
+
+      return nodes;
+    }),
+  );
+};
+
+/**
+ * `Else` indicates the `else` block for {@link If} and {@link ElseIf}.
+ */
+export const Else: FunctionalComponent<{ children?: Children }> = ({
+  children,
+}) => {
+  return ElseIf({ condition: true, children });
+};

package/src/intrinsic/Portal.ts

@@ -0,0 +1,25 @@
+import { FunctionalComponent } from "../component.js";
+import { runWithRenderer } from "../renderer.js";
+import { useEffect } from "../scope.js";
+import { createTemplate } from "../template.js";
+import { Children, Fragment } from "./Fragment.js";
+
+export const Portal: FunctionalComponent<{
+  mount: Node;
+  children?: Children;
+}> = ({ mount, children }) =>
+  createTemplate(() =>
+    runWithRenderer({ _nodes: undefined }, () => {
+      const nodes = Fragment({ children }).build();
+
+      useEffect(() => {
+        nodes.forEach((node) => mount.appendChild(node));
+
+        return () => {
+          nodes.forEach((node) => node.parentNode?.removeChild(node));
+        };
+      });
+
+      return [];
+    }),
+  );

package/src/intrinsic/Style.ts

@@ -0,0 +1,120 @@
+import { createElement } from "../create_element.js";
+import { FunctionalComponent } from "../component.js";
+import { Text } from "./Text.js";
+import { MaybeSignal, useEffect } from "../scope.js";
+import { Fragment } from "./Fragment.js";
+import { useRenderer } from "../renderer.js";
+import { Portal } from "./Portal.js";
+
+type StyleSheetRegistry = Map<
+  string,
+  {
+    _sheet: CSSStyleSheet;
+    _refs: number;
+  }
+>;
+
+const styleSheetRegistrySym = Symbol("styleSheetRegistry");
+const globalStyleSheetRegistry: StyleSheetRegistry = new Map();
+
+const getLocalStyleSheetRegistry = <T>(
+  obj: T & { [styleSheetRegistrySym]?: StyleSheetRegistry },
+): StyleSheetRegistry => (obj[styleSheetRegistrySym] ??= new Map());
+
+const useStyleSheet = (
+  registry: StyleSheetRegistry,
+  css: string,
+  cleanup: () => void,
+): CSSStyleSheet => {
+  if (!globalStyleSheetRegistry.has(css)) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    globalStyleSheetRegistry.set(css, {
+      _sheet: sheet,
+      _refs: 0,
+    });
+  }
+
+  const globalEntry = globalStyleSheetRegistry.get(css)!;
+  globalEntry._refs++;
+
+  if (!registry.has(css)) {
+    registry.set(css, {
+      _sheet: globalEntry._sheet,
+      _refs: 0,
+    });
+  }
+
+  const entry = registry.get(css)!;
+  entry._refs++;
+
+  useEffect(() => () => {
+    if (!--entry._refs) {
+      registry.delete(css);
+      cleanup();
+    }
+
+    if (!--globalEntry._refs) {
+      globalStyleSheetRegistry.delete(css);
+    }
+  });
+
+  return entry._sheet;
+};
+
+export const Style: FunctionalComponent<{
+  light?: boolean;
+  children?: MaybeSignal<string>;
+}> = (props) => {
+  const css = props.children;
+
+  if (typeof css == "function") {
+    // Dynamic CSS will be inserted into the DOM as a <style> element.
+
+    const styleEl = createElement(
+      "style",
+      {},
+      Text({
+        text: css,
+        marker: false,
+      }),
+    );
+
+    return props.light
+      ? Portal({ mount: document.head, children: styleEl })
+      : styleEl;
+  }
+
+  // Static CSS will be inserted as an adopted stylesheet and cached.
+
+  if (css) {
+    const renderer = useRenderer();
+    const styleRoot = props.light
+      ? document
+      : renderer._component?.shadowRoot ?? document;
+    const registry = getLocalStyleSheetRegistry(styleRoot);
+
+    const sheet = useStyleSheet(registry, css, () => {
+      styleRoot.adoptedStyleSheets = styleRoot.adoptedStyleSheets.filter(
+        (s) => s != sheet,
+      );
+    });
+
+    styleRoot.adoptedStyleSheets.push(sheet);
+  }
+
+  return Fragment({});
+};
+
+export const css = (
+  strings: TemplateStringsArray,
+  ...values: MaybeSignal<string | number>[]
+): MaybeSignal<string> => {
+  const result = () =>
+    strings.reduce(
+      (acc, string, i) => acc + string + (MaybeSignal.get(values[i]) ?? ""),
+      "",
+    );
+
+  return values.some((value) => typeof value == "function") ? result : result();
+};

package/src/intrinsic/TagComponent.ts

@@ -0,0 +1,102 @@
+import { DomProps, setAttr, setStyle } from "../dom.js";
+import { jsxPropNameToEventName } from "../utils.js";
+import { MaybeSignal, useBatch, useEffect, useScope } from "../scope.js";
+import { Fragment } from "./Fragment.js";
+import { runWithRenderer, useRenderer } from "../renderer.js";
+import { createTemplate, Template } from "../template.js";
+
+export const hydrateElement = <E extends HTMLElement | SVGElement>(
+  node: E,
+  svg: boolean,
+  props: DomProps<any>,
+  heuristic?: boolean,
+): E => {
+  const { ref, style, children, dangerouslySetInnerHTML, ...attrs } = props;
+
+  for (const name in style ?? {}) {
+    const value = style![name];
+    const signal = value as MaybeSignal<string | number | null | undefined>;
+
+    useEffect(() => {
+      setStyle(node, name, MaybeSignal.get(signal));
+    });
+  }
+
+  for (const name in attrs) {
+    const value = attrs[name as keyof typeof attrs];
+
+    if (name.startsWith("on")) {
+      // Register event
+
+      const s = useScope();
+      const listener = (evt: Event) => {
+        s._run(() => useBatch(() => (value as (evt: Event) => void)(evt)));
+      };
+
+      const eventName = jsxPropNameToEventName(name as `on${string}`);
+
+      useEffect(() => {
+        node.addEventListener(eventName, listener);
+        return () => node.removeEventListener(eventName, listener);
+      });
+    } else {
+      // Set attribute
+
+      useEffect(() => {
+        setAttr(node, name, MaybeSignal.get(value), heuristic);
+      });
+    }
+  }
+
+  if (dangerouslySetInnerHTML) {
+    useEffect(() => {
+      const html = MaybeSignal.get(dangerouslySetInnerHTML).__html;
+
+      if (node.innerHTML != html) {
+        node.innerHTML = html;
+      }
+    });
+  }
+
+  if (ref) {
+    useEffect(() => {
+      ref.set(node);
+      return () => ref.set(undefined);
+    });
+  }
+
+  if (props.children != null) {
+    node.append(
+      ...runWithRenderer(
+        {
+          _svg: svg,
+          _nodes: node.childNodes.values(),
+        },
+        () => Fragment({ children: props.children }).build(),
+      ),
+    );
+  }
+
+  return node;
+};
+
+export const TagComponent = (
+  tagName: string,
+  props: DomProps<any> = {},
+): Template =>
+  createTemplate(() => {
+    const renderer = useRenderer();
+    const svg = tagName == "svg" ? true : !!renderer._svg;
+    const node = hydrateElement(
+      renderer._node(() =>
+        !svg
+          ? document.createElement(tagName)
+          : document.createElementNS("http://www.w3.org/2000/svg", tagName),
+      ),
+      svg,
+      props,
+      true,
+    );
+
+    return [node];
+  });

package/src/intrinsic/Text.ts

@@ -0,0 +1,24 @@
+import { MaybeSignal, useEffect, useMemo } from "../scope.js";
+import { FunctionalComponent } from "../component.js";
+import { useRenderer } from "../renderer.js";
+import { createTemplate } from "../template.js";
+
+export const Text: FunctionalComponent<{
+  text?: MaybeSignal<string | number | undefined | null>;
+  marker?: boolean;
+}> = ({ text, marker }) =>
+  createTemplate(() => {
+    const renderer = useRenderer();
+    const anchor = marker && renderer._node(() => document.createComment(""));
+    const node = renderer._node(() => document.createTextNode(""));
+
+    useEffect(() => {
+      const textContent = "" + (MaybeSignal.get(text) ?? "");
+
+      if (node.textContent != textContent) {
+        node.textContent = textContent;
+      }
+    });
+
+    return anchor ? [anchor, node] : [node];
+  });

package/src/intrinsic/mod.ts

@@ -0,0 +1,5 @@
+export { For } from "./For.js";
+export { type Children, Fragment } from "./Fragment.js";
+export { If, ElseIf, Else } from "./If.js";
+export { Portal } from "./Portal.js";
+export { Style, css } from "./Style.js";

package/src/jsx-runtime/mod.ts

@@ -0,0 +1,41 @@
+import { createElement } from "../create_element.js";
+import type { Template } from "../template.js";
+import type { DomEventProps, DomIntrinsicElements, DomProps } from "../dom.js";
+import type { jsxPropsSym } from "../component.js";
+
+/** @ignore */
+export const jsx = (
+  type: any,
+  props?: object & { key?: unknown },
+  key?: unknown,
+): Template => {
+  if (props && key != null) {
+    props.key = key;
+  }
+
+  return createElement(type, props);
+};
+
+/** @ignore */
+export namespace JSX {
+  export type Element = Template;
+
+  export type ElementClass = Omit<HTMLElement, typeof jsxPropsSym>;
+
+  export interface ElementAttributesProperty {
+    [jsxPropsSym]: {};
+  }
+
+  export interface ElementChildrenAttribute {
+    children: {};
+  }
+
+  export type IntrinsicElements = DomIntrinsicElements;
+
+  export interface IntrinsicClassAttributes<T>
+    extends DomProps<T>,
+      DomEventProps<T> {}
+}
+
+export { Fragment } from "../intrinsic/Fragment.js";
+export { jsx as jsxDEV, jsx as jsxs };

package/src/mod.ts

@@ -0,0 +1,37 @@
+export {
+  type AttributeOptions,
+  Component,
+  type ComponentConstructor,
+  type ComponentOptions,
+  defineComponents,
+  event,
+  type EventConstructor,
+  type FunctionalComponent,
+  isComponent,
+  type Metadata,
+  prop,
+  type PropOptions,
+  useMountEffect as useEffect,
+} from "./component.js";
+export { type Context, createContext, useContext } from "./context.js";
+export { createElement, h } from "./create_element.js";
+export { DangerousHtml, Styles } from "./dom.js";
+export { type Template } from "./template.js";
+export {
+  type Cleanup,
+  MaybeSignal,
+  type SetSignalOptions,
+  type Signal,
+  type SignalLike,
+  type SignalSetter,
+  type SubscopeOptions,
+  type RefSignal,
+  type RefSignalSetter,
+  useBatch,
+  useMemo,
+  useSignal,
+  useRef,
+} from "./scope.js";
+
+export * from "./intrinsic/mod.js";
+export * from "./jsx-runtime/mod.js";

package/src/renderer.ts

@@ -0,0 +1,45 @@
+import { Component } from "./component.js";
+import { Signal, useEffect, useScope, useSubscope } from "./scope.js";
+
+interface Renderer {
+  _component?: Component;
+  _svg?: boolean;
+  _nodes?: IterableIterator<Node>;
+  _ifConditions: Signal<boolean | undefined>[];
+
+  _node<N extends Node>(fallback: () => N): N;
+}
+
+type RendererOverrides = Partial<Omit<Renderer, "_node">>;
+
+const createRenderer = (override: RendererOverrides = {}): Renderer => ({
+  _ifConditions: [],
+  _node<N extends Node>(fallback: () => N): N {
+    return (this._nodes?.next().value as N | undefined) ?? fallback();
+  },
+  ...override,
+});
+
+export const useRenderer = () => {
+  const scope = useScope<{ _renderer?: Renderer }>();
+  return (scope._details._renderer ??= createRenderer());
+};
+
+export const runWithRenderer = <T>(
+  override: RendererOverrides,
+  fn: () => T,
+): T => {
+  const currRenderer = useRenderer();
+  const _renderer = createRenderer({
+    ...currRenderer,
+    ...override,
+  });
+
+  const [result, destroy] = useSubscope(fn, {
+    details: { _renderer },
+  });
+
+  useEffect(() => destroy);
+
+  return result;
+};