Bugfix: RefObject was derferenced in Provider render instead of Resou…

…rce read, but Provider does not re-render when Suspense awaits thrown promise

.github/workflows/build.yml

@@ -21,6 +21,7 @@ jobs:
       - name: Install and Test
         run: |
           npm install
+          npm run rebuild
           npm test
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

features/support/context/background.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Given } from '@cucumber/cucumber';
 import World from '../world';
-import { Context, createContext, useContext } from '../../../src';
+import { Context, createContext, useContext } from '../../..';
 
 const createComponent = (Context: Context<string>, Element: keyof JSX.IntrinsicElements) => (
   (props: { id?: string | null }) => {

features/support/context/declarations.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DataTable, Given } from '@cucumber/cucumber';
 import World from '../world';
-import { Context } from '../../../src';
+import { Context } from '../../..';
 
 Given(
   'I declare a {string} consumer named {string} with the props',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suspense-service",
-  "version": "0.0.2-rc",
+  "version": "0.0.3-rc",
   "description": "Suspense integration library for React",
   "repository": "github:patrickroberts/suspense-service",
   "main": "dst/cjs/suspense-service.js",
@@ -9,14 +9,14 @@
   "types": "dst/esm/suspense-service.d.ts",
   "scripts": {
     "clean": "rimraf dst docs",
-    "test": "cucumber-js",
     "build": "rollup --config --environment NODE_ENV:production",
     "rebuild": "npm run clean && npm run build",
+    "test": "cucumber-js",
     "docs": "typedoc src/index.ts",
-    "watch:test": "npm test -- --watch",
     "watch:build": "npm run build -- --environment NODE_ENV:development --watch",
+    "watch:test": "npm test -- --watch",
     "watch": "concurrently 'npm:watch:*'",
-    "prepublishOnly": "npm test && npm run rebuild && npm run docs"
+    "prepublishOnly": "npm run rebuild && npm test && npm run docs"
   },
   "author": "Patrick Roberts",
   "license": "MIT",

src/Context/Consumer.tsx

@@ -1,9 +1,10 @@
 import React, { Context, FunctionComponent, ReactNode, memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import Id, { PropTypesId } from './Id';
 import Environment, { unwrap } from './Environment';
 
 interface ContextConsumerProps<T> {
-  id?: string | null;
+  id?: Id;
   children: (value: T) => ReactNode;
 }
 
@@ -13,7 +14,7 @@ export default ContextConsumer;
 
 /** @ignore */
 const propTypes = {
-  id: PropTypes.string,
+  id: PropTypesId,
   children: PropTypes.func.isRequired
 };
 

src/Context/Environment.ts

@@ -1,26 +1,28 @@
+import Id from './Id';
+
 /** @internal */
 export default interface Environment<T> {
-  has (key: string | null): boolean;
-  get (key: string | null): T | undefined;
-  [Symbol.iterator] (): IterableIterator<[string | null, T]>;
+  has (key: Id): boolean;
+  get (key: Id): T | undefined;
+  [Symbol.iterator] (): IterableIterator<[Id, T]>;
 };
 
 /** @ignore */
 export function wrap<T>(
   env: Environment<T>,
   value: T,
-  id: string | null
+  id: Id
 ): Environment<T> {
   return new Map([...env, [id, value], [null, value]]);
 }
 
 /** @ignore */
 export function unwrap<T>(
   env: Environment<T>,
-  id: string | null
+  id: Id
 ): T {
   if (!env.has(id)) {
-    throw new Error(`Provider with id ${id} is not in scope`);
+    throw new Error(`Provider with id ${String(id)} is not in scope`);
   }
 
   return env.get(id)!;

src/Context/Id.ts

@@ -0,0 +1,8 @@
+import { oneOfType, string, number, symbol } from 'prop-types';
+
+type Id = string | number | symbol | null;
+
+export default Id;
+
+/** @ignore */
+export const PropTypesId = oneOfType([string, number, symbol]);

src/Context/Provider.tsx

@@ -1,10 +1,11 @@
 import React, { Context, FunctionComponent, ReactNode, memo, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import Id, { PropTypesId } from './Id';
 import Environment, { wrap } from './Environment';
 
 interface ContextProviderProps<T> {
   value: T;
-  id?: string | null;
+  id?: Id;
   children?: ReactNode;
 }
 
@@ -17,7 +18,7 @@ const propTypes = {
   // typechecking PropTypes.any against T fails due to
   // the way WeakValidationMap<T> works in @types/react
   value: PropTypes.any.isRequired as any,
-  id: PropTypes.string,
+  id: PropTypesId,
   children: PropTypes.node
 };
 

src/Context/index.ts

@@ -3,6 +3,7 @@ import {
   createContext as createReactContext,
   useContext as useReactContext
 } from 'react';
+import Id from './Id';
 import Environment, { unwrap } from './Environment';
 import ContextConsumer, { createConsumer } from './Consumer';
 import ContextProvider, { createProvider } from './Provider';
@@ -40,7 +41,7 @@ export function createContext<T>(defaultValue: T): Context<T> {
  */
 export function useContext<T>(
   Context: Context<T>,
-  id: string | null = null
+  id: Id = null
 ): T {
   const env = useReactContext(Context[kContext]);
 

src/Service/Consumer.tsx

@@ -1,10 +1,11 @@
 import React, { FunctionComponent, ReactNode, memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import Id, { PropTypesId } from '../Context/Id';
 import Context from '../Context/index';
 import Resource from './Resource';
 
 interface ServiceConsumerProps<TResponse> {
-  id?: string | null;
+  id?: Id;
   children: (value: TResponse) => ReactNode;
 }
 
@@ -14,7 +15,7 @@ export default ServiceConsumer;
 
 /** @ignore */
 const propTypes = {
-  id: PropTypes.string,
+  id: PropTypesId,
   children: PropTypes.func.isRequired
 };
 

src/Service/Provider.tsx

@@ -1,11 +1,12 @@
 import React, { Fragment, FunctionComponent, ReactNode, Suspense, isValidElement, memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import Id, { PropTypesId } from '../Context/Id';
 import Context from '../Context/index';
 import Resource, { useResource } from './Resource';
 
 interface ServiceProviderProps<TRequest> {
   value: TRequest;
-  id?: string | null;
+  id?: Id;
   children?: ReactNode;
   fallback?: NonNullable<ReactNode> | null;
 }
@@ -19,7 +20,7 @@ const propTypes = {
   // typechecking PropTypes.any against TRequest fails due to
   // the way WeakValidationMap<TRequest> works in @types/react
   value: PropTypes.any.isRequired as any,
-  id: PropTypes.string,
+  id: PropTypesId,
   children: PropTypes.node,
   fallback: PropTypes.node
 };
@@ -34,7 +35,7 @@ const defaultProps = {
 /** @ignore */
 export function createProvider<TRequest, TResponse>(
   Context: Context<Resource<TResponse>>,
-  useHandler: (request: TRequest, id: string | null) => PromiseLike<TResponse>
+  useHandler: (request: TRequest, id: Id) => PromiseLike<TResponse>
 ): ServiceProvider<TRequest> {
   const Provider: ServiceProvider<TRequest> = ({ value, id = null, children, fallback }) => {
     const thenable = useHandler(value, id);

src/Service/Resource.ts

@@ -10,15 +10,17 @@ export default interface Resource<TResponse> {
 export function useResource<TResponse>(
   thenable: PromiseLike<TResponse>
 ): Resource<TResponse> {
-  const state = useThenable(thenable);
+  const ref = useThenable(thenable);
 
   return useMemo(() => ({
     read () {
+      const state = ref.current!;
+
       switch (state.status) {
         case 'pending': throw state.promise;
         case 'rejected': throw state.reason;
         case 'fulfilled': return state.value;
       }
     }
-  }), [state]);
+  }), [ref]);
 }

src/Service/Thenable.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { MutableRefObject, useMemo, useRef } from 'react';
 
 /** @ignore */
 interface PromiseStatePending {
@@ -24,10 +24,13 @@ export type PromiseState<TResponse> =
   PromiseStateFulfilled<TResponse> |
   PromiseStateRejected;
 
+/** @ignore */
+type RefObject<T> = MutableRefObject<T | undefined>;
+
 /** @ignore */
 export function useThenable<TResponse>(
   thenable: PromiseLike<TResponse>
-): PromiseState<TResponse> {
+): RefObject<PromiseState<TResponse>> {
   const ref = useRef<PromiseState<TResponse>>();
 
   useMemo(() => {
@@ -51,5 +54,5 @@ export function useThenable<TResponse>(
     ref.current = { promise, status: 'pending' };
   }, [thenable, ref]);
 
-  return ref.current!;
+  return ref;
 }

src/Service/index.ts

@@ -1,3 +1,4 @@
+import Id from '../Context/Id';
 import Context, { createContext, useContext } from '../Context/index';
 import Resource from './Resource';
 import ServiceConsumer, { createConsumer } from './Consumer';
@@ -14,7 +15,7 @@ export default interface Service<TRequest, TResponse> {
 }
 
 export function createService<TRequest, TResponse>(
-  useHandler: (request: TRequest) => PromiseLike<TResponse>
+  useHandler: (request: TRequest, id: Id) => PromiseLike<TResponse>
 ): Service<TRequest, TResponse> {
   const Context = createContext<Resource<TResponse>>({
     read () {
@@ -31,7 +32,7 @@ export function createService<TRequest, TResponse>(
 
 export function useService<TResponse>(
   Service: Service<any, TResponse>,
-  id: string | null = null
+  id: Id = null
 ): TResponse {
   const resource = useContext(Service[kContext], id);