feat: independent producerWrapper & runc support in utils package (#117)

* support runc function and split producerWrapper

* externalize runc function from core to utils package

Author: incepter

packages/core/src/AsyncState.ts

@@ -49,6 +49,8 @@ export class AsyncState<T, E, R> implements StateInterface<T, E, R> {
   private locks?: number;
   isEmitting?: boolean;
 
+  readonly producer: ProducerFunction<T, E, R>;
+
 
   //endregion
 
@@ -81,7 +83,6 @@ export class AsyncState<T, E, R> implements StateInterface<T, E, R> {
     this.abort = this.abort.bind(this);
     this.getState = this.getState.bind(this);
     this.setState = this.setState.bind(this);
-    this.producer = this.producer.bind(this);
     this.subscribe = this.subscribe.bind(this);
     this.getPayload = this.getPayload.bind(this);
     this.mergePayload = this.mergePayload.bind(this);
@@ -96,6 +97,17 @@ export class AsyncState<T, E, R> implements StateInterface<T, E, R> {
     this.invalidateCache = this.invalidateCache.bind(this);
     this.replaceProducer = this.replaceProducer.bind(this);
 
+    let instance = this;
+    this.producer = producerWrapper.bind(null, {
+      setProducerType: (type: ProducerType) => instance.producerType = type,
+      setState: instance.setState,
+      getState: instance.getState,
+      instance: instance,
+      setSuspender: (suspender: Promise<T>) => instance.suspender = suspender,
+      replaceState: instance.replaceState.bind(instance),
+      getProducer: () => instance.originalProducer,
+    });
+
     this._source = makeSource(this);
 
     if (__DEV__) {
@@ -120,120 +132,7 @@ export class AsyncState<T, E, R> implements StateInterface<T, E, R> {
     Object.assign(this.config, partialConfig);
   }
 
-  producer(
-    props: ProducerProps<T, E, R>,
-    indicators: RunIndicators,
-    callbacks?: ProducerCallbacks<T, E, R>,
-  ): AbortFn {
-    let instance = this;
-    const currentProducer = this.originalProducer;
-    if (!isFunction(currentProducer)) {
-      indicators.fulfilled = true;
-      instance.producerType = ProducerType.notProvided;
-      instance.setState(props.args[0], props.args[1]);
-      if (callbacks) {
-        switch (instance.state.status) {
-          case Status.success: {
-            callbacks.onSuccess?.(instance.state);
-            break;
-          }
-          case Status.aborted: {
-            callbacks.onAborted?.(instance.state);
-            break;
-          }
-          case Status.error: {
-            callbacks.onError?.(instance.state);
-            break;
-          }
-        }
-      }
-      return;
-    }
-    // the running promise is used to pass the status to pending and as suspender in react18+
-    let runningPromise;
-    // the execution value is the return of the initial producer function
-    let executionValue;
-    // it is important to clone to capture properties and save only serializable stuff
-    const savedProps = cloneProducerProps(props);
-
-    try {
-      executionValue = currentProducer!(props);
-      if (indicators.aborted) {
-        return;
-      }
-    } catch (e) {
-      if (indicators.aborted) {
-        return;
-      }
-      if (__DEV__) devtools.emitRunSync(instance, savedProps);
-      indicators.fulfilled = true;
-      let errorState = StateBuilder.error<T, E>(e, savedProps);
-      instance.replaceState(errorState);
-      callbacks?.onError?.(errorState);
-      return;
-    }
 
-    if (isGenerator(executionValue)) {
-      instance.producerType = ProducerType.generator;
-      if (__DEV__) devtools.emitRunGenerator(instance, savedProps);
-      // generatorResult is either {done, value} or a promise
-      let generatorResult;
-      try {
-        generatorResult = wrapStartedGenerator(executionValue, props, indicators);
-      } catch (e) {
-        indicators.fulfilled = true;
-        let errorState = StateBuilder.error<T, E>(e, savedProps);
-        instance.replaceState(errorState);
-        callbacks?.onError?.(errorState);
-        return;
-      }
-      if (generatorResult.done) {
-        indicators.fulfilled = true;
-        let successState = StateBuilder.success(generatorResult.value, savedProps);
-        instance.replaceState(successState);
-        callbacks?.onSuccess?.(successState);
-        return;
-      } else {
-        runningPromise = generatorResult;
-        instance.suspender = runningPromise;
-        instance.replaceState(StateBuilder.pending(savedProps));
-      }
-    } else if (isPromise(executionValue)) {
-      instance.producerType = ProducerType.promise;
-      if (__DEV__) devtools.emitRunPromise(instance, savedProps);
-      runningPromise = executionValue;
-      instance.suspender = runningPromise;
-      instance.replaceState(StateBuilder.pending(savedProps));
-    } else { // final value
-      if (__DEV__) devtools.emitRunSync(instance, savedProps);
-      indicators.fulfilled = true;
-      instance.producerType = ProducerType.sync;
-      let successState = StateBuilder.success(executionValue, savedProps);
-      instance.replaceState(successState);
-      callbacks?.onSuccess?.(successState);
-      return;
-    }
-
-    runningPromise
-      .then(stateData => {
-        let aborted = indicators.aborted;
-        if (!aborted) {
-          indicators.fulfilled = true;
-          let successState = StateBuilder.success(stateData, savedProps);
-          instance.replaceState(successState);
-          callbacks?.onSuccess?.(successState);
-        }
-      })
-      .catch(stateError => {
-        let aborted = indicators.aborted;
-        if (!aborted) {
-          indicators.fulfilled = true;
-          let errorState = StateBuilder.error<T, E>(stateError, savedProps);
-          instance.replaceState(errorState);
-          callbacks?.onError?.(errorState);
-        }
-      });
-  };
 
   getPayload(): Record<string, any> {
     if (!this.payload) {
@@ -714,7 +613,133 @@ export class AsyncState<T, E, R> implements StateInterface<T, E, R> {
 
 //region AsyncState methods helpers
 
-function cloneProducerProps<T, E, R>(props: ProducerProps<T, E, R>): ProducerSavedProps<T> {
+export type ProducerWrapperInput<T, E, R> = {
+  setProducerType(type: ProducerType): void,
+  setState: StateUpdater<T, E, R>,
+  getState(): State<T, E, R>,
+  instance?: StateInterface<T, E, R>,
+  setSuspender(p: Promise<T>): void,
+  replaceState(newState: State<T, E, R>, notify?: boolean),
+  getProducer(): Producer<T, E, R> | undefined | null,
+}
+export function producerWrapper<T, E = any, R = any>(
+  input: ProducerWrapperInput<T, E, R>,
+  props: ProducerProps<T, E, R>,
+  indicators: RunIndicators,
+  callbacks?: ProducerCallbacks<T, E, R>,
+): AbortFn {
+  const currentProducer = input.getProducer();
+  if (!isFunction(currentProducer)) {
+    indicators.fulfilled = true;
+    input.setProducerType(ProducerType.notProvided);
+    input.setState(props.args[0], props.args[1]);
+
+    if (callbacks) {
+      let currentState = input.getState();
+      switch (currentState.status) {
+        case Status.success: {
+          callbacks.onSuccess?.(currentState);
+          break;
+        }
+        case Status.aborted: {
+          callbacks.onAborted?.(currentState);
+          break;
+        }
+        case Status.error: {
+          callbacks.onError?.(currentState);
+          break;
+        }
+      }
+    }
+    return;
+  }
+  // the running promise is used to pass the status to pending and as suspender in react18+
+  let runningPromise;
+  // the execution value is the return of the initial producer function
+  let executionValue;
+  // it is important to clone to capture properties and save only serializable stuff
+  const savedProps = cloneProducerProps(props);
+
+  try {
+    executionValue = currentProducer!(props);
+    if (indicators.aborted) {
+      return;
+    }
+  } catch (e) {
+    if (indicators.aborted) {
+      return;
+    }
+    if (__DEV__ && input.instance) devtools.emitRunSync(input.instance, savedProps);
+    indicators.fulfilled = true;
+    let errorState = StateBuilder.error<T, E>(e, savedProps);
+    input.replaceState(errorState);
+    callbacks?.onError?.(errorState);
+    return;
+  }
+
+  if (isGenerator(executionValue)) {
+    input.setProducerType(ProducerType.generator);
+    if (__DEV__ && input.instance) devtools.emitRunGenerator(input.instance, savedProps);
+    // generatorResult is either {done, value} or a promise
+    let generatorResult;
+    try {
+      generatorResult = wrapStartedGenerator(executionValue, props, indicators);
+    } catch (e) {
+      indicators.fulfilled = true;
+      let errorState = StateBuilder.error<T, E>(e, savedProps);
+      input.replaceState(errorState);
+      callbacks?.onError?.(errorState);
+      return;
+    }
+    if (generatorResult.done) {
+      indicators.fulfilled = true;
+      let successState = StateBuilder.success(generatorResult.value, savedProps);
+      input.replaceState(successState);
+      callbacks?.onSuccess?.(successState);
+      return;
+    } else {
+      runningPromise = generatorResult;
+      input.setSuspender(runningPromise);
+      input.replaceState(StateBuilder.pending(savedProps));
+    }
+  } else if (isPromise(executionValue)) {
+    input.setProducerType(ProducerType.promise);
+    if (__DEV__ && input.instance) devtools.emitRunPromise(input.instance, savedProps);
+    runningPromise = executionValue;
+    input.setSuspender(runningPromise);
+    input.replaceState(StateBuilder.pending(savedProps));
+  } else { // final value
+    if (__DEV__ && input.instance) devtools.emitRunSync(input.instance, savedProps);
+    indicators.fulfilled = true;
+    input.setProducerType(ProducerType.sync);
+    let successState = StateBuilder.success(executionValue, savedProps);
+    input.replaceState(successState);
+    callbacks?.onSuccess?.(successState);
+    return;
+  }
+
+  runningPromise
+    .then(stateData => {
+      let aborted = indicators.aborted;
+      if (!aborted) {
+        indicators.fulfilled = true;
+        let successState = StateBuilder.success(stateData, savedProps);
+        input.replaceState(successState);
+        callbacks?.onSuccess?.(successState);
+      }
+    })
+    .catch(stateError => {
+      let aborted = indicators.aborted;
+      if (!aborted) {
+        indicators.fulfilled = true;
+        let errorState = StateBuilder.error<T, E>(stateError, savedProps);
+        input.replaceState(errorState);
+        callbacks?.onError?.(errorState);
+      }
+    });
+}
+
+export function cloneProducerProps<T, E, R>(props: ProducerProps<T, E, R>): ProducerSavedProps<T> {
   const output: ProducerSavedProps<T> = {
     lastSuccess: shallowClone(props.lastSuccess),
     payload: props.payload,

packages/core/src/index.ts

@@ -10,6 +10,8 @@ export {
   RunEffect,
   standaloneProducerEffectsCreator,
   readSource,
+  producerWrapper,
+  cloneProducerProps,
 } from "./AsyncState";
 
 export type {
@@ -36,8 +38,10 @@ export type {
   ProducerFunction,
   OnCacheLoadProps,
   ProducerRunInput,
+  ProducerCallbacks,
   ProducerRunConfig,
   ProducerSavedProps,
+  ProducerWrapperInput,
   StateFunctionUpdater,
   AsyncStateKeyOrSource,
   StateBuilderInterface,
@@ -69,5 +73,6 @@ export type {
 
 export {
   DevtoolsEvent, DevtoolsRequest, DevtoolsJournalEvent
-} from "./devtools/index"
+} from "./devtools/index";
+
 export {default as devtools} from "./devtools/Devtools"

packages/core/src/utils.ts

@@ -15,6 +15,11 @@ export function defaultHash(args?: any[], payload?: {[id: string]: any} | null):
   return JSON.stringify({args, payload});
 }
 
+//region useAsyncState value construction
+export function noop(): void {
+  // that's a noop fn
+}
+
 export function didNotExpire<T, E, R>(cachedState: CachedState<T, E, R>) {
   const {addedAt, deadline} = cachedState;
 

packages/docs/docs/api/99-concurrent-mode.md

@@ -39,12 +39,11 @@ This can be useful if you want to pass the read function to a child component
 to suspend only itself.
 
 ## Tearing
-The library doesn't include `useRef` at all, and schedules a render everytime
-the state changes, so it is immune to all tearing problems.
-
-Just don't make it tear with own custom selectors.
+The library performs an optimistic lock, so everytime a subscribed component
+renders, it will check the current version in the instance, if different, it
+will schedule an update.
 
 ## Transitions
 If your producer isn't used with a `runEffect`, then the transition to the
 `pending` state is scheduled immediately in a sync way. So you may benefit
-from `useTransition` ans `startTransition` APIs.
+from `useTransition` and `startTransition` APIs.

packages/react-async-states-utils/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "license": "MIT",
-  "version": "1.0.0-rc-2",
+  "version": "1.0.0-rc-3",
   "author": "incepter",
   "sideEffects": false,
   "main": "dist/umd/index",
@@ -20,7 +20,7 @@
     "dev": "pnpm clean:dist && rollup -c rollup/rollup.config.dev.js -w"
   },
   "peerDependencies": {
-    "react-async-states": ">=1.0.0-rc-11",
+    "react-async-states": "^1.0.0-rc-18",
     "react": "^16.8.0 || ^17.0.2 || ^18.0.0"
   },
   "devDependencies": {

packages/react-async-states-utils/src/index.ts

@@ -16,5 +16,6 @@ export type {
   StateBoundaryRenderProp
 } from "./StateBoundary";
 
+export {runc} from "./runc";
 export {addBooleanStatus} from "./selectors";
 export type {StateWithBooleanStatus} from "./selectors";