@player-ui/react 0.3.0-next.3 → 0.3.0-next.4

package/src/player.tsx

@@ -1,5 +1,8 @@
 /* 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 type {
   CompletedState,
   PlayerPlugin,
@@ -7,25 +10,22 @@ import type {
   View,
 } from '@player-ui/player';
 import { Player } from '@player-ui/player';
-import type { AssetRegistryType } from '@player-ui/react-asset';
-import { AssetContext } from '@player-ui/react-asset';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PlayerContext } from '@player-ui/react-utils';
-import { SyncWaterfallHook, AsyncParallelHook } from 'tapable-ts';
-import { Subscribe, useSubscribedState } from '@player-ui/react-subscribe';
-import { Registry } from '@player-ui/partial-match-registry';
+import type { AssetRegistryType } from './asset';
+import { AssetContext } from './asset';
+import { PlayerContext } from './utils';
 
-import type { WebPlayerProps } from './app';
+import type { ReactPlayerProps } from './app';
 import PlayerComp from './app';
 import OnUpdatePlugin from './plugins/onupdate-plugin';
 
-const WEB_PLAYER_VERSION = '0.3.0-next.3';
-const COMMIT = '92ff0044b739d9cce3b1e37bd729f8241d04a2da';
+const WEB_PLAYER_VERSION = '0.3.0-next.4';
+const COMMIT = '774a3cf3b0765796901d03a311a06ee68e690a74';
 
 export interface DevtoolsGlobals {
   /** A global for a plugin to load to Player for devtools */
   __PLAYER_DEVTOOLS_PLUGIN?: {
-    new (): WebPlayerPlugin;
+    new (): ReactPlayerPlugin;
   };
 }
 
@@ -34,52 +34,52 @@ export type DevtoolsWindow = typeof window & DevtoolsGlobals;
 const _window: DevtoolsWindow | undefined =
   typeof window === 'undefined' ? undefined : window;
 
