(WIP) make isograph-react/core framework agnostic

libs/isograph-react-disposable-state/src/CacheItem.test.ts → libs/isograph-disposable-types/src/CacheItem.test.ts

@@ -1,4 +1,3 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
 import {
   afterEach,
   assert,
@@ -8,6 +7,7 @@ import {
   test,
   vi,
 } from 'vitest';
+import { ItemCleanupPair } from '.';
 import {
   CacheItem,
   CacheItemState,

libs/isograph-react-disposable-state/src/CacheItem.ts → libs/isograph-disposable-types/src/CacheItem.ts

@@ -1,8 +1,4 @@
-import {
-  CleanupFn,
-  Factory,
-  ItemCleanupPair,
-} from '@isograph/disposable-types';
+import { CleanupFn, Factory, ItemCleanupPair } from '.';
 
 const DEFAULT_TEMPORARY_RETAIN_TIME = 5000;
 

libs/isograph-react-disposable-state/src/ParentCache.test.ts → libs/isograph-disposable-types/src/ParentCache.test.ts

@@ -1,5 +1,5 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
 import { assert, describe, expect, test, vi } from 'vitest';
+import { ItemCleanupPair } from '.';
 import { CacheItem } from './CacheItem';
 import { ParentCache } from './ParentCache';
 

libs/isograph-react-disposable-state/src/ParentCache.ts → libs/isograph-disposable-types/src/ParentCache.ts

@@ -1,8 +1,4 @@
-import {
-  CleanupFn,
-  Factory,
-  ItemCleanupPair,
-} from '@isograph/disposable-types';
+import { CleanupFn, Factory, ItemCleanupPair } from '.';
 import { CacheItem, createTemporarilyRetainedCacheItem } from './CacheItem';
 
 // TODO convert cache impl to a getter and setter and free functions

libs/isograph-disposable-types/src/index.ts

@@ -1,3 +1,6 @@
 export type CleanupFn = () => void;
 export type ItemCleanupPair<T> = [T, CleanupFn];
 export type Factory<T> = () => ItemCleanupPair<T>;
+
+export * from './CacheItem';
+export * from './ParentCache';

libs/isograph-react-disposable-state/src/index.ts

@@ -1,7 +1,5 @@
 export * from '@isograph/disposable-types';
 
-export * from './CacheItem';
-export * from './ParentCache';
 export * from './useCachedResponsivePrecommitValue';
 export * from './useDisposableState';
 export * from './useHasCommittedRef';

libs/isograph-react-disposable-state/src/useCachedResponsivePrecommitValue.test.tsx

@@ -1,9 +1,12 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import {
+  CacheItem,
+  CacheItemState,
+  ItemCleanupPair,
+  ParentCache,
+} from '@isograph/disposable-types';
 import React from 'react';
 import { create } from 'react-test-renderer';
 import { assert, describe, expect, test, vi } from 'vitest';
-import { CacheItem, CacheItemState } from './CacheItem';
-import { ParentCache } from './ParentCache';
 import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
 
 function getItem<T>(cache: ParentCache<T>): CacheItem<T> | null {

libs/isograph-react-disposable-state/src/useCachedResponsivePrecommitValue.ts

@@ -1,8 +1,7 @@
 'use strict';
 
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import { ItemCleanupPair, ParentCache } from '@isograph/disposable-types';
 import { useEffect, useRef, useState } from 'react';
-import { ParentCache } from './ParentCache';
 
 /**
  * useCachedResponsivePrecommitValue<T>

libs/isograph-react-disposable-state/src/useDisposableState.ts

@@ -1,6 +1,5 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import { ItemCleanupPair, ParentCache } from '@isograph/disposable-types';
 import { useEffect, useRef } from 'react';
-import { ParentCache } from './ParentCache';
 import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
 import {
   UNASSIGNED_STATE,

libs/isograph-react-disposable-state/src/useLazyDisposableState.test.tsx

@@ -1,8 +1,7 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import { ItemCleanupPair, ParentCache } from '@isograph/disposable-types';
 import React, { useEffect, useState } from 'react';
 import { create } from 'react-test-renderer';
 import { describe, expect, test, vi } from 'vitest';
-import { ParentCache } from './ParentCache';
 import { useLazyDisposableState } from './useLazyDisposableState';
 
 function createCache<T>(value: T) {

libs/isograph-react-disposable-state/src/useLazyDisposableState.ts

@@ -1,8 +1,10 @@
 'use strict';
 
-import type { ItemCleanupPair } from '@isograph/isograph-disposable-types';
+import {
+  ParentCache,
+  type ItemCleanupPair,
+} from '@isograph/isograph-disposable-types';
 import { useEffect, useRef } from 'react';
-import { ParentCache } from './ParentCache';
 import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
 import { type UnassignedState } from './useUpdatableDisposableState';
 

libs/isograph-react/src/core/FragmentReference.ts

@@ -1,5 +1,5 @@
-import { ReaderWithRefetchQueries } from '../core/entrypoint';
 import { stableCopy } from './cache';
+import { ReaderWithRefetchQueries } from './entrypoint';
 import { type Link } from './IsographEnvironment';
 import { PromiseWrapper } from './PromiseWrapper';
 import type { StartUpdate } from './reader';

libs/isograph-react/src/core/IsographEnvironment.ts

@@ -1,6 +1,7 @@
-import { ParentCache } from '@isograph/react-disposable-state';
+import { ParentCache } from '@isograph/disposable-types';
 import { IsographEntrypoint } from './entrypoint';
 import {
+  ExtractStartUpdate,
   FragmentReference,
   Variables,
   type StableIdForFragmentReference,
@@ -9,7 +10,7 @@ import {
 import { RetainedQuery } from './garbageCollection';
 import { LogFunction, WrappedLogFunction } from './logging';
 import { PromiseWrapper, wrapPromise } from './PromiseWrapper';
-import { WithEncounteredRecords } from './read';
+import { NetworkRequestReaderOptions, WithEncounteredRecords } from './read';
 import type { ReaderAst, StartUpdate } from './reader';
 
 export type ComponentOrFieldName = string;
@@ -50,11 +51,12 @@ export type Subscriptions = Set<Subscription>;
 // Should this be a map?
 export type CacheMap<T> = { [index: string]: ParentCache<T> };
 
-export type IsographEnvironment = {
+export type IsographEnvironment<TComponent = unknown> = {
   readonly store: IsographStore;
   readonly networkFunction: IsographNetworkFunction;
+  readonly componentFunction: IsographComponentFunction<TComponent>;
   readonly missingFieldHandler: MissingFieldHandler | null;
-  readonly componentCache: FieldCache<React.FC<any>>;
+  readonly componentCache: FieldCache<TComponent>;
   readonly eagerReaderCache: FieldCache<StartUpdate<any> | undefined>;
   readonly subscriptions: Subscriptions;
   // N.B. this must be <any, any>, but all *usages* of this should go through
@@ -84,6 +86,17 @@ export type IsographNetworkFunction = (
   variables: Variables,
 ) => Promise<any>;
 
+export type IsographComponentFunction<
+  TComponent,
+  TReadFromStore extends UnknownTReadFromStore = any,
+> = (
+  environment: IsographEnvironment,
+  componentName: string,
+  fragmentReference: FragmentReference<TReadFromStore, any>,
+  networkRequestOptions: NetworkRequestReaderOptions,
+  startUpdate: ExtractStartUpdate<TReadFromStore>,
+) => TComponent;
+
 export type Link = {
   readonly __link: DataId;
   readonly __typename: TypeName;
@@ -125,18 +138,20 @@ export type IsographStore = {
 };
 
 const DEFAULT_GC_BUFFER_SIZE = 10;
-export function createIsographEnvironment(
+export function createIsographEnvironment<TComponent>(
   store: IsographStore,
   networkFunction: IsographNetworkFunction,
+  componentFunction: IsographComponentFunction<TComponent>,
   missingFieldHandler?: MissingFieldHandler | null,
   logFunction?: LogFunction | null,
-): IsographEnvironment {
+): IsographEnvironment<TComponent> {
   logFunction?.({
     kind: 'EnvironmentCreated',
   });
   return {
     store,
     networkFunction,
+    componentFunction,
     missingFieldHandler: missingFieldHandler ?? null,
     componentCache: {},
     eagerReaderCache: {},

libs/isograph-react/src/core/cache.ts

@@ -2,7 +2,9 @@ import {
   Factory,
   ItemCleanupPair,
   ParentCache,
-} from '@isograph/react-disposable-state';
+} from '@isograph/disposable-types';
+import { mergeObjectsUsingReaderAst } from './areEqualWithDeepComparison';
+import { FetchOptions } from './check';
 import {
   IsographEntrypoint,
   NormalizationInlineFragment,
@@ -12,9 +14,7 @@ import {
   type NormalizationAst,
   type NormalizationAstLoader,
   type NormalizationAstNodes,
-} from '../core/entrypoint';
-import { mergeObjectsUsingReaderAst } from './areEqualWithDeepComparison';
-import { FetchOptions } from './check';
+} from './entrypoint';
 import {
   ExtractParameters,
   FragmentReference,

libs/isograph-react/src/core/componentCache.ts

@@ -1,55 +1,27 @@
-import { useReadAndSubscribe } from '../react/useReadAndSubscribe';
 import {
   FragmentReference,
   stableIdForFragmentReference,
 } from './FragmentReference';
 import { IsographEnvironment } from './IsographEnvironment';
-import { logMessage } from './logging';
-import { readPromise } from './PromiseWrapper';
 import { NetworkRequestReaderOptions } from './read';
 import { createStartUpdate } from './startUpdate';
 
-export function getOrCreateCachedComponent(
-  environment: IsographEnvironment,
+export function getOrCreateCachedComponent<TComponent>(
+  environment: IsographEnvironment<TComponent>,
   componentName: string,
   fragmentReference: FragmentReference<any, any>,
   networkRequestOptions: NetworkRequestReaderOptions,
-): React.FC<any> {
+): TComponent {
   // We create startUpdate outside of component to make it stable
   const startUpdate = createStartUpdate(environment, fragmentReference);
 
   return (environment.componentCache[
     stableIdForFragmentReference(fragmentReference, componentName)
-  ] ??= (() => {
-    function Component(additionalRuntimeProps: { [key: string]: any }) {
-      const readerWithRefetchQueries = readPromise(
-        fragmentReference.readerWithRefetchQueries,
-      );
-
-      const data = useReadAndSubscribe(
-        fragmentReference,
-        networkRequestOptions,
-        readerWithRefetchQueries.readerArtifact.readerAst,
-      );
-
-      logMessage(environment, () => ({
-        kind: 'ComponentRerendered',
-        componentName,
-        rootLink: fragmentReference.root,
-      }));
-
-      return readerWithRefetchQueries.readerArtifact.resolver(
-        {
-          data,
-          parameters: fragmentReference.variables,
-          startUpdate: readerWithRefetchQueries.readerArtifact.hasUpdatable
-            ? startUpdate
-            : undefined,
-        },
-        additionalRuntimeProps,
-      );
-    }
-    Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
-    return Component;
-  })());
+  ] ??= environment.componentFunction(
+    environment,
+    componentName,
+    fragmentReference,
+    networkRequestOptions,
+    startUpdate,
+  ));
 }

libs/isograph-react/src/index.ts

@@ -30,14 +30,14 @@ export {
   ROOT_ID,
   type DataId,
   type DataTypeValue,
-  type IsographEnvironment,
+  type IsographEnvironment as RawIsographEnvironment,
   type IsographNetworkFunction,
   type IsographStore,
   type MissingFieldHandler,
   type Link,
   type StoreRecord,
   type CacheMap,
-  createIsographEnvironment,
+  createIsographEnvironment as createRawIsographEnvironment,
   createIsographStore,
   type FieldCache,
   type Subscriptions,
@@ -127,6 +127,10 @@ export {
   type RequiredShouldFetch,
 } from './core/check';
 
+export {
+  IsographReactEnvironment as IsographEnvironment,
+  createIsographReactEnvironment as createIsographEnvironment,
+} from './react/IsographReactEnvironment';
 export {
   IsographEnvironmentProvider,
   useIsographEnvironment,

libs/isograph-react/src/react/IsographEnvironmentProvider.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { createContext, ReactNode, useContext } from 'react';
-import { type IsographEnvironment } from '../core/IsographEnvironment';
+import { IsographReactEnvironment } from './IsographReactEnvironment';
 
 export const IsographEnvironmentContext =
-  createContext<IsographEnvironment | null>(null);
+  createContext<IsographReactEnvironment | null>(null);
 
 export type IsographEnvironmentProviderProps = {
-  readonly environment: IsographEnvironment;
+  readonly environment: IsographReactEnvironment;
   readonly children: ReactNode;
 };
 
@@ -21,7 +21,7 @@ export function IsographEnvironmentProvider({
   );
 }
 
-export function useIsographEnvironment(): IsographEnvironment {
+export function useIsographEnvironment(): IsographReactEnvironment {
   const context = useContext(IsographEnvironmentContext);
   if (context == null) {
     throw new Error(