@player-ui/react 0.0.1-next.1

package/dist/index.cjs.js

@@ -0,0 +1,543 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var player = require('@player-ui/player');
+var reactAsset = require('@player-ui/react-asset');
+var reactErrorBoundary = require('react-error-boundary');
+var reactUtils = require('@player-ui/react-utils');
+var tapable = require('tapable');
+var reactSubscribe = require('@player-ui/react-subscribe');
+var partialMatchRegistry = require('@player-ui/partial-match-registry');
+var metricsPlugin = require('@player-ui/metrics-plugin');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(reactAsset.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 partialMatchRegistry.Registry();
+    this.hooks = {
+      webComponent: new tapable.SyncWaterfallHook(["webComponent"]),
+      playerComponent: new tapable.SyncWaterfallHook(["playerComponent"]),
+      onBeforeViewReset: new tapable.AsyncParallelHook()
+    };
+    this.viewUpdateSubscription = new reactSubscribe.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.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 = reactSubscribe.useSubscribedState(this.viewUpdateSubscription);
+      if (this.options.suspend) {
+        this.viewUpdateSubscription.suspend();
+      }
+      return /* @__PURE__ */ React__default["default"].createElement(reactErrorBoundary.ErrorBoundary, {
+        fallbackRender: () => null,
+        onError: (err) => {
+          const playerState = this.player.getState();
+          if (playerState.status === "in-progress") {
+            playerState.fail(err);
+          }
+        }
+      }, /* @__PURE__ */ React__default["default"].createElement(reactUtils.PlayerContext.Provider, {
+        value: { player: this.player }
+      }, /* @__PURE__ */ React__default["default"].createElement(reactAsset.AssetContext.Provider, {
+        value: {
+          registry: this.assetRegistry
+        }
+      }, view && /* @__PURE__ */ React__default["default"].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__default["default"].useState(player.NOT_STARTED_STATE);
+  const webPlayer = React__default["default"].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: player$1 } = webPlayer;
+  return {
+    webPlayer,
+    player: player$1,
+    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 = React.useRef({});
+  React.useEffect(() => {
+    return () => {
+      requestTimeRef.current = {};
+    };
+  }, [requestTimeRef]);
+  const getRequestTime = React.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 = React.useMemo(() => {
+    return {
+      name: "RequestTimeMetricsPlugin",
+      apply(player) {
+        player.applyTo(metricsPlugin.MetricsCorePluginSymbol, (metricsCorePlugin) => {
+          new metricsPlugin.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__default["default"].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__default["default"].useState(managedState.state);
+  React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(Component, null);
+  }
+  return null;
+};
+
+exports.ManagedPlayer = ManagedPlayer;
+exports.WebPlayer = WebPlayer;
+exports.usePersistentStateMachine = usePersistentStateMachine;
+exports.useRequestTime = useRequestTime;
+exports.useWebPlayer = useWebPlayer;
+Object.keys(player).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return player[k]; }
+  });
+});
+//# sourceMappingURL=index.cjs.js.map