@player-ui/react 0.8.0--canary.307.9621 → 0.8.0-next.0

package/src/manager/types.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
-import type { CompletedState, Flow, FlowResult } from '@player-ui/player';
-import type { ReactPlayer, ReactPlayerOptions } from '../player';
+import type React from "react";
+import type { CompletedState, Flow, FlowResult } from "@player-ui/player";
+import type { ReactPlayer, ReactPlayerOptions } from "../player";
 
 export interface FinalState {
   /** Mark the iteration as complete */
@@ -24,14 +24,14 @@ export interface FlowManager {
    * @param previousValue - The result of the previous flow.
    */
   next: (
-    previousValue?: CompletedState
+    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?: (data?: FlowResult['data']) => void;
+  terminate?: (data?: FlowResult["data"]) => void;
 }
 
 export interface FallbackProps {
@@ -76,14 +76,14 @@ export type ManagedPlayerContext = {
 export type ManagedPlayerState =
   | {
       /** The managed player hasn't started yet */
-      value: 'not_started';
+      value: "not_started";
 
       /** The context for the managed state */
       context: ManagedPlayerContext;
     }
   | {
       /** The managed-player is awaiting a response from the flow manager */
-      value: 'pending';
+      value: "pending";
 
       /** The context for the managed state */
       context: ManagedPlayerContext & {
@@ -96,7 +96,7 @@ export type ManagedPlayerState =
     }
   | {
       /** A flow was retrieved from the flow manager, but hasn't been processed yet */
-      value: 'loaded';
+      value: "loaded";
 
       /** The context for the managed state */
       context: ManagedPlayerContext & {
@@ -109,7 +109,7 @@ export type ManagedPlayerState =
     }
   | {
       /** Player is currently executing a flow */
-      value: 'running';
+      value: "running";
       /** The context for the managed state */
       context: ManagedPlayerContext & {
         /** The currently running flow */
@@ -124,7 +124,7 @@ export type ManagedPlayerState =
     }
   | {
       /** Player has completed a flow */
-      value: 'completed';
+      value: "completed";
 
       /** The context for the managed state */
       context: ManagedPlayerContext & {
@@ -134,7 +134,7 @@ export type ManagedPlayerState =
     }
   | {
       /** The entire flow iteration has completed */
-      value: 'ended';
+      value: "ended";
 
       /** The context for the managed state */
       context: ManagedPlayerContext & {
@@ -144,7 +144,7 @@ export type ManagedPlayerState =
     }
   | {
       /** One of the steps in the flow has resulted in an error */
-      value: 'error';
+      value: "error";
 
       /** The context for the managed state */
       context: ManagedPlayerContext & {

package/src/player.tsx

@@ -1,26 +1,26 @@
 /* eslint-disable react/no-this-in-sfc */
-import React from 'react';
-import { SyncWaterfallHook, AsyncParallelHook } from 'tapable-ts';
-import { Subscribe, useSubscribedState } from '@player-ui/react-subscribe';
-import { Registry } from '@player-ui/partial-match-registry';
+import React from "react";
+import { SyncWaterfallHook, AsyncParallelHook } from "tapable-ts";
+import { Subscribe, useSubscribedState } from "@player-ui/react-subscribe";
+import { Registry } from "@player-ui/partial-match-registry";
 import type {
   CompletedState,
   PlayerPlugin,
   Flow,
   View,
-} from '@player-ui/player';
-import { Player } from '@player-ui/player';
-import { ErrorBoundary } from 'react-error-boundary';
-import type { AssetRegistryType } from './asset';
-import { AssetContext } from './asset';
-import { PlayerContext } from './utils';
+} from "@player-ui/player";
+import { Player } from "@player-ui/player";
+import { ErrorBoundary } from "react-error-boundary";
+import type { AssetRegistryType } from "./asset";
+import { AssetContext } from "./asset";
+import { PlayerContext } from "./utils";
 
-import type { ReactPlayerProps } from './app';
-import PlayerComp from './app';
-import OnUpdatePlugin from './plugins/onupdate-plugin';
+import type { ReactPlayerProps } from "./app";
+import PlayerComp from "./app";
+import OnUpdatePlugin from "./plugins/onupdate-plugin";
 
-const WEB_PLAYER_VERSION = '0.8.0--canary.307.9621';
-const COMMIT = '2f21b7b894c885ccfed826751ba96a0638e3d8d8';
+const WEB_PLAYER_VERSION = "__VERSION__";
+const COMMIT = "__GIT_COMMIT__";
 
 export interface DevtoolsGlobals {
   /** A global for a plugin to load to Player for devtools */
@@ -32,7 +32,7 @@ export interface DevtoolsGlobals {
 export type DevtoolsWindow = typeof window & DevtoolsGlobals;
 
 const _window: DevtoolsWindow | undefined =
-  typeof window === 'undefined' ? undefined : window;
+  typeof window === "undefined" ? undefined : window;
 
 export interface ReactPlayerInfo {
   /** Version of the running player */
@@ -64,12 +64,6 @@ export interface ReactPlayerOptions {
 
   /** A set of plugins to apply to this player */
   plugins?: Array<ReactPlayerPlugin>;
-
-  /**
-   * If the underlying reactPlayer.Component should use `React.Suspense` to trigger a loading state while waiting for content or content updates.
-   * It requires that a `React.Suspense` component handler be somewhere in the `reactPlayer.Component` hierarchy.
-   */
-  suspend?: boolean;
 }
 
 export type ReactPlayerComponentProps = Record<string, unknown>;
@@ -107,15 +101,9 @@ export class ReactPlayer {
   constructor(options?: ReactPlayerOptions) {
     this.options = options ?? {};
 
-    // Default the suspend option to `true` unless explicitly unset
-    // Remove the suspend option in the next major
-    if (!('suspend' in this.options)) {
-      this.options.suspend = true;
-    }
-
     const Devtools = _window?.__PLAYER_DEVTOOLS_PLUGIN;
     const onUpdatePlugin = new OnUpdatePlugin(
-      this.viewUpdateSubscription.publish
+      this.viewUpdateSubscription.publish,
     );
 
     const plugins = options?.plugins ?? [];
@@ -125,7 +113,7 @@ export class ReactPlayer {
     }
 
     const playerPlugins = plugins.filter((p) =>
-      Boolean(p.apply)
+      Boolean(p.apply),
     ) as PlayerPlugin[];
 
     this.player = options?.player ?? new Player({ plugins: playerPlugins });
@@ -159,7 +147,7 @@ export class ReactPlayer {
 
   /** Find instance of [Plugin] that has been registered to the web player */
   public findPlugin<Plugin extends ReactPlayerPlugin>(
-    symbol: symbol
+    symbol: symbol,
   ): Plugin | undefined {
     return this.options.plugins?.find((el) => el.symbol === symbol) as Plugin;
   }
@@ -193,7 +181,7 @@ export class ReactPlayer {
           onError={(err) => {
             const playerState = this.player.getState();
 
-            if (playerState.status === 'in-progress') {
+            if (playerState.status === "in-progress") {
               playerState.fail(err);
             }
           }}
@@ -214,10 +202,7 @@ export class ReactPlayer {
     /** the component to use to render the player */
     const WebPlayerComponent = () => {
       const view = useSubscribedState<View>(this.viewUpdateSubscription);
-
-      if (this.options.suspend) {
-        this.viewUpdateSubscription.suspend();
-      }
+      this.viewUpdateSubscription.suspend();
 
       return (
         <AssetContext.Provider
@@ -238,12 +223,10 @@ export class ReactPlayer {
    * If the `suspense` option is set, this will suspend while an update is pending, otherwise nothing will be rendered.
    */
   public setWaitForNextViewUpdate() {
-    // If the `suspend` option isn't set, then we need to reset immediately otherwise we risk flashing the old view while the new one is processing
-    const shouldCallResetHook =
-      this.options.suspend && this.hooks.onBeforeViewReset.isUsed();
+    const shouldCallResetHook = this.hooks.onBeforeViewReset.isUsed();
 
     return this.viewUpdateSubscription.reset(
-      shouldCallResetHook ? this.hooks.onBeforeViewReset.call() : undefined
+      shouldCallResetHook ? this.hooks.onBeforeViewReset.call() : undefined,
     );
   }
 
@@ -251,9 +234,7 @@ export class ReactPlayer {
     this.setWaitForNextViewUpdate();
 
     return this.player.start(flow).finally(async () => {
-      if (this.options?.suspend) {
-        await this.setWaitForNextViewUpdate();
-      }
+      await this.setWaitForNextViewUpdate();
     });
   }
 }

package/src/plugins/onupdate-plugin.ts

@@ -1,4 +1,4 @@
-import type { Player, PlayerPlugin, ViewInstance } from '@player-ui/player';
+import type { Player, PlayerPlugin, ViewInstance } from "@player-ui/player";
 
 export type OnUpdateCallback = (update: any) => void;
 
@@ -6,7 +6,7 @@ export type OnUpdateCallback = (update: any) => void;
  * A plugin that listens for view updates and publishes an event for when a view is updated
  */
 export default class OnUpdatePlugin implements PlayerPlugin {
-  name = 'view-update';
+  name = "view-update";
 
   private readonly onUpdateCallback: OnUpdateCallback;
 
@@ -31,7 +31,7 @@ export default class OnUpdatePlugin implements PlayerPlugin {
     // Attach listeners and publish an update event for a view already in progress
     const currentPlayerState = player.getState();
 
-    if (currentPlayerState.status === 'in-progress') {
+    if (currentPlayerState.status === "in-progress") {
       const { currentView } = currentPlayerState.controllers.view;
 
       if (currentView) {

package/src/plugins/tapstate-plugin.ts

@@ -1,11 +1,11 @@
-import type { PlayerFlowState, Player } from '@player-ui/player';
-import type { ReactPlayerPlugin } from '../player';
+import type { PlayerFlowState, Player } from "@player-ui/player";
+import type { ReactPlayerPlugin } from "../player";
 
 /**
  * A plugin to tap into state transition changes and call an arbitrary update function
  */
 export class StateTapPlugin implements ReactPlayerPlugin {
-  name = 'statetap';
+  name = "statetap";
   private callbackFunction: (state: PlayerFlowState) => void;
 
   constructor(callback: (state: PlayerFlowState) => void) {
@@ -13,7 +13,7 @@ export class StateTapPlugin implements ReactPlayerPlugin {
   }
 
   apply(player: Player) {
-    player.hooks.state.tap('usePlayer', (newPlayerState: PlayerFlowState) => {
+    player.hooks.state.tap("usePlayer", (newPlayerState: PlayerFlowState) => {
       this.callbackFunction(newPlayerState);
     });
   }

package/src/utils/__tests__/helpers.test.ts

@@ -0,0 +1,39 @@
+import { test, expect, vitest } from "vitest";
+import {
+  trimSlashes,
+  removeEmptyValuesFromObject,
+  callOrReturn,
+} from "../helpers";
+
+test("trims all the slashes from start and end", () => {
+  expect(trimSlashes("/test/")).toBe("test");
+  expect(trimSlashes("/test")).toBe("test");
+  expect(trimSlashes("test/")).toBe("test");
+  expect(trimSlashes("//test//")).toBe("test");
+  expect(trimSlashes("/te/st/")).toBe("te/st");
+});
+
+test("removes all nullable key:values from object", () => {
+  expect(
+    removeEmptyValuesFromObject({
+      a: true,
+      b: false,
+      c: undefined,
+      d: null,
+      e: 0,
+    }),
+  ).toMatchInlineSnapshot(`
+    {
+      "a": true,
+      "b": false,
+      "e": 0,
+    }
+  `);
+});
+
+test("calls arg1 when instance of function with arg2 value", () => {
+  const fn = vitest.fn();
+  callOrReturn(fn, ["abc"]);
+  expect(fn).toHaveBeenCalledWith(["abc"]);
+  expect(callOrReturn("123", ["abc"])).toBe("123");
+});

package/src/utils/__tests__/url.test.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "vitest";
+import { buildUrl } from "../url";
+
+test("builds a URL with no query parameters added", () => {
+  expect(buildUrl("https://example.com")).toMatchInlineSnapshot(
+    `"https://example.com/"`,
+  );
+});
+
+test("builds a URL with object of query parameters added", () => {
+  expect(
+    buildUrl("https://example.com", { a: 1, b: 2, c: "3", d: true }),
+  ).toMatchInlineSnapshot(`"https://example.com/?a=1&b=2&c=3&d=true"`);
+});

package/src/utils/helpers.ts

@@ -2,24 +2,27 @@
  * Trim leading and trailing slashes from string
  */
 export function trimSlashes(str: string) {
-  return str.replace(/^\/+|\/+$/g, '');
+  return str.replace(/^\/+|\/+$/g, "");
 }
 
 /**
  * Removes any key: value pairs from an object when the value is null or undefined
  */
 export function removeEmptyValuesFromObject(
-  obj: Record<string, any>
+  obj: Record<string, any>,
 ): Record<string, NonNullable<any>> {
-  return Object.keys(obj).reduce((acc, key) => {
-    const value = obj[key];
+  return Object.keys(obj).reduce(
+    (acc, key) => {
+      const value = obj[key];
 
-    if (value !== null && value !== undefined) {
-      acc[key] = value;
-    }
+      if (value !== null && value !== undefined) {
+        acc[key] = value;
+      }
 
-    return acc;
-  }, {} as Record<string, any>);
+      return acc;
+    },
+    {} as Record<string, any>,
+  );
 }
 
 /** Check if the object has no keys */
@@ -29,9 +32,9 @@ export function isEmptyObject(obj: Record<string, unknown>) {
 
 /** Check if the argument is a function */
 export function isFunction<ReturnType>(
-  maybeFn: ReturnType | ((...args: unknown[]) => ReturnType)
+  maybeFn: ReturnType | ((...args: unknown[]) => ReturnType),
 ): maybeFn is (...args: unknown[]) => ReturnType {
-  return Boolean(maybeFn instanceof Function || typeof maybeFn === 'function');
+  return Boolean(maybeFn instanceof Function || typeof maybeFn === "function");
 }
 
 /**
@@ -40,7 +43,7 @@ export function isFunction<ReturnType>(
 export function callOrReturn<
   ReturnType,
   FnArgs extends Array<unknown> = unknown[],
-  FnType = (...args: FnArgs) => ReturnType
+  FnType = (...args: FnArgs) => ReturnType,
 >(maybeFn: FnType | ReturnType, fnArgs: FnArgs): ReturnType {
   if (isFunction(maybeFn)) {
     return maybeFn(fnArgs) as ReturnType;

package/src/utils/index.tsx

@@ -1,6 +1,6 @@
-export * from './player-context';
-export * from './use-logger';
-export * from './use-asset-props';
-export * from './helpers';
-export * from './url';
-export * from './shared-constants';
+export * from "./player-context";
+export * from "./use-logger";
+export * from "./use-asset-props";
+export * from "./helpers";
+export * from "./url";
+export * from "./shared-constants";

package/src/utils/player-context.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { Player, NavigationFlowViewState } from '@player-ui/player';
+import React from "react";
+import type { Player, NavigationFlowViewState } from "@player-ui/player";
 
 export interface PlayerContextType {
   /**

package/src/utils/shared-constants.tsx

@@ -1,4 +1,4 @@
-import { usePlayer } from './player-context';
+import { usePlayer } from "./player-context";
 
 /** Hook to get a constant under a specific namespace */
 export function useGetConstantByType(type: string, key: string): unknown {
@@ -11,5 +11,5 @@ export function useGetConstantByType(type: string, key: string): unknown {
 export function useGetConstant(key: string): unknown {
   const player = usePlayer();
 
-  return player?.constantsController.getConstants(key, 'constants');
+  return player?.constantsController.getConstants(key, "constants");
 }

package/src/utils/url.ts

@@ -1,11 +1,11 @@
-import { isEmptyObject } from './helpers';
+import { isEmptyObject } from "./helpers";
 
 /**
  * Combines a URL with any additional parameters
  */
 export function buildUrl(
   url: string,
-  params: Record<string, unknown> = {}
+  params: Record<string, unknown> = {},
 ): string {
   const baseUrl = new URL(url);
 

package/src/utils/use-asset-props.tsx

@@ -1,9 +1,9 @@
-import type { Asset } from '@player-ui/player';
+import type { Asset } from "@player-ui/player";
 
 /** Common props for any dom node */
 export function useAssetProps(asset: Asset) {
   return {
     id: asset.id,
-    'data-asset-type': asset.type,
+    "data-asset-type": asset.type,
   };
 }

package/src/utils/use-logger.ts

@@ -1,6 +1,6 @@
-import type { Logger } from '@player-ui/player';
-import { NoopLogger } from '@player-ui/player';
-import { usePlayer } from './player-context';
+import type { Logger } from "@player-ui/player";
+import { NoopLogger } from "@player-ui/player";
+import { usePlayer } from "./player-context";
 
 const noopLogger = new NoopLogger();
 

package/types/app.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { View } from "@player-ui/player";
+export interface ReactPlayerProps {
+    /**
+     * The Content view object to render
+     */
+    view: View;
+}
+/**
+ * The entry for the ReactPlayer's React tree
+ */
+declare const ReactPlayer: ({ view }: ReactPlayerProps) => React.JSX.Element;
+export default ReactPlayer;
+//# sourceMappingURL=app.d.ts.map

package/types/asset/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { Asset as AssetType, AssetWrapper } from "@player-ui/player";
+import type { Registry } from "@player-ui/partial-match-registry";
+export type AssetRegistryType = Registry<React.ComponentType<any>>;
+export interface ContextType {
+    /**
+     * A registry of Asset -> React Components
+     */
+    registry?: AssetRegistryType;
+}
+export declare const AssetContext: React.Context<ContextType>;
+/**
+ * A React Component that looks up an implementation from a registry
+ */
+export declare const ReactAsset: (props: AssetType<string> | AssetWrapper<AssetType<string>>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/hooks.d.ts

@@ -0,0 +1,17 @@
+import type { Player, PlayerFlowState } from "@player-ui/player";
+import type { ReactPlayerOptions } from "./player";
+import { ReactPlayer } from "./player";
+export interface UseReactPlayerReturn {
+    /** The web-player instance */
+    reactPlayer: ReactPlayer;
+    /** Player instance */
+    player: Player;
+    /** The state of Player */
+    playerState: PlayerFlowState;
+}
+/**
+ * The `useReactPlayer` hook is an easy way to integrate the web-player into your React app.
+ * Simply supply your config, plugins, and an optional flow, which will be automatically started for you when changed.
+ */
+export declare const useReactPlayer: (options?: ReactPlayerOptions) => UseReactPlayerReturn;
+//# sourceMappingURL=hooks.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,9 @@
+export * from "@player-ui/player";
+export * from "./player";
+export * from "./hooks";
+export * from "./manager/managed-player";
+export * from "./manager/request-time";
+export * from "./manager/types";
+export * from "./asset";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/types/manager/managed-player.d.ts

@@ -0,0 +1,93 @@
+import React from "react";
+import type { FlowManager, ManagedPlayerProps, ManagedPlayerState, ManagerMiddleware, ManagedPlayerContext } from "./types";
+import type { ReactPlayerOptions } from "../player";
+export interface StateChangeCallback {
+    /** Trigger for state changes */
+    onState: (s: ManagedPlayerState) => void;
+}
+/**
+ * An object to store the state of the managed player
+ */
+declare class ManagedState {
+    state?: ManagedPlayerState;
+    private callbacks;
+    private middleware?;
+    constructor({ middleware, }: {
+        /** middleware to use in the managed player */
+        middleware?: ManagerMiddleware;
+    });
+    /** Add a listener to state changes */
+    addListener(callback: StateChangeCallback): () => void;
+    /** start the managed flow */
+    start(options: {
+        /** the flow manager to use */
+        manager: FlowManager;
+        /** the config to use when creating a player */
+        playerConfig: ReactPlayerOptions;
+    }): this;
+    /** reset starts from nothing */
+    reset(): void;
+    /** restart starts from the last result */
+    restart(): void;
+    private setState;
+    private processState;
+}
+/** Creates an x-state state machine that persists when this component is no longer renders (due to Suspense) */
+export declare const usePersistentStateMachine: (options: {
+    /** the flow manager to use */
+    manager: FlowManager;
+    /** Player config  */
+    playerConfig: ReactPlayerOptions;
+    /** Any middleware for the manager */
+    middleware?: ManagerMiddleware;
+}) => {
+    managedState: ManagedState;
+    state: {
+        value: "not_started";
+        context: ManagedPlayerContext;
+    } | {
+        value: "pending";
+        context: ManagedPlayerContext & {
+            prevResult?: import("@player-ui/player").CompletedState | undefined;
+            next: Promise<import("./types").FinalState | import("./types").NextState<import("@player-ui/player").Flow<import("@player-ui/player").Asset<string>>>>;
+        };
+    } | {
+        value: "loaded";
+        context: ManagedPlayerContext & {
+            flow: import("@player-ui/player").Flow<import("@player-ui/player").Asset<string>>;
+            prevResult?: import("@player-ui/player").CompletedState | undefined;
+        };
+    } | {
+        value: "running";
+        context: ManagedPlayerContext & {
+            flow: import("@player-ui/player").Flow<import("@player-ui/player").Asset<string>>;
+            result: Promise<import("@player-ui/player").CompletedState>;
+            prevResult?: import("@player-ui/player").CompletedState | undefined;
+        };
+    } | {
+        value: "completed";
+        context: ManagedPlayerContext & {
+            result?: import("@player-ui/player").CompletedState | undefined;
+        };
+    } | {
+        value: "ended";
+        context: ManagedPlayerContext & {
+            result?: import("@player-ui/player").CompletedState | undefined;
+        };
+    } | {
+        value: "error";
+        context: ManagedPlayerContext & {
+            error: Error;
+            prevResult?: import("@player-ui/player").CompletedState | undefined;
+        };
+    } | undefined;
+};
+/**
+ * A ManagedPlayer is a component responsible for orchestrating multi-flow experiences using Player.
+ * Provide a valid `FlowManager` to handle fetching the next flow.
+ *
+ * `suspense` must be enabled to wait for results in flight.
+ */
+export declare const ManagedPlayer: (props: ManagedPlayerProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=managed-player.d.ts.map

package/types/manager/request-time.d.ts

@@ -0,0 +1,7 @@
+import type { ReactPlayerPlugin } from "../player";
+/** hook to time a promise and add it to the metrics plugin */
+export declare const useRequestTime: () => {
+    withRequestTime: <Type>(nextPromise: Promise<Type>) => Promise<Type>;
+    RequestTimeMetricsPlugin: ReactPlayerPlugin;
+};
+//# sourceMappingURL=request-time.d.ts.map