@alloy-js/core 0.21.0-dev.9 → 0.22.0-dev.0

package/src/render.ts

@@ -481,6 +481,7 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
           throw new Error("Unknown intrinsic element");
       }
     } else if (isComponentCreator(child)) {
+      // todo: remove this effect (only needed for context, not needed for anything else)
       effect(() => {
         trace(
           TracePhase.render.appendChild,
@@ -581,6 +582,8 @@ function debugPrintChild(child: Children): string {
     return `<${child.name}>`;
   } else if (isRenderableObject(child)) {
     return `CustomChildElement(${JSON.stringify(child)})`;
+  } else if (isRefkeyable(child)) {
+    return `refkey`;
   } else {
     return JSON.stringify(child);
   }

package/src/scheduler.ts

@@ -1,24 +1,25 @@
-import { ReactiveEffectRunner } from "@vue/reactivity";
+import { ReactiveEffect } from "@vue/reactivity";
 
 export interface QueueJob {
-  (): any;
+  run(): void;
 }
 const immediateQueue = new Set<QueueJob>();
 const queue = new Set<QueueJob>();
 const pendingPromises = new Set<Promise<any>>();
 
-export function scheduler(
-  jobGetter: () => ReactiveEffectRunner,
-  immediate = false,
-) {
-  return () => {
-    queueJob(jobGetter(), immediate);
+export function scheduler(immediate = false) {
+  return function (this: ReactiveEffect) {
+    queueJob(this, immediate);
   };
 }
-export function queueJob(job: QueueJob, immediate = false) {
+export function queueJob(job: QueueJob | (() => void), immediate = false) {
   // if we have an immediate job, we don't need to queue the normal job.
   // the set is serving an important purpose here in deduping the effects we run
   // (which in effect coalesces multiple update effects together).
+  if (typeof job === "function") {
+    job = { run: job };
+  }
+
   if (immediate) {
     immediateQueue.add(job);
   } else {
@@ -41,7 +42,7 @@ export function flushJobs() {
   // First, run all synchronous jobs
   let job;
   while ((job = takeJob()) !== null) {
-    job();
+    job.run();
   }
 
   // If there are no pending promises, we're done
@@ -58,7 +59,7 @@ export async function flushJobsAsync() {
     // First, run all synchronous jobs
     let job;
     while ((job = takeJob()) !== null) {
-      job();
+      job.run();
     }
 
     // If there are no pending promises, we're done

package/src/symbols/output-scope.ts

@@ -256,9 +256,9 @@ export abstract class OutputScope {
   }
 
   toString() {
-    const ownerSymbol = this.ownerSymbol ? ` for ${this.ownerSymbol}` : "";
-    return untrack(
-      () => `${this.constructor.name} ${this.name}[${this.id}]${ownerSymbol}`,
-    );
+    return untrack(() => {
+      const ownerSymbol = this.ownerSymbol ? ` for ${this.ownerSymbol}` : "";
+      return `${this.constructor.name} ${this.name}[${this.id}]${ownerSymbol}`;
+    });
   }
 }

package/src/tracer.ts

@@ -1,4 +1,4 @@
-import { effect, ReactiveEffectRunner } from "@vue/reactivity";
+import { effect } from "@vue/reactivity";
 import { untrack } from "./reactivity.js";
 import { inspectRefkey, type Refkey } from "./refkey.js";
 import { scheduler } from "./scheduler.js";
@@ -210,7 +210,7 @@ export function traceEffect(phase: TracePhase, cb: () => string) {
   let first = true;
   const triggerIds = new Set<number>();
 
-  const runner: ReactiveEffectRunner<void> = effect(
+  effect(
     () => {
       if (first) {
         // just track what we need, don't log.
@@ -222,7 +222,7 @@ export function traceEffect(phase: TracePhase, cb: () => string) {
       triggerIds.clear();
     },
     {
-      scheduler: scheduler(() => runner, true),
+      scheduler: scheduler(true),
       onTrigger(event) {
         const id = triggerCount++;
         if (dids.has(id)) {

package/src/utils.tsx

@@ -56,6 +56,22 @@ export function mapJoin<T, U, V>(
   cb: (key: T, value: U, index: number) => V,
   options?: JoinOptions,
 ): () => (V | string | undefined | CustomContext)[];
+/**
+ * Map a Map to an array using a mapper and place a joiner between each element.
+ * Defaults to joining with a newline.
+ *
+ * @see {@link join} for joining without mapping.
+ * @param src - Source map.
+ * @param cb - Mapper function.
+ * @param options - Join options.
+ * @returns The mapped and joined array.
+ *
+ */
+export function mapJoin<U, V>(
+  src: () => Set<U>,
+  cb: (value: U, index: number) => V,
+  options?: JoinOptions,
+): () => (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.
@@ -72,7 +88,7 @@ export function mapJoin<T, V>(
   options?: JoinOptions,
 ): () => (V | string | undefined | CustomContext)[];
 export function mapJoin<T, U, V>(
-  src: () => Map<T, U> | T[] | Iterable<T>,
+  src: () => Map<T, U> | Set<T> | T[] | Iterable<T>,
   cb: (key: T, valueOrIndex: U | number, index: number) => V,
   rawOptions: JoinOptions = {},
 ): () => Children {
@@ -94,6 +110,7 @@ export function mapJoin<T, U, V>(
     const itemsSourceRaw = toRaw(itemsSource);
     let items =
       Array.isArray(itemsSourceRaw) ? (itemsSource as T[]) : [...itemsSource];
+
     if (options.skipFalsy) {
       items = items.filter(
         (item) =>
@@ -103,8 +120,8 @@ export function mapJoin<T, U, V>(
     // 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);
+    const compare: any = getCompareFunction(itemsSourceRaw);
+    const mapper: any = getMapperFunction(itemsSourceRaw);
 
     return untrack(() => {
       let startIndex = 0;
@@ -160,7 +177,11 @@ export function mapJoin<T, U, V>(
   }
 
   function getMapperFunction(itemsSource: Map<T, U> | T[] | Iterable<T>) {
-    return Array.isArray(itemsSource) || isIterable(itemsSource) ?
+    return (
+        Array.isArray(itemsSource) ||
+          itemsSource instanceof Set ||
+          isIterable(itemsSource)
+      ) ?
         mapArray
       : mapMap;
   }

package/temp/api.json

@@ -10288,6 +10288,126 @@
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!mapJoin:function(2)",
+          "docComment": "/**\n * Map a Map to an array using a mapper and place a joiner between each element.\n * Defaults to joining with a newline.\n *\n * @param src - Source map.\n *\n * @param cb - Mapper function.\n *\n * @param options - Join options.\n *\n * @returns  The mapped and joined array.\n *\n * @see\n *\n *  {@link join} for joining without mapping.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function mapJoin<U, V>(src: "
+            },
+            {
+              "kind": "Content",
+              "text": "() => "
+            },
+            {
+              "kind": "Reference",
+              "text": "Set",
+              "canonicalReference": "!Set:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<U>"
+            },
+            {
+              "kind": "Content",
+              "text": ", cb: "
+            },
+            {
+              "kind": "Content",
+              "text": "(value: U, index: number) => V"
+            },
+            {
+              "kind": "Content",
+              "text": ", options?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "JoinOptions",
+              "canonicalReference": "@alloy-js/core!JoinOptions:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "() => (V | string | undefined | "
+            },
+            {
+              "kind": "Reference",
+              "text": "CustomContext",
+              "canonicalReference": "@alloy-js/core!CustomContext:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ")[]"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/utils.tsx",
+          "returnTypeTokenRange": {
+            "startIndex": 9,
+            "endIndex": 12
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 2,
+          "parameters": [
+            {
+              "parameterName": "src",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 4
+              },
+              "isOptional": false
+            },
+            {
+              "parameterName": "cb",
+              "parameterTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "isOptional": false
+            },
+            {
+              "parameterName": "options",
+              "parameterTypeTokenRange": {
+                "startIndex": 7,
+                "endIndex": 8
+              },
+              "isOptional": true
+            }
+          ],
+          "typeParameters": [
+            {
+              "typeParameterName": "U",
+              "constraintTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              }
+            },
+            {
+              "typeParameterName": "V",
+              "constraintTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              }
+            }
+          ],
+          "name": "mapJoin"
+        },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!mapJoin:function(3)",
           "docComment": "/**\n * Map a array or iterator to another array using a mapper and place a joiner\n * between each element. Defaults to joining with a newline.\n *\n * @param src - Source array.\n *\n * @param cb - Mapper function.\n *\n * @param options - Join options.\n *\n * @returns  The mapped and joined array.\n *\n * @see\n *\n *  {@link join} for joining without mapping.\n */\n",
           "excerptTokens": [
             {
@@ -10352,7 +10472,7 @@
             "endIndex": 12
           },
           "releaseTag": "Public",
-          "overloadIndex": 2,
+          "overloadIndex": 3,
           "parameters": [
             {
               "parameterName": "src",

package/test/reactivity/circular-reactives.test.tsx

@@ -30,3 +30,23 @@ it("it should work with circular reactives", () => {
     item 1
   `);
 });
+
+it("should work with immediately recursive reactives", () => {
+  const items: Set<string> = shallowReactive(new Set());
+  const template = (
+    <>
+      <For each={items.values()}>
+        {(item) => {
+          items.add("item 1");
+          return item;
+        }}
+      </For>
+    </>
+  );
+  const tree = renderTree(template);
+  items.add("item start");
+  expect(printTree(tree)).toBe(d`
+    item start
+    item 1
+  `);
+});

package/test/utils.test.tsx

@@ -32,6 +32,24 @@ describe("mapJoin", () => {
     `);
   });
 
+  it("can map a set", () => {
+    const set = new Set(["hi", "bye"]);
+
+    function Foo(props: { value: string }) {
+      return <>Value: {props.value}</>;
+    }
+
+    const joined = mapJoin(
+      () => set,
+      (value) => <Foo value={value} />,
+    );
+
+    expect(joined()).toRenderTo(`
+      Value: hi
+      Value: bye
+    `);
+  });
+
   it("can map an array", () => {
     const arr = [1, 2];