@alloy-js/core 0.10.0 → 0.12.0

package/temp/api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.47.7",
+    "toolVersion": "7.47.12",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {
@@ -5715,7 +5715,7 @@
             },
             {
               "kind": "Content",
-              "text": "T extends "
+              "text": "number extends keyof T ? [value: T[number]] : T extends "
             },
             {
               "kind": "Reference",
@@ -5742,7 +5742,7 @@
             },
             {
               "kind": "Content",
-              "text": "<U> : T extends (infer U)[] ? [value: U] : T extends "
+              "text": "<U> : T extends "
             },
             {
               "kind": "Reference",
@@ -6003,25 +6003,25 @@
             },
             {
               "kind": "Content",
-              "text": "any[] | "
+              "text": "readonly unknown[] | "
             },
             {
               "kind": "Reference",
-              "text": "Map",
-              "canonicalReference": "!Map:interface"
+              "text": "ReadonlyMap",
+              "canonicalReference": "!ReadonlyMap:interface"
             },
             {
               "kind": "Content",
-              "text": "<any, any> | "
+              "text": "<unknown, unknown> | "
             },
             {
               "kind": "Reference",
-              "text": "Set",
-              "canonicalReference": "!Set:interface"
+              "text": "ReadonlySet",
+              "canonicalReference": "!ReadonlySet:interface"
             },
             {
               "kind": "Content",
-              "text": "<any> | "
+              "text": "<unknown> | "
             },
             {
               "kind": "Reference",
@@ -6030,7 +6030,7 @@
             },
             {
               "kind": "Content",
-              "text": "<any>"
+              "text": "<unknown>"
             },
             {
               "kind": "Content",
@@ -9234,7 +9234,43 @@
             },
             {
               "kind": "Content",
-              "text": ">"
+              "text": "> & "
+            },
+            {
+              "kind": "Reference",
+              "text": "Required",
+              "canonicalReference": "!Required:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Pick",
+              "canonicalReference": "!Pick:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@alloy-js/core/jsx-runtime\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Component",
+              "canonicalReference": "@alloy-js/core!Component:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "MatchProps",
+              "canonicalReference": "@alloy-js/core!MatchProps:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">, \"tag\">>"
             }
           ],
           "fileUrlPath": "src/components/Switch.tsx",
@@ -9243,7 +9279,7 @@
           "name": "Match",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 6