-export interface WebPlayerInfo {
+export interface ReactPlayerInfo {
   /** Version of the running player */
   playerVersion: string;
 
-  /** Version of the running webplayer */
-  webplayerVersion: string;
+  /** Version of the running reactPlayer */
+  reactPlayerVersion: string;
 
   /** Hash of the HEAD commit used to build the current player version */
   playerCommit: string;
 
-  /** Hash of the HEAD commit used to build the current webplayer version */
-  webplayerCommit: string;
+  /** Hash of the HEAD commit used to build the current reactPlayer version */
+  reactPlayerCommit: string;
 }
 
-export interface WebPlayerPlugin extends Partial<PlayerPlugin> {
+export interface ReactPlayerPlugin extends Partial<PlayerPlugin> {
   /** The name of this plugin */
   name: string;
 
   /**
    * Attach listeners to the web-player instance
    */
-  applyWeb?: (webPlayer: WebPlayer) => void;
+  applyReact?: (reactPlayer: ReactPlayer) => void;
 }
 
-export interface WebPlayerOptions {
+export interface ReactPlayerOptions {
   /** A headless player instance to use */
   player?: Player;
 
   /** A set of plugins to apply to this player */
-  plugins?: Array<WebPlayerPlugin>;
+  plugins?: Array<ReactPlayerPlugin>;
 
   /**
-   * If the underlying webPlayer.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 `webPlayer.Component` hierarchy.
+   * 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 WebPlayerComponentProps = Record<string, unknown>;
+export type ReactPlayerComponentProps = Record<string, unknown>;
 
-/** The React webplayer */
-export class WebPlayer {
-  public readonly options: WebPlayerOptions;
+/** A Player that renders UI through React */
+export class ReactPlayer {
+  public readonly options: ReactPlayerOptions;
   public readonly player: Player;
   public readonly assetRegistry: AssetRegistryType = new Registry();
-  public readonly Component: React.ComponentType<WebPlayerComponentProps>;
+  public readonly Component: React.ComponentType<ReactPlayerComponentProps>;
   public readonly hooks = {
     /**
      * A hook to create a React Component to be used for Player, regardless of the current flow state
@@ -92,7 +92,7 @@ export class WebPlayer {
      * Typically this will just be `Asset`
      */
     playerComponent: new SyncWaterfallHook<
-      [React.ComponentType<WebPlayerProps>]
+      [React.ComponentType<ReactPlayerProps>]
     >(),
 
     /**
@@ -102,9 +102,9 @@ export class WebPlayer {
   };
 
   private viewUpdateSubscription = new Subscribe<View>();
-  private webplayerInfo: WebPlayerInfo;
+  private reactPlayerInfo: ReactPlayerInfo;
 
-  constructor(options?: WebPlayerOptions) {
+  constructor(options?: ReactPlayerOptions) {
     this.options = options ?? {};
 
     // Default the suspend option to `true` unless explicitly unset
@@ -131,62 +131,62 @@ export class WebPlayer {
     this.player = options?.player ?? new Player({ plugins: playerPlugins });
 
     plugins.forEach((plugin) => {
-      if (plugin.applyWeb) {
-        plugin.applyWeb(this);
+      if (plugin.applyReact) {
+        plugin.applyReact(this);
       }
     });
 
     onUpdatePlugin.apply(this.player);
 
     this.Component = this.hooks.webComponent.call(this.createReactComp());
-    this.webplayerInfo = {
+    this.reactPlayerInfo = {
       playerVersion: this.player.getVersion(),
       playerCommit: this.player.getCommit(),
-      webplayerVersion: WEB_PLAYER_VERSION,
-      webplayerCommit: COMMIT,
+      reactPlayerVersion: WEB_PLAYER_VERSION,
+      reactPlayerCommit: COMMIT,
     };
   }
 
   /** Returns the current version of the underlying core Player */
   public getPlayerVersion(): string {
-    return this.webplayerInfo.playerVersion;
+    return this.reactPlayerInfo.playerVersion;
   }
 
   /** Returns the git commit used to build this core Player version */
   public getPlayerCommit(): string {
-    return this.webplayerInfo.playerCommit;
+    return this.reactPlayerInfo.playerCommit;
   }
 
   /** Find instance of [Plugin] that has been registered to the web player */
-  public findPlugin<Plugin extends WebPlayerPlugin>(
+  public findPlugin<Plugin extends ReactPlayerPlugin>(
     symbol: symbol
   ): Plugin | undefined {
     return this.options.plugins?.find((el) => el.symbol === symbol) as Plugin;
   }
 
   /** Register and apply [Plugin] if one with the same symbol is not already registered. */
-  public registerPlugin(plugin: WebPlayerPlugin): void {
-    if (!plugin.applyWeb) return;
+  public registerPlugin(plugin: ReactPlayerPlugin): void {
+    if (!plugin.applyReact) return;
 
-    plugin.applyWeb(this);
+    plugin.applyReact(this);
     this.options.plugins?.push(plugin);
   }
 
   /** Returns the current version of the running React Player */
-  public getWebPlayerVersion(): string {
-    return this.webplayerInfo.webplayerVersion;
+  public getReactPlayerVersion(): string {
+    return this.reactPlayerInfo.reactPlayerVersion;
   }
 
   /** Returns the git commit used to build the React Player version */
-  public getWebPlayerCommit(): string {
-    return this.webplayerInfo.webplayerCommit;
+  public getReactPlayerCommit(): string {
+    return this.reactPlayerInfo.reactPlayerCommit;
   }
 
-  private createReactComp(): React.ComponentType<WebPlayerComponentProps> {
+  private createReactComp(): React.ComponentType<ReactPlayerComponentProps> {
     const ActualPlayerComp = this.hooks.playerComponent.call(PlayerComp);
 
     /** the component to use to render Player */
-    const WebPlayerComponent = () => {
+    const ReactPlayerComponent = () => {
       const view = useSubscribedState<View>(this.viewUpdateSubscription);
 
       if (this.options.suspend) {
@@ -217,11 +217,11 @@ export class WebPlayer {
       );
     };
 
-    return WebPlayerComponent;
+    return ReactPlayerComponent;
   }
 
   /**
-   * Call this method to force the WebPlayer to wait for the next view-update before performing the next render.
+   * Call this method to force the ReactPlayer to wait for the next view-update before performing the next render.
    * If the `suspense` option is set, this will suspend while an update is pending, otherwise nothing will be rendered.
    */
   public setWaitForNextViewUpdate() {
@@ -244,3 +244,6 @@ export class WebPlayer {
     });
   }
 }
+
+// For compatibility
+export const WebPlayer = ReactPlayer;

package/src/plugins/tapstate-plugin.ts

@@ -1,10 +1,10 @@
 import type { PlayerFlowState, Player } from '@player-ui/player';
-import type { WebPlayerPlugin } from '../player';
+import type { ReactPlayerPlugin } from '../player';
 
 /**
  * A plugin to tap into state transition changes and call an arbitrary update function
  */
-export class StateTapPlugin implements WebPlayerPlugin {
+export class StateTapPlugin implements ReactPlayerPlugin {
   name = 'statetap';
   private callbackFunction: (state: PlayerFlowState) => void;
 

package/src/utils/helpers.ts

@@ -0,0 +1,50 @@
+/**
+ * Trim leading and trailing slashes from string
+ */
+export function trimSlashes(str: string) {
+  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>
+): Record<string, NonNullable<any>> {
+  return Object.keys(obj).reduce((acc, key) => {
+    const value = obj[key];
+
+    if (value !== null && value !== undefined) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {} as Record<string, any>);
+}
+
+/** Check if the object has no keys */
+export function isEmptyObject(obj: Record<string, unknown>) {
+  return Object.keys(obj).length === 0 && obj.constructor === Object;
+}
+
+/** Check if the argument is a function */
+export function isFunction<ReturnType>(
+  maybeFn: ReturnType | ((...args: unknown[]) => ReturnType)
+): maybeFn is (...args: unknown[]) => ReturnType {
+  return Boolean(maybeFn instanceof Function || typeof maybeFn === 'function');
+}
+
+/**
+ * Calls function with provided data or returns original value
+ */
+export function callOrReturn<
+  ReturnType,
+  FnArgs extends Array<unknown> = unknown[],
+  FnType = (...args: FnArgs) => ReturnType
+>(maybeFn: FnType | ReturnType, fnArgs: FnArgs): ReturnType {
+  if (isFunction(maybeFn)) {
+    return maybeFn(fnArgs) as ReturnType;
+  }
+
+  return maybeFn as ReturnType;
+}

package/src/utils/index.tsx

@@ -0,0 +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';

package/src/utils/player-context.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { Player, NavigationFlowViewState } from '@player-ui/player';
+
+export interface PlayerContextType {
+  /**
+   * An instance of a headless player
+   */
+  player?: Player;
+
+  /** The currently rendered view state */
+  viewState?: NavigationFlowViewState;
+}
+
+export const PlayerContext = React.createContext<PlayerContextType>({});
+
+/**
+ * A hook to get the current player
+ */
+export const usePlayer = () => {
+  const { player } = React.useContext(PlayerContext);
+
+  return player;
+};

package/src/utils/shared-constants.tsx

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

package/src/utils/url.ts

@@ -0,0 +1,22 @@
+import { isEmptyObject } from './helpers';
+
+/**
+ * Combines a URL with any additional parameters
+ */
+export function buildUrl(
+  url: string,
+  params: Record<string, unknown> = {}
+): string {
+  const baseUrl = new URL(url);
+
+  if (params && isEmptyObject(params)) {
+    return baseUrl.toString();
+  }
+
+  Object.keys(params).forEach((key) => {
+    const value = params[key];
+    baseUrl.searchParams.append(key, String(value));
+  });
+
+  return baseUrl.toString();
+}

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

@@ -0,0 +1,9 @@
+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,
+  };
+}

package/src/utils/use-logger.ts

@@ -0,0 +1,14 @@
+import type { Logger } from '@player-ui/player';
+import { NoopLogger } from '@player-ui/player';
+import { usePlayer } from './player-context';
+
+const noopLogger = new NoopLogger();
+
+/**
+ * A hook to get the logger instance from the current player
+ */
+export function useLogger(): Logger {
+  const player = usePlayer();
+
+  return player?.logger ?? noopLogger;
+}

package/src/utils/desc.d.ts

@@ -1,2 +0,0 @@
-// Declaration for libraries that don't have types
-declare module 'babel-plugin-preval/macro';