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

package/src/__tests__/helpers/simple-asset-plugin.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { ReactAsset, usePlayer } from "../..";
+import type {
+  ReactPlayer,
+  ReactPlayerPlugin,
+  Asset,
+  AssetWrapper,
+  Flow,
+} from "../..";
+
+interface SimpleAsset extends Asset<"simple"> {
+  /** text value of the asset */
+  value?: string;
+}
+
+/** basic aset */
+const SimpleAsset = (props: SimpleAsset) => (
+  <div id={props.id}>{props.value}</div>
+);
+
+interface ActionAsset extends Asset<"action"> {
+  /** label of the action */
+  label: string;
+
+  /** value of the action */
+  value: string;
+
+  /** expression of the action */
+  exp: string;
+}
+
+/** basic action asset */
+const Action = (props: ActionAsset) => {
+  const player = usePlayer();
+
+  return (
+    <button
+      type="button"
+      id={props.id}
+      onClick={() => {
+        const state = player?.getState();
+
+        if (state?.status === "in-progress") {
+          if (props.exp) {
+            state.controllers.expression.evaluate(props.exp);
+          }
+
+          if (props.value) {
+            state.controllers.flow.transition(props.value);
+          }
+        }
+      }}
+    >
+      {props.label}
+    </button>
+  );
+};
+
+interface CollectionAsset extends Asset<"collection"> {
+  /** values in a collection */
+  values: Array<AssetWrapper<any>>;
+}
+
+/** basic collection asset */
+const Collection = (props: CollectionAsset) => {
+  return (
+    <div id={props.id}>
+      {props.values.map((a) => (
+        <ReactAsset key={a.asset.id} {...a.asset} />
+      ))}
+    </div>
+  );
+};
+
+export const simpleFlow: Flow<any> = {
+  id: "flow_1",
+  views: [
+    {
+      id: "first_view",
+      type: "simple",
+      value: "{{foo.bar}}",
+    },
+  ],
+  navigation: {
+    BEGIN: "flow_1",
+    flow_1: {
+      startState: "view_1",
+      view_1: {
+        state_type: "VIEW",
+        ref: "first_view",
+        transitions: {
+          "*": "end_1",
+        },
+      },
+      end_1: {
+        state_type: "END",
+        outcome: "end",
+      },
+    },
+  },
+};
+
+/**
+ * Registers a simple asset as a react comp
+ */
+export class SimpleAssetPlugin implements ReactPlayerPlugin {
+  name = "simple-asset-plugin";
+
+  applyReact(rp: ReactPlayer) {
+    rp.assetRegistry.set({ type: "simple" }, SimpleAsset);
+    rp.assetRegistry.set({ type: "action" }, Action);
+    rp.assetRegistry.set({ type: "collection" }, Collection);
+  }
+}

package/src/__tests__/hooks.test.tsx

@@ -0,0 +1,8 @@
+import { test, expect } from "vitest";
+import { renderHook } from "@testing-library/react-hooks";
+import { useReactPlayer } from "..";
+
+test("reactPlayer hook", () => {
+  const { result } = renderHook(() => useReactPlayer());
+  expect(result.current.reactPlayer).toBeDefined();
+});

