Reduced bundle size and improved README

patrickroberts · patrickroberts · commit 7a4c69a488a3 · 2021-02-23T21:09:16.000-06:00
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suspense-service",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Suspense integration library for React",
   "repository": "github:patrickroberts/suspense-service",
   "main": "dst/cjs/suspense-service.js",
diff --git a/src/IdContext/Consumer/index.tsx b/src/IdContext/Consumer/index.tsx
@@ -13,7 +13,7 @@ export function createIdContextConsumer<T>(
 ): IdContextConsumer<T> {
   const EnvironmentConsumer: IdContextConsumer<T> = ({ id, children }) => {
     const render = useCallback(
-      (env: Environment<T>) => children(unwrap(env, id)),
+      (env: Environment<T>) => children(unwrap(env, id!)),
       [id, children],
     );
 
@@ -25,8 +25,5 @@ export function createIdContextConsumer<T>(
 
   EnvironmentConsumer.defaultProps = defaultProps;
 
-  return memo(EnvironmentConsumer, (prev, next) => (
-    Object.is(prev.id, next.id)
-    && Object.is(prev.children, next.children)
-  ));
+  return memo(EnvironmentConsumer);
 }
diff --git a/src/IdContext/Environment.ts b/src/IdContext/Environment.ts
@@ -8,12 +8,12 @@ export default interface Environment<T> {
 }
 
 /** @ignore */
-export function wrap<T>(env: Environment<T>, value: T, id: Id = null): Environment<T> {
+export function wrap<T>(env: Environment<T>, value: T, id: Id): Environment<T> {
   return new Map(env).set(id, value).set(null, value);
 }
 
 /** @ignore */
-export function unwrap<T>(env: Environment<T>, id: Id = null): T {
+export function unwrap<T>(env: Environment<T>, id: Id): T {
   if (!env.has(id)) {
     throw new Error(`Provider with id ${String(id)} is not in scope`);
   }
diff --git a/src/IdContext/Provider/index.tsx b/src/IdContext/Provider/index.tsx
@@ -15,7 +15,7 @@ export function createIdContextProvider<T>(
   const EnvironmentProvider: IdContextProvider<T> = ({ value, id, children }) => {
     const prev = useContext(EnvironmentContext);
     const next = useMemo(
-      () => wrap(prev, value, id),
+      () => wrap(prev, value, id!),
       [value, id, prev],
     );
 
@@ -27,9 +27,5 @@ export function createIdContextProvider<T>(
 
   EnvironmentProvider.defaultProps = defaultProps;
 
-  return memo(EnvironmentProvider, (prev, next) => (
-    Object.is(prev.value, next.value)
-    && Object.is(prev.id, next.id)
-    && Object.is(prev.children, next.children)
-  ));
+  return memo(EnvironmentProvider);
 }
diff --git a/src/IdContext/index.ts b/src/IdContext/index.ts
@@ -42,8 +42,8 @@ export function createIdContext<T>(defaultValue: T): IdContext<T> {
  * @param context the {@link IdContext} to use
  * @param id the {@link IdContextProviderProps.id | IdContextProvider id} to use
  */
-export function useIdContext<T>(context: IdContext<T>, id: Id = null): T {
+export function useIdContext<T>(context: IdContext<T>, id?: Id): T {
   const env = useContext(context[kEnvironment]);
 
-  return unwrap(env, id);
+  return unwrap(env, id != null ? id : null);
 }
diff --git a/src/Service/Consumer/index.tsx b/src/Service/Consumer/index.tsx
@@ -27,8 +27,5 @@ export function createServiceConsumer<TRequest, TResponse>(
 
   ResourceConsumer.defaultProps = defaultProps;
 
-  return memo(ResourceConsumer, (prev, next) => (
-    Object.is(prev.id, next.id)
-    && Object.is(prev.children, next.children)
-  ));
+  return memo(ResourceConsumer);
 }
diff --git a/src/Service/Handler.ts b/src/Service/Handler.ts
@@ -1,8 +1,7 @@
 import Id from '../IdContext/Id';
 import useSync from '../State/useSync';
-import PromiseState from './PromiseState';
+import PromiseState, { PromiseStateProperty, StatusType } from './PromiseState';
 import Resource from './Resource';
-import Status from './Status';
 
 /**
  * The type of asynchronous function for fetching data
@@ -15,27 +14,27 @@ export default Handler;
 export function createUseHandler<TRequest, TResponse>(
   handler: Handler<TRequest, TResponse>,
 ) {
-  return function useHandler(request: TRequest, id: Id = null): Resource<TResponse> {
+  return function useHandler(request: TRequest, id: Id): Resource<TResponse> {
     return useSync(() => {
       let state: PromiseState<TResponse>;
       const promise = Promise.resolve(handler(request, id)).then(
         (value) => {
-          state = { value, status: Status.Fulfilled };
+          state = [StatusType.Fulfilled, value];
           return value;
         },
         (reason) => {
-          state = { reason, status: Status.Rejected };
+          state = [StatusType.Rejected, reason];
           throw reason;
         },
       );
 
-      state = { promise, status: Status.Pending };
+      state = [StatusType.Pending, promise];
       return () => {
-        switch (state.status) {
-          case Status.Pending: throw state.promise;
-          case Status.Fulfilled: return state.value;
-          default: throw state.reason;
+        if (state[PromiseStateProperty.Status] !== StatusType.Fulfilled) {
+          throw state[PromiseStateProperty.Result];
         }
+
+        return state[PromiseStateProperty.Result];
       };
     }, [request, id]);
   };
diff --git a/src/Service/PromiseState.ts b/src/Service/PromiseState.ts
@@ -1,21 +1,36 @@
-import Status from './Status';
+/** @ignore */
+const enum PromiseStateProperty {
+  Status,
+  Result,
+}
+
+export { PromiseStateProperty };
+
+/** @ignore */
+const enum StatusType {
+  Pending,
+  Fulfilled,
+  Rejected,
+}
+
+export { StatusType };
 
 /** @ignore */
 interface PromiseStatePending<TResponse> {
-  promise: Promise<TResponse>;
-  status: Status.Pending;
+  [PromiseStateProperty.Status]: StatusType.Pending;
+  [PromiseStateProperty.Result]: Promise<TResponse>;
 }
 
 /** @ignore */
 interface PromiseStateFulfilled<TResponse> {
-  value: TResponse;
-  status: Status.Fulfilled;
+  [PromiseStateProperty.Status]: StatusType.Fulfilled;
+  [PromiseStateProperty.Result]: TResponse;
 }
 
 /** @ignore */
 interface PromiseStateRejected {
-  reason: any;
-  status: Status.Rejected;
+  [PromiseStateProperty.Status]: StatusType.Rejected;
+  [PromiseStateProperty.Result]: any;
 }
 
 /** @ignore */
diff --git a/src/Service/Provider/index.tsx b/src/Service/Provider/index.tsx
@@ -13,14 +13,13 @@ export { ServiceProviderProps };
 /** @ignore */
 export function createServiceProvider<TRequest, TResponse>(
   { Provider }: IdContext<[Resource<TResponse>, Dispatch<SetStateAction<TRequest>>]>,
-  useHandler: (request: TRequest, id?: Id) => Resource<TResponse>,
+  useHandler: (request: TRequest, id: Id) => Resource<TResponse>,
 ): ServiceProvider<TRequest> {
   const ResourceProvider: ServiceProvider<TRequest> = ({
     request, id, children, fallback, reset,
   }) => {
-    const stateAndSetState = useResetState(request, reset);
-    const resource = useHandler(stateAndSetState[0], id);
-    const setState = stateAndSetState[1];
+    const { 0: state, 1: setState } = useResetState(request, reset);
+    const resource = useHandler(state, id!);
     const element = useMemo(
       () => (fallback == null ? children : <Suspense fallback={fallback}>{children}</Suspense>),
       [children, fallback],
@@ -34,11 +33,5 @@ export function createServiceProvider<TRequest, TResponse>(
 
   ResourceProvider.defaultProps = defaultProps;
 
-  return memo(ResourceProvider, (prev, next) => (
-    Object.is(prev.request, next.request)
-    && Object.is(prev.id, next.id)
-    && Object.is(prev.children, next.children)
-    && Object.is(prev.fallback, next.fallback)
-    && Object.is(prev.reset, next.reset)
-  ));
+  return memo(ResourceProvider);
 }
diff --git a/src/Service/Status.ts b/src/Service/Status.ts
diff --git a/src/Service/index.ts b/src/Service/index.ts
@@ -51,18 +51,20 @@ export function createService<TRequest, TResponse>(
  * @param id the {@link ServiceProviderProps.id | ServiceProvider id} to use
  */
 export function useServiceState<TRequest, TResponse>(
-  service: Service<TRequest, TResponse>, id: Id = null,
+  service: Service<TRequest, TResponse>, id?: Id,
 ): [TResponse, Dispatch<SetStateAction<TRequest>>] {
-  const resourceAndSetState = useIdContext(service[kResource], id);
+  const { 0: resource, 1: setState } = useIdContext(service[kResource], id);
 
-  return [resourceAndSetState[0](), resourceAndSetState[1]];
+  return [resource(), setState];
 }
 
 /**
  * Synchronously consumes a response from a {@link ServiceProvider}
  * @param service the {@link Service} to use
  * @param id the {@link ServiceProviderProps.id | ServiceProvider id} to use
  */
-export function useService<TResponse>(service: Service<any, TResponse>, id: Id = null): TResponse {
-  return useServiceState(service, id)[0];
+export function useService<TResponse>(service: Service<any, TResponse>, id?: Id): TResponse {
+  const { 0: response } = useServiceState(service, id);
+
+  return response;
 }
diff --git a/src/State/Reset.ts b/src/State/Reset.ts
@@ -4,8 +4,3 @@
 type Reset<S> = (prevState: S, newInitialState: S) => S;
 
 export default Reset;
-
-/** @ignore */
-export function defaultReset<S>(_: S, newInitialState: S): S {
-  return newInitialState;
-}
diff --git a/src/State/ResetReducer.ts b/src/State/ResetReducer.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+
+/** @ignore */
+const enum ResetReducerProperty {
+  Reducer,
+  InitialState,
+  State,
+  Dispatch,
+}
+
+/** @ignore */
+interface ResetReducer<R extends React.Reducer<any, any>> {
+  [ResetReducerProperty.Reducer]: R;
+  [ResetReducerProperty.InitialState]: React.ReducerState<R>;
+  [ResetReducerProperty.State]: React.ReducerState<R>;
+  [ResetReducerProperty.Dispatch]: React.Dispatch<React.ReducerAction<R>>;
+}
+
+export { ResetReducer as default, ResetReducerProperty };
diff --git a/src/State/Sync.ts b/src/State/Sync.ts
@@ -0,0 +1,15 @@
+import { DependencyList } from 'react';
+
+/** @ignore */
+const enum SyncProperty {
+  State,
+  Deps,
+}
+
+/** @ignore */
+interface Sync<T> {
+  [SyncProperty.State]?: T;
+  [SyncProperty.Deps]?: DependencyList;
+}
+
+export { Sync as default, SyncProperty };
diff --git a/src/State/useForceUpdate.ts b/src/State/useForceUpdate.ts
@@ -1,6 +1,10 @@
 import { DispatchWithoutAction, useReducer } from 'react';
 
+const initialValue = {};
+
 /** @ignore */
 export default function useForceUpdate(): DispatchWithoutAction {
-  return useReducer(() => ({}), {})[1];
+  const { 1: forceUpdate } = useReducer(() => ({}), initialValue);
+
+  return forceUpdate;
 }
diff --git a/src/State/useResetReducer.ts b/src/State/useResetReducer.ts
@@ -1,5 +1,6 @@
 import { Dispatch, Reducer, ReducerAction, ReducerState, useRef } from 'react';
-import Reset, { defaultReset } from './Reset';
+import Reset from './Reset';
+import ResetReducer, { ResetReducerProperty } from './ResetReducer';
 import useForceUpdate from './useForceUpdate';
 
 /**
@@ -12,29 +13,33 @@ import useForceUpdate from './useForceUpdate';
  * @param reset the reset function when initialState updates
  */
 export default function useResetReducer<R extends Reducer<any, any>>(
-  reducer: R, initialState: ReducerState<R>, reset: Reset<ReducerState<R>> = defaultReset,
+  reducer: R, initialState: ReducerState<R>, reset?: Reset<ReducerState<R>>,
 ): [ReducerState<R>, Dispatch<ReducerAction<R>>] {
   const forceUpdate = useForceUpdate();
-  const { current } = useRef({
+  const { current } = useRef<ResetReducer<R>>([
     reducer,
     initialState,
-    state: initialState,
-    dispatch: (action: ReducerAction<R>) => {
-      const nextState = current.reducer(current.state, action);
+    initialState,
+    (action: ReducerAction<R>) => {
+      const nextState = current[ResetReducerProperty.Reducer](
+        current[ResetReducerProperty.State], action,
+      );
 
-      if (!Object.is(current.state, nextState)) {
-        current.state = nextState;
+      if (!Object.is(current[ResetReducerProperty.State], nextState)) {
+        current[ResetReducerProperty.State] = nextState;
         forceUpdate();
       }
     },
-  });
+  ]);
 
-  current.reducer = reducer;
+  current[ResetReducerProperty.Reducer] = reducer;
 
-  if (!Object.is(current.initialState, initialState)) {
-    current.initialState = initialState;
-    current.state = reset(current.state, initialState);
+  if (!Object.is(current[ResetReducerProperty.InitialState], initialState)) {
+    current[ResetReducerProperty.InitialState] = initialState;
+    current[ResetReducerProperty.State] = reset
+      ? reset(current[ResetReducerProperty.State], initialState)
+      : initialState;
   }
 
-  return [current.state, current.dispatch];
+  return [current[ResetReducerProperty.State], current[ResetReducerProperty.Dispatch]];
 }
diff --git a/src/State/useResetState.ts b/src/State/useResetState.ts
@@ -1,9 +1,8 @@
 import { Dispatch, SetStateAction } from 'react';
-import Reset, { defaultReset } from './Reset';
+import Reset from './Reset';
 import useResetReducer from './useResetReducer';
 
 /** @ignore */
-// eslint-disable-next-line no-undef
 function isFunction<S>(setStateAction: SetStateAction<S>): setStateAction is (prevState: S) => S {
   return typeof setStateAction === 'function';
 }
@@ -17,7 +16,7 @@ function isFunction<S>(setStateAction: SetStateAction<S>): setStateAction is (pr
  * @param reset the reset function when initialState updates
  */
 export default function useResetState<S>(
-  initialState: S, reset: Reset<S> = defaultReset,
+  initialState: S, reset?: Reset<S>,
 ): [S, Dispatch<SetStateAction<S>>] {
   return useResetReducer((prevState: S, setStateAction: SetStateAction<S>) => (
     isFunction(setStateAction) ? setStateAction(prevState) : setStateAction
diff --git a/src/State/useSync.ts b/src/State/useSync.ts
@@ -1,6 +1,7 @@
 import { DependencyList, useRef } from 'react';
+import Sync, { SyncProperty } from './Sync';
 
-const intialValue: [any, DependencyList | undefined] = [undefined, undefined];
+const initialValue: Sync<any> = {};
 
 /** @ignore */
 function dependencyListIs(a: DependencyList | undefined, b: DependencyList | undefined): boolean {
@@ -21,11 +22,11 @@ function dependencyListIs(a: DependencyList | undefined, b: DependencyList | und
  * @param deps The dependencies of the computation
  */
 export default function useSync<T>(factory: () => T, deps: DependencyList | undefined): T {
-  const ref = useRef<[T, DependencyList | undefined]>(intialValue);
+  const ref = useRef<Sync<T>>(initialValue);
 
-  if (!dependencyListIs(ref.current[1], deps)) {
+  if (!dependencyListIs(ref.current[SyncProperty.Deps], deps)) {
     ref.current = [factory(), deps];
   }
 
-  return ref.current[0];
+  return ref.current[SyncProperty.State]!;
 }
diff --git a/src/StateContext/Consumer/index.tsx b/src/StateContext/Consumer/index.tsx
diff --git a/src/StateContext/Provider/index.tsx b/src/StateContext/Provider/index.tsx
diff --git a/src/StateContext/index.ts b/src/StateContext/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "suspense-service",`
`3`		`- "version": "0.2.8",`
	`3`	`+ "version": "0.2.9",`
`4`	`4`	`"description": "Suspense integration library for React",`
`5`	`5`	`"repository": "github:patrickroberts/suspense-service",`
`6`	`6`	`"main": "dst/cjs/suspense-service.js",`
Original file line number	Diff line number	Diff line change
`@@ -8,12 +8,12 @@ export default interface Environment<T> {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`/** @ignore */`
`11`		`-export function wrap<T>(env: Environment<T>, value: T, id: Id = null): Environment<T> {`
	`11`	`+export function wrap<T>(env: Environment<T>, value: T, id: Id): Environment<T> {`
`12`	`12`	`return new Map(env).set(id, value).set(null, value);`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`/** @ignore */`
`16`		`-export function unwrap<T>(env: Environment<T>, id: Id = null): T {`
	`16`	`+export function unwrap<T>(env: Environment<T>, id: Id): T {`
`17`	`17`	`if (!env.has(id)) {`
`18`	`18`	throw new Error(`Provider with id ${String(id)} is not in scope`);
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,5 @@ export function createServiceConsumer<TRequest, TResponse>(`
`27`	`27`
`28`	`28`	`ResourceConsumer.defaultProps = defaultProps;`
`29`	`29`
`30`		`- return memo(ResourceConsumer, (prev, next) => (`
`31`		`- Object.is(prev.id, next.id)`
`32`		`- && Object.is(prev.children, next.children)`
`33`		`- ));`
	`30`	`+ return memo(ResourceConsumer);`
`34`	`31`	`}`