@alloy-js/core 0.23.0-dev.10 → 0.23.0-dev.11

package/src/utils.tsx

@@ -1,4 +1,4 @@
-import { ref, Ref, toRaw } from "@vue/reactivity";
+import { Ref, toRaw } from "@vue/reactivity";
 import { BaseListProps } from "./components/List.jsx";
 import {
   createCustomContext,
@@ -9,6 +9,7 @@ import {
   getContext,
   memo,
   onCleanup,
+  ref,
   root,
   untrack,
 } from "./reactivity.js";
@@ -129,14 +130,16 @@ export function mapJoin<T, U, V>(
     }
     return slot;
   }
-  const firstNonEmptyIndex = ref(-1);
-  const lastNonEmptyIndex = ref(-1);
+  const firstNonEmptyIndex = ref(-1, { isInfrastructure: true });
+  const lastNonEmptyIndex = ref(-1, { isInfrastructure: true });
   const mapped: Children[] = [];
   let enderMemo: (() => Children) | undefined;
 
   // Creates a ref placeholder that stores the joiner node for a boundary.
   function createJoinerRef(): Ref<Children | undefined> {
-    return ref<unknown>(undefined) as Ref<Children | undefined>;
+    return ref<unknown>(undefined, { isInfrastructure: true }) as Ref<
+      Children | undefined
+    >;
   }
 
   // Makes sure we have a joiner ref at the requested boundary index.

package/temp/api.json

@@ -9054,6 +9054,67 @@
             "endIndex": 8
           }
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!formatReactivePropertyLabel:function(1)",
+          "docComment": "/**\n * Build a human-readable label for a reactive property like `symbolName.prop`.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function formatReactivePropertyLabel(target: "
+            },
+            {
+              "kind": "Content",
+              "text": "object"
+            },
+            {
+              "kind": "Content",
+              "text": ", key: "
+            },
+            {
+              "kind": "Content",
+              "text": "string | number"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "string"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/reactivity.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 5,
+            "endIndex": 6
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "target",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            },
+            {
+              "parameterName": "key",
+              "parameterTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "formatReactivePropertyLabel"
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@alloy-js/core!ForProps:interface",
@@ -19862,6 +19923,67 @@
           ],
           "extendsTokenRanges": []
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@alloy-js/core!reactivePropertyRefId:function(1)",
+          "docComment": "/**\n * Get a stable ref ID for a property of a reactive object.\n * Each (target, key) pair gets a unique positive ID from the same counter as refs.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function reactivePropertyRefId(target: "
+            },
+            {
+              "kind": "Content",
+              "text": "object"
+            },
+            {
+              "kind": "Content",
+              "text": ", key: "
+            },
+            {
+              "kind": "Content",
+              "text": "string | number"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "number"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/reactivity.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 5,
+            "endIndex": 6
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "target",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            },
+            {
+              "parameterName": "key",
+              "parameterTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "reactivePropertyRefId"
+        },
         {
           "kind": "Class",
           "canonicalReference": "@alloy-js/core!ReactiveUnionSet:class",
@@ -21045,14 +21167,6 @@
               "kind": "Content",
               "text": "<unknown>"
             },
-            {
-              "kind": "Content",
-              "text": ", isInfrastructure?: "
-            },
-            {
-              "kind": "Content",
-              "text": "boolean"
-            },
             {
               "kind": "Content",
               "text": "): "
@@ -21068,8 +21182,8 @@
           ],
           "fileUrlPath": "src/reactivity.ts",
           "returnTypeTokenRange": {
-            "startIndex": 6,
-            "endIndex": 7
+            "startIndex": 4,
+            "endIndex": 5
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -21081,14 +21195,6 @@
                 "endIndex": 3
               },
               "isOptional": false
-            },
-            {
-              "parameterName": "isInfrastructure",
-              "parameterTypeTokenRange": {
-                "startIndex": 4,
-                "endIndex": 5
-              },
-              "isOptional": true
             }
           ],
           "name": "refId"
@@ -22856,6 +22962,14 @@
               "kind": "Content",
               "text": "T"
             },
+            {
+              "kind": "Content",
+              "text": ", options?: "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    label?: string;\n}"
+            },
             {
               "kind": "Content",
               "text": "): "
@@ -22876,8 +22990,8 @@
           ],
           "fileUrlPath": "src/reactivity.ts",
           "returnTypeTokenRange": {
-            "startIndex": 3,
-            "endIndex": 5
+            "startIndex": 5,
+            "endIndex": 7
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -22889,6 +23003,14 @@
                 "endIndex": 2
               },
               "isOptional": true
+            },
+            {
+              "parameterName": "options",
+              "parameterTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "isOptional": true
             }
           ],
           "typeParameters": [

package/testing/devtools-utils.ts

@@ -5,11 +5,43 @@ export interface DevtoolsMessage {
   [key: string]: unknown;
 }
 
+const ALL_CHANNELS = [
+  "render",
+  "effects",
+  "refs",
+  "edges",
+  "symbols",
+  "scopes",
+  "files",
+  "directories",
+  "scheduler",
+  "diagnostics",
+  "errors",
+  "lifecycle",
+];
+
+/** Subscribe to all channels on the given socket. */
+export function subscribeAll(socket: WebSocket): void {
+  socket.send(JSON.stringify({ type: "subscribe", channels: ALL_CHANNELS }));
+}
+
 /**
  * Creates a message collector that accumulates messages and provides utilities
  * for waiting on conditions. Useful for tests with reactive updates.
+ *
+ * Returns a Promise because it waits for the subscription to be processed by
+ * the server before the caller starts rendering.
+ *
+ * @param channels - Optional list of channels to subscribe to. Defaults to all channels.
  */
-export function createMessageCollector(socket: WebSocket) {
+export async function createMessageCollector(
+  socket: WebSocket,
+  channels?: string[],
+) {
+  socket.send(
+    JSON.stringify({ type: "subscribe", channels: channels ?? ALL_CHANNELS }),
+  );
+  await new Promise((resolve) => setTimeout(resolve, 50));
   let renderBuffer: DevtoolsMessage[] = [];
   let flushBuffer: DevtoolsMessage[] = [];
   const completedRenderBatches: DevtoolsMessage[][] = [];
@@ -186,18 +218,28 @@ export function createMessageCollector(socket: WebSocket) {
 
 /**
  * Filter messages to only include render tree messages (those starting with "render:")
+ * Excludes trace messages (those with triggerIds).
  */
 export function filterRenderTreeMessages(
   messages: DevtoolsMessage[],
 ): DevtoolsMessage[] {
-  return messages.filter((m) => m.type.startsWith("render"));
+  return messages.filter(
+    (m) => m.type.startsWith("render") && !("triggerIds" in m),
+  );
 }
 
 /**
- * Filter messages to only include effect debug messages (those starting with "effect:")
+ * Filter messages to only include effect/ref/edge debug messages.
+ * Excludes trace messages (those with triggerIds).
  */
 export function filterEffectsMessages(
   messages: DevtoolsMessage[],
 ): DevtoolsMessage[] {
-  return messages.filter((m) => m.type.startsWith("effect:"));
+  return messages.filter(
+    (m) =>
+      (m.type.startsWith("effect:") ||
+        m.type.startsWith("ref:") ||
+        m.type.startsWith("edge:")) &&
+      !("triggerIds" in m),
+  );
 }