package/src/app.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { View } from '@player-ui/player';
-import { ReactAsset } from './asset';
+import React from "react";
+import type { View } from "@player-ui/player";
+import { ReactAsset } from "./asset";
 
 export interface ReactPlayerProps {
   /**

package/src/asset/__tests__/index.test.tsx

@@ -0,0 +1,129 @@
+import { test, expect } from "vitest";
+import React from "react";
+import { render } from "@testing-library/react";
+import { Registry } from "@player-ui/partial-match-registry";
+import type { Asset as AssetType } from "@player-ui/player";
+import type { AssetRegistryType } from "..";
+import { ReactAsset, AssetContext } from "..";
+
+test("it prioritizes local type and id", () => {
+  const assetDef = {
+    id: "foo",
+    type: "foo",
+    asset: {
+      id: "bar",
+      type: "bar",
+    },
+  };
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "foo" }, () => <div>foo</div>],
+    [{ type: "bar" }, () => <div>bar</div>],
+  ]);
+
+  const asset = render(
+    <AssetContext.Provider value={{ registry }}>
+      <ReactAsset {...assetDef} />
+    </AssetContext.Provider>,
+  );
+
+  expect(asset.getByText("foo")).not.toBeUndefined();
+});
+
+test("throws an error for an asset missing implementation", () => {
+  const assetDef = {
+    asset: {
+      id: "bar-id",
+      type: "bar",
+    },
+  } as unknown as AssetType;
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "foo" }, () => <div>foo</div>],
+  ]);
+
+  expect(() =>
+    render(
+      <AssetContext.Provider value={{ registry }}>
+        <ReactAsset {...assetDef} />
+      </AssetContext.Provider>,
+    ),
+  ).toThrowError("No implementation found for id: bar-id type: bar");
+});
+
+test("throws an error for an asset missing type", () => {
+  const assetDef = {
+    asset: {
+      id: "bar-id",
+    },
+  } as unknown as AssetType;
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "foo" }, () => <div>foo</div>],
+    [{ type: "bar" }, () => <div>bar</div>],
+  ]);
+
+  expect(() =>
+    render(
+      <AssetContext.Provider value={{ registry }}>
+        <ReactAsset {...assetDef} />
+      </AssetContext.Provider>,
+    ),
+  ).toThrowError("Asset is missing type for id: bar-id");
+});
+
+test("throws an error for an asset that isnt an object", () => {
+  const assetDef = {
+    asset: "bar",
+  } as unknown as AssetType;
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "foo" }, () => <div>foo</div>],
+    [{ type: "bar" }, () => <div>bar</div>],
+  ]);
+
+  expect(() =>
+    render(
+      <AssetContext.Provider value={{ registry }}>
+        <ReactAsset {...assetDef} />
+      </AssetContext.Provider>,
+    ),
+  ).toThrowError("Asset was not an object got (string) instead: bar");
+});
+
+test("throws an error for an asset that is an object but not valid", () => {
+  const assetDef = {
+    asset: ["a"],
+  } as unknown as AssetType;
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "foo" }, () => <div>foo</div>],
+    [{ type: "bar" }, () => <div>bar</div>],
+  ]);
+
+  expect(() =>
+    render(
+      <AssetContext.Provider value={{ registry }}>
+        <ReactAsset {...assetDef} />
+      </AssetContext.Provider>,
+    ),
+  ).toThrowError('Asset is missing type for {"asset":["a"]}');
+});
+test("throws an error for an asset that unwraps nothing", () => {
+  const assetDef = {
+    asset: undefined,
+  } as unknown as AssetType;
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "foo" }, () => <div>foo</div>],
+    [{ type: "bar" }, () => <div>bar</div>],
+  ]);
+
+  expect(() =>
+    render(
+      <AssetContext.Provider value={{ registry }}>
+        <ReactAsset {...assetDef} />
+      </AssetContext.Provider>,
+    ),
+  ).toThrowError("Cannot determine asset type for props: {}");
+});

package/src/asset/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { Asset as AssetType, AssetWrapper } from '@player-ui/player';
-import type { Registry } from '@player-ui/partial-match-registry';
+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>>;
 
@@ -17,27 +17,27 @@ export const AssetContext = React.createContext<ContextType>({});
  * A React Component that looks up an implementation from a registry
  */
 export const ReactAsset = (
-  props: AssetType<string> | AssetWrapper<AssetType<string>>
+  props: AssetType<string> | AssetWrapper<AssetType<string>>,
 ) => {
   const { registry } = React.useContext(AssetContext);
 
   let unwrapped;
 
-  if ('type' in props && 'id' in props) {
+  if ("type" in props && "id" in props) {
     unwrapped = props;
-  } else if ('asset' in props) {
+  } else if ("asset" in props) {
     unwrapped = (props as unknown as AssetWrapper).asset;
   }
 
   if (!unwrapped) {
     throw Error(
-      `Cannot determine asset type for props: ${JSON.stringify(props)}`
+      `Cannot determine asset type for props: ${JSON.stringify(props)}`,
     );
   }
 
-  if (typeof unwrapped !== 'object') {
+  if (typeof unwrapped !== "object") {
     throw Error(
-      `Asset was not an object got (${typeof unwrapped}) instead: ${unwrapped}`
+      `Asset was not an object got (${typeof unwrapped}) instead: ${unwrapped}`,
     );
   }
 
@@ -53,7 +53,7 @@ export const ReactAsset = (
 
   if (!Impl) {
     throw Error(
-      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`
+      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`,
     );
   }
 

package/src/hooks.tsx

@@ -1,9 +1,9 @@
-import type { Player, PlayerFlowState } from '@player-ui/player';
-import { NOT_STARTED_STATE } from '@player-ui/player';
-import React from 'react';
-import type { ReactPlayerOptions } from './player';
-import { ReactPlayer } from './player';
-import { StateTapPlugin } from './plugins/tapstate-plugin';
+import type { Player, PlayerFlowState } from "@player-ui/player";
+import { NOT_STARTED_STATE } from "@player-ui/player";
+import React from "react";
+import type { ReactPlayerOptions } from "./player";
+import { ReactPlayer } from "./player";
+import { StateTapPlugin } from "./plugins/tapstate-plugin";
 
 export interface UseReactPlayerReturn {
   /** The web-player instance */
@@ -19,7 +19,7 @@ export interface UseReactPlayerReturn {
  * Simply supply your config, plugins, and an optional flow, which will be automatically started for you when changed.
  */
 export const useReactPlayer = (
-  options?: ReactPlayerOptions
+  options?: ReactPlayerOptions,
 ): UseReactPlayerReturn => {
   const [playerState, setPlayerState] =
     React.useState<PlayerFlowState>(NOT_STARTED_STATE);
@@ -31,7 +31,6 @@ export const useReactPlayer = (
         ...(options?.plugins ?? []),
         new StateTapPlugin(setPlayerState),
       ],
-      suspend: options?.suspend,
     });
 
     return rp;

package/src/index.tsx

@@ -1,8 +1,8 @@
-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';
+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";