@alloy-js/core 0.5.0 → 0.6.0

package/src/stc.ts

@@ -0,0 +1,95 @@
+import {
+  Children,
+  ComponentCreator,
+  ComponentDefinition,
+  createIntrinsic,
+  IntrinsicElementBase,
+  JSX,
+} from "@alloy-js/core/jsx-runtime";
+import { code } from "./code.js";
+
+export function sti<T extends keyof JSX.IntrinsicElements>(name: T) {
+  return (
+    ...args: unknown extends T ? []
+    : {} extends Omit<JSX.IntrinsicElements[T], "children"> ?
+      [props?: JSX.IntrinsicElements[T]]
+    : [props: JSX.IntrinsicElements[T]]
+  ) => {
+    const props: JSX.IntrinsicElements[T] | undefined = args[0];
+    const fn = () => createIntrinsic(name, props!);
+    fn.children = (
+      ...children: Children[]
+    ): (() => IntrinsicElementBase<T>) => {
+      const propsWithChildren = {
+        ...(props ?? {}),
+        children,
+      };
+
+      return () => createIntrinsic(name, propsWithChildren as any);
+    };
+
+    fn.code = (
+      template: TemplateStringsArray,
+      ...substitutions: Children[]
+    ): (() => IntrinsicElementBase<T>) => {
+      const propsWithChildren = {
+        ...(args[0] ?? {}),
+        children: code(template, ...substitutions),
+      };
+
+      return () => createIntrinsic(name, propsWithChildren as any);
+    };
+    return fn;
+  };
+}
+
+export type MakeChildrenOptional<T extends object> =
+  T extends { children?: any } ?
+    Omit<T, "children"> & Partial<Pick<T, "children">>
+  : T;
+
+export function stc<T extends {}>(Component: ComponentDefinition<T>) {
+  return (
+    ...args: unknown extends T ? []
+    : {} extends Omit<T, "children"> ? [props?: MakeChildrenOptional<T>]
+    : [props: MakeChildrenOptional<T>]
+  ) => {
+    const fn: ComponentCreator<T> & {
+      code(
+        template: TemplateStringsArray,
+        ...substitutions: Children[]
+      ): ComponentCreator<T>;
+      children(...children: Children[]): ComponentCreator<T>;
+    } = () => Component(args[0] as any);
+    fn.component = Component;
+    fn.props = args[0]!;
+    fn.code = (
+      template: TemplateStringsArray,
+      ...substitutions: Children[]
+    ): ComponentCreator<T> => {
+      const propsWithChildren = {
+        ...(args[0] ?? {}),
+        children: code(template, ...substitutions),
+      };
+
+      const fn = () => Component(propsWithChildren as any);
+      fn.component = Component;
+      fn.props = args[0]!;
+      return fn;
+    };
+
+    fn.children = (...children: Children[]): ComponentCreator<T> => {
+      const propsWithChildren = {
+        ...(args[0] ?? {}),
+        children,
+      };
+
+      const fn = () => Component(propsWithChildren as any);
+      fn.component = Component;
+      fn.props = args[0]!;
+      return fn;
+    };
+
+    return fn;
+  };
+}

package/src/utils.ts

@@ -1,11 +1,15 @@
-import { code } from "./code.js";
+import { toRaw } from "@vue/reactivity";
 import {
-  Child,
   Children,
   ComponentCreator,
-  ComponentDefinition,
+  createCustomContext,
+  CustomContext,
+  Disposable,
   isComponentCreator,
   memo,
+  onCleanup,
+  root,
+  untrack,
 } from "./jsx-runtime.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { OutputDirectory, OutputFile, render } from "./render.js";
