Make signals interoperable

Author: divdavem

src/computed.ts

@@ -6,6 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {
+  Consumer as InteropConsumer,
+  Signal as InteropSignal,
+  setActiveConsumer,
+} from './interop_lib';
 import {defaultEquals, ValueEqualityComparer} from './equality.js';
 import {
   consumerAfterComputation,
@@ -16,13 +21,18 @@ import {
   ReactiveNode,
   SIGNAL,
 } from './graph.js';
+import {CONSUMER_NODE, PRODUCER_NODE} from './interop';
 
 /**
  * A computation, which derives a value from a declarative reactive expression.
  *
  * `Computed`s are both producers and consumers of reactivity.
  */
-export interface ComputedNode<T> extends ReactiveNode, ValueEqualityComparer<T> {
+export interface ComputedNode<T>
+  extends ReactiveNode,
+    ValueEqualityComparer<T>,
+    InteropConsumer,
+    InteropSignal {
   /**
    * Current value of the computation, or one of the sentinel values above (`UNSET`, `COMPUTING`,
    * `ERROR`).
@@ -94,9 +104,11 @@ const ERRORED: any = /* @__PURE__ */ Symbol('ERRORED');
 // Note: Using an IIFE here to ensure that the spread assignment is not considered
 // a side-effect, ending up preserving `COMPUTED_NODE` and `REACTIVE_NODE`.
 // TODO: remove when https://github.com/evanw/esbuild/issues/3392 is resolved.
-const COMPUTED_NODE = /* @__PURE__ */ (() => {
+const COMPUTED_NODE: Omit<ComputedNode<unknown>, 'computation'> = /* @__PURE__ */ (() => {
   return {
     ...REACTIVE_NODE,
+    ...PRODUCER_NODE,
+    ...CONSUMER_NODE,
     value: UNSET,
     dirty: true,
     error: null,

src/graph.ts

@@ -6,19 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {
+  getActiveConsumer,
+  Consumer as InteropConsumer,
+  Signal as InteropSignal,
+  setActiveConsumer,
+} from './interop_lib';
+
 // Required as the signals library is in a separate package, so we need to explicitly ensure the
 // global `ngDevMode` type is defined.
 declare const ngDevMode: boolean | undefined;
 
-/**
- * The currently active consumer `ReactiveNode`, if running code in a reactive context.
- *
- * Change this via `setActiveConsumer`.
- */
-let activeConsumer: ReactiveNode | null = null;
 let inNotificationPhase = false;
 
-type Version = number & {__brand: 'Version'};
+export type Version = number & {__brand: 'Version'};
 
 /**
  * Global epoch counter. Incremented whenever a source signal is set.
@@ -32,16 +33,6 @@ let epoch: Version = 1 as Version;
  */
 export const SIGNAL = /* @__PURE__ */ Symbol('SIGNAL');
 
-export function setActiveConsumer(consumer: ReactiveNode | null): ReactiveNode | null {
-  const prev = activeConsumer;
-  activeConsumer = consumer;
-  return prev;
-}
-
-export function getActiveConsumer(): ReactiveNode | null {
-  return activeConsumer;
-}
-
 export function isInNotificationPhase(): boolean {
   return inNotificationPhase;
 }
@@ -53,7 +44,6 @@ export interface Reactive {
 export function isReactive(value: unknown): value is Reactive {
   return (value as Partial<Reactive>)[SIGNAL] !== undefined;
 }
-
 export const REACTIVE_NODE: ReactiveNode = {
   version: 0 as Version,
   lastCleanEpoch: 0 as Version,
@@ -62,6 +52,7 @@ export const REACTIVE_NODE: ReactiveNode = {
   producerLastReadVersion: undefined,
   producerIndexOfThis: undefined,
   nextProducerIndex: 0,
+  hasInteropSignalDep: false,
   liveConsumerNode: undefined,
   liveConsumerIndexOfThis: undefined,
   consumerAllowSignalWrites: false,
@@ -143,6 +134,11 @@ export interface ReactiveNode {
    */
   nextProducerIndex: number;
 
+  /**
+   * Whether this consumer has any interop signals as dependencies.
+   */
+  hasInteropSignalDep: boolean;
+
   /**
    * Array of consumers of this producer that are "live" (they require push notifications).
    *
@@ -180,6 +176,11 @@ export interface ReactiveNode {
    */
   consumerOnSignalRead(node: unknown): void;
 
+  /**
+   * Called when the signal is accessed.
+   */
+  producerOnAccess?(): void;
+
   /**
    * Called when the signal becomes "live"
    */
@@ -211,27 +212,32 @@ interface ProducerNode extends ReactiveNode {
 /**
  * Called by implementations when a producer's signal is read.
  */
-export function producerAccessed(node: ReactiveNode): void {
+export function producerAccessed<T>(node: ReactiveNode & InteropSignal): void {
   if (inNotificationPhase) {
     throw new Error(
       typeof ngDevMode !== 'undefined' && ngDevMode
         ? `Assertion error: signal read during notification phase`
         : '',
     );
   }
+  getActiveConsumer()?.addProducer(node);
+}
 
-  if (activeConsumer === null) {
-    // Accessed outside of a reactive context, so nothing to record.
-    return;
-  }
-
+export function internalProducerAccessed(
+  node: ReactiveNode,
+  activeConsumer: ReactiveNode & InteropConsumer,
+): void {
   activeConsumer.consumerOnSignalRead(node);
 
   // This producer is the `idx`th dependency of `activeConsumer`.
   const idx = activeConsumer.nextProducerIndex++;
 
   assertConsumerNode(activeConsumer);
 
+  if (node.hasInteropSignalDep) {
+    activeConsumer.hasInteropSignalDep = true;
+  }
+
   if (idx < activeConsumer.producerNode.length && activeConsumer.producerNode[idx] !== node) {
     // There's been a change in producers since the last execution of `activeConsumer`.
     // `activeConsumer.producerNode[idx]` holds a stale dependency which will be be removed and
@@ -275,7 +281,7 @@ export function producerIncrementEpoch(): void {
  * Ensure this producer's `version` is up-to-date.
  */
 export function producerUpdateValueVersion(node: ReactiveNode): void {
-  if (!node.dirty && node.lastCleanEpoch === epoch) {
+  if (!node.dirty && node.lastCleanEpoch === epoch && !node.hasInteropSignalDep) {
     // Even non-live consumers can skip polling if they previously found themselves to be clean at
     // the current epoch, since their dependencies could not possibly have changed (such a change
     // would've increased the epoch).
@@ -324,7 +330,10 @@ export function producerNotifyConsumers(node: ReactiveNode): void {
  * based on the current consumer context.
  */
 export function producerUpdatesAllowed(): boolean {
-  return activeConsumer?.consumerAllowSignalWrites !== false;
+  return (
+    (getActiveConsumer() as (InteropConsumer & ReactiveNode) | null)?.consumerAllowSignalWrites !==
+    false
+  );
 }
 
 export function consumerMarkDirty(node: ReactiveNode): void {
@@ -339,8 +348,13 @@ export function consumerMarkDirty(node: ReactiveNode): void {
  * Must be called by subclasses which represent reactive computations, before those computations
  * begin.
  */
-export function consumerBeforeComputation(node: ReactiveNode | null): ReactiveNode | null {
-  node && (node.nextProducerIndex = 0);
+export function consumerBeforeComputation(
+  node: (ReactiveNode & InteropConsumer) | null,
+): InteropConsumer | null {
+  if (node) {
+    node.nextProducerIndex = 0;
+    node.hasInteropSignalDep = false;
+  }
   return setActiveConsumer(node);
 }
 
@@ -352,7 +366,7 @@ export function consumerBeforeComputation(node: ReactiveNode | null): ReactiveNo
  */
 export function consumerAfterComputation(
   node: ReactiveNode | null,
-  prevConsumer: ReactiveNode | null,
+  prevConsumer: InteropConsumer | null,
 ): void {
   setActiveConsumer(prevConsumer);