@isograph/react 0.0.0-main-d319cfe5 → 0.0.0-main-ad899464

package/src/IsographEnvironment.tsx

@@ -1,41 +1,44 @@
 import { ParentCache } from '@isograph/react-disposable-state';
 import { RetainedQuery } from './garbageCollection';
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
 
 export type ComponentOrFieldName = string;
-type StringifiedArgs = string;
-type ComponentAndEncounteredRecordsCache = {
+export type StringifiedArgs = string;
+type ComponentCache = {
   [key: DataId]: {
-    [key: ComponentOrFieldName]: {
-      [key: StringifiedArgs]: ComponentAndEncounteredRecords;
-    };
+    [key: ComponentOrFieldName]: { [key: StringifiedArgs]: React.FC<any> };
   };
 };
 
-export type ComponentAndEncounteredRecords = {
-  component: React.FC<any>;
-  // null if we have never read before
-  encounteredRecordsDuringLastRead: Set<DataId> | null;
+type FragmentSubscription<TReadFromStore extends Object> = {
+  readonly kind: 'FragmentSubscription';
+  readonly callback: (
+    newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  ) => void;
+  /** The value read out from the previous call to readButDoNotEvaluate */
+  readonly encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>;
+  readonly fragmentReference: FragmentReference<TReadFromStore, any>;
 };
-
-type CallbackAndRecords = {
-  callback: () => void;
-  records: Set<DataId> | null;
+type AnyRecordSubscription = {
+  readonly kind: 'AnyRecords';
+  readonly callback: () => void;
 };
-type Subscriptions = Set<CallbackAndRecords>;
+
+type Subscription = FragmentSubscription<Object> | AnyRecordSubscription;
+type Subscriptions = Set<Subscription>;
 type SuspenseCache = { [index: string]: ParentCache<any> };
 
 export type IsographEnvironment = {
   store: IsographStore;
   networkFunction: IsographNetworkFunction;
   missingFieldHandler: MissingFieldHandler | null;
+  componentCache: ComponentCache;
   subscriptions: Subscriptions;
+  suspenseCache: SuspenseCache;
   retainedQueries: Set<RetainedQuery>;
   gcBuffer: Array<RetainedQuery>;
   gcBufferSize: number;
-
-  // These caches should be moved into the store somehow
-  componentAndEncounteredRecordsCache: ComponentAndEncounteredRecordsCache;
-  suspenseCache: SuspenseCache;
 };
 
 export type MissingFieldHandler = (
@@ -95,7 +98,7 @@ export function createIsographEnvironment(
     store,
     networkFunction,
     missingFieldHandler: missingFieldHandler ?? null,
-    componentAndEncounteredRecordsCache: {},
+    componentCache: {},
     subscriptions: new Set(),
     suspenseCache: {},
     retainedQueries: new Set(),

package/src/areEqualWithDeepComparison.ts

@@ -0,0 +1,78 @@
+export function areEqualWithDeepComparison(
+  oldItem: unknown,
+  newItem: unknown,
+): boolean {
+  if (newItem === null) {
+    return oldItem === null;
+  }
+
+  if (newItem === undefined) {
+    return oldItem === undefined;
+  }
+
+  if (Array.isArray(newItem)) {
+    if (!Array.isArray(oldItem)) {
+      return false;
+    }
+
+    return areEqualArraysWithDeepComparison(oldItem, newItem);
+  }
+
+  if (typeof newItem === 'object') {
+    if (typeof oldItem !== 'object') {
+      return false;
+    }
+
+    if (oldItem === null) {
+      return false;
+    }
+
+    return areEqualObjectsWithDeepComparison(oldItem, newItem);
+  }
+
+  return newItem === oldItem;
+}
+
+export function areEqualArraysWithDeepComparison(
+  oldItems: ReadonlyArray<unknown>,
+  newItems: ReadonlyArray<unknown>,
+): boolean {
+  if (newItems.length !== oldItems.length) {
+    return false;
+  }
+
+  for (let i = 0; i < newItems.length; i++) {
+    if (!areEqualWithDeepComparison(oldItems[i], newItems[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function areEqualObjectsWithDeepComparison(
+  oldItemObject: object,
+  newItemObject: object,
+): boolean {
+  const oldKeys = Object.keys(oldItemObject);
+  const newKeys = Object.keys(newItemObject);
+
+  if (oldKeys.length !== newKeys.length) {
+    return false;
+  }
+
+  for (const oldKey of oldKeys) {
+    if (!(oldKey in newItemObject)) {
+      return false;
+    }
+    // @ts-expect-error
+    const oldValue = oldItemObject[oldKey];
+    // @ts-expect-error
+    const newValue = newItemObject[oldKey];
+
+    if (!areEqualWithDeepComparison(oldValue, newValue)) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/cache.ts

@@ -28,6 +28,9 @@ import {
 } from './entrypoint';
 import { ReaderLinkedField, ReaderScalarField } from './reader';
 import { Argument, ArgumentValue } from './util';
+import { WithEncounteredRecords, readButDoNotEvaluate } from './read';
+import { FragmentReference } from './FragmentReference';
+import { areEqualObjectsWithDeepComparison } from './areEqualWithDeepComparison';
 
 declare global {
   interface Window {
@@ -222,22 +225,41 @@ function normalizeData(
   return encounteredIds;
 }
 
-export function subscribe(
+export function subscribeToAnyChange(
   environment: IsographEnvironment,
-  encounteredRecords: Set<DataId> | null,
   callback: () => void,
 ): () => void {
-  const callbackAndRecords = {
+  const subscription = {
+    kind: 'AnyRecords',
     callback,
-    records: encounteredRecords,
-  };
-  environment.subscriptions.add(callbackAndRecords);
-  return () => environment.subscriptions.delete(callbackAndRecords);
+  } as const;
+  environment.subscriptions.add(subscription);
+  return () => environment.subscriptions.delete(subscription);
+}
+
+export function subscribe<TReadFromStore extends Object>(
+  environment: IsographEnvironment,
+  encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  fragmentReference: FragmentReference<TReadFromStore, any>,
+  callback: (
+    newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  ) => void,
+): () => void {
+  const fragmentSubscription = {
+    kind: 'FragmentSubscription',
+    callback,
+    encounteredDataAndRecords,
+    fragmentReference,
+  } as const;
+  // @ts-expect-error
+  environment.subscriptions.add(fragmentSubscription);
+  // @ts-expect-error
+  return () => environment.subscriptions.delete(fragmentSubscription);
 }
 
 export function onNextChange(environment: IsographEnvironment): Promise<void> {
   return new Promise((resolve) => {
-    const unsubscribe = subscribe(environment, null, () => {
+    const unsubscribe = subscribeToAnyChange(environment, () => {
       unsubscribe();
       resolve();
     });
@@ -248,11 +270,57 @@ function callSubscriptions(
   environment: IsographEnvironment,
   recordsEncounteredWhenNormalizing: Set<DataId>,
 ) {
-  environment.subscriptions.forEach(({ callback, records }) => {
-    if (records === null) {
-      callback();
-    } else if (hasOverlappingIds(recordsEncounteredWhenNormalizing, records)) {
-      callback();
+  environment.subscriptions.forEach((subscription) => {
+    switch (subscription.kind) {
+      case 'FragmentSubscription': {
+        // TODO if there are multiple components subscribed to the same
+        // fragment, we will call readButNotEvaluate multiple times. We
+        // should fix that.
+        if (
+          hasOverlappingIds(
+            recordsEncounteredWhenNormalizing,
+            subscription.encounteredDataAndRecords.encounteredRecords,
+          )
+        ) {
+          const newEncounteredDataAndRecords = readButDoNotEvaluate(
+            environment,
+            subscription.fragmentReference,
+          );
+
+          if (
+            !areEqualObjectsWithDeepComparison(
+              subscription.encounteredDataAndRecords.item,
+              newEncounteredDataAndRecords.item,
+            )
+          ) {
+            if (typeof window !== 'undefined' && window.__LOG) {
+              console.log('Deep equality - No', {
+                fragmentReference: subscription.fragmentReference,
+                old: subscription.encounteredDataAndRecords.item,
+                new: newEncounteredDataAndRecords.item,
+              });
+            }
+            // TODO deep compare values
+            subscription.callback(newEncounteredDataAndRecords);
+          } else {
+            if (typeof window !== 'undefined' && window.__LOG) {
+              console.log('Deep equality - Yes', {
+                fragmentReference: subscription.fragmentReference,
+                old: subscription.encounteredDataAndRecords.item,
+              });
+            }
+          }
+        }
+        return;
+      }
+      case 'AnyRecords': {
+        return subscription.callback();
+      }
+      default: {
+        // @ts-expect-error(6133)
+        const _: never = subscription;
+        throw new Error('Unexpected case');
+      }
     }
   });
 }

package/src/componentCache.ts

@@ -1,61 +1,50 @@
 import { stableCopy } from './cache';
-import { RefetchQueryArtifactWrapper } from './entrypoint';
-import {
-  IsographEnvironment,
-  DataId,
-  ComponentAndEncounteredRecords,
-} from './IsographEnvironment';
-import { readButDoNotEvaluate } from './read';
-import { ReaderArtifact } from './reader';
-import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+import { IsographEnvironment } from './IsographEnvironment';
+import { FragmentReference } from './FragmentReference';
+import { useReadAndSubscribe } from './useReadAndSubscribe';
 
 export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
-  rootId: DataId,
   componentName: string,
-  readerArtifact: ReaderArtifact<any, any>,
-  variables: { [key: string]: string },
-  resolverRefetchQueries: RefetchQueryArtifactWrapper[],
+  fragmentReference: FragmentReference<any, any>,
 ): React.FC<any> {
-  const cachedComponentsById = environment.componentAndEncounteredRecordsCache;
-  const stringifiedArgs = JSON.stringify(stableCopy(variables));
-  cachedComponentsById[rootId] = cachedComponentsById[rootId] ?? {};
-  const componentsByName = cachedComponentsById[rootId];
+  // cachedComponentsById is a three layer cache: id, then component name, then
+  // stringified args. These three, together, uniquely identify a read at a given
+  // time.
+  const cachedComponentsById = environment.componentCache;
+
+  cachedComponentsById[fragmentReference.root] =
+    cachedComponentsById[fragmentReference.root] ?? {};
+  const componentsByName = cachedComponentsById[fragmentReference.root];
+
   componentsByName[componentName] = componentsByName[componentName] ?? {};
   const byArgs = componentsByName[componentName];
+
+  const stringifiedArgs = JSON.stringify(
+    stableCopy(fragmentReference.variables),
+  );
   byArgs[stringifiedArgs] =
     byArgs[stringifiedArgs] ??
-    ((): ComponentAndEncounteredRecords => {
+    (() => {
       function Component(additionalRuntimeProps: { [key: string]: any }) {
-        const { item: data, encounteredRecords } = readButDoNotEvaluate(
-          environment,
-          {
-            kind: 'FragmentReference',
-            readerArtifact: readerArtifact,
-            root: rootId,
-            variables,
-            nestedRefetchQueries: resolverRefetchQueries,
-          },
-          byArgs[stringifiedArgs],
-        );
-
-        useRerenderWhenEncounteredRecordChanges(
-          environment,
-          encounteredRecords,
-        );
+        const data = useReadAndSubscribe(environment, fragmentReference);
 
         if (typeof window !== 'undefined' && window.__LOG) {
-          console.log('Component re-rendered: ' + componentName + ' ' + rootId);
+          console.log(
+            'Component re-rendered: ' +
+              componentName +
+              ' ' +
+              fragmentReference.root,
+          );
         }
 
-        return readerArtifact.resolver(data, additionalRuntimeProps);
+        return fragmentReference.readerArtifact.resolver(
+          data,
+          additionalRuntimeProps,
+        );
       }
-      Component.displayName = `${componentName} (id: ${rootId}) @component`;
-      return {
-        component: Component,
-        encounteredRecordsDuringLastRead: null,
-      };
+      Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
+      return Component;
     })();
-
-  return byArgs[stringifiedArgs].component;
+  return byArgs[stringifiedArgs];
 }

package/src/index.ts

@@ -47,7 +47,7 @@ export {
   RefetchQueryArtifact,
   RefetchQueryArtifactWrapper,
 } from './entrypoint';
-export { read, readButDoNotEvaluate } from './read';
+export { readButDoNotEvaluate } from './read';
 export { useResult } from './useResult';
 export { type FragmentReference } from './FragmentReference';
 export { useLazyReference } from './useLazyReference';
@@ -58,4 +58,4 @@ export {
   ArgumentValue,
   Arguments,
 } from './util';
-export { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+export { useRerenderOnChange } from './useRerenderOnChange';

package/src/read.ts

@@ -4,7 +4,6 @@ import { RefetchQueryArtifactWrapper } from './entrypoint';
 import { FragmentReference } from './FragmentReference';
 import {
   assertLink,
-  ComponentAndEncounteredRecords,
   DataId,
   defaultMissingFieldHandler,
   IsographEnvironment,
@@ -16,52 +15,9 @@ export type WithEncounteredRecords<T> = {
   item: T;
 };
 
-export function read<TReadFromStore extends Object, TClientFieldValue>(
-  environment: IsographEnvironment,
-  fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
-): WithEncounteredRecords<TClientFieldValue> {
-  const variant = fragmentReference.readerArtifact.variant;
-  if (variant.kind === 'Eager') {
-    const mutableEncounteredRecords = new Set<DataId>();
-    const data = readData(
-      environment,
-      fragmentReference.readerArtifact.readerAst,
-      fragmentReference.root,
-      fragmentReference.variables ?? {},
-      fragmentReference.nestedRefetchQueries,
-      mutableEncounteredRecords,
-    );
-    if (data.kind === 'MissingData') {
-      throw onNextChange(environment);
-    } else {
-      return {
-        encounteredRecords: mutableEncounteredRecords,
-        // @ts-expect-error This not properly typed yet
-        item: fragmentReference.readerArtifact.resolver(data.data),
-      };
-    }
-  } else if (variant.kind === 'Component') {
-    return {
-      // @ts-ignore
-      item: getOrCreateCachedComponent(
-        environment,
-        fragmentReference.root,
-        variant.componentName,
-        fragmentReference.readerArtifact,
-        fragmentReference.variables ?? {},
-        fragmentReference.nestedRefetchQueries,
-      ),
-      encounteredRecords: new Set(),
-    };
-  }
-  // Why can't Typescript realize that this is unreachable??
-  throw new Error('This is unreachable');
-}
-
 export function readButDoNotEvaluate<TReadFromStore extends Object>(
   environment: IsographEnvironment,
   reference: FragmentReference<TReadFromStore, unknown>,
-  encounteredRecordCache: ComponentAndEncounteredRecords,
 ): WithEncounteredRecords<TReadFromStore> {
   const mutableEncounteredRecords = new Set<DataId>();
   const response = readData(
@@ -78,42 +34,13 @@ export function readButDoNotEvaluate<TReadFromStore extends Object>(
   if (response.kind === 'MissingData') {
     throw onNextChange(environment);
   } else {
-    const encounteredRecords = compareAndUpdateEncounteredRecords(
-      encounteredRecordCache,
-      mutableEncounteredRecords,
-    );
-
     return {
-      encounteredRecords,
+      encounteredRecords: mutableEncounteredRecords,
       item: response.data,
     };
   }
 }
 
-function compareAndUpdateEncounteredRecords(
-  encounteredRecordCache: ComponentAndEncounteredRecords,
-  newEncounteredRecords: Set<DataId>,
-): Set<DataId> {
-  const { encounteredRecordsDuringLastRead } = encounteredRecordCache;
-  if (
-    encounteredRecordsDuringLastRead == null ||
-    encounteredRecordsDuringLastRead.size != newEncounteredRecords.size
-  ) {
-    encounteredRecordCache.encounteredRecordsDuringLastRead =
-      newEncounteredRecords;
-    return newEncounteredRecords;
-  } else {
-    for (const item of newEncounteredRecords) {
-      if (!encounteredRecordsDuringLastRead.has(item)) {
-        encounteredRecordCache.encounteredRecordsDuringLastRead =
-          newEncounteredRecords;
-        return newEncounteredRecords;
-      }
-    }
-    return encounteredRecordsDuringLastRead;
-  }
-}
-
 type ReadDataResult<TReadFromStore> =
   | {
       kind: 'Success';
@@ -276,9 +203,6 @@ function readData<TReadFromStore>(
           [],
           mutableEncounteredRecords,
         );
-        if (typeof window !== 'undefined' && window.__LOG) {
-          console.log('refetch field data', data, field);
-        }
         if (data.kind === 'MissingData') {
           return {
             kind: 'MissingData',
@@ -319,9 +243,6 @@ function readData<TReadFromStore>(
           [],
           mutableEncounteredRecords,
         );
-        if (typeof window !== 'undefined' && window.__LOG) {
-          console.log('refetch field data', data, field);
-        }
         if (data.kind === 'MissingData') {
           return {
             kind: 'MissingData',
@@ -376,11 +297,14 @@ function readData<TReadFromStore>(
         } else if (variant.kind === 'Component') {
           target[field.alias] = getOrCreateCachedComponent(
             environment,
-            root,
             variant.componentName,
-            field.readerArtifact,
-            variables,
-            resolverRefetchQueries,
+            {
+              kind: 'FragmentReference',
+              readerArtifact: field.readerArtifact,
+              root,
+              variables,
+              nestedRefetchQueries: resolverRefetchQueries,
+            } as const,
           );
         }
         break;

package/src/reader.ts

@@ -5,10 +5,9 @@ import { Arguments } from './util';
 // non-@component and refetch resolvers
 export type ReaderArtifact<TReadFromStore extends Object, TClientFieldValue> = {
   kind: 'ReaderArtifact';
-  // The DataID of the parent + the fieldName + the variables are enough
-  // to uniquely identify a call to read(...) at a given time.
   fieldName: ComponentOrFieldName;
   readerAst: ReaderAst<TReadFromStore>;
+  // TODO move resolver into the variant
   resolver: (data: TReadFromStore, runtimeProps: any) => TClientFieldValue;
   variant: ReaderResolverVariant;
 };

package/src/useReadAndSubscribe.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { FragmentReference } from './FragmentReference';
+import { IsographEnvironment } from './IsographEnvironment';
+import { readButDoNotEvaluate } from './read';
+import { useRerenderOnChange } from './useRerenderOnChange';
+
+/**
+ * Read the data from a fragment reference and subscribe to updates.
+ * Does not pass the data to the fragment reference's resolver function.
+ */
+export function useReadAndSubscribe<TReadFromStore extends Object>(
+  environment: IsographEnvironment,
+  fragmentReference: FragmentReference<TReadFromStore, any>,
+): TReadFromStore {
+  const [readOutDataAndRecords, setReadOutDataAndRecords] = useState(() =>
+    readButDoNotEvaluate(environment, fragmentReference),
+  );
+  useRerenderOnChange(
+    environment,
+    readOutDataAndRecords,
+    fragmentReference,
+    setReadOutDataAndRecords,
+  );
+  return readOutDataAndRecords.item;
+}

package/src/useRerenderOnChange.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { IsographEnvironment } from './IsographEnvironment';
+import { subscribe } from './cache';
+import { WithEncounteredRecords } from './read';
+import { FragmentReference } from './FragmentReference';
+
+// TODO add unit tests for this. Add integration tests that test
+// behavior when the encounteredRecords underneath a fragment change.
+export function useRerenderOnChange<TReadFromStore extends Object>(
+  environment: IsographEnvironment,
+  encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
+  fragmentReference: FragmentReference<any, any>,
+  setEncounteredDataAndRecords: (
+    data: WithEncounteredRecords<TReadFromStore>,
+  ) => void,
+) {
+  useEffect(() => {
+    return subscribe(
+      environment,
+      encounteredDataAndRecords,
+      fragmentReference,
+      (newEncounteredDataAndRecords) => {
+        setEncounteredDataAndRecords(newEncounteredDataAndRecords);
+      },
+    );
+    // Note: this is an empty array on purpose:
+    // - the fragment reference is stable for the life of the component
+    // - ownership of encounteredDataAndRecords is transferred into the
+    //   environment
+    // - though maybe we need to include setEncounteredDataAndRecords in
+    //   the dependency array
+  }, []);
+}

package/src/useResult.ts

@@ -1,19 +1,26 @@
 import { useIsographEnvironment } from './IsographEnvironmentProvider';
-import { read } from './read';
 import { FragmentReference } from './FragmentReference';
-import { useRerenderWhenEncounteredRecordChanges } from './useRerenderWhenEncounteredRecordChanges';
+import { getOrCreateCachedComponent } from './componentCache';
+import { useReadAndSubscribe } from './useReadAndSubscribe';
 
 export function useResult<TReadFromStore extends Object, TClientFieldValue>(
   fragmentReference: FragmentReference<TReadFromStore, TClientFieldValue>,
 ): TClientFieldValue {
   const environment = useIsographEnvironment();
 
-  const { item: data, encounteredRecords } = read(
-    environment,
-    fragmentReference,
-  );
-
-  useRerenderWhenEncounteredRecordChanges(environment, encounteredRecords);
-
-  return data;
+  switch (fragmentReference.readerArtifact.variant.kind) {
+    case 'Component': {
+      // @ts-expect-error
+      return getOrCreateCachedComponent(
+        environment,
+        fragmentReference.readerArtifact.variant.componentName,
+        fragmentReference,
+      );
+    }
+    case 'Eager': {
+      const data = useReadAndSubscribe(environment, fragmentReference);
+      // @ts-expect-error resolver is incorrectly typed in ReaderArtifact
+      return fragmentReference.readerArtifact.resolver(data);
+    }
+  }
 }

package/dist/useRerenderWhenEncounteredRecordChanges.d.ts

@@ -1,2 +0,0 @@
-import { DataId, IsographEnvironment } from './IsographEnvironment';
-export declare function useRerenderWhenEncounteredRecordChanges(environment: IsographEnvironment, encounteredRecords: Set<DataId>): void;

package/dist/useRerenderWhenEncounteredRecordChanges.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRerenderWhenEncounteredRecordChanges = void 0;
-const react_1 = require("react");
-const cache_1 = require("./cache");
-// TODO add unit tests for this. Add integration tests that test
-// behavior when the encounteredRecords underneath a fragment change.
-function useRerenderWhenEncounteredRecordChanges(environment, encounteredRecords) {
-    const [, setState] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        return (0, cache_1.subscribe)(environment, encounteredRecords, () => {
-            return setState({});
-        });
-    }, [encounteredRecords]);
-}
-exports.useRerenderWhenEncounteredRecordChanges = useRerenderWhenEncounteredRecordChanges;

package/src/useRerenderWhenEncounteredRecordChanges.ts

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-import { DataId, IsographEnvironment } from './IsographEnvironment';
-import { subscribe } from './cache';
-
-// TODO add unit tests for this. Add integration tests that test
-// behavior when the encounteredRecords underneath a fragment change.
-export function useRerenderWhenEncounteredRecordChanges(
-  environment: IsographEnvironment,
-  encounteredRecords: Set<DataId>,
-) {
-  const [, setState] = useState<object | void>();
-  useEffect(() => {
-    return subscribe(environment, encounteredRecords, () => {
-      return setState({});
-    });
-  }, [encounteredRecords]);
-}