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

package/src/devtools-entry.ts

@@ -0,0 +1,48 @@
+export type {
+  // Individual server→client message types
+  ClientToServerMessage,
+  DebuggerInfoMessage,
+  DiagnosticRow,
+  DiagnosticsReportMessage,
+  DirectoryAddedMessage,
+  DirectoryRemovedMessage,
+  EffectAddedMessage,
+  EffectEdgeUpdatedMessage,
+  EffectTrackMessage,
+  EffectTriggerMessage,
+  EffectUpdatedMessage,
+  FileAddedMessage,
+  FileRemovedMessage,
+  FileUpdatedMessage,
+  FlushJobsCompleteMessage,
+  RefAddedMessage,
+  RenderCompleteMessage,
+  RenderErrorMessage,
+  RenderNodeAddedMessage,
+  RenderNodeRemovedMessage,
+  RenderNodeUpdatedMessage,
+  RenderResetMessage,
+  // Individual client→server message types
+  RerenderBreakRequestMessage,
+  RerenderRequestMessage,
+  ScopeAddedMessage,
+  ScopeRemovedMessage,
+  ScopeUpdatedMessage,
+  ServerToClientMessage,
+  SourceLocation,
+  SubscribeMessage,
+  SymbolAddedMessage,
+  SymbolRemovedMessage,
+  SymbolUpdatedMessage,
+  UnsubscribeMessage,
+} from "./devtools/devtools-protocol.js";
+export {
+  enableDevtools,
+  enableDevtoolsAndConnect,
+  resetDevtoolsServerForTests,
+  waitForDevtoolsConnection,
+} from "./devtools/devtools-server.js";
+export type {
+  DevtoolsServerInfo,
+  EnableDevtoolsOptions,
+} from "./devtools/devtools-server.js";

package/src/diagnostics.ts

@@ -0,0 +1,150 @@
+import { getRenderNodeId } from "./debug/index.js";
+import { insertDiagnostic } from "./debug/trace-writer.js";
+import { getContext } from "./reactivity.js";
+import { getRenderStackSnapshot } from "./render-stack.js";
+import type { SourceLocation } from "./runtime/component.js";
+
+export interface DiagnosticStackEntry {
+  name: string;
+  renderNodeId?: number;
+  source?: SourceLocation;
+}
+
+export type DiagnosticSeverity = "info" | "warning" | "error";
+
+export interface Diagnostic {
+  id: string;
+  message: string;
+  severity: DiagnosticSeverity;
+  source?: SourceLocation;
+  componentStack?: DiagnosticStackEntry[];
+}
+
+export interface DiagnosticInput {
+  message: string;
+  severity?: DiagnosticSeverity;
+  source?: SourceLocation;
+  componentStack?: DiagnosticStackEntry[];
+}
+
+export interface DiagnosticHandle {
+  dismiss(): void;
+}
+
+export class DiagnosticsCollector {
+  private entries = new Map<string, Diagnostic>();
+  private order: string[] = [];
+
+  emit(input: DiagnosticInput): DiagnosticHandle {
+    const componentStack =
+      input.componentStack ??
+      getRenderStackSnapshot().map((entry) => ({
+        name: entry.displayName,
+        renderNodeId:
+          entry.context?.meta?.renderNode ?
+            getRenderNodeId(entry.context.meta.renderNode)
+          : undefined,
+        source: entry.source,
+      }));
+    const source = input.source ?? componentStack.at(-1)?.source ?? undefined;
+    const id = `diag-${this.order.length + 1}-${Date.now()}`;
+    const diagnostic: Diagnostic = {
+      id,
+      message: input.message,
+      severity: input.severity ?? "warning",
+      source,
+      componentStack,
+    };
+    this.entries.set(id, diagnostic);
+    this.order.push(id);
+
+    // Broadcast updated diagnostics
+    this.broadcast();
+
+    return {
+      dismiss: () => {
+        this.entries.delete(id);
+        // Broadcast updated diagnostics after dismissal
+        this.broadcast();
+      },
+    };
+  }
+
+  getDiagnostics() {
+    return this.order
+      .map((id) => this.entries.get(id))
+      .filter((entry): entry is Diagnostic => Boolean(entry));
+  }
+
+  private broadcast() {
+    const diagnostics = this.getDiagnostics();
+    for (const diagnostic of diagnostics) {
+      insertDiagnostic(
+        diagnostic.message,
+        diagnostic.severity,
+        diagnostic.source?.fileName,
+        diagnostic.source?.lineNumber,
+        diagnostic.source?.columnNumber,
+        diagnostic.componentStack ?
+          JSON.stringify(diagnostic.componentStack)
+        : undefined,
+      );
+    }
+  }
+}
+
+const DIAGNOSTICS_META_KEY = "diagnostics";
+
+export function attachDiagnosticsCollector(collector: DiagnosticsCollector) {
+  const context = getContext();
+  if (!context) return;
+  context.meta ??= {};
+  context.meta[DIAGNOSTICS_META_KEY] = collector;
+}
+
+function getDiagnosticsCollectorFromContext():
+  | DiagnosticsCollector
+  | undefined {
+  let context = getContext();
+  while (context) {
+    const collector = context.meta?.[DIAGNOSTICS_META_KEY] as
+      | DiagnosticsCollector
+      | undefined;
+    if (collector) return collector;
+    context = context.owner;
+  }
+  return undefined;
+}
+
+export function emitDiagnostic(input: DiagnosticInput): DiagnosticHandle {
+  const collector = getDiagnosticsCollectorFromContext();
+  if (!collector) {
+    return {
+      dismiss: () => undefined,
+    };
+  }
+  return collector.emit(input);
+}
+
+export function reportDiagnostics(collector: DiagnosticsCollector) {
+  const diagnostics = collector.getDiagnostics();
+  if (diagnostics.length === 0) return;
+
+  for (const diagnostic of diagnostics) {
+    const location =
+      diagnostic.source ?
+        ` (${diagnostic.source.fileName}:${diagnostic.source.lineNumber}:${diagnostic.source.columnNumber})`
+      : "";
+    const line = `${diagnostic.message}${location}`;
+    if (diagnostic.severity === "error") {
+      // eslint-disable-next-line no-console
+      console.error(line);
+    } else if (diagnostic.severity === "warning") {
+      // eslint-disable-next-line no-console
+      console.warn(line);
+    } else {
+      // eslint-disable-next-line no-console
+      console.log(line);
+    }
+  }
+}

