sinho 0.2.2 → 0.3.0

package/src/intrinsic/For.ts

@@ -4,14 +4,15 @@ import {
   Signal,
   SignalLike,
   useEffect,
+  useMemo,
   useSignal,
   useSubscope,
 } from "../scope.js";
 import { useRenderer } from "../renderer.js";
-import { createTemplate, Template } from "../template.js";
+import { createTemplate, Template, TemplateNodes } from "../template.js";
 
 interface KeyMeta {
-  _subnodes: Node[];
+  _subnodes: TemplateNodes;
   _destroy: () => void;
 }
 
@@ -32,38 +33,27 @@ export const For = <T>(props: {
     const items = MaybeSignal.upgrade(props.each ?? []);
     const anchor = renderer._node(() => document.createComment(""));
     const keyFn = props.key ?? ((_, i) => i);
-    const nodes: Node[] = [anchor];
+    const nodes: [Comment, TemplateNodes[]] = [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;
-    };
+    const lookForAnchor = (index: number): Node =>
+      TemplateNodes.last(nodes[1], index - 1) ?? anchor;
 
     useEffect(() => {
       for (const mutation of mutationResult()._mutations) {
         if (mutation._type == "r") {
-          const { _subnodes = [], _destroy } = keyMap.get(mutation._key) ?? {};
+          const { _subnodes, _destroy } = keyMap.get(mutation._key) ?? {};
           _destroy?.();
 
-          const index = nodes.indexOf(_subnodes[0]);
-          if (index > 0) {
-            nodes.splice(index, _subnodes.length);
-          }
+          nodes[1].splice(mutation._index, 1);
 
-          _subnodes.forEach((node) => node.parentNode?.removeChild(node));
+          TemplateNodes.forEach(_subnodes ?? [], (node) =>
+            node.parentNode?.removeChild(node),
+          );
           keyMap.delete(mutation._key);
         } else if (mutation._type == "a") {
-          let _subnodes: Node[] = [];
+          let _subnodes!: TemplateNodes;
 
           const [, destroy] = useSubscope(() => {
             const [index, setIndex] = useSignal(mutation._index);
@@ -84,36 +74,29 @@ export const For = <T>(props: {
             });
 
             _subnodes = props.children?.(item, index, items).build() ?? [];
+            nodes[1].splice(mutation._index, 0, _subnodes);
 
-            const itemAnchor = lookForAnchor(mutation._index);
-            const anchorIndex = nodes.indexOf(itemAnchor);
-            if (anchorIndex >= 0) {
-              nodes.splice(anchorIndex + 1, 0, ..._subnodes);
-            }
+            let itemAnchor = lookForAnchor(mutation._index);
 
-            _subnodes.forEach((node) =>
-              itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling),
-            );
+            TemplateNodes.forEach(_subnodes, (node) => {
+              itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
+              itemAnchor = node;
+            });
           });
 
           keyMap.set(mutation._key, { _subnodes, _destroy: destroy });
         } else if (mutation._type == "m") {
-          const { _subnodes = [] } = keyMap.get(mutation._key) ?? {};
+          const { _subnodes } = keyMap.get(mutation._key) ?? {};
 
-          const index = nodes.indexOf(_subnodes[0]);
-          if (index >= 0) {
-            nodes.splice(index, _subnodes.length);
-          }
+          nodes[1].splice(mutation._from, 1);
+          nodes[1].splice(mutation._to, 0, _subnodes ?? []);
 
-          const itemAnchor = lookForAnchor(mutation._to);
-          const anchorIndex = nodes.indexOf(itemAnchor);
-          if (anchorIndex >= 0) {
-            nodes.splice(anchorIndex + 1, 0, ..._subnodes);
-          }
+          let itemAnchor = lookForAnchor(mutation._to);
 
-          _subnodes.forEach((node) =>
-            itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling),
-          );
+          TemplateNodes.forEach(_subnodes ?? [], (node) => {
+            itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
+            itemAnchor = node;
+          });
         }
       }
     }, [mutationResult]);