@@ -14,14 +18,19 @@ export interface JoinOptions {
   /**
    * The string to place between each element.
    */
-  joiner?: string;
+  joiner?: Children;
 
   /**
    * When true, the joiner is placed at the end of the array. When a string,
    * that string is placed at the end of the array. The ender is only emitted
    * when the array has at least one element.
    */
-  ender?: string | boolean;
+  ender?: Children;
+
+  /**
+   * When true, falsy values with the exception of 0 are skipped.
+   */
+  skipFalsy?: boolean;
 }
 const defaultJoinOptions: JoinOptions = {
   joiner: "\n",
@@ -40,10 +49,10 @@ const defaultJoinOptions: JoinOptions = {
  *
  */
 export function mapJoin<T, U, V>(
-  src: Map<T, U>,
-  cb: (key: T, value: U) => V,
+  src: () => Map<T, U>,
+  cb: (key: T, value: U, index: number) => V,
   options?: JoinOptions,
-): (V | string)[];
+): () => (V | string | undefined | CustomContext)[];
 /**
  * Map a array or iterator to another array using a mapper and place a joiner
  * between each element. Defaults to joining with a newline.
@@ -55,47 +64,122 @@ export function mapJoin<T, U, V>(
  * @returns The mapped and joined array.
  */
 export function mapJoin<T, V>(
-  src: T[] | IterableIterator<T>,
-  cb: (value: T) => V,
+  src: () => T[] | IterableIterator<T>,
+  cb: (value: T, index: number) => V,
   options?: JoinOptions,
-): (V | string)[];
+): () => (V | string | undefined | CustomContext)[];
 export function mapJoin<T, U, V>(
-  src: Map<T, U> | T[] | Iterable<T>,
-  cb: (key: T, value?: U) => V,
+  src: () => Map<T, U> | T[] | Iterable<T>,
+  cb: (key: T, valueOrIndex: U | number, index: number) => V,
   rawOptions: JoinOptions = {},
-): (V | string)[] {
+): () => Children {
   const options = { ...defaultJoinOptions, ...rawOptions };
-  const ender = options.ender === true ? options.joiner : options.ender;
+  const ender =
+    options.ender === true ? options.joiner : options.ender || undefined;
+  const currentItems: (T | [T, U])[] = [];
+  const disposables: Disposable[] = [];
+  const mapped: Children[] = [];
+  let previousItemsLen = 0;
 
-  const mapped: (V | string)[] = [];
-  if (typeof (src as any).next === "function") {
-    src = Array.from(src as Iterable<T>);
-  }
+  onCleanup(() => {
+    for (const d of disposables) d();
+  });
 
-  if (Array.isArray(src)) {
-    for (const [index, item] of src.entries()) {
-      mapped.push(cb(item));
-      if (index !== src.length - 1) {
-        mapped.push(options.joiner!);
-      }
+  return () => {
+    const itemsSource = src();
+    // need to unpack reactives for branding checks
+    const itemsSourceRaw = toRaw(itemsSource);
+    let items =
+      Array.isArray(itemsSourceRaw) ? (itemsSource as T[]) : [...itemsSource];
+    if (options.skipFalsy) {
+      items = items.filter(
+        (item) =>
+          item !== null && item !== undefined && typeof item !== "boolean",
+      );
     }
-    if (src.length > 0 && ender) {
-      mapped.push(ender);
-    }
-  } else {
-    const entries = [...(src as Map<T, U>).entries()];
-    for (const [index, [key, value]] of entries.entries()) {
-      mapped.push(cb(key, value));
-      if (index !== entries.length - 1) {
-        mapped.push(options.joiner!);
+    // this is important to access here in reactive context so we are
+    // notified of new items from reactives.
+    const itemsLen = items.length;
+    const compare: any = getCompareFunction(itemsSource);
+    const mapper: any = getMapperFunction(itemsSource);
+
+    return untrack(() => {
+      let startIndex = 0;
+      for (
+        ;
+        startIndex < itemsLen && startIndex < currentItems.length;
+        startIndex++
+      ) {
+        if (!compare(items[startIndex], currentItems[startIndex])) {
+          break;
+        }
       }
-    }
-    if (entries.length > 0 && ender) {
-      mapped.push(ender);
-    }
+
+      if (startIndex > 0 && startIndex < itemsLen) {
+        // need to update the previous joiner (might be ender or absent)
+        mapped[startIndex * 2 - 1] = options.joiner;
+      }
+
+      for (; startIndex < itemsLen; startIndex++) {
+        currentItems[startIndex] = items[startIndex];
+        if (disposables[startIndex]) {
+          disposables[startIndex]();
+        }
+        const cleanupIndex = startIndex;
+        mapped[startIndex * 2] = createCustomContext((cb) => {
+          return root((disposer) => {
+            disposables[cleanupIndex] = disposer;
+            disposer();
+            cb(mapper(items[cleanupIndex], cleanupIndex));
+          });
+        });
+
+        mapped[startIndex * 2 + 1] =
+          startIndex < items.length - 1 ? options.joiner : ender;
+      }
+
+      mapped.length = startIndex * 2;
+      mapped[mapped.length - 1] = ender;
+      for (; startIndex < previousItemsLen; startIndex++) {
+        disposables[startIndex]?.();
+      }
+
+      previousItemsLen = itemsLen;
+
+      return mapped;
+    });
+  };
+
+  function getCompareFunction(itemsSource: Map<T, U> | T[] | Iterable<T>) {
+    return Array.isArray(itemsSource) || isIterable(itemsSource) ?
+        compareArray
+      : compareMap;
+  }
+
+  function getMapperFunction(itemsSource: Map<T, U> | T[] | Iterable<T>) {
+    return Array.isArray(itemsSource) || isIterable(itemsSource) ?
+        mapArray
+      : mapMap;
+  }
+  function compareArray(elem1: T, elem2: T) {
+    return elem1 === elem2;
+  }
+
+  function compareMap(record1: [T, U], record2: [T, U]) {
+    return record1[0] === record2[0] && record1[1] === record2[1];
+  }
+
+  function mapArray(item: T, index: number) {
+    return (cb as any)(item, index);
   }
 
-  return mapped;
+  function mapMap(item: [T, U], index: number) {
+    return cb(item[0], item[1], index);
+  }
+
+  function isIterable<T>(x: unknown): x is Iterable<T> {
+    return typeof (x as any).next === "function";
+  }
 }
 
 /**
@@ -105,12 +189,12 @@ export function mapJoin<T, U, V>(
  * @see mapJoin for mapping before joining.
  * @returns The joined array
  */
-export function join<T>(
+export function join<T extends Children>(
   src: T[] | Iterator<T>,
   options: JoinOptions = {},
-): (T | string)[] {
+): Children {
   const mergedOptions = { ...defaultJoinOptions, ...options };
-  const joined = [];
+  const joined: Children[] = [];
   const ender =
     mergedOptions.ender === true ? mergedOptions.joiner : mergedOptions.ender;
   src = Array.from(src as Iterable<T>);
@@ -129,12 +213,28 @@ export function join<T>(
   return joined;
 }
 
+export interface ChildrenOptions {
+  /**
+   * When true, fragments and arrays are not flattened.
+   */
+  preserveFragments?: boolean;
+}
 /**
  * Returns a memo which is a list of all the provided children.
  * If you want this as an array, see {@link childrenArray}.
  */
-export function children(fn: () => Children): () => Children {
-  return memo(() => collectChildren(fn()));
+export function children(
+  fn: () => Children,
+  options: ChildrenOptions = {},
+): () => Children {
+  return memo(() => {
+    const children = fn();
+    if (options.preserveFragments && Array.isArray(children)) {
+      return children.map(collectChildren);
+    } else {
+      return collectChildren(children);
+    }
+  });
 
   function collectChildren(children: Children): Children {
     if (Array.isArray(children)) {
@@ -150,8 +250,11 @@ export function children(fn: () => Children): () => Children {
   }
 }
 
-export function childrenArray(fn: () => Children): Child[] {
-  const c = children(fn)();
+export function childrenArray(
+  fn: () => Children,
+  options?: ChildrenOptions,
+): Children[] {
+  const c = children(fn, options)();
   if (Array.isArray(c)) {
     return c;
   } else if (c === undefined) {
@@ -161,7 +264,7 @@ export function childrenArray(fn: () => Children): Child[] {
   }
 }
 
-export function findKeyedChild(children: Child[], tag: symbol) {
+export function findKeyedChild(children: Children[], tag: symbol) {
   for (const child of children) {
     if (isKeyedChild(child) && child.tag === tag) {
       return child;
@@ -171,58 +274,22 @@ export function findKeyedChild(children: Child[], tag: symbol) {
   return null;
 }
 
-export function findUnkeyedChildren(children: Child[]) {
-  return children.filter((child) => !isKeyedChild(child));
+export function findKeyedChildren(children: Children[], tag: symbol) {
+  const keyedChildren: ComponentCreator[] = [];
+  for (const child of children) {
+    if (isKeyedChild(child) && child.tag === tag) {
+      keyedChildren.push(child);
+    }
+  }
+  return keyedChildren;
 }
 
-export function isKeyedChild(child: Child): child is ComponentCreator {
-  return isComponentCreator(child) && !!child.tag;
+export function findUnkeyedChildren(children: Children[]) {
+  return children.filter((child) => !isKeyedChild(child));
 }
 
-export function stc<T extends {}>(Component: ComponentDefinition<T>) {
-  return (
-    ...args: unknown extends T ? []
-    : {} extends Omit<T, "children"> ? [props?: T]
-    : [props: T]
-  ) => {
-    const fn: ComponentCreator<T> & {
-      code(
-        template: TemplateStringsArray,
-        ...substitutions: Children[]
-      ): ComponentCreator<T>;
-      children(...children: Children[]): ComponentCreator<T>;
-    } = () => Component(args[0]!);
-    fn.component = Component;
-    fn.props = args[0]!;
-    fn.code = (
-      template: TemplateStringsArray,
-      ...substitutions: Children[]
-    ): ComponentCreator<T> => {
-      const propsWithChildren = {
-        ...(args[0] ?? {}),
-        children: code(template, ...substitutions),
-      };
-
-      const fn = () => Component(propsWithChildren as any);
-      fn.component = Component;
-      fn.props = args[0]!;
-      return fn;
-    };
-
-    fn.children = (...children: Children[]): ComponentCreator<T> => {
-      const propsWithChildren = {
-        ...(args[0] ?? {}),
-        children,
-      };
-
-      const fn = () => Component(propsWithChildren as any);
-      fn.component = Component;
-      fn.props = args[0]!;
-      return fn;
-    };
-
-    return fn;
-  };
+export function isKeyedChild(child: Children): child is ComponentCreator {
+  return isComponentCreator(child) && !!child.tag;
 }
 
 /**