package/src/index.ts

@@ -1,17 +1,11 @@
 export {
   TrackOpTypes,
   TriggerOpTypes,
-  computed,
   isProxy,
   isReactive,
   isRef,
   reactive,
-  ref,
-  shallowReactive,
-  shallowRef,
   toRaw,
-  toRef,
-  toRefs,
   track,
   trigger,
   watch,
@@ -28,6 +22,7 @@ export * from "./components/index.js";
 export * from "./content-slot.js";
 export * from "./context.js";
 export * from "./context/index.js";
+export * from "./diagnostics.js";
 export * from "./library-symbol-reference.js";
 export * from "./name-policy.js";
 export * from "./props-combinators.js";
@@ -45,4 +40,4 @@ export * from "./symbols/symbol-flow.js";
 export * from "./tap.js";
 export * from "./utils.js";
 export * from "./write-output.js";
-import "./debug.js";
+import "./debug/index.js";

package/src/print-hook.ts

@@ -0,0 +1,22 @@
+/**
+ * Print hook types and utilities.
+ * This is a separate file to avoid circular dependencies between render.ts and debug/render.ts.
+ */
+
+export const printHookTag = Symbol();
+
+export interface PrintHook {
+  [printHookTag]: true;
+  transform?(tree: RenderedTextTree): RenderedTextTree;
+  print?(
+    tree: RenderedTextTree,
+    print: (subtree: RenderedTextTree) => import("prettier").Doc,
+  ): import("prettier").Doc;
+  subtree: RenderedTextTree;
+}
+
+export function isPrintHook(type: unknown): type is PrintHook {
+  return typeof type === "object" && type !== null && printHookTag in type;
+}
+
+export type RenderedTextTree = (string | RenderedTextTree | PrintHook)[];

package/src/reactive-union-set.ts

@@ -1,14 +1,13 @@
 import {
   ITERATE_KEY,
   ReactiveFlags,
-  shallowReactive,
   shallowReadonly,
   track,
   TrackOpTypes,
   trigger,
   TriggerOpTypes,
 } from "@vue/reactivity";
-import { effect, untrack } from "./reactivity.js";
+import { effect, root, shallowReactive, untrack } from "./reactivity.js";
 
 export interface ReactiveUnionSetOptions<T> {
   onAdd?: OnReactiveSetAddCallback<T>;
@@ -129,28 +128,49 @@ export class ReactiveUnionSet<T> extends Set<T> {
      * that were added to the parent set.
      */
     const prevValues = new Map<T, T>();
-
-    effect(() => {
-      for (const [prevSourceValue, prevTargetValue] of prevValues) {
-        if (!subset.has(prevSourceValue)) {
-          untrack(() => onDelete?.(prevSourceValue));
-          prevValues.delete(prevSourceValue);
-          this.delete(prevTargetValue);
+    const itemDisposers = new Map<T, () => void>();
+
+    effect(
+      () => {
+        for (const [prevSourceValue, prevTargetValue] of prevValues) {
+          if (!subset.has(prevSourceValue)) {
+            untrack(() => onDelete?.(prevSourceValue));
+            prevValues.delete(prevSourceValue);
+            this.delete(prevTargetValue);
+            const disposer = itemDisposers.get(prevSourceValue);
+            if (disposer) {
+              disposer();
+              itemDisposers.delete(prevSourceValue);
+            }
+          }
         }
-      }
 
-      for (const value of subset) {
-        if (!prevValues.has(value)) {
-          if (onAdd) {
-            const added = untrack(() => onAdd(value));
-            prevValues.set(value, added);
-          } else {
-            this.add(value);
-            prevValues.set(value, value);
+        for (const value of subset) {
+          if (!prevValues.has(value)) {
+            if (onAdd) {
+              const added = untrack(() =>
+                root((disposer) => {
+                  const result = onAdd(value);
+                  itemDisposers.set(value, disposer);
+                  return result;
+                }),
+              );
+              prevValues.set(value, added);
+            } else {
+              this.add(value);
+              prevValues.set(value, value);
+            }
           }
         }
-      }
-    });
+      },
+      undefined,
+      {
+        debug: {
+          name: "reactiveUnionSet:subsetSync",
+          type: "collection",
+        },
+      },
+    );
   }
 
   createDerivedSet<U>(mapper: (value: T) => U | U[]) {
@@ -184,18 +204,27 @@ export class ReactiveUnionSet<T> extends Set<T> {
 
     this._indexes.push({
       add: (value: T) => {
-        effect((prev: U[] | U | undefined) => {
-          for (const id of [prev].flat()) {
-            unref(id as any);
-          }
+        effect(
+          (prev: U[] | U | undefined) => {
+            for (const id of [prev].flat()) {
+              unref(id as any);
+            }
 
-          const mappedValue = mapper(value);
-          for (const id of [mappedValue].flat()) {
-            ref(id as any);
-          }
+            const mappedValue = mapper(value);
+            for (const id of [mappedValue].flat()) {
+              ref(id as any);
+            }
 
-          return mappedValue;
-        });
+            return mappedValue;
+          },
+          undefined,
+          {
+            debug: {
+              name: `reactiveUnionSet:derived:${mapper.name || "mapper"}`,
+              type: "collection",
+            },
+          },
+        );
       },
       delete: (value: T) => {
         const mappedValue = mapper(value);
@@ -212,24 +241,36 @@ export class ReactiveUnionSet<T> extends Set<T> {
     const index = shallowReactive(new Map<U, T>());
     this._indexes.push({
       add: (value: T) => {
-        effect((oldValue) => {
-          if (oldValue) {
-            for (const id of [oldValue].flat()) {
-              index.delete(id as U);
+        type MappedValue = U extends readonly (infer InnerArr)[] ? InnerArr : U;
+        effect<MappedValue[]>(
+          (oldValue) => {
+            if (oldValue) {
+              for (const id of [oldValue].flat()) {
+                index.delete(id as U);
+              }
             }
-          }
 
-          // we filter to avoid overwriting existing values (first wins)
-          const mappedValues = [mapper(value)]
-            .flat()
-            .filter((v) => untrack(() => !index.has(v as U)));
+            // we filter to avoid overwriting existing values (first wins)
+            const mappedValues = [mapper(value)]
+              .flat()
+              .filter((v) =>
+                untrack(() => !index.has(v as U)),
+              ) as MappedValue[];
 
-          for (const id of mappedValues) {
-            index.set(id as U, value as any);
-          }
+            for (const id of mappedValues) {
+              index.set(id as U, value as any);
+            }
 
-          return mappedValues;
-        });
+            return mappedValues;
+          },
+          undefined as MappedValue[] | undefined,
+          {
+            debug: {
+              name: `reactiveUnionSet:index:${mapper.name || "mapper"}`,
+              type: "collection",
+            },
+          },
+        );
       },
       delete: (value: T) => {
         const mappedValue = mapper(value);