package/src/intrinsic/Fragment.ts

@@ -1,7 +1,7 @@
 import { Text } from "./Text.js";
 import { FunctionalComponent } from "../component.js";
 import { createTemplate, Template } from "../template.js";
-import type { MaybeSignal } from "../scope.js";
+import { useMemo, type MaybeSignal } from "../scope.js";
 
 export type Children =
   | Template
@@ -31,8 +31,10 @@ export const Fragment: FunctionalComponent<{
     return !Array.isArray(children)
       ? children == null
         ? []
-        : typeof children == "object"
-          ? children
-          : Text({ text: children })
+        : [
+            typeof children == "object"
+              ? children.build()
+              : Text({ text: children }).build(),
+          ]
       : children.flatMap((children) => Fragment({ children }).build());
   });

package/src/intrinsic/If.ts

@@ -1,6 +1,13 @@
 import type { FunctionalComponent } from "../component.js";
-import { createTemplate, type Template } from "../template.js";
-import { MaybeSignal, useEffect, useMemo, useSubscope } from "../scope.js";
+import { TemplateNodes, createTemplate, type Template } from "../template.js";
+import {
+  MaybeSignal,
+  SignalLike,
+  useEffect,
+  useMemo,
+  useSignal,
+  useSubscope,
+} from "../scope.js";
 import { runWithRenderer, useRenderer } from "../renderer.js";
 import { Children, Fragment } from "./Fragment.js";
 
