@player-ui/react 0.0.1-next.1

package/dist/index.esm.js

@@ -0,0 +1,526 @@
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
+import { Player, NOT_STARTED_STATE } from '@player-ui/player';
+export * from '@player-ui/player';
+import { Asset, AssetContext } from '@player-ui/react-asset';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PlayerContext } from '@player-ui/react-utils';
+import { SyncWaterfallHook, AsyncParallelHook } from 'tapable';
+import { Subscribe, useSubscribedState } from '@player-ui/react-subscribe';
+import { Registry } from '@player-ui/partial-match-registry';
+import { MetricsCorePluginSymbol, RequestTimeWebPlugin } from '@player-ui/metrics-plugin';
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+const WebPlayer$1 = ({ view }) => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$2({}, view)));
+};
+
+class OnUpdatePlugin {
+  constructor(onUpdate) {
+    this.name = "view-update";
+    this.onUpdateCallback = onUpdate;
+  }
+  apply(player) {
+    const updateTap = (updatedView) => {
+      this.onUpdateCallback(updatedView);
+    };
+    const viewTap = (view) => {
+      view.hooks.onUpdate.tap(this.name, updateTap);
+    };
+    player.hooks.view.tap(this.name, viewTap);
+    const currentPlayerState = player.getState();
+    if (currentPlayerState.status === "in-progress") {
+      const { currentView } = currentPlayerState.controllers.view;
+      if (currentView) {
+        viewTap(currentView);
+        const { lastUpdate } = currentView;
+        if (lastUpdate) {
+          this.onUpdateCallback(lastUpdate);
+        }
+      }
+    }
+  }
+}
+
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const WEB_PLAYER_VERSION = "!!STABLE_VERSION!!";
+const COMMIT = "!!STABLE_GIT_COMMIT!!";
+const _window = typeof window === "undefined" ? void 0 : window;
+class WebPlayer {
+  constructor(options) {
+    this.assetRegistry = new Registry();
+    this.hooks = {
+      webComponent: new SyncWaterfallHook(["webComponent"]),
+      playerComponent: new SyncWaterfallHook(["playerComponent"]),
+      onBeforeViewReset: new AsyncParallelHook()
+    };
+    this.viewUpdateSubscription = new Subscribe();
+    var _a, _b;
+    this.options = options != null ? options : {};
+    if (!("suspend" in this.options)) {
+      this.options.suspend = true;
+    }
+    const Devtools = _window == null ? void 0 : _window.__PLAYER_DEVTOOLS_PLUGIN;
+    const onUpdatePlugin = new OnUpdatePlugin(this.viewUpdateSubscription.publish);
+    const plugins = (_a = options == null ? void 0 : options.plugins) != null ? _a : [];
+    if (Devtools) {
+      plugins.push(new Devtools());
+    }
+    const playerPlugins = plugins.filter((p) => Boolean(p.apply));
+    this.player = (_b = options == null ? void 0 : options.player) != null ? _b : new Player({ plugins: playerPlugins });
+    plugins.forEach((plugin) => {
+      if (plugin.applyWeb) {
+        plugin.applyWeb(this);
+      }
+    });
+    onUpdatePlugin.apply(this.player);
+    this.Component = this.hooks.webComponent.call(this.createReactComp());
+    this.webplayerInfo = {
+      playerVersion: this.player.getVersion(),
+      playerCommit: this.player.getCommit(),
+      webplayerVersion: WEB_PLAYER_VERSION,
+      webplayerCommit: COMMIT
+    };
+  }
+  getPlayerVersion() {
+    return this.webplayerInfo.playerVersion;
+  }
+  getPlayerCommit() {
+    return this.webplayerInfo.playerCommit;
+  }
+  findPlugin(symbol) {
+    var _a;
+    return (_a = this.options.plugins) == null ? void 0 : _a.find((el) => el.symbol === symbol);
+  }
+  registerPlugin(plugin) {
+    var _a;
+    if (!plugin.applyWeb)
+      return;
+    plugin.applyWeb(this);
+    (_a = this.options.plugins) == null ? void 0 : _a.push(plugin);
+  }
+  getWebPlayerVersion() {
+    return this.webplayerInfo.webplayerVersion;
+  }
+  getWebPlayerCommit() {
+    return this.webplayerInfo.webplayerCommit;
+  }
+  createReactComp() {
+    const ActualPlayerComp = this.hooks.playerComponent.call(WebPlayer$1);
+    const WebPlayerComponent = () => {
+      const view = useSubscribedState(this.viewUpdateSubscription);
+      if (this.options.suspend) {
+        this.viewUpdateSubscription.suspend();
+      }
+      return /* @__PURE__ */ React.createElement(ErrorBoundary, {
+        fallbackRender: () => null,
+        onError: (err) => {
+          const playerState = this.player.getState();
+          if (playerState.status === "in-progress") {
+            playerState.fail(err);
+          }
+        }
+      }, /* @__PURE__ */ React.createElement(PlayerContext.Provider, {
+        value: { player: this.player }
+      }, /* @__PURE__ */ React.createElement(AssetContext.Provider, {
+        value: {
+          registry: this.assetRegistry
+        }
+      }, view && /* @__PURE__ */ React.createElement(ActualPlayerComp, {
+        view
+      }))));
+    };
+    return WebPlayerComponent;
+  }
+  setWaitForNextViewUpdate() {
+    const shouldCallResetHook = this.options.suspend && this.hooks.onBeforeViewReset.isUsed();
+    return this.viewUpdateSubscription.reset(shouldCallResetHook ? this.hooks.onBeforeViewReset.promise() : void 0);
+  }
+  start(flow) {
+    this.setWaitForNextViewUpdate();
+    return this.player.start(flow).finally(() => __async$1(this, null, function* () {
+      var _a;
+      if ((_a = this.options) == null ? void 0 : _a.suspend) {
+        yield this.setWaitForNextViewUpdate();
+      }
+    }));
+  }
+}
+
+class StateTapPlugin {
+  constructor(callback) {
+    this.name = "statetap";
+    this.callbackFunction = callback;
+  }
+  apply(player) {
+    player.hooks.state.tap("usePlayer", (newPlayerState) => {
+      this.callbackFunction(newPlayerState);
+    });
+  }
+}
+
+const useWebPlayer = (options) => {
+  const [playerState, setPlayerState] = React.useState(NOT_STARTED_STATE);
+  const webPlayer = React.useMemo(() => {
+    var _a;
+    const wp = new WebPlayer({
+      player: options == null ? void 0 : options.player,
+      plugins: [
+        ...(_a = options == null ? void 0 : options.plugins) != null ? _a : [],
+        new StateTapPlugin(setPlayerState)
+      ],
+      suspend: options == null ? void 0 : options.suspend
+    });
+    return wp;
+  }, []);
+  const { player } = webPlayer;
+  return {
+    webPlayer,
+    player,
+    playerState
+  };
+};
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const useRequestTime = () => {
+  const requestTimeRef = useRef({});
+  useEffect(() => {
+    return () => {
+      requestTimeRef.current = {};
+    };
+  }, [requestTimeRef]);
+  const getRequestTime = useCallback(() => {
+    const { end, start } = requestTimeRef.current;
+    if (end && start) {
+      return end - start;
+    }
+  }, [requestTimeRef]);
+  function withRequestTime(nextPromise) {
+    const getTime = typeof performance === "undefined" ? Date : performance;
+    requestTimeRef.current = { start: getTime.now() };
+    return nextPromise.finally(() => {
+      requestTimeRef.current = __spreadProps$1(__spreadValues$1({}, requestTimeRef.current), {
+        end: getTime.now()
+      });
+    });
+  }
+  const RequestTimeMetricsPlugin = useMemo(() => {
+    return {
+      name: "RequestTimeMetricsPlugin",
+      apply(player) {
+        player.applyTo(MetricsCorePluginSymbol, (metricsCorePlugin) => {
+          new RequestTimeWebPlugin(getRequestTime).apply(metricsCorePlugin);
+        });
+      }
+    };
+  }, [getRequestTime]);
+  return { withRequestTime, RequestTimeMetricsPlugin };
+};
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function identityMiddleware(next) {
+  return next;
+}
+class ManagedState {
+  constructor({
+    middleware
+  }) {
+    this.middleware = middleware;
+    this.callbacks = [];
+  }
+  addListener(callback) {
+    this.callbacks.push(callback);
+    return () => {
+      this.callbacks = this.callbacks.filter((s) => s !== callback);
+    };
+  }
+  start(options) {
+    const playerConfig = __spreadProps(__spreadValues({}, options.playerConfig), {
+      suspend: true
+    });
+    const initialState = {
+      value: "not_started",
+      context: {
+        playerConfig,
+        webPlayer: new WebPlayer(playerConfig),
+        manager: options.manager
+      }
+    };
+    this.setState(initialState);
+    return this;
+  }
+  reset() {
+    var _a;
+    if (((_a = this.state) == null ? void 0 : _a.value) === "error") {
+      const { playerConfig, manager } = this.state.context;
+      this.start({ playerConfig, manager });
+    } else {
+      throw new Error("Flow must be in error state to reset");
+    }
+  }
+  restart() {
+    var _a;
+    if (((_a = this.state) == null ? void 0 : _a.value) === "error") {
+      const { playerConfig, manager, prevResult, webPlayer } = this.state.context;
+      this.setState({
+        value: "completed",
+        context: {
+          playerConfig,
+          manager,
+          result: prevResult,
+          webPlayer
+        }
+      });
+    } else {
+      throw new Error("Flow must be in error state to restart");
+    }
+  }
+  setState(state) {
+    return __async(this, null, function* () {
+      this.state = state;
+      this.callbacks.forEach((c) => {
+        c.onState(state);
+      });
+      const { manager, webPlayer, playerConfig } = state.context;
+      try {
+        const nextState = yield this.processState(state, {
+          manager,
+          webPlayer,
+          playerConfig
+        });
+        if (nextState) {
+          this.setState(nextState);
+        }
+      } catch (e) {
+        this.setState({
+          value: "error",
+          context: {
+            manager,
+            webPlayer,
+            playerConfig,
+            error: e
+          }
+        });
+      }
+    });
+  }
+  processState(state, context) {
+    return __async(this, null, function* () {
+      var _a, _b;
+      if (state.value === "not_started" || state.value === "completed") {
+        const prevResult = state.value === "completed" ? state.context.result : void 0;
+        const middleware = (_b = (_a = this.middleware) == null ? void 0 : _a.next) != null ? _b : identityMiddleware;
+        return {
+          value: "pending",
+          context: __spreadProps(__spreadValues({}, context), {
+            prevResult,
+            next: middleware(state.context.manager.next(prevResult))
+          })
+        };
+      }
+      if (state.value === "pending") {
+        const nextResult = yield state.context.next;
+        if (nextResult.done) {
+          return {
+            value: "ended",
+            context: __spreadProps(__spreadValues({}, context), {
+              result: state.context.prevResult
+            })
+          };
+        }
+        return {
+          value: "loaded",
+          context: __spreadProps(__spreadValues({}, context), {
+            prevResult: state.context.prevResult,
+            flow: nextResult.value
+          })
+        };
+      }
+      if (state.value === "loaded") {
+        return {
+          value: "running",
+          context: __spreadProps(__spreadValues({}, context), {
+            flow: state.context.flow,
+            prevResult: state.context.prevResult,
+            result: state.context.webPlayer.start(state.context.flow)
+          })
+        };
+      }
+      if (state.value === "running") {
+        const result = yield state.context.result;
+        return {
+          value: "completed",
+          context: __spreadProps(__spreadValues({}, context), {
+            result
+          })
+        };
+      }
+    });
+  }
+}
+const managedPlayerStateMachines = new WeakMap();
+const usePersistentStateMachine = (options) => {
+  var _a;
+  const keyRef = React.useRef({
+    _key: Symbol("managed-player")
+  });
+  const managedState = (_a = managedPlayerStateMachines.get(keyRef.current)) != null ? _a : new ManagedState({ middleware: options.middleware });
+  managedPlayerStateMachines.set(keyRef.current, managedState);
+  const [state, setState] = React.useState(managedState.state);
+  React.useEffect(() => {
+    const unsub = managedState.addListener({
+      onState: (s) => {
+        setState(s);
+      }
+    });
+    if (managedState.state === void 0) {
+      managedState.start(options);
+    }
+    return unsub;
+  }, []);
+  return { managedState, state };
+};
+const ManagedPlayer = (props) => {
+  var _a;
+  const { withRequestTime, RequestTimeMetricsPlugin } = useRequestTime();
+  const { state, managedState } = usePersistentStateMachine({
+    manager: props.manager,
+    middleware: { next: withRequestTime },
+    playerConfig: {
+      plugins: [...(_a = props == null ? void 0 : props.plugins) != null ? _a : [], RequestTimeMetricsPlugin],
+      player: props.player
+    }
+  });
+  React.useEffect(() => {
+    var _a2, _b, _c;
+    if ((state == null ? void 0 : state.value) === "ended") {
+      (_a2 = props.onComplete) == null ? void 0 : _a2.call(props, state == null ? void 0 : state.context.result);
+    } else if ((state == null ? void 0 : state.value) === "error") {
+      (_b = props.onError) == null ? void 0 : _b.call(props, state == null ? void 0 : state.context.error);
+    } else if ((state == null ? void 0 : state.value) === "running") {
+      (_c = props.onStartedFlow) == null ? void 0 : _c.call(props);
+    }
+  }, [state]);
+  React.useEffect(() => {
+    return () => {
+      var _a2, _b;
+      const playerState = state == null ? void 0 : state.context.webPlayer.player.getState();
+      if ((state == null ? void 0 : state.value) === "running" && (playerState == null ? void 0 : playerState.status) === "in-progress") {
+        (_b = (_a2 = props.manager).terminate) == null ? void 0 : _b.call(_a2, playerState.controllers.data.serialize());
+      }
+    };
+  }, [props.manager, state == null ? void 0 : state.context.webPlayer.player, state == null ? void 0 : state.value]);
+  if ((state == null ? void 0 : state.value) === "error") {
+    if (props.fallbackComponent) {
+      return /* @__PURE__ */ React.createElement(props.fallbackComponent, {
+        reset: () => {
+          managedState.reset();
+        },
+        retry: () => {
+          managedState.restart();
+        },
+        error: state.context.error
+      });
+    }
+    if (!props.onError) {
+      throw state.context.error;
+    }
+  }
+  if (state == null ? void 0 : state.context.webPlayer) {
+    const { Component } = state.context.webPlayer;
+    return /* @__PURE__ */ React.createElement(Component, null);
+  }
+  return null;
+};
+
+export { ManagedPlayer, WebPlayer, usePersistentStateMachine, useRequestTime, useWebPlayer };
+//# sourceMappingURL=index.esm.js.map

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@player-ui/react",
+  "version": "0.0.1-next.1",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.25",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "dependencies": {
+    "@player-ui/binding-grammar": "0.0.1-next.1",
+    "@player-ui/partial-match-registry": "0.0.1-next.1",
+    "@player-ui/react-subscribe": "0.0.1-next.1",
+    "react-error-boundary": "^3.1.3",
+    "tapable": "1.1.3",
+    "@types/tapable": "^1.0.5",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts"
+}

package/src/app.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Asset } from '@player-ui/react-asset';
+import type { Asset as AssetType } from '@player-ui/player';
+
+export interface WebPlayerProps {
+  /**
+   * The Content view object to render
+   */
+  view: AssetType;
+}
+
+/**
+ * The entry for the WebPlayer's React tree
+ */
+const WebPlayer = ({ view }: WebPlayerProps) => {
+  return (
+    <div>
+      <Asset {...view} />
+    </div>
+  );
+};
+
+export default WebPlayer;

package/src/hooks.tsx

@@ -0,0 +1,47 @@
+import type { Player, PlayerFlowState } from '@player-ui/player';
+import { NOT_STARTED_STATE } from '@player-ui/player';
+import React from 'react';
+import type { WebPlayerOptions } from './player';
+import { WebPlayer } from './player';
+import { StateTapPlugin } from './plugins/tapstate-plugin';
+
+export interface UseWebPlayerReturn {
+  /** The web-player instance */
+  webPlayer: WebPlayer;
+  /** Player instance */
+  player: Player;
+  /** The state of Player */
+  playerState: PlayerFlowState;
+}
+
+/**
+ * The `useWebPlayer` 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 const useWebPlayer = (
+  options?: WebPlayerOptions
+): UseWebPlayerReturn => {
+  const [playerState, setPlayerState] =
+    React.useState<PlayerFlowState>(NOT_STARTED_STATE);
+
+  const webPlayer = React.useMemo(() => {
+    const wp = new WebPlayer({
+      player: options?.player,
+      plugins: [
+        ...(options?.plugins ?? []),
+        new StateTapPlugin(setPlayerState),
+      ],
+      suspend: options?.suspend,
+    });
+
+    return wp;
+  }, []);
+
+  const { player } = webPlayer;
+
+  return {
+    webPlayer,
+    player,
+    playerState,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,6 @@
+export * from './player';
+export * from '@player-ui/player';
+export * from './hooks';
+export * from './manager/managed-player';
+export * from './manager/request-time';
+export * from './manager/types';