@player-devtools/client 0.14.0-next.0 → 0.14.0

package/src/panel/index.tsx

@@ -1,234 +0,0 @@
-import React, { useRef } from "react";
-import type {
-  MessengerOptions,
-  ExtensionSupportedEvents,
-} from "@player-devtools/types";
-import { DataController, Flow, useReactPlayer } from "@player-ui/react";
-import { useEffect } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  ChakraProvider,
-  Container,
-  extendTheme,
-  Flex,
-  FormControl,
-  FormLabel,
-  Heading,
-  Select,
-  Text,
-  type ThemeConfig,
-} from "@chakra-ui/react";
-
-import { ThemeProvider, useDarkMode } from "@devtools-ds/themes";
-
-import { INITIAL_FLOW } from "../constants";
-import { PLAYER_PLUGINS, PUBSUB_PLUGIN } from "../plugins";
-import { useExtensionState } from "../state";
-import { flowDiff } from "../helpers/flowDiff";
-
-const fallbackRender: ErrorBoundary["props"]["fallbackRender"] = ({
-  error,
-}) => {
-  return (
-    <Container centerContent>
-      <Card>
-        <CardHeader>
-          <Heading>Ops, something went wrong.</Heading>
-        </CardHeader>
-        <CardBody>
-          <Text as="pre">{error.message}</Text>
-        </CardBody>
-      </Card>
-    </Container>
-  );
-};
-
-/**
- * Panel Component
- *
- * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.
- *
- * Props:
- * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,
- *   enabling the exchange of data and events.
- *
- * Features:
- * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors
- *   that may occur during the rendering of the plugin's content.
- * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.
- * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the
- *   DSL defined by the plugin authors.
- *
- * Example Usage:
- * ```tsx
- * <Panel communicationLayer={myCommunicationLayer} />
- * ```
- *
- * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary
- * communication and data exchange with the player-ui/react library.
- */
-export const Panel: React.FC<{
-  /** the communication layer to use for the extension */
-  readonly communicationLayer: Pick<
-    MessengerOptions<ExtensionSupportedEvents>,
-    "sendMessage" | "addListener" | "removeListener"
-  >;
-  baseTheme?: Record<string, unknown>;
-}> = ({ communicationLayer, baseTheme }) => {
-  const { state, selectPlayer, selectPlugin, handleInteraction } =
-    useExtensionState({
-      communicationLayer,
-    });
-
-  const { reactPlayer, playerState } = useReactPlayer({
-    plugins: PLAYER_PLUGINS,
-  });
-
-  const dataController = useRef<WeakRef<DataController> | null>(null);
-
-  const currentFlow = useRef<Flow | null>(null);
-
-  useEffect(() => {
-    reactPlayer.player.hooks.dataController.tap("devtools-panel", (d) => {
-      dataController.current = new WeakRef(d);
-    });
-  }, [reactPlayer]);
-
-  useEffect(() => {
-    // we subscribe to all messages from the devtools plugin
-    // so the plugin author can define their own events
-    PUBSUB_PLUGIN.subscribe("*", (type: string, payload: string) => {
-      handleInteraction({
-        type,
-        payload,
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    const { player, plugin } = state.current;
-
-    const flow =
-      player && plugin
-        ? state.players[player]?.plugins?.[plugin]?.flow || INITIAL_FLOW
-        : INITIAL_FLOW;
-
-    if (!currentFlow.current) {
-      currentFlow.current = flow;
-      reactPlayer.start(flow);
-      return;
-    }
-
-    const diff = flowDiff({
-      curr: currentFlow.current as Flow,
-      next: flow,
-    });
-
-    if (diff) {
-      const { change, value } = diff;
-
-      if (change === "flow") {
-        currentFlow.current = value;
-        reactPlayer.start(value);
-      } else if (change === "data") {
-        if (dataController.current) {
-          dataController.current.deref()?.set(value as Record<string, unknown>);
-        } else {
-          reactPlayer.start(flow);
-        }
-      }
-    }
-  }, [reactPlayer, state]);
-
-  const isDarkMode = useDarkMode();
-  const colorMode = isDarkMode ? "dark" : "light";
-
-  const config: ThemeConfig = {
-    initialColorMode: colorMode,
-    useSystemColorMode: true,
-  };
-  const theme = extendTheme({ config, ...baseTheme });
-
-  const Component = reactPlayer.Component as React.FC;
-
-  return (
-    <ChakraProvider resetCSS={false} theme={theme}>
-      <ThemeProvider theme="chrome" colorScheme={colorMode}>
-        <ErrorBoundary fallbackRender={fallbackRender}>
-          <Flex
-            direction="column"
-            h="100vh"
-            alignItems={"normal"}
-            overflow="scroll"
-          >
-            {state.current.player ? (
-              <Flex direction="column" gap="20px">
-                <Flex gap="16px">
-                  <FormControl>
-                    <FormLabel>Player</FormLabel>
-                    <Select
-                      id="player"
-                      value={state.current.player || ""}
-                      onChange={(event) => selectPlayer(event.target.value)}
-                    >
-                      {Object.keys(state.players).map((playerID) => (
-                        <option key={playerID} value={playerID}>
-                          {playerID}
-                        </option>
-                      ))}
-                    </Select>
-                  </FormControl>
-                  <FormControl>
-                    <FormLabel>Plugin</FormLabel>
-                    <Select
-                      id="plugin"
-                      value={state.current.plugin || ""}
-                      onChange={(event) => selectPlugin(event.target.value)}
-                    >
-                      {Object.keys(
-                        state.players[state.current.player]?.plugins ?? [],
-                      ).map((pluginID) => (
-                        <option key={pluginID} value={pluginID}>
-                          {pluginID}
-                        </option>
-                      ))}
-                    </Select>
-                  </FormControl>
-                </Flex>
-                <Flex width="100%">
-                  {playerState.status === "error" ? (
-                    fallbackRender({
-                      error: playerState.error,
-                      resetErrorBoundary: () => {},
-                    })
-                  ) : (
-                    <Component />
-                  )}
-                </Flex>
-                <details>
-                  <summary>Debug</summary>
-                  <pre style={{ maxHeight: "30vh", overflow: "scroll" }}>
-                    {JSON.stringify(state, null, 2)}
-                  </pre>
-                </details>
-              </Flex>
-            ) : (
-              <Flex justifyContent="center" padding="6">
-                <Text>
-                  No Player-UI instance or devtools plugin detected. Visit{" "}
-                  <a href="https://player-ui.github.io/">
-                    https://player-ui.github.io/
-                  </a>{" "}
-                  for more info.
-                </Text>
-              </Flex>
-            )}
-          </Flex>
-        </ErrorBoundary>
-      </ThemeProvider>
-    </ChakraProvider>
-  );
-};

package/src/plugins/index.ts

@@ -1,34 +0,0 @@
-import DevtoolsUIAssetsPlugin from "@devtools-ui/plugin";
-import { PubSubPlugin } from "@player-ui/pubsub-plugin";
-import { CommonExpressionsPlugin } from "@player-ui/common-expressions-plugin";
-import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
-import { DataChangeListenerPlugin } from "@player-ui/data-change-listener-plugin";
-import {
-  ConsoleLogger,
-  Player,
-  PlayerPlugin,
-  ReactPlayer,
-  type ReactPlayerPlugin,
-} from "@player-ui/react";
-
-class LogForwarder implements PlayerPlugin, ReactPlayerPlugin {
-  name = "Log";
-  apply(player: Player) {
-    player.logger.addHandler(new ConsoleLogger("trace", console));
-  }
-
-  applyReact(reactPlayer: ReactPlayer) {
-    this.apply(reactPlayer.player);
-  }
-}
-
-export const PUBSUB_PLUGIN = new PubSubPlugin();
-
-export const PLAYER_PLUGINS: ReactPlayerPlugin[] = [
-  new CommonTypesPlugin(),
-  new CommonExpressionsPlugin(),
-  new DataChangeListenerPlugin(),
-  new DevtoolsUIAssetsPlugin(),
-  new LogForwarder(),
-  PUBSUB_PLUGIN,
-];

package/src/state/index.ts

@@ -1,33 +0,0 @@
-import type { CommunicationLayerMethods } from "@player-devtools/types";
-import { useEffect, useMemo, useSyncExternalStore } from "react";
-
-import { createExtensionClient } from "./client";
-
-/**
- * Thin React adapter over `createExtensionClient`.
- *
- * Creates the client once per `communicationLayer` identity, subscribes to
- * state via `useSyncExternalStore`, and tears down the Messenger on unmount.
- */
-export const useExtensionState = ({
-  communicationLayer,
-}: {
-  /** the communication layer to use for the extension */
-  communicationLayer: CommunicationLayerMethods;
-}) => {
-  const client = useMemo(
-    () => createExtensionClient(communicationLayer),
-    [communicationLayer],
-  );
-
-  useEffect(() => () => client.destroy(), [client]);
-
-  const state = useSyncExternalStore(client.subscribe, client.getState);
-
-  return {
-    state,
-    selectPlayer: client.selectPlayer,
-    selectPlugin: client.selectPlugin,
-    handleInteraction: client.handleInteraction,
-  };
-};

package/types/helpers/flowDiff.d.ts

@@ -1,21 +0,0 @@
-import type { Flow } from "@player-ui/react";
-/**
- * Compares two Flow objects and identifies if there's a change in their structure or data.
- *
- * This function takes two Flow objects as input, `curr` (current) and `next` (next), and compares them
- * to determine if there's a change in the flow's structure or its data. If there's a change in the flow's
- * structure (excluding the `data` property), it returns an object indicating a "flow" change along with the
- * new flow. If there's a change in the `data` property, it returns an object indicating a "data" change along
- * with the new data. If there are no changes, it returns null.
- */
-export declare const flowDiff: ({ curr, next, }: {
-    curr: Flow;
-    next: Flow;
-}) => {
-    change: "data";
-    value: Flow["data"];
-} | {
-    change: "flow";
-    value: Flow;
-} | null;
-//# sourceMappingURL=flowDiff.d.ts.map

package/types/panel/index.d.ts

@@ -1,32 +0,0 @@
-import React from "react";
-import type { MessengerOptions, ExtensionSupportedEvents } from "@player-devtools/types";
-/**
- * Panel Component
- *
- * This component serves as the main container for the devtools plugin content defined by plugin authors using Player-UI DSL.
- *
- * Props:
- * - `communicationLayer`: An object that allows communication between the devtools and the Player-UI plugins,
- *   enabling the exchange of data and events.
- *
- * Features:
- * - Error Handling: Utilizes the `ErrorBoundary` component from `react-error-boundary` to gracefully handle and display errors
- *   that may occur during the rendering of the plugin's content.
- * - State Management: Integrates with custom hooks such as `useExtensionState` to manage the state of the plugin and its components.
- * - Player Integration: Uses the `useReactPlayer` hook from `player-ui/react` to render interactive player components based on the
- *   DSL defined by the plugin authors.
- *
- * Example Usage:
- * ```tsx
- * <Panel communicationLayer={myCommunicationLayer} />
- * ```
- *
- * Note: The `communicationLayer` prop is essential for the proper functioning of the `Panel` component, as it enables the necessary
- * communication and data exchange with the player-ui/react library.
- */
-export declare const Panel: React.FC<{
-    /** the communication layer to use for the extension */
-    readonly communicationLayer: Pick<MessengerOptions<ExtensionSupportedEvents>, "sendMessage" | "addListener" | "removeListener">;
-    baseTheme?: Record<string, unknown>;
-}>;
-//# sourceMappingURL=index.d.ts.map

package/types/plugins/index.d.ts

@@ -1,5 +0,0 @@
-import { PubSubPlugin } from "@player-ui/pubsub-plugin";
-import { type ReactPlayerPlugin } from "@player-ui/react";
-export declare const PUBSUB_PLUGIN: PubSubPlugin;
-export declare const PLAYER_PLUGINS: ReactPlayerPlugin[];
-//# sourceMappingURL=index.d.ts.map

package/types/state/index.d.ts

@@ -1,21 +0,0 @@
-import type { CommunicationLayerMethods } from "@player-devtools/types";
-/**
- * Thin React adapter over `createExtensionClient`.
- *
- * Creates the client once per `communicationLayer` identity, subscribes to
- * state via `useSyncExternalStore`, and tears down the Messenger on unmount.
- */
-export declare const useExtensionState: ({ communicationLayer, }: {
-    /** the communication layer to use for the extension */
-    communicationLayer: CommunicationLayerMethods;
-}) => {
-    state: import("@player-devtools/types").ExtensionState;
-    selectPlayer: (playerID: string) => void;
-    selectPlugin: (pluginID: string) => void;
-    handleInteraction: (interaction: {
-        type: string;
-        payload?: string;
-        target?: string;
-    }) => void;
-};
-//# sourceMappingURL=index.d.ts.map