@@ -38,21 +45,28 @@ export const ElseIf: FunctionalComponent<{
   return runWithRenderer({ _ifConditions: [] }, () =>
     createTemplate(() => {
       const anchor = renderer._node(() => document.createComment(""));
-      const nodes: Node[] = [anchor];
+      const nodes: [Comment, TemplateNodes] = [anchor, []];
       const template = useMemo(() =>
         condition() ? Fragment({ children: props.children }) : null,
       );
 
-      let subnodes: Node[] = [];
+      let subnodes: TemplateNodes = [];
 
       useEffect(() => {
-        subnodes.forEach((node) => node.parentNode?.removeChild(node));
-        nodes.length = 1;
+        TemplateNodes.forEach(subnodes, (node) =>
+          node.parentNode?.removeChild(node),
+        );
+        nodes[1] = [];
 
         const [, destroy] = useSubscope(() => {
           subnodes = template()?.build() ?? [];
-          anchor.after(...subnodes);
-          nodes.push(...subnodes);
+          nodes[1] = subnodes;
+
+          let before: Node = anchor;
+          TemplateNodes.forEach(subnodes, (node) => {
+            before.parentNode?.insertBefore(node, before.nextSibling);
+            before = node;
+          });
         });
 
         return destroy;

package/src/intrinsic/Portal.ts

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

package/src/intrinsic/TagComponent.ts

@@ -3,7 +3,7 @@ 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";
+import { createTemplate, Template, TemplateNodes } from "../template.js";
 
 export const hydrateElement = <E extends HTMLElement | SVGElement>(
   node: E,
@@ -66,14 +66,15 @@ export const hydrateElement = <E extends HTMLElement | SVGElement>(
   }
 
   if (props.children != null) {
-    node.append(
-      ...runWithRenderer(
+    TemplateNodes.forEach(
+      runWithRenderer(
         {
           _svg: svg,
           _nodes: node.childNodes.values(),
         },
         () => Fragment({ children: props.children }).build(),
       ),
+      (subnode) => node.append(subnode),
     );
   }
 

package/src/mod.ts

@@ -15,8 +15,8 @@ export {
 } 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 DangerousHtml, type Styles } from "./dom.js";
+export { type Template, TemplateNodes } from "./template.js";
 export {
   type Cleanup,
   MaybeSignal,

package/src/scope.ts

@@ -21,6 +21,13 @@ export interface Signal<out T> extends SignalLike<T> {
   peek(): T;
 }
 
+export interface SignalOptions<T> extends SetSignalOptions {
+  /**
+   * A custom equality function to compare the new value with the old value.
+   */
+  equals?: (a: T, b: T) => boolean;
+}
+
 export interface SetSignalOptions {
   /**
    * Whether to force the update of the signal even if the new value has the
@@ -116,6 +123,7 @@ let currBatch:
   | {
       _setters: (() => void)[];
       _effects: Set<Effect>;
+      _pureEffects: Set<Effect>;
     }
   | undefined;
 
@@ -128,14 +136,14 @@ export const useScope = <T = {}>(): Scope<T> => currScope as Scope<T>;
  */
 export const useSignal: (<T>(
   value: T,
-  opts?: SetSignalOptions,
+  opts?: SignalOptions<T>,
 ) => readonly [Signal<T>, SignalSetter<T>]) &
   (<T>(
     value?: T,
-    opts?: SetSignalOptions,
+    opts?: SignalOptions<T | undefined>,
   ) => readonly [Signal<T | undefined>, SignalSetter<T | undefined>]) = <T>(
   value: T,
-  opts?: SetSignalOptions,
+  opts?: SignalOptions<T>,
 ): readonly [Signal<T>, SignalSetter<T>] => {
   const signal: Signal<T> = () => {
     if (!currUntracked && currEffect) {
@@ -150,7 +158,8 @@ export const useSignal: (<T>(
   signal.peek = () => value;
 
   const setter = (arg: T | ((value: T) => T), innerOpts?: SetSignalOptions) => {
-    innerOpts = { ...opts, ...innerOpts };
+    const allOpts = { ...opts, ...innerOpts };
+    allOpts.equals ??= (a, b) => a === b;
 
     if (currBatch) {
       const newValue =
@@ -158,19 +167,25 @@ export const useSignal: (<T>(
           ? (arg as (value: T) => T)(signal.peek())
           : arg;
 
-      if (innerOpts?.force || newValue !== signal.peek()) {
-        if (innerOpts?.force) {
+      if (allOpts?.force || !allOpts.equals(newValue, signal.peek())) {
+        if (allOpts?.force) {
           value = newValue;
         } else {
           currBatch._setters.push(() => (value = newValue));
         }
 
-        if (!innerOpts?.silent) {
-          signal._effects.forEach((effect) => currBatch!._effects.add(effect));
+        if (!allOpts?.silent) {
+          signal._effects.forEach((effect) => {
+            if (effect._pure) {
+              currBatch!._pureEffects.add(effect);
+            } else {
+              currBatch!._effects.add(effect);
+            }
+          });
         }
       }
     } else {
-      useBatch(() => setter(arg, innerOpts));
+      useBatch(() => setter(arg, allOpts));
     }
   };
 
@@ -186,7 +201,11 @@ export const useSignal: (<T>(
 export const useBatch = <T>(fn: () => T): T => {
   if (currBatch) return fn();
 
-  currBatch = { _setters: [], _effects: new Set() };
+  currBatch = {
+    _setters: [],
+    _effects: new Set(),
+    _pureEffects: new Set(),
+  };
 
   try {
     const result = fn();
@@ -198,9 +217,12 @@ export const useBatch = <T>(fn: () => T): T => {
 };
 
 export const flushBatch = (): void => {
-  a: while (
+  while (
     currBatch &&
-    (currBatch._setters.length > 0 || currBatch._effects.size > 0)
+    currBatch._setters.length +
+      currBatch._effects.size +
+      currBatch._pureEffects.size >
+      0
   ) {
     // Clean effect subscope
 
@@ -213,18 +235,14 @@ export const flushBatch = (): void => {
 
     // Run next effect
 
-    for (const effect of currBatch._effects) {
-      if (effect._pure) {
-        effect._run();
-        currBatch._effects.delete(effect);
-        continue a;
-      }
-    }
+    const effect: Effect | undefined =
+      currBatch._pureEffects.values().next().value ??
+      currBatch._effects.values().next().value;
 
-    for (const effect of currBatch._effects) {
+    if (effect) {
       effect._run();
+      currBatch._pureEffects.delete(effect);
       currBatch._effects.delete(effect);
-      break;
     }
   }
 };
@@ -305,15 +323,18 @@ export const useEffect = (
  *
  * @param fn The computation function.
  */
-export const useMemo = <T>(fn: () => T, opts?: SetSignalOptions): Signal<T> => {
-  const [memo, setMemo] = useSignal<T>();
+export const useMemo = <T>(fn: () => T, opts?: SignalOptions<T>): Signal<T> => {
+  const [memo, setMemo] = useSignal<T>(
+    undefined,
+    opts as SignalOptions<T | undefined>,
+  );
 
   let firstTime = true;
   pureEffectFlag = true;
 
   try {
     useEffect(() => {
-      setMemo(fn, firstTime ? { ...opts, force: true } : opts);
+      setMemo(fn, firstTime ? { force: true } : {});
 
       firstTime = false;
     });
@@ -384,15 +405,18 @@ export interface RefSignalSetter<in T> {
 /**
  * Creates a new signal with write capabilities.
  */
-export const useRef: (<T>(value: T, opts?: SetSignalOptions) => RefSignal<T>) &
-  (<T>(value?: T, opts?: SetSignalOptions) => RefSignal<T | undefined>) = <T>(
+export const useRef: (<T>(value: T, opts?: SignalOptions<T>) => RefSignal<T>) &
+  (<T>(
+    value?: T,
+    opts?: SignalOptions<T | undefined>,
+  ) => RefSignal<T | undefined>) = (<T>(
   value?: T,
-  opts?: SetSignalOptions,
+  opts?: SignalOptions<T | undefined>,
 ): RefSignal<T> & RefSignal<T | undefined> => {
   const [signal, setter] = useSignal(value, opts);
   (signal as RefSignal<T | undefined>).set = setter;
   return signal as RefSignal<T> & RefSignal<T | undefined>;
-};
+}) as any;
 
 /**
  * Represents a value that can be a signal or a constant value.

package/src/template.ts

@@ -1,3 +1,30 @@
+export type TemplateNodes = (Node | TemplateNodes)[];
+
+export namespace TemplateNodes {
+  export const forEach = (
+    nodes: TemplateNodes,
+    fn: (node: Node) => void,
+  ): void =>
+    nodes.forEach((node) =>
+      Array.isArray(node) ? TemplateNodes.forEach(node, fn) : fn(node),
+    );
+
+  export const last = (
+    nodes: TemplateNodes,
+    lastIndex: number = nodes.length - 1,
+  ): Node | undefined => {
+    if (!nodes.length) return;
+
+    for (let i = lastIndex; i >= 0; i--) {
+      const last = nodes[i];
+      if (!Array.isArray(last)) return last;
+
+      const lastNode = TemplateNodes.last(last);
+      if (lastNode) return lastNode;
+    }
+  };
+}
+
 /**
  * Represents a render result of a component.
  */
@@ -5,10 +32,12 @@ export interface Template {
   /**
    * Build the DOM elements represented by this template.
    */
-  build(): Node[];
+  build(): TemplateNodes;
 }
 
-export const createTemplate = (build: () => Template | Node[]): Template => ({
+export const createTemplate = (
+  build: () => Template | TemplateNodes,
+): Template => ({
   build() {
     const nodes = build();
     return (nodes as Template).build?.() ?? nodes;

package/tsconfig.json

@@ -11,7 +11,8 @@
     "declaration": true,
     "sourceMap": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "isolatedModules": true
   },
   "include": ["./src/**/*"],
   "exclude": []