WIP

Author: divdavem

packages/core/primitives/signals/src/graph.ts

@@ -28,7 +28,7 @@ let activeConsumer: ReactiveNode | null = null;
 let isAngularActive: boolean = false;
 let inNotificationPhase = false;
 
-const angularLibrary: ConsumerLibrary = {
+export const angularLibrary: ConsumerLibrary = {
   onActiveChange: (active) => {
     isAngularActive = active;
   },
@@ -50,9 +50,6 @@ let epoch: Version = 1 as Version;
  */
 export const SIGNAL = /* @__PURE__ */ Symbol('SIGNAL');
 
-const hasActiveConsumer = (): boolean =>
-  isAngularActive ? !!activeConsumer : interopHasActiveConsumer();
-
 export const setActiveConsumer = (consumer: ReactiveNode | null): (() => void) => {
   if ((activeConsumer === consumer && isAngularActive) || (!consumer && !hasActiveConsumer())) {
     return noop;
@@ -66,8 +63,11 @@ export const setActiveConsumer = (consumer: ReactiveNode | null): (() => void) =
   };
 };
 
-export function getActiveConsumer(): ReactiveNode | null {
-  return activeConsumer;
+export const hasActiveConsumer = (): boolean =>
+  isAngularActive ? !!activeConsumer : interopHasActiveConsumer();
+
+export function getAngularActiveConsumer(): ReactiveNode | null {
+  return isAngularActive ? activeConsumer : null;
 }
 
 export function isInNotificationPhase(): boolean {
@@ -276,7 +276,7 @@ export function producerAccessed<T>(node: ReactiveNode): void {
   }
 }
 
-function internalProducerAccessed(node: ReactiveNode, activeConsumer: ReactiveNode): void {
+export function internalProducerAccessed(node: ReactiveNode, activeConsumer: ReactiveNode): void {
   activeConsumer.consumerOnSignalRead(node);
 
   // This producer is the `idx`th dependency of `activeConsumer`.

packages/core/primitives/signals/src/interop.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import {
+  angularLibrary,
+  consumerMarkDirty,
+  getAngularActiveConsumer,
+  internalProducerAccessed,
+  producerUpdateValueVersion,
+  REACTIVE_NODE,
+  ReactiveNode,
+} from './graph';
+import {Watcher as InteropWatcher, WatchableSignal} from './interop_lib';
+
+function interopSignal<T>(signal: WatchableSignal): ReactiveNode {
+  const node: InteropSignalNode<T> = Object.create(INTEROP_SIGNAL_NODE);
+  node.watcher = signal.watchSignal(() => {
+    if (!node.dirty) {
+      consumerMarkDirty(node);
+    }
+  });
+  return node;
+}
+
+interface InteropSignalNode<T> extends ReactiveNode {
+  computing: boolean;
+  started: boolean;
+  watcher: InteropWatcher;
+}
+
+// Note: Using an IIFE here to ensure that the spread assignment is not considered
+// a side-effect, ending up preserving `INTEROP_SIGNAL_NODE` and `REACTIVE_NODE`.
+// TODO: remove when https://github.com/evanw/esbuild/issues/3392 is resolved.
+const INTEROP_SIGNAL_NODE: InteropSignalNode<unknown> = /* @__PURE__ */ (() => {
+  return {
+    ...REACTIVE_NODE,
+    dirty: true,
+    started: false,
+    computing: false,
+    kind: 'interop_signal',
+    watcher: null!,
+    hasInteropSignalDep: true,
+
+    producerMustRecompute(node: InteropSignalNode<unknown>): boolean {
+      return node.computing || !node.watcher.isUpToDate();
+    },
+
+    producerRecomputeValue(node: InteropSignalNode<unknown>): void {
+      if (node.computing) {
+        // Our computation somehow led to a cyclic read of itself.
+        throw new Error('Detected cycle in computations.');
+      }
+
+      node.computing = true;
+      let differentValue = true;
+      try {
+        differentValue = node.watcher.update();
+      } finally {
+        node.computing = false;
+        if (differentValue) {
+          node.version++;
+        }
+      }
+    },
+
+    producerOnAccess() {
+      producerUpdateValueVersion(this);
+    },
+
+    watched() {
+      if (!this.started) {
+        this.started = true;
+        this.watcher.start();
+        this.producerRecomputeValue(this);
+        this.dirty = false;
+      }
+    },
+
+    unwatched() {
+      if (this.started) {
+        this.started = false;
+        this.watcher.stop();
+      }
+    },
+  };
+})();
+
+const interopSignalMap = new WeakMap<WatchableSignal, ReactiveNode>();
+
+angularLibrary.producerAccessed = (signal: WatchableSignal) => {
+  const activeConsumer = getAngularActiveConsumer();
+  if (activeConsumer) {
+    let producer = interopSignalMap.get(signal);
+    if (!producer) {
+      producer = interopSignal(signal);
+      interopSignalMap.set(signal, producer);
+    }
+    producer.producerOnAccess?.();
+    internalProducerAccessed(producer, activeConsumer);
+  }
+};