+            "endIndex": 14
           }
         },
         {
@@ -12872,6 +12908,144 @@
           ],
           "name": "pushStack"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!ReferenceOrContent:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function ReferenceOrContent(props: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ReferenceOrContentProps",
+              "canonicalReference": "@alloy-js/core!ReferenceOrContentProps:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@vue/reactivity\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComputedRef",
+              "canonicalReference": "@vue/reactivity!ComputedRef:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Children",
+              "canonicalReference": "@alloy-js/core!Children:type"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/components/ReferenceOrContent.tsx",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 8
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "props",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "ReferenceOrContent"
+        },
+        {
+          "kind": "Interface",
+          "canonicalReference": "@alloy-js/core!ReferenceOrContentProps:interface",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export interface ReferenceOrContentProps "
+            }
+          ],
+          "fileUrlPath": "src/components/ReferenceOrContent.tsx",
+          "releaseTag": "Public",
+          "name": "ReferenceOrContentProps",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ReferenceOrContentProps#children:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "readonly children: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Children",
+                  "canonicalReference": "@alloy-js/core!Children:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "children",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@alloy-js/core!ReferenceOrContentProps#refkey:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "readonly refkey: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Refkey",
+                  "canonicalReference": "@alloy-js/core!Refkey:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "refkey",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            }
+          ],
+          "extendsTokenRanges": []
+        },
         {
           "kind": "Function",
           "canonicalReference": "@alloy-js/core!refkey:function(1)",
@@ -15842,7 +16016,34 @@
             },
             {
               "kind": "Content",
-              "text": "<TProps>"
+              "text": "<TProps> & "
+            },
+            {
+              "kind": "Reference",
+              "text": "Required",
+              "canonicalReference": "!Required:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Pick",
+              "canonicalReference": "!Pick:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Component",
+              "canonicalReference": "@alloy-js/core!Component:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<TProps>, \"tag\">>"
             },
             {
               "kind": "Content",
@@ -15852,7 +16053,7 @@
           "fileUrlPath": "src/jsx-runtime.ts",
           "returnTypeTokenRange": {
             "startIndex": 8,
-            "endIndex": 10
+            "endIndex": 16
           },
           "releaseTag": "Public",
           "overloadIndex": 1,

package/test/components/declaration.test.tsx

@@ -7,6 +7,7 @@ import {
   Scope,
   useBinder,
 } from "../../src/index.js";
+import { flushJobs } from "../../src/scheduler.js";
 import { createTap } from "../../src/tap.js";
 
 it("creates and cleans up a symbol", () => {
@@ -33,5 +34,6 @@ it("creates and cleans up a symbol", () => {
   const subScope = [...binder.globalScope.children][0];
   expect(subScope.symbols.size).toBe(1);
   doDecl.value = false;
+  flushJobs();
   expect(subScope.symbols.size).toBe(0);
 });

package/test/components/list.test.tsx

@@ -73,7 +73,6 @@ it("is useful for statements", () => {
       <Statement />
     </List>,
   );
-
   expect(printTree(tree)).toEqual(d`
     console.log(true);
     console.log(true);

package/test/components/reference-or-content.test.tsx

@@ -0,0 +1,138 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  Children,
+  createTap,
+  Declaration,
+  List,
+  Output,
+  ReferenceOrContent,
+  Refkey,
+  refkey,
+  resolve,
+  Scope,
+  SourceFile,
+  useBinder,
+} from "../../src/index.js";
+import { d, renderToString } from "../../testing/render.js";
+
+function TestWrapper(props: { children: Children }) {
+  const GetBinder = createTap(() => useBinder());
+
+  function Reference(props: { refkey: Refkey }) {
+    const result = resolve(props.refkey);
+    return result.value.targetDeclaration.name;
+  }
+
+  return (
+    <Output>
+      <SourceFile path="test.txt" filetype="txt" reference={Reference}>
+        <GetBinder />
+        <Scope>
+          <List>{props.children}</List>
+        </Scope>
+      </SourceFile>
+    </Output>
+  );
+}
+
+describe("render the reference name if a declaration exists", () => {
+  it("declaration is before", () => {
+    const rk1 = refkey();
+    const template = (
+      <TestWrapper>
+        <Declaration name="A" refkey={rk1}>
+          Declare A
+        </Declaration>
+        <ReferenceOrContent refkey={rk1}>No Reference A</ReferenceOrContent>
+      </TestWrapper>
+    );
+
+    expect(renderToString(template)).toEqual(d`
+      Declare A
+      A
+    `);
+  });
+
+  it("declaration is after", () => {
+    const rk1 = refkey();
+    const template = (
+      <TestWrapper>
+        <ReferenceOrContent refkey={rk1}>No Reference A</ReferenceOrContent>
+        <Declaration name="A" refkey={rk1}>
+          Declare A
+        </Declaration>
+      </TestWrapper>
+    );
+
+    expect(renderToString(template)).toEqual(d`
+    A
+    Declare A
+  `);
+  });
+});
+
+it("render content if there is not declaration attached to symbol", () => {
+  const rk1 = refkey();
+  const template = (
+    <TestWrapper>
+      <ReferenceOrContent refkey={rk1}>No Reference A</ReferenceOrContent>
+    </TestWrapper>
+  );
+
+  expect(renderToString(template)).toEqual(d`
+    No Reference A
+  `);
+});
+
+it("mixed", () => {
+  const rk1 = refkey();
+  const rk2 = refkey();
+  const template = (
+    <TestWrapper>
+      <Declaration name="A" refkey={rk1}>
+        Declare A
+      </Declaration>
+      <ReferenceOrContent refkey={rk1}>No Reference A</ReferenceOrContent>
+      <ReferenceOrContent refkey={rk2}>No Reference B</ReferenceOrContent>
+    </TestWrapper>
+  );
+
+  expect(renderToString(template)).toEqual(d`
+    Declare A
+    A
+    No Reference B
+  `);
+});
+
+it("resolve ref via source file reference", () => {
+  const rk1 = refkey();
+
+  const GetBinder = createTap(() => useBinder());
+
+  const Reference = vi.fn((props: { refkey: Refkey }) => {
+    const result = resolve(props.refkey);
+    return `ViaRef.${result.value.targetDeclaration.name}`;
+  });
+
+  const template = (
+    <Output>
+      <SourceFile path="test.txt" filetype="txt" reference={Reference}>
+        <GetBinder />
+        <Scope>
+          <List>
+            <Declaration name="A" refkey={rk1}>
+              Declare A
+            </Declaration>
+            <ReferenceOrContent refkey={rk1}>No Reference A</ReferenceOrContent>
+          </List>
+        </Scope>
+      </SourceFile>
+    </Output>
+  );
+
+  expect(renderToString(template)).toEqual(d`
+    Declare A
+    ViaRef.A
+  `);
+  expect(Reference).toHaveBeenCalledTimes(1);
+});

package/test/control-flow/for.test.tsx

@@ -1,8 +1,9 @@
 import "@alloy-js/core/testing";
 import { d } from "@alloy-js/core/testing";
-import { expect, it } from "vitest";
+import { describe, expect, it } from "vitest";
 import { For } from "../../src/components/For.jsx";
 import { onCleanup, printTree, reactive, renderTree } from "../../src/index.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 it("works", () => {
   const messages = ["hi", "bye"];
@@ -17,6 +18,30 @@ it("works", () => {
   `);
 });
 
+describe("readonly collections", () => {
+  const out = d`
+    a
+    b
+  `;
+  it("array", () => {
+    const messages: readonly string[] = ["a", "b"];
+    expect(<For each={messages}>{(x) => <>{x}</>}</For>).toRenderTo(out);
+  });
+
+  it("map", () => {
+    const messages: ReadonlyMap<string, string> = new Map([
+      ["a", "a"],
+      ["b", "b"],
+    ]);
+    expect(<For each={messages}>{(x) => <>{x}</>}</For>).toRenderTo(out);
+  });
+
+  it("set", () => {
+    const messages: ReadonlySet<string> = new Set(["a", "b"]);
+    expect(<For each={messages}>{(x) => <>{x}</>}</For>).toRenderTo(out);
+  });
+});
+
 it("handles map entries", () => {
   const map = new Map([["a", { name: "foo" }]]);
   const entries = Array.from(map.entries());
@@ -76,6 +101,7 @@ it("doesn't rerender mappers", () => {
   expect(count).toBe(2);
 
   messages.push("maybe");
+  flushJobs();
 
   expect(count).toBe(3);
   expect(printTree(tree)).toBe(d`
@@ -93,7 +119,7 @@ it("doesn't rerender mappers with sets", () => {
   expect(count).toBe(2);
 
   messages.add("maybe");
-
+  flushJobs();
   expect(count).toBe(3);
   expect(printTree(tree)).toBe(d`
     item 0
@@ -116,7 +142,7 @@ it("doesn't rerender mappers with maps", () => {
   expect(count).toBe(2);
 
   messages.set("maybe", "three");
-
+  flushJobs();
   expect(count).toBe(3);
   expect(printTree(tree)).toBe(d`
     item 0
@@ -132,9 +158,11 @@ it("doesn't rerender mappers (with splice)", () => {
   const tree = renderTree(template);
   expect(count).toBe(3);
   messages.splice(1, 1);
+  flushJobs();
   // A sufficiently smart mapJoin would be able to handle this case...
   // but for now we re-render everything after the splice point.
   expect(count).toBe(4);
+
   expect(printTree(tree)).toBe(d`
     item 0
     item 3
@@ -165,12 +193,14 @@ it("cleans up things which end up removed (with push)", () => {
   `);
 
   items.pop();
+  flushJobs();
   expect(cleanups).toEqual(["b"]);
   expect(printTree(tree)).toBe(d`
     Letter a
   `);
 
   items.pop();
+  flushJobs();
   expect(cleanups).toEqual(["b", "a"]);
   expect(printTree(tree)).toBe("");
 });
@@ -200,7 +230,7 @@ it("cleans up things which end up removed (with splice)", () => {
   `);
 
   items.splice(1, 1);
-
+  flushJobs();
   // A sufficiently smart mapJoin would be able to handle this case...
   // but for now we re-render everything after the splice point.
   expect(cleanups).toEqual(["b", "c"]);

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

@@ -0,0 +1,32 @@
+import { shallowReactive } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { For } from "../../src/index.js";
+import { printTree, renderTree } from "../../src/render.js";
+import { d } from "../../testing/render.js";
+
+it("it should work with circular reactives", () => {
+  const items: string[] = shallowReactive([]);
+  let added = false;
+  function MaybeAddString(props: any) {
+    if (!added) {
+      items.push("item " + items.length);
+      added = true;
+    }
+    return <>{props.item}</>;
+  }
+  const template = (
+    <>
+      <For each={items}>
+        {(item) => {
+          return <MaybeAddString item={item} />;
+        }}
+      </For>
+    </>
+  );
+  const tree = renderTree(template);
+  items.push("item start");
+  expect(printTree(tree)).toBe(d`
+    item start
+    item 1
+  `);
+});

package/test/reactivity/cleanup.test.tsx

@@ -2,6 +2,7 @@ import { Children, effect, memo, onCleanup } from "@alloy-js/core/jsx-runtime";
 import { ref } from "@vue/reactivity";
 import { describe, expect, it } from "vitest";
 import { renderTree } from "../../src/render.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 describe("memo cleanup", () => {
   it("cleans up when memo value is recomputed", () => {
@@ -19,6 +20,7 @@ describe("memo cleanup", () => {
     expect(callCount).toBe(0);
 
     r.value = 2;
+    flushJobs();
 
     expect(m()).toBe(2);
     expect(callCount).toBe(1);
@@ -40,6 +42,7 @@ describe("effect cleanup", () => {
     expect(cleanedUp).toBe(false);
 
     r.value = 2;
+    flushJobs();
 
     expect(cleanedUp).toBe(true);
   });
@@ -58,6 +61,7 @@ describe("element cleanup", () => {
     const template = <>{el}</>;
     renderTree(template);
     el.value = "";
+    flushJobs();
     expect(cleanedUp).toBe(true);
   });
 
@@ -85,6 +89,7 @@ describe("element cleanup", () => {
     const template = <>{el}</>;
     renderTree(template);
     el.value = "";
+    flushJobs();
     expect(cleanedUpC1).toBe(true);
     expect(cleanedUpC2).toBe(true);
   });

package/test/reactivity/untrack.test.ts

@@ -1,6 +1,7 @@
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { memo, untrack } from "../../src/jsx-runtime.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 it("ignores signals for dependency tracking", () => {
   const signal = ref(0);
@@ -12,6 +13,7 @@ it("ignores signals for dependency tracking", () => {
   expect(m()).toBe(0);
 
   signal.value = 1;
+  flushJobs();
 
   expect(m()).toBe(0);
 });
@@ -28,6 +30,7 @@ it("doesn't affect signal changes", () => {
   untrack(() => {
     signal.value = 1;
   });
+  flushJobs();
 
   expect(m()).toBe(1);
 });

package/test/rendering/memoization.test.tsx

@@ -2,6 +2,7 @@ import { memo } from "@alloy-js/core/jsx-runtime";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { renderTree } from "../../src/render.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 it("memoizes child components", () => {
   let renderCount = 0;
@@ -26,5 +27,6 @@ it("memoizes child components", () => {
 
   renderTree(template);
   doThing.value = true;
+  flushJobs();
   expect(renderCount).toBe(2);
 });