@isograph/react 0.2.0 → 0.3.1

package/dist/react/useResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResult.d.ts","sourceRoot":"","sources":["../../src/react/useResult.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,cAAc,EAEf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,2BAA2B,EAC5B,MAAM,cAAc,CAAC;AAKtB,wBAAgB,SAAS,CACvB,cAAc,SAAS,qBAAqB,EAC5C,iBAAiB,EAEjB,iBAAiB,EAAE,iBAAiB,CAAC,cAAc,EAAE,iBAAiB,CAAC,EACvE,4BAA4B,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,GAAG,IAAI,GACzE,iBAAiB,CA8CnB;AAED,wBAAgB,yBAAyB,CACvC,cAAc,EAAE,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,EACzC,qBAAqB,EAAE,2BAA2B,QAWnD"}

package/dist/react/useResult.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maybeUnwrapNetworkRequest = exports.useResult = void 0;
-const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
+exports.useResult = useResult;
+exports.maybeUnwrapNetworkRequest = maybeUnwrapNetworkRequest;
 const componentCache_1 = require("../core/componentCache");
-const useReadAndSubscribe_1 = require("./useReadAndSubscribe");
-const read_1 = require("../core/read");
 const PromiseWrapper_1 = require("../core/PromiseWrapper");
+const read_1 = require("../core/read");
+const startUpdate_1 = require("../core/startUpdate");
+const IsographEnvironmentProvider_1 = require("../react/IsographEnvironmentProvider");
+const useReadAndSubscribe_1 = require("./useReadAndSubscribe");
 function useResult(fragmentReference, partialNetworkRequestOptions) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
     const networkRequestOptions = (0, read_1.getNetworkRequestOptionsWithDefaults)(partialNetworkRequestOptions);
@@ -14,15 +16,19 @@ function useResult(fragmentReference, partialNetworkRequestOptions) {
     switch (readerWithRefetchQueries.readerArtifact.kind) {
         case 'ComponentReaderArtifact': {
             // @ts-expect-error
-            return (0, componentCache_1.getOrCreateCachedComponent)(environment, readerWithRefetchQueries.readerArtifact.componentName, fragmentReference, networkRequestOptions);
+            return (0, componentCache_1.getOrCreateCachedComponent)(environment, readerWithRefetchQueries.readerArtifact.fieldName, fragmentReference, networkRequestOptions);
         }
         case 'EagerReaderArtifact': {
-            const data = (0, useReadAndSubscribe_1.useReadAndSubscribe)(fragmentReference, networkRequestOptions);
-            return readerWithRefetchQueries.readerArtifact.resolver(data);
+            const data = (0, useReadAndSubscribe_1.useReadAndSubscribe)(fragmentReference, networkRequestOptions, readerWithRefetchQueries.readerArtifact.readerAst);
+            const param = Object.assign({ data: data, parameters: fragmentReference.variables }, (readerWithRefetchQueries.readerArtifact.hasUpdatable
+                ? {
+                    startUpdate: (0, startUpdate_1.getOrCreateCachedStartUpdate)(environment, fragmentReference, readerWithRefetchQueries.readerArtifact.fieldName),
+                }
+                : undefined));
+            return readerWithRefetchQueries.readerArtifact.resolver(param);
         }
     }
 }
-exports.useResult = useResult;
 function maybeUnwrapNetworkRequest(networkRequest, networkRequestOptions) {
     const state = (0, PromiseWrapper_1.getPromiseState)(networkRequest);
     if (state.kind === 'Err' && networkRequestOptions.throwOnNetworkError) {
@@ -33,4 +39,3 @@ function maybeUnwrapNetworkRequest(networkRequest, networkRequestOptions) {
         throw state.promise;
     }
 }
-exports.maybeUnwrapNetworkRequest = maybeUnwrapNetworkRequest;

package/isograph.config.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../isograph-compiler/isograph-config-schema.json",
+  "project_root": "./src/tests",
+  "schema": "./schema.graphql",
+  "options": {
+    "on_invalid_id_type": "error"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -8,27 +8,32 @@
   "author": "Isograph Labs",
   "license": "MIT",
   "scripts": {
-    "compile": "rm -rf dist/* && tsc -p tsconfig.pkg.json",
+    "compile-typescript": "rm -rf dist/* && tsc -p tsconfig.pkg.json",
     "compile-watch": "tsc -p tsconfig.pkg.json --watch",
     "test": "vitest run",
     "test-watch": "vitest watch",
     "coverage": "vitest run --coverage",
-    "prepack": "yarn run test && yarn run compile",
-    "tsc": "tsc"
+    "prepack": "pnpm run test && pnpm run compile-typescript",
+    "tsc": "tsc",
+    "tsc-force": "tsc --build --clean && tsc --build --force",
+    "iso": "cross-env ../../target/debug/isograph_cli --config ./isograph.config.json",
+    "iso-watch": "cross-env ../../target/debug/isograph_cli --config ./isograph.config.json --watch"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.2.0",
+    "@isograph/disposable-types": "*",
     "@isograph/react-disposable-state": "*",
     "@isograph/reference-counted-pointer": "*"
   },
   "peerDependencies": {
-    "react": "18.2.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.31",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/react": "18.3.1",
     "react-test-renderer": "^18.2.0",
-    "vitest": "^0.29.8",
-    "typescript": "^5.0.3"
+    "typescript": "5.6.3",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-commonjs": "^0.10.1"
   },
   "repository": {
     "type": "git",

package/{src/tests/schema.graphql → schema.graphql}

@@ -2,6 +2,7 @@ type Query {
   me: Economist!
   you: Economist!
   node(id: ID!): Node
+  query: Query!
 }
 
 type Economist implements Node {

package/src/core/FragmentReference.ts

@@ -1,37 +1,64 @@
-import { DataId } from './IsographEnvironment';
 import { ReaderWithRefetchQueries } from '../core/entrypoint';
+import { stableCopy } from './cache';
+import { type Link } from './IsographEnvironment';
 import { PromiseWrapper } from './PromiseWrapper';
+import type { StartUpdate } from './reader';
 
 // TODO type this better
-export type VariableValue = string | number | boolean | null | object;
+export type VariableValue =
+  | string
+  | number
+  | boolean
+  | null
+  | {
+      readonly [index: string]: VariableValue;
+    }
+  | VariableValue[];
 
 export type Variables = { readonly [index: string]: VariableValue };
 
+export type UnknownTReadFromStore = {
+  parameters: object;
+  data: object;
+  startUpdate?: StartUpdate<object>;
+};
+
+export type ExtractData<T> = T extends {
+  data: infer D extends object;
+}
+  ? D
+  : never;
+
+export type ExtractParameters<T> = T extends {
+  parameters: infer P extends Variables;
+}
+  ? P
+  : Variables;
+
+export type ExtractStartUpdate<
+  T extends {
+    startUpdate?: StartUpdate<object>;
+  },
+> = T['startUpdate'];
+
 export type FragmentReference<
-  TReadFromStore extends Object,
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
 > = {
   readonly kind: 'FragmentReference';
   readonly readerWithRefetchQueries: PromiseWrapper<
     ReaderWithRefetchQueries<TReadFromStore, TClientFieldValue>
   >;
-  readonly root: DataId;
-  readonly variables: Variables | null;
+  readonly root: Link;
+  readonly variables: ExtractParameters<TReadFromStore>;
   readonly networkRequest: PromiseWrapper<void, any>;
 };
 
+export type StableIdForFragmentReference = string;
+
 export function stableIdForFragmentReference(
   fragmentReference: FragmentReference<any, any>,
-): string {
-  return `${fragmentReference.root}/TODO_FRAGMENT_NAME/${serializeVariables(fragmentReference.variables ?? {})}`;
-}
-
-function serializeVariables(variables: Variables) {
-  let s = '';
-  const keys = Object.keys(variables);
-  keys.sort();
-  for (const key of keys) {
-    s += `${key}:${variables[key]},`;
-  }
-  return s;
+  fieldName: string,
+): StableIdForFragmentReference {
+  return `${fragmentReference.root.__typename}/${fragmentReference.root.__link}/${fieldName}/${JSON.stringify(stableCopy(fragmentReference.variables))}`;
 }

package/src/core/IsographEnvironment.ts

@@ -1,42 +1,61 @@
 import { ParentCache } from '@isograph/react-disposable-state';
+import { IsographEntrypoint } from './entrypoint';
+import {
+  FragmentReference,
+  Variables,
+  type StableIdForFragmentReference,
+  type UnknownTReadFromStore,
+} from './FragmentReference';
 import { RetainedQuery } from './garbageCollection';
-import { WithEncounteredRecords } from './read';
-import { FragmentReference, Variables } from './FragmentReference';
+import { LogFunction, WrappedLogFunction } from './logging';
 import { PromiseWrapper, wrapPromise } from './PromiseWrapper';
-import { IsographEntrypoint } from './entrypoint';
+import { WithEncounteredRecords } from './read';
+import type { ReaderAst, StartUpdate } from './reader';
 
 export type ComponentOrFieldName = string;
 export type StringifiedArgs = string;
-type ComponentCache = {
-  [key: DataId]: {
-    [key: ComponentOrFieldName]: { [key: StringifiedArgs]: React.FC<any> };
-  };
+
+export type FieldCache<T> = {
+  [key: StableIdForFragmentReference]: T;
 };
 
-export 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>;
+export type FragmentSubscription<TReadFromStore extends UnknownTReadFromStore> =
+  {
+    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>;
+    readonly readerAst: ReaderAst<TReadFromStore>;
+  };
+
+export type AnyChangesToRecordSubscription = {
+  readonly kind: 'AnyChangesToRecord';
+  readonly callback: () => void;
+  readonly recordLink: Link;
 };
-type AnyRecordSubscription = {
+
+export type AnyRecordSubscription = {
   readonly kind: 'AnyRecords';
   readonly callback: () => void;
 };
 
-type Subscription = FragmentSubscription<Object> | AnyRecordSubscription;
-type Subscriptions = Set<Subscription>;
+export type Subscription =
+  | FragmentSubscription<any>
+  | AnyChangesToRecordSubscription
+  | AnyRecordSubscription;
+export type Subscriptions = Set<Subscription>;
 // Should this be a map?
-type CacheMap<T> = { [index: string]: ParentCache<T> };
+export type CacheMap<T> = { [index: string]: ParentCache<T> };
 
 export type IsographEnvironment = {
   readonly store: IsographStore;
   readonly networkFunction: IsographNetworkFunction;
   readonly missingFieldHandler: MissingFieldHandler | null;
-  readonly componentCache: ComponentCache;
+  readonly componentCache: FieldCache<React.FC<any>>;
+  readonly eagerReaderCache: FieldCache<StartUpdate<any> | undefined>;
   readonly subscriptions: Subscriptions;
   // N.B. this must be <any, any>, but all *usages* of this should go through
   // a function that adds type parameters.
@@ -44,16 +63,17 @@ export type IsographEnvironment = {
   // TODO make this a CacheMap and add GC
   readonly entrypointArtifactCache: Map<
     string,
-    PromiseWrapper<IsographEntrypoint<any, any>>
+    PromiseWrapper<IsographEntrypoint<any, any, any>>
   >;
   readonly retainedQueries: Set<RetainedQuery>;
   readonly gcBuffer: Array<RetainedQuery>;
   readonly gcBufferSize: number;
+  readonly loggers: Set<WrappedLogFunction>;
 };
 
 export type MissingFieldHandler = (
   storeRecord: StoreRecord,
-  root: DataId,
+  root: Link,
   fieldName: string,
   arguments_: { [index: string]: any } | null,
   variables: Variables | null,
@@ -66,6 +86,7 @@ export type IsographNetworkFunction = (
 
 export type Link = {
   readonly __link: DataId;
+  readonly __typename: TypeName;
 };
 
 export type DataTypeValue =
@@ -89,60 +110,54 @@ export type StoreRecord = {
   readonly id?: DataId;
 };
 
+export type TypeName = string;
 export type DataId = string;
 
 export const ROOT_ID: DataId & '__ROOT' = '__ROOT';
 
 export type IsographStore = {
-  [index: DataId]: StoreRecord | null;
-  readonly __ROOT: StoreRecord;
+  [index: TypeName]: {
+    [index: DataId]: StoreRecord | null;
+  } | null;
+  readonly Query: {
+    readonly __ROOT: StoreRecord;
+  };
 };
 
 const DEFAULT_GC_BUFFER_SIZE = 10;
 export function createIsographEnvironment(
   store: IsographStore,
   networkFunction: IsographNetworkFunction,
-  missingFieldHandler?: MissingFieldHandler,
+  missingFieldHandler?: MissingFieldHandler | null,
+  logFunction?: LogFunction | null,
 ): IsographEnvironment {
+  logFunction?.({
+    kind: 'EnvironmentCreated',
+  });
   return {
     store,
     networkFunction,
     missingFieldHandler: missingFieldHandler ?? null,
     componentCache: {},
+    eagerReaderCache: {},
     subscriptions: new Set(),
     fragmentCache: {},
     entrypointArtifactCache: new Map(),
     retainedQueries: new Set(),
     gcBuffer: [],
     gcBufferSize: DEFAULT_GC_BUFFER_SIZE,
+    loggers: logFunction != null ? new Set([{ log: logFunction }]) : new Set(),
   };
 }
 
 export function createIsographStore(): IsographStore {
   return {
-    [ROOT_ID]: {},
+    Query: {
+      [ROOT_ID]: {},
+    },
   };
 }
 
-export function defaultMissingFieldHandler(
-  _storeRecord: StoreRecord,
-  _root: DataId,
-  fieldName: string,
-  arguments_: { [index: string]: any } | null,
-  variables: Variables | null,
-): Link | undefined {
-  if (fieldName === 'node' || fieldName === 'user') {
-    const variable = arguments_?.['id'];
-    const value = variables?.[variable];
-
-    // TODO can we handle explicit nulls here too? Probably, after wrapping in objects
-    if (value != null) {
-      // @ts-expect-error
-      return { __link: value };
-    }
-  }
-}
-
 export function assertLink(link: DataTypeValue): Link | null | undefined {
   if (Array.isArray(link)) {
     throw new Error('Unexpected array');
@@ -160,10 +175,12 @@ export function getLink(maybeLink: DataTypeValue): Link | null {
   if (
     maybeLink != null &&
     typeof maybeLink === 'object' &&
-    // @ts-expect-error this is safe
-    maybeLink.__link != null
+    '__link' in maybeLink &&
+    maybeLink.__link != null &&
+    '__typename' in maybeLink &&
+    maybeLink.__typename != null
   ) {
-    return maybeLink as any;
+    return maybeLink;
   }
   return null;
 }
@@ -171,8 +188,8 @@ export function getLink(maybeLink: DataTypeValue): Link | null {
 export function getOrLoadIsographArtifact(
   environment: IsographEnvironment,
   key: string,
-  loader: () => Promise<IsographEntrypoint<any, any>>,
-): PromiseWrapper<IsographEntrypoint<any, any>> {
+  loader: () => Promise<IsographEntrypoint<any, any, any>>,
+): PromiseWrapper<IsographEntrypoint<any, any, any>> {
   const value = environment.entrypointArtifactCache.get(key);
   if (value != null) {
     return value;

package/src/core/PromiseWrapper.ts

@@ -1,9 +1,9 @@
 export type AnyError = any;
 
-const NOT_SET: Symbol = Symbol('NOT_SET');
-type NotSet = typeof NOT_SET;
+export const NOT_SET: Symbol = Symbol('NOT_SET');
+export type NotSet = typeof NOT_SET;
 
-type Result<T, E> =
+export type Result<T, E> =
   | {
       kind: 'Ok';
       value: T;

package/src/core/areEqualWithDeepComparison.ts

@@ -1,78 +1,132 @@
-export function areEqualWithDeepComparison(
+import type { Link } from './IsographEnvironment';
+import type { ReaderAst, ReaderLinkedField, ReaderScalarField } from './reader';
+
+export function mergeUsingReaderAst(
+  field: ReaderScalarField | ReaderLinkedField,
   oldItem: unknown,
   newItem: unknown,
-): boolean {
+): unknown {
   if (newItem === null) {
-    return oldItem === null;
+    return oldItem === null ? oldItem : newItem;
   }
 
   if (newItem === undefined) {
-    return oldItem === undefined;
+    return oldItem === undefined ? oldItem : newItem;
   }
 
   if (Array.isArray(newItem)) {
     if (!Array.isArray(oldItem)) {
-      return false;
+      return newItem;
     }
 
-    return areEqualArraysWithDeepComparison(oldItem, newItem);
+    return mergeArraysUsingReaderAst(field, oldItem, newItem);
   }
 
-  if (typeof newItem === 'object') {
-    if (typeof oldItem !== 'object') {
-      return false;
-    }
+  switch (field.kind) {
+    case 'Scalar':
+      return oldItem === newItem ? oldItem : newItem;
+    case 'Linked':
+      if (oldItem == null) {
+        return newItem;
+      }
 
-    if (oldItem === null) {
-      return false;
+      return mergeObjectsUsingReaderAst(field.selections, oldItem, newItem);
+    default: {
+      // Ensure we have covered all variants
+      let _: never = field;
+      _;
+      throw new Error('Unexpected case.');
     }
-
-    return areEqualObjectsWithDeepComparison(oldItem, newItem);
   }
-
-  return newItem === oldItem;
 }
 
-export function areEqualArraysWithDeepComparison(
+export function mergeArraysUsingReaderAst(
+  field: ReaderScalarField | ReaderLinkedField,
   oldItems: ReadonlyArray<unknown>,
-  newItems: ReadonlyArray<unknown>,
-): boolean {
+  newItems: Array<unknown>,
+): ReadonlyArray<unknown> {
   if (newItems.length !== oldItems.length) {
-    return false;
+    return newItems;
   }
 
+  let canRecycle = true;
   for (let i = 0; i < newItems.length; i++) {
-    if (!areEqualWithDeepComparison(oldItems[i], newItems[i])) {
-      return false;
+    const mergedItem = mergeUsingReaderAst(field, oldItems[i], newItems[i]);
+    if (mergedItem !== oldItems[i]) {
+      canRecycle = false;
+    } else {
+      newItems[i] = mergedItem;
     }
   }
 
-  return true;
+  return canRecycle ? oldItems : newItems;
 }
 
-export function areEqualObjectsWithDeepComparison(
+export function mergeObjectsUsingReaderAst(
+  ast: ReaderAst<object>,
   oldItemObject: object,
   newItemObject: object,
-): boolean {
-  const oldKeys = Object.keys(oldItemObject);
-  const newKeys = Object.keys(newItemObject);
+): object {
+  let canRecycle = true;
+  for (const field of ast) {
+    switch (field.kind) {
+      case 'Scalar':
+      case 'Linked':
+        const key = field.alias ?? field.fieldName;
+        // @ts-expect-error
+        const oldValue = oldItemObject[key];
+        // @ts-expect-error
+        const newValue = newItemObject[key];
 
-  if (oldKeys.length !== newKeys.length) {
-    return false;
-  }
+        const mergedValue = mergeUsingReaderAst(field, oldValue, newValue);
+        if (mergedValue !== oldValue) {
+          canRecycle = false;
+        } else {
+          // @ts-expect-error
+          newItemObject[key] = mergedValue;
+        }
+        break;
+      case 'Resolver': {
+        const key = field.alias;
+        // @ts-expect-error
+        const oldValue = oldItemObject[key];
+        // @ts-expect-error
+        const newValue = newItemObject[key];
 
-  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 (oldValue !== newValue) {
+          canRecycle = false;
+        }
+        break;
+      }
+      case 'Link': {
+        const key = field.alias;
+        // @ts-expect-error
+        const oldValue: Link = oldItemObject[key];
+        // @ts-expect-error
+        const newValue: Link = newItemObject[key];
 
-    if (!areEqualWithDeepComparison(oldValue, newValue)) {
-      return false;
+        if (
+          oldValue.__link !== newValue.__link ||
+          oldValue.__typename !== newValue.__typename
+        ) {
+          canRecycle = false;
+        } else {
+          // @ts-expect-error
+          newItemObject[key] = oldValue;
+        }
+        break;
+      }
+      case 'ImperativelyLoadedField':
+      case 'LoadablySelectedField':
+        break;
+      default: {
+        // Ensure we have covered all variants
+        let _: never = field;
+        _;
+        throw new Error('Unexpected case.');
+      }
     }
   }
-  return true;
+
+  return canRecycle ? oldItemObject : newItemObject;
 }