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

package/dist/index.mjs

@@ -0,0 +1,611 @@
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/index.tsx
+export * from "@player-ui/player";
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/player.tsx
+import React4 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 { Player } from "@player-ui/player";
+import { ErrorBoundary } from "react-error-boundary";
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/asset/index.tsx
+import React from "react";
+var AssetContext = React.createContext({});
+var ReactAsset = (props) => {
+  const { registry } = React.useContext(AssetContext);
+  let unwrapped;
+  if ("type" in props && "id" in props) {
+    unwrapped = props;
+  } else if ("asset" in props) {
+    unwrapped = props.asset;
+  }
+  if (!unwrapped) {
+    throw Error(
+      `Cannot determine asset type for props: ${JSON.stringify(props)}`
+    );
+  }
+  if (typeof unwrapped !== "object") {
+    throw Error(
+      `Asset was not an object got (${typeof unwrapped}) instead: ${unwrapped}`
+    );
+  }
+  if (unwrapped.type === void 0) {
+    const info = unwrapped.id === void 0 ? JSON.stringify(props) : `id: ${unwrapped.id}`;
+    throw Error(`Asset is missing type for ${info}`);
+  }
+  const Impl = registry?.get(unwrapped);
+  if (!Impl) {
+    throw Error(
+      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`
+    );
+  }
+  return /* @__PURE__ */ React.createElement(Impl, { key: unwrapped.id, ...unwrapped });
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/player-context.ts
+import React2 from "react";
+var PlayerContext = React2.createContext({});
+var usePlayer = () => {
+  const { player } = React2.useContext(PlayerContext);
+  return player;
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/use-logger.ts
+import { NoopLogger } from "@player-ui/player";
+var noopLogger = new NoopLogger();
+function useLogger() {
+  const player = usePlayer();
+  return player?.logger ?? noopLogger;
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/use-asset-props.tsx
+function useAssetProps(asset) {
+  return {
+    id: asset.id,
+    "data-asset-type": asset.type
+  };
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/helpers.ts
+function trimSlashes(str) {
+  return str.replace(/^\/+|\/+$/g, "");
+}
+function removeEmptyValuesFromObject(obj) {
+  return Object.keys(obj).reduce(
+    (acc, key) => {
+      const value = obj[key];
+      if (value !== null && value !== void 0) {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function isEmptyObject(obj) {
+  return Object.keys(obj).length === 0 && obj.constructor === Object;
+}
+function isFunction(maybeFn) {
+  return Boolean(maybeFn instanceof Function || typeof maybeFn === "function");
+}
+function callOrReturn(maybeFn, fnArgs) {
+  if (isFunction(maybeFn)) {
+    return maybeFn(fnArgs);
+  }
+  return maybeFn;
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/url.ts
+function buildUrl(url, params = {}) {
+  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();
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/utils/shared-constants.tsx
+function useGetConstantByType(type, key) {
+  const player = usePlayer();
+  return player?.constantsController.getConstants(key, type);
+}
+function useGetConstant(key) {
+  const player = usePlayer();
+  return player?.constantsController.getConstants(key, "constants");
+}
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/app.tsx
+import React3 from "react";
+var ReactPlayer = ({ view }) => {
+  return /* @__PURE__ */ React3.createElement(ReactAsset, { ...view });
+};
+var app_default = ReactPlayer;
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/plugins/onupdate-plugin.ts
+var OnUpdatePlugin = class {
+  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);
+        }
+      }
+    }
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/player.tsx
+var WEB_PLAYER_VERSION = "__VERSION__";
+var COMMIT = "__GIT_COMMIT__";
+var _window = typeof window === "undefined" ? void 0 : window;
+var ReactPlayer2 = class {
+  constructor(options) {
+    this.assetRegistry = new Registry();
+    this.hooks = {
+      /**
+       * A hook to create a React Component to be used for Player, regardless of the current flow state
+       */
+      webComponent: new SyncWaterfallHook(),
+      /**
+       * A hook to create a React Component that's used to render a specific view.
+       * It will be called for each view update from the core player.
+       * Typically this will just be `Asset`
+       */
+      playerComponent: new SyncWaterfallHook(),
+      /**
+       * A hook to execute async tasks before the view resets to undefined
+       */
+      onBeforeViewReset: new AsyncParallelHook()
+    };
+    this.viewUpdateSubscription = new Subscribe();
+    this.options = options ?? {};
+    const Devtools = _window?.__PLAYER_DEVTOOLS_PLUGIN;
+    const onUpdatePlugin = new OnUpdatePlugin(
+      this.viewUpdateSubscription.publish
+    );
+    const plugins = options?.plugins ?? [];
+    if (Devtools) {
+      plugins.push(new Devtools());
+    }
+    const playerPlugins = plugins.filter(
+      (p) => Boolean(p.apply)
+    );
+    this.player = options?.player ?? new Player({ plugins: playerPlugins });
+    plugins.forEach((plugin) => {
+      if (plugin.applyReact) {
+        plugin.applyReact(this);
+      }
+    });
+    onUpdatePlugin.apply(this.player);
+    this.Component = this.createReactPlayerComponent();
+    this.reactPlayerInfo = {
+      playerVersion: this.player.getVersion(),
+      playerCommit: this.player.getCommit(),
+      reactPlayerVersion: WEB_PLAYER_VERSION,
+      reactPlayerCommit: COMMIT
+    };
+  }
+  /** Returns the current version of the underlying core Player */
+  getPlayerVersion() {
+    return this.reactPlayerInfo.playerVersion;
+  }
+  /** Returns the git commit used to build this core Player version */
+  getPlayerCommit() {
+    return this.reactPlayerInfo.playerCommit;
+  }
+  /** Find instance of [Plugin] that has been registered to the web player */
+  findPlugin(symbol) {
+    return this.options.plugins?.find((el) => el.symbol === symbol);
+  }
+  /** Register and apply [Plugin] if one with the same symbol is not already registered. */
+  registerPlugin(plugin) {
+    if (!plugin.applyReact)
+      return;
+    plugin.applyReact(this);
+    this.options.plugins?.push(plugin);
+  }
+  /** Returns the current version of the running React Player */
+  getReactPlayerVersion() {
+    return this.reactPlayerInfo.reactPlayerVersion;
+  }
+  /** Returns the git commit used to build the React Player version */
+  getReactPlayerCommit() {
+    return this.reactPlayerInfo.reactPlayerCommit;
+  }
+  createReactPlayerComponent() {
+    const BaseComp = this.hooks.webComponent.call(this.createReactComp());
+    const ReactPlayerComponent = (props) => {
+      return /* @__PURE__ */ React4.createElement(
+        ErrorBoundary,
+        {
+          fallbackRender: () => null,
+          onError: (err) => {
+            const playerState = this.player.getState();
+            if (playerState.status === "in-progress") {
+              playerState.fail(err);
+            }
+          }
+        },
+        /* @__PURE__ */ React4.createElement(PlayerContext.Provider, { value: { player: this.player } }, /* @__PURE__ */ React4.createElement(BaseComp, { ...props }))
+      );
+    };
+    return ReactPlayerComponent;
+  }
+  createReactComp() {
+    const ActualPlayerComp = this.hooks.playerComponent.call(app_default);
+    const WebPlayerComponent = () => {
+      const view = useSubscribedState(this.viewUpdateSubscription);
+      this.viewUpdateSubscription.suspend();
+      return /* @__PURE__ */ React4.createElement(
+        AssetContext.Provider,
+        {
+          value: {
+            registry: this.assetRegistry
+          }
+        },
+        view && /* @__PURE__ */ React4.createElement(ActualPlayerComp, { view })
+      );
+    };
+    return WebPlayerComponent;
+  }
+  /**
+   * 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.
+   */
+  setWaitForNextViewUpdate() {
+    const shouldCallResetHook = this.hooks.onBeforeViewReset.isUsed();
+    return this.viewUpdateSubscription.reset(
+      shouldCallResetHook ? this.hooks.onBeforeViewReset.call() : void 0
+    );
+  }
+  start(flow) {
+    this.setWaitForNextViewUpdate();
+    return this.player.start(flow).finally(async () => {
+      await this.setWaitForNextViewUpdate();
+    });
+  }
+};
+var WebPlayer = ReactPlayer2;
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/hooks.tsx
+import { NOT_STARTED_STATE } from "@player-ui/player";
+import React5 from "react";
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/plugins/tapstate-plugin.ts
+var StateTapPlugin = class {
+  constructor(callback) {
+    this.name = "statetap";
+    this.callbackFunction = callback;
+  }
+  apply(player) {
+    player.hooks.state.tap("usePlayer", (newPlayerState) => {
+      this.callbackFunction(newPlayerState);
+    });
+  }
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/hooks.tsx
+var useReactPlayer = (options) => {
+  const [playerState, setPlayerState] = React5.useState(NOT_STARTED_STATE);
+  const reactPlayer = React5.useMemo(() => {
+    const rp = new ReactPlayer2({
+      player: options?.player,
+      plugins: [
+        ...options?.plugins ?? [],
+        new StateTapPlugin(setPlayerState)
+      ]
+    });
+    return rp;
+  }, []);
+  const { player } = reactPlayer;
+  return {
+    reactPlayer,
+    player,
+    playerState
+  };
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/manager/managed-player.tsx
+import React6 from "react";
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/manager/request-time.tsx
+import { useCallback, useEffect, useRef, useMemo } from "react";
+import {
+  MetricsCorePluginSymbol,
+  RequestTimeWebPlugin
+} from "@player-ui/metrics-plugin";
+var 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 = {
+        ...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 };
+};
+
+// ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/react/player/src/manager/managed-player.tsx
+function identityMiddleware(next) {
+  return next;
+}
+var ManagedState = class {
+  constructor({
+    middleware
+  }) {
+    this.middleware = middleware;
+    this.callbacks = [];
+  }
+  /** Add a listener to state changes */
+  addListener(callback) {
+    this.callbacks.push(callback);
+    return () => {
+      this.callbacks = this.callbacks.filter((s) => s !== callback);
+    };
+  }
+  /** start the managed flow */
+  start(options) {
+    const initialState = {
+      value: "not_started",
+      context: {
+        playerConfig: options.playerConfig,
+        reactPlayer: new ReactPlayer2(options.playerConfig),
+        manager: options.manager
+      }
+    };
+    this.setState(initialState);
+    return this;
+  }
+  /** reset starts from nothing */
+  reset() {
+    if (this.state?.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 starts from the last result */
+  restart() {
+    if (this.state?.value === "error") {
+      const { playerConfig, manager, prevResult, reactPlayer } = this.state.context;
+      this.setState({
+        value: "completed",
+        context: {
+          playerConfig,
+          manager,
+          result: prevResult,
+          reactPlayer
+        }
+      });
+    } else {
+      throw new Error("Flow must be in error state to restart");
+    }
+  }
+  async setState(state) {
+    this.state = state;
+    this.callbacks.forEach((c) => {
+      c.onState(state);
+    });
+    const { manager, reactPlayer, playerConfig } = state.context;
+    try {
+      const nextState = await this.processState(state, {
+        manager,
+        reactPlayer,
+        playerConfig
+      });
+      if (nextState) {
+        this.setState(nextState);
+      }
+    } catch (e) {
+      this.setState({
+        value: "error",
+        context: {
+          manager,
+          reactPlayer,
+          playerConfig,
+          error: e
+        }
+      });
+    }
+  }
+  async processState(state, context) {
+    if (state.value === "not_started" || state.value === "completed") {
+      const prevResult = state.value === "completed" ? state.context.result : void 0;
+      const middleware = this.middleware?.next ?? identityMiddleware;
+      return {
+        value: "pending",
+        context: {
+          ...context,
+          prevResult,
+          next: middleware(state.context.manager.next(prevResult))
+        }
+      };
+    }
+    if (state.value === "pending") {
+      const nextResult = await state.context.next;
+      if (nextResult.done) {
+        return {
+          value: "ended",
+          context: {
+            ...context,
+            result: state.context.prevResult
+          }
+        };
+      }
+      return {
+        value: "loaded",
+        context: {
+          ...context,
+          prevResult: state.context.prevResult,
+          flow: nextResult.value
+        }
+      };
+    }
+    if (state.value === "loaded") {
+      return {
+        value: "running",
+        context: {
+          ...context,
+          flow: state.context.flow,
+          prevResult: state.context.prevResult,
+          result: state.context.reactPlayer.start(state.context.flow)
+        }
+      };
+    }
+    if (state.value === "running") {
+      const result = await state.context.result;
+      return {
+        value: "completed",
+        context: {
+          ...context,
+          result
+        }
+      };
+    }
+  }
+};
+var managedPlayerStateMachines = /* @__PURE__ */ new WeakMap();
+var usePersistentStateMachine = (options) => {
+  const keyRef = React6.useRef({
+    _key: Symbol("managed-player")
+  });
+  const managedState = managedPlayerStateMachines.get(keyRef.current) ?? new ManagedState({ middleware: options.middleware });
+  managedPlayerStateMachines.set(keyRef.current, managedState);
+  const [state, setState] = React6.useState(managedState.state);
+  React6.useEffect(() => {
+    const unsub = managedState.addListener({
+      onState: (s) => {
+        setState(s);
+      }
+    });
+    if (managedState.state === void 0) {
+      managedState.start(options);
+    }
+    return unsub;
+  }, []);
+  return { managedState, state };
+};
+var ManagedPlayer = (props) => {
+  const { withRequestTime, RequestTimeMetricsPlugin } = useRequestTime();
+  const { state, managedState } = usePersistentStateMachine({
+    manager: props.manager,
+    middleware: { next: withRequestTime },
+    playerConfig: {
+      plugins: [...props?.plugins ?? [], RequestTimeMetricsPlugin],
+      player: props.player
+    }
+  });
+  React6.useEffect(() => {
+    if (state?.value === "ended") {
+      props.onComplete?.(state?.context.result);
+    } else if (state?.value === "error") {
+      props.onError?.(state?.context.error);
+    } else if (state?.value === "running") {
+      props.onStartedFlow?.();
+    }
+  }, [state]);
+  React6.useEffect(() => {
+    return () => {
+      const playerState = state?.context.reactPlayer.player.getState();
+      if (state?.value === "running" && playerState?.status === "in-progress") {
+        props.manager.terminate?.(playerState.controllers.data.serialize());
+      }
+    };
+  }, [props.manager, state?.context.reactPlayer.player, state?.value]);
+  if (state?.value === "error") {
+    if (props.fallbackComponent) {
+      return /* @__PURE__ */ React6.createElement(
+        props.fallbackComponent,
+        {
+          reset: () => {
+            managedState.reset();
+          },
+          retry: () => {
+            managedState.restart();
+          },
+          error: state.context.error
+        }
+      );
+    }
+    if (!props.onError) {
+      throw state.context.error;
+    }
+  }
+  if (state?.context.reactPlayer) {
+    const { Component } = state.context.reactPlayer;
+    return /* @__PURE__ */ React6.createElement(Component, null);
+  }
+  return null;
+};
+export {
+  AssetContext,
+  ManagedPlayer,
+  PlayerContext,
+  ReactAsset,
+  ReactPlayer2 as ReactPlayer,
+  WebPlayer,
+  buildUrl,
+  callOrReturn,
+  isEmptyObject,
+  isFunction,
+  removeEmptyValuesFromObject,
+  trimSlashes,
+  useAssetProps,
+  useGetConstant,
+  useGetConstantByType,
+  useLogger,
+  usePersistentStateMachine,
+  usePlayer,
+  useReactPlayer,
+  useRequestTime
+};
+//# sourceMappingURL=index.mjs.map