@player-ui/react 0.15.4--canary.881.37421 → 0.15.4--canary.885.37636

package/src/manager/__tests__/managed-player.test.tsx

@@ -10,7 +10,6 @@ import {
 import { ManagedPlayer } from "../managed-player";
 import type { FlowManager, FallbackProps } from "../types";
 import { SimpleAssetPlugin } from "../../__tests__/helpers/simple-asset-plugin";
-import { InProgressState } from "@player-ui/player";
 
 vitest.mock("@player-ui/metrics-plugin", async () => {
   const actual: object = await vitest.importActual("@player-ui/metrics-plugin");
@@ -453,11 +452,7 @@ describe.each([
 
     await screen.findByTestId("flow-1");
     result.unmount();
-
-    const terminateArgument: InProgressState =
-      manager.terminate?.mock.calls[0][0];
-    expect(terminateArgument.flow).toMatchSnapshot();
-    expect(terminateArgument.status).toBe("in-progress");
+    expect(manager.terminate).toBeCalledWith({ returns: { id: "123" } });
   });
 
   test("handles new manager", async () => {
@@ -562,13 +557,7 @@ describe.each([
     let newManagerBtn = await screen.findByTestId("newManager");
     await user.click(newManagerBtn);
 
-    // terminate should receive an InProgressState
-    expect(previousManager.current.terminate).toBeCalled();
-    const terminateArgument1: InProgressState =
-      previousManager.current.terminate?.mock.calls[0][0];
-    expect(terminateArgument1.flow).toMatchSnapshot();
-    expect(terminateArgument1.status).toBe("in-progress");
-
+    expect(previousManager.current.terminate).toBeCalledWith({});
     expect(previousManager.current.next).toBeCalledTimes(1);
     expect(manager.next).toBeCalledTimes(1);
     await screen.findByTestId("flow-1-2");
@@ -577,13 +566,7 @@ describe.each([
     await user.click(newManagerBtn);
 
     const prevMan = previousManager.current;
-    // terminate should receive an InProgressState
-    expect(prevMan.terminate).toBeCalled();
-    const terminateArgument2: InProgressState =
-      prevMan.terminate?.mock.calls[0][0];
-    expect(terminateArgument2.flow).toMatchSnapshot();
-    expect(terminateArgument2.status).toBe("in-progress");
-
+    expect(prevMan.terminate).toBeCalledWith({});
     expect(prevMan.next).toBeCalledTimes(1);
     expect(manager.next).toBeCalledTimes(1);
     await screen.findByTestId("flow-1-3");

package/src/manager/managed-player.tsx

@@ -252,7 +252,9 @@ export const usePersistentStateMachine = (options: {
         oldManagedState.state?.value === "running" &&
         playerState?.status === "in-progress"
       ) {
-        previousManager.current.terminate?.(playerState);
+        previousManager.current.terminate?.(
+          playerState.controllers.data.serialize(),
+        );
       }
     }
 
@@ -339,7 +341,7 @@ export const ManagedPlayer = (
     } else if (state?.value === "error") {
       props.onError?.(state?.context.error);
     } else if (state?.value === "running") {
-      props.onStartedFlow?.(state.context.flow);
+      props.onStartedFlow?.();
     }
   }
 
@@ -350,7 +352,7 @@ export const ManagedPlayer = (
       const playerState = state?.context.reactPlayer.player.getState();
 
       if (state?.value === "running" && playerState?.status === "in-progress") {
-        props.manager.terminate?.(playerState);
+        props.manager.terminate?.(playerState.controllers.data.serialize());
       }
     };
   }, [props.manager, state?.context.reactPlayer.player, state?.value]);

package/src/manager/types.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { CompletedState, Flow, InProgressState } from "@player-ui/player";
+import type { CompletedState, Flow, FlowResult } from "@player-ui/player";
 import type { ReactPlayer, ReactPlayerOptions } from "../player";
 
 export interface FinalState {
@@ -7,16 +7,14 @@ export interface FinalState {
   done: true;
 }
 
-export interface NextState {
+export interface NextState<T> {
   /** Optional mark the iteration as _not_ completed */
-  done: false;
+  done?: false;
 
   /** The next value in the iteration */
-  value: Flow;
+  value: T;
 }
 
-/** A JS Iterator that returns a new flow or completion marker
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator */
 export interface FlowManager {
   /**
    * An iterator implementation that takes the result of the previous flow and returns a new one or completion marker.
@@ -25,13 +23,15 @@ export interface FlowManager {
    *
    * @param previousValue - The result of the previous flow.
    */
-  next: (result?: CompletedState) => Promise<FinalState | NextState>;
+  next: (
+    previousValue?: CompletedState,
+  ) => Promise<FinalState | NextState<Flow>>;
 
   /**
    * Called when the flow is ended early (the react tree is torn down)
    * Allows clients the opportunity to save-data before destroying the tree
    */
-  terminate?: (state?: InProgressState) => void;
+  terminate?: (data?: FlowResult["data"]) => void;
 }
 
 export interface FallbackProps {
@@ -50,7 +50,7 @@ export interface ManagedPlayerProps extends ReactPlayerOptions {
   manager: FlowManager;
 
   /** A callback when a flow is started */
-  onStartedFlow?: (flow: Flow) => void;
+  onStartedFlow?: () => void;
 
   /** A callback when the entire async iteration is completed */
   onComplete?: (finalState?: CompletedState) => void;
@@ -91,7 +91,7 @@ export type ManagedPlayerState =
         prevResult?: CompletedState;
 
         /** A promise from the flow manager for the next state */
-        next: Promise<FinalState | NextState>;
+        next: Promise<FinalState | NextState<Flow>>;
       };
     }
   | {

package/src/player.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import { SyncWaterfallHook, AsyncParallelHook } from "tapable-ts";
-import {
-  Subscribe,
-  useSubscribedState,
-  useSubscriber,
-} from "@player-ui/react-subscribe";
+import { Subscribe, useSubscribedState } from "@player-ui/react-subscribe";
 import { Registry } from "@player-ui/partial-match-registry";
 import type {
   CompletedState,
@@ -14,7 +10,7 @@ import type {
   PlayerInfo,
 } from "@player-ui/player";
 import { Player } from "@player-ui/player";
-import { ErrorBoundary, FallbackProps } from "react-error-boundary";
+import { ErrorBoundary } from "react-error-boundary";
 import type { AssetRegistryType } from "./asset";
 import { AssetContext } from "./asset";
 import { PlayerContext } from "./utils";
@@ -23,10 +19,6 @@ import type { ReactPlayerProps } from "./app";
 import { ReactPlayer as PlayerComp } from "./app";
 import { OnUpdatePlugin } from "./plugins/onupdate-plugin";
 
-/** Backup context for receiving ReactPlayerComponentProps when components setup in the webComponent call don't pass the props down to their inner components. */
-export const ReactPlayerPropsContext: React.Context<ReactPlayerComponentProps> =
-  React.createContext<ReactPlayerComponentProps>({ isInErrorState: false });
-
 export interface DevtoolsGlobals {
   /** A global for a plugin to load to Player for devtools */
   __PLAYER_DEVTOOLS_PLUGIN?: {
@@ -60,11 +52,7 @@ export interface ReactPlayerOptions {
   plugins?: Array<ReactPlayerPlugin>;
 }
 
-export type ReactPlayerComponentProps = {
-  /** Whether or not player is currently recovering from an error. */
-  isInErrorState?: boolean;
-  [key: string]: unknown;
-};
+export type ReactPlayerComponentProps = Record<string, unknown>;
 
 /** A Player that renders UI through React */
 export class ReactPlayer {
@@ -76,10 +64,7 @@ export class ReactPlayer {
     /**
      * A hook to create a React Component to be used for Player, regardless of the current flow state
      */
-    webComponent: SyncWaterfallHook<
-      [React.ComponentType<any>],
-      Record<string, any>
-    >;
+    webComponent: SyncWaterfallHook<[React.ComponentType], Record<string, any>>;
     /**
      * A hook to create a React Component that's used to render a specific view.
      * It will be called for each view update from the core player.
@@ -112,8 +97,7 @@ export class ReactPlayer {
     onBeforeViewReset: new AsyncParallelHook(),
   };
 
-  public readonly viewUpdateSubscription: Subscribe<View> =
-    new Subscribe<View>();
+  public readonly viewUpdateSubscription = new Subscribe<View>();
   private reactPlayerInfo: ReactPlayerInfo;
 
   constructor(options?: ReactPlayerOptions) {
@@ -169,20 +153,11 @@ export class ReactPlayer {
   }
 
   /** Register and apply [Plugin] if one with the same symbol is not already registered. */
-  public registerPlugin(plugin: ReactPlayerPlugin | PlayerPlugin): void {
-    if (plugin.apply) {
-      this.player.registerPlugin(plugin as PlayerPlugin);
-    }
-
-    if ((plugin as ReactPlayerPlugin).applyReact) {
-      (plugin as ReactPlayerPlugin).applyReact?.(this);
-    }
-
-    if (!this.options.plugins) {
-      this.options.plugins = [];
-    }
+  public registerPlugin(plugin: ReactPlayerPlugin): void {
+    if (!plugin.applyReact) return;
 
-    this.options.plugins.push(plugin);
+    plugin.applyReact(this);
+    this.options.plugins?.push(plugin);
   }
 
   /**
@@ -206,118 +181,20 @@ export class ReactPlayer {
 
     /** Wrap the Error boundary and context provider after the hook call to catch anything wrapped by the hook */
     const ReactPlayerComponent = (props: ReactPlayerComponentProps) => {
-      const trackedErrors = React.useRef(new Map<Error, boolean>());
-      const [errorSubId, setErrorSubId] = React.useState<number | undefined>(
-        undefined,
-      );
-      const { subscribe, unsubscribe } = useSubscriber(
-        this.viewUpdateSubscription,
-      );
-
-      const componentProps: ReactPlayerComponentProps = React.useMemo(
-        () => ({
-          ...props,
-          isInErrorState: errorSubId !== undefined,
-        }),
-        [props, errorSubId],
-      );
-
-      /** Callback to remove all tracked errors and unsub from  */
-      const clearErrorTracking = React.useCallback(() => {
-        trackedErrors.current.clear();
-        setErrorSubId((prev) => {
-          if (prev !== undefined) {
-            unsubscribe(prev);
-          }
-
-          return undefined;
-        });
-      }, []);
-
-      React.useEffect(() => {
-        // Clear errors and error subscription on unmount
-        return clearErrorTracking;
-      }, [clearErrorTracking]);
-
-      /** capture error and return true or false to represent if we are recovering from the error or not. */
-      const captureError = React.useCallback(
-        (err: Error) => {
-          // If player isn't in progress we can't actually render anything so render errors are irrelevant.
-          const playerState = this.player.getState();
-          if (playerState.status !== "in-progress") {
-            this.player.logger.warn(
-              `[ReactPlayer]: An error occurred during rendering but was ignored due to a change in the player state (current state: '${playerState.status}'). Error Details:`,
-              err,
-            );
-            return false;
-          }
-
-          // Only capture each error once.
-          const currentError = trackedErrors.current.get(err);
-          if (currentError !== undefined) {
-            return currentError;
-          }
-
-          let isRecovering = false;
-          setErrorSubId((prev) => {
-            // subscribe only if no subscription available.
-            // Needs to happen before capture error to ensure error recovery isn't missed
-            const subId =
-              prev === undefined
-                ? subscribe(clearErrorTracking, {
-                    initializeWithPreviousValue: false,
-                  })
-                : prev;
-
-            // Get skipped state after trying to capture.
-            isRecovering = playerState.controllers.error.captureError(err);
-            trackedErrors.current.set(err, isRecovering);
-
-            // If we can't recover from the error, avoid updating state to stay in error boundary
-            if (!isRecovering) {
-              // Unsub if not previously subbed since we don't need to reset the view
-              if (subId !== prev) {
-                unsubscribe(subId);
-              }
-              return prev;
-            }
-
-            return subId;
-          });
-
-          return isRecovering;
-        },
-        [errorSubId],
-      );
-
       return (
         <ErrorBoundary
-          fallbackRender={(fallbackProps: FallbackProps) => {
-            const isRecovering = captureError(fallbackProps.error);
+          fallbackRender={() => null}
+          onError={(err) => {
+            const playerState = this.player.getState();
 
-            if (!isRecovering) {
-              // Display nothing if not recovering. Let the player state fail and handle what the view will be.
-              return null;
+            if (playerState.status === "in-progress") {
+              playerState.fail(err);
             }
-            fallbackProps.resetErrorBoundary();
-
-            // Render the same as on success when recovering to preserve the react tree.
-            return (
-              <ReactPlayerPropsContext.Provider
-                value={{ ...componentProps, isInErrorState: true }}
-              >
-                <PlayerContext.Provider value={{ player: this.player }}>
-                  <BaseComp {...componentProps} isInErrorState />
-                </PlayerContext.Provider>
-              </ReactPlayerPropsContext.Provider>
-            );
           }}
         >
-          <ReactPlayerPropsContext.Provider value={{ ...componentProps }}>
-            <PlayerContext.Provider value={{ player: this.player }}>
-              <BaseComp {...componentProps} />
-            </PlayerContext.Provider>
-          </ReactPlayerPropsContext.Provider>
+          <PlayerContext.Provider value={{ player: this.player }}>
+            <BaseComp {...props} />
+          </PlayerContext.Provider>
         </ErrorBoundary>
       );
     };
@@ -329,27 +206,17 @@ export class ReactPlayer {
     const ActualPlayerComp = this.hooks.playerComponent.call(PlayerComp);
 
     /** the component to use to render the player */
-    const WebPlayerComponent: React.ComponentType = (): React.ReactElement => {
-      const { isInErrorState } = React.useContext(ReactPlayerPropsContext);
+    const WebPlayerComponent = () => {
       const view = useSubscribedState<View>(this.viewUpdateSubscription);
-      const lastSuccessfulView = React.useRef<View | undefined>(undefined);
       this.viewUpdateSubscription.suspend();
 
-      React.useEffect(() => {
-        if (!isInErrorState) {
-          lastSuccessfulView.current = view;
-        }
-      }, [isInErrorState, view]);
-
-      const displayedView = isInErrorState ? lastSuccessfulView.current : view;
-
       return (
         <AssetContext.Provider
           value={{
             registry: this.assetRegistry,
           }}
         >
-          {displayedView && <ActualPlayerComp view={displayedView} />}
+          {view && <ActualPlayerComp view={view} />}
         </AssetContext.Provider>
       );
     };

package/types/asset/AssetRenderError.d.ts

@@ -1,16 +1,10 @@
-import { ErrorSeverity, type Asset, type PlayerErrorMetadata } from "@player-ui/player";
-export type AssetRenderErrorMetadata = {
-    assetId: string;
-};
-export declare class AssetRenderError extends Error implements PlayerErrorMetadata<AssetRenderErrorMetadata> {
+import type { Asset } from "@player-ui/player";
+export declare class AssetRenderError extends Error {
     readonly rootAsset: Asset;
     readonly innerException?: unknown | undefined;
     private assetParentPath;
     initialMessage: string;
     innerExceptionMessage: string;
-    readonly type: string;
-    readonly severity: ErrorSeverity;
-    readonly metadata: AssetRenderErrorMetadata;
     constructor(rootAsset: Asset, message?: string, innerException?: unknown | undefined);
     private updateMessage;
     getAssetPathMessage(): string;

package/types/manager/types.d.ts

@@ -1,18 +1,16 @@
 import type React from "react";
-import type { CompletedState, Flow, InProgressState } from "@player-ui/player";
+import type { CompletedState, Flow, FlowResult } from "@player-ui/player";
 import type { ReactPlayer, ReactPlayerOptions } from "../player";
 export interface FinalState {
     /** Mark the iteration as complete */
     done: true;
 }
-export interface NextState {
+export interface NextState<T> {
     /** Optional mark the iteration as _not_ completed */
-    done: false;
+    done?: false;
     /** The next value in the iteration */
-    value: Flow;
+    value: T;
 }
-/** A JS Iterator that returns a new flow or completion marker
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator */
 export interface FlowManager {
     /**
      * An iterator implementation that takes the result of the previous flow and returns a new one or completion marker.
@@ -21,12 +19,12 @@ export interface FlowManager {
      *
      * @param previousValue - The result of the previous flow.
      */
-    next: (result?: CompletedState) => Promise<FinalState | NextState>;
+    next: (previousValue?: CompletedState) => Promise<FinalState | NextState<Flow>>;
     /**
      * Called when the flow is ended early (the react tree is torn down)
      * Allows clients the opportunity to save-data before destroying the tree
      */
-    terminate?: (state?: InProgressState) => void;
+    terminate?: (data?: FlowResult["data"]) => void;
 }
 export interface FallbackProps {
     /** A callback to reset the flow iteration from the start */
@@ -40,7 +38,7 @@ export interface ManagedPlayerProps extends ReactPlayerOptions {
     /** The manager for populating the next flows */
     manager: FlowManager;
     /** A callback when a flow is started */
-    onStartedFlow?: (flow: Flow) => void;
+    onStartedFlow?: () => void;
     /** A callback when the entire async iteration is completed */
     onComplete?: (finalState?: CompletedState) => void;
     /** A callback for any errors */
@@ -69,7 +67,7 @@ export type ManagedPlayerState = {
         /** The previous completed state */
         prevResult?: CompletedState;
         /** A promise from the flow manager for the next state */
-        next: Promise<FinalState | NextState>;
+        next: Promise<FinalState | NextState<Flow>>;
     };
 } | {
     /** A flow was retrieved from the flow manager, but hasn't been processed yet */

package/types/player.d.ts

@@ -1,12 +1,10 @@
 import React from "react";
 import { SyncWaterfallHook, AsyncParallelHook } from "tapable-ts";
 import { Subscribe } from "@player-ui/react-subscribe";
-import type { CompletedState, PlayerPlugin, Flow, View, PlayerInfo } from "@player-ui/player";
+import type { CompletedState, PlayerPlugin, Flow, PlayerInfo } from "@player-ui/player";
 import { Player } from "@player-ui/player";
 import type { AssetRegistryType } from "./asset";
 import type { ReactPlayerProps } from "./app";
-/** Backup context for receiving ReactPlayerComponentProps when components setup in the webComponent call don't pass the props down to their inner components. */
-export declare const ReactPlayerPropsContext: React.Context<ReactPlayerComponentProps>;
 export interface DevtoolsGlobals {
     /** A global for a plugin to load to Player for devtools */
     __PLAYER_DEVTOOLS_PLUGIN?: {
@@ -29,11 +27,7 @@ export interface ReactPlayerOptions {
     /** A set of plugins to apply to this player */
     plugins?: Array<ReactPlayerPlugin>;
 }
-export type ReactPlayerComponentProps = {
-    /** Whether or not player is currently recovering from an error. */
-    isInErrorState?: boolean;
-    [key: string]: unknown;
-};
+export type ReactPlayerComponentProps = Record<string, unknown>;
 /** A Player that renders UI through React */
 export declare class ReactPlayer {
     readonly options: ReactPlayerOptions;
@@ -44,9 +38,7 @@ export declare class ReactPlayer {
         /**
          * A hook to create a React Component to be used for Player, regardless of the current flow state
          */
-        webComponent: SyncWaterfallHook<[
-            React.ComponentType<any>
-        ], Record<string, any>>;
+        webComponent: SyncWaterfallHook<[React.ComponentType], Record<string, any>>;
         /**
          * A hook to create a React Component that's used to render a specific view.
          * It will be called for each view update from the core player.
@@ -60,7 +52,9 @@ export declare class ReactPlayer {
          */
         onBeforeViewReset: AsyncParallelHook<[], Record<string, any>>;
     };
-    readonly viewUpdateSubscription: Subscribe<View>;
+    readonly viewUpdateSubscription: Subscribe<import("@player-ui/player").Asset<string> & {
+        validation?: Array<import("@player-ui/player").Validation.CrossfieldReference>;
+    }>;
     private reactPlayerInfo;
     constructor(options?: ReactPlayerOptions);
     /** Returns the current version Player */
@@ -70,7 +64,7 @@ export declare class ReactPlayer {
     /** Find instance of [Plugin] that has been registered to the web player */
     findPlugin<Plugin extends ReactPlayerPlugin>(symbol: symbol): Plugin | undefined;
     /** Register and apply [Plugin] if one with the same symbol is not already registered. */
-    registerPlugin(plugin: ReactPlayerPlugin | PlayerPlugin): void;
+    registerPlugin(plugin: ReactPlayerPlugin): void;
     /**
      * Returns the current version of the running React Player
      * @deprecated use `getPlayerVersion()` instead. Will be removed next major