@player-tools/devtools-basic-web-plugin 0.5.3--canary.90.2515

package/src/index.tsx

@@ -0,0 +1,96 @@
+import type {
+  DataController,
+  ExpressionEvaluator,
+  Flow,
+  Player,
+  ReactPlayer,
+  ReactPlayerPlugin,
+  ViewInstance,
+} from "@player-ui/react";
+import { dset } from "dset/merge";
+import { produce } from "immer";
+import React from "react";
+import { WrapperComponent } from "./WrapperComponent";
+
+/** Basic Web Devtools Plugin */
+export class BasicWevDevtoolsPlugin implements ReactPlayerPlugin {
+  name = "player_ui_basic_devtools_plugin";
+
+  data: Record<string, unknown> = {};
+
+  playerConfig: Record<string, unknown> = {};
+
+  logs: {
+    severity: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    message: any;
+  }[] = [];
+
+  flow?: Flow;
+
+  expressionEvaluator?: WeakRef<ExpressionEvaluator>;
+
+  view?: WeakRef<ViewInstance>;
+
+  dataController?: WeakRef<DataController>;
+
+  apply(player: Player) {
+    // Config
+    this.playerConfig = {
+      version: player.getVersion(),
+      plugins: player.getPlugins().map((plugin) => plugin.name),
+    };
+
+    // Data
+    player.hooks.dataController.tap(this.name, (dataController) => {
+      dataController.hooks.onUpdate.tap(this.name, (updates) => {
+        const newPlayerState = produce(this.data, (draft) => {
+          updates.forEach(({ binding, newValue }) => {
+            dset(draft, ["data", ...binding.asArray()], newValue);
+          });
+        });
+        this.data = newPlayerState;
+      });
+    });
+
+    // Logs
+    player.logger.hooks.log.tap(this.name, (severity, message) => {
+      this.logs = [...this.logs, { severity, message }];
+    });
+
+    // Flow
+    player.hooks.onStart.tap(this.name, (f) => {
+      this.flow = f;
+    });
+
+    // View
+    player.hooks.view.tap(this.name, (view) => {
+      this.view = new WeakRef(view);
+    });
+
+    // Expression evaluator
+    player.hooks.expressionEvaluator.tap(this.name, (evaluator) => {
+      this.expressionEvaluator = new WeakRef(evaluator);
+    });
+  }
+
+  applyReact(reactPlayer: ReactPlayer) {
+    // eslint-disable-next-line react/display-name
+    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => () => {
+      const Component = Comp as React.FC;
+
+      return (
+        <WrapperComponent
+          playerConfig={this.playerConfig}
+          data={this.data}
+          logs={this.logs}
+          flow={this.flow}
+          view={this.view}
+          expressionEvaluator={this.expressionEvaluator}
+        >
+          <Component />
+        </WrapperComponent>
+      );
+    });
+  }
+}

package/src/types.ts

@@ -0,0 +1,35 @@
+import { ExpressionEvaluator, ViewInstance } from "@player-ui/react";
+import { Flow } from "@player-ui/types";
+
+export interface Evaluation {
+  /** A unique key for this expression */
+  id: string;
+  /** The expression itself */
+  expression: string;
+  /** The result for a given expression */
+  result?: unknown;
+  /** Whether there were any errors with the result */
+  severity?: "error" | "warning";
+}
+
+export interface WrapperComponentProps {
+  /** component's children */
+  readonly children: React.ReactNode;
+  /** Inspected player data */
+  data: Record<string, unknown>;
+  /** Inspected player config */
+  playerConfig: Record<string, unknown>;
+  /** Inspected player logs */
+  logs: {
+    /** Log severity */
+    severity: string;
+    /** Log message */
+    message: string;
+  }[];
+  /** Inspected player flow */
+  flow?: Flow;
+  /** expression evaluator */
+  expressionEvaluator?: WeakRef<ExpressionEvaluator>;
+  /** view instace */
+  view?: WeakRef<ViewInstance>;
+}

package/types/WrapperComponent.d.ts

@@ -0,0 +1,4 @@
+import type { WrapperComponentProps } from "./types";
+/** Tap into the ReactPlayer hooks and create the content to be rendered into the extension Player UI */
+export declare const WrapperComponent: ({ children, data, playerConfig, logs, flow, expressionEvaluator, }: WrapperComponentProps) => JSX.Element;
+//# sourceMappingURL=WrapperComponent.d.ts.map

package/types/constants/index.d.ts

@@ -0,0 +1,16 @@
+import type { PluginData } from "@player-tools/devtools-types";
+export declare const PLUGIN_ID = "player-ui-basic-devtools-plugin";
+export declare const PLUGIN_NAME = "Standard Devtools";
+export declare const PLUGIN_DESCRIPTION = "Standard Player UI Devtools";
+export declare const PLUGIN_VERSION = "0.0.1";
+export declare const VIEWS_IDS: {
+    CONFIG: string;
+    FLOW: string;
+    LOGS: string;
+    CONSOLE: string;
+};
+export declare const INTERACTIONS: {
+    EVALUATE_EXPRESSION: string;
+};
+export declare const BASE_PLUGIN_DATA: Omit<PluginData, "flow">;
+//# sourceMappingURL=index.d.ts.map

package/types/content/common/Screen.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const Screen: ({ main, footer, id, }: {
+    id: string;
+    main: React.ReactNode;
+    footer?: React.ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=Screen.d.ts.map

package/types/content/common/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Screen";
+//# sourceMappingURL=index.d.ts.map

package/types/content/index.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+declare const _default: {
+    id: string;
+    views: import("react").JSX.Element[];
+    navigation: {
+        BEGIN: string;
+        Plugin: {
+            startState: string;
+        };
+    };
+    schema: {
+        playerConfig: import("@player-ui/types").Schema.DataType<Record<string, unknown>>;
+        flow: import("@player-ui/types").Schema.DataType<Record<string, unknown>>;
+        expression: import("@player-ui/types").Schema.DataType<string>;
+        history: [import("@player-tools/dsl").DSLSchema<Omit<import("@player-ui/types").Schema.DataType<unknown>, "type" | "validation"> & {
+            type: string | number;
+            validation?: import("@player-ui/types").Validation.Reference[] | undefined;
+        }>];
+        logs: [import("@player-tools/dsl").DSLSchema<Omit<import("@player-ui/types").Schema.DataType<unknown>, "type" | "validation"> & {
+            type: string | number;
+            validation?: import("@player-ui/types").Validation.Reference[] | undefined;
+        }>];
+    };
+    data: {
+        expression: string;
+        flow: {};
+        history: never[];
+        logs: never[];
+        playerConfig: {};
+    };
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/types/content/navigation/index.d.ts

@@ -0,0 +1,7 @@
+export declare const navigation: {
+    BEGIN: string;
+    Plugin: {
+        startState: string;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/types/content/schema/index.d.ts

@@ -0,0 +1,29 @@
+import type { Schema } from "@player-ui/types";
+import { DSLSchema } from "@player-tools/dsl";
+export declare const schema: {
+    playerConfig: Schema.DataType<Record<string, unknown>>;
+    flow: Schema.DataType<Record<string, unknown>>;
+    expression: Schema.DataType<string>;
+    history: [DSLSchema<Omit<Schema.DataType<unknown>, "type" | "validation"> & {
+        type: string | number;
+        validation?: import("@player-ui/types").Validation.Reference[] | undefined;
+    }>];
+    logs: [DSLSchema<Omit<Schema.DataType<unknown>, "type" | "validation"> & {
+        type: string | number;
+        validation?: import("@player-ui/types").Validation.Reference[] | undefined;
+    }>];
+};
+export declare const bindings: import("@player-tools/dsl").MakeBindingRefable<{
+    playerConfig: Schema.DataType<Record<string, unknown>>;
+    flow: Schema.DataType<Record<string, unknown>>;
+    expression: Schema.DataType<string>;
+    history: [DSLSchema<Omit<Schema.DataType<unknown>, "type" | "validation"> & {
+        type: string | number;
+        validation?: import("@player-ui/types").Validation.Reference[] | undefined;
+    }>];
+    logs: [DSLSchema<Omit<Schema.DataType<unknown>, "type" | "validation"> & {
+        type: string | number;
+        validation?: import("@player-ui/types").Validation.Reference[] | undefined;
+    }>];
+}>;
+//# sourceMappingURL=index.d.ts.map

package/types/content/views/ConfigView.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const ConfigView: React.JSX.Element;
+//# sourceMappingURL=ConfigView.d.ts.map

package/types/content/views/ConsoleView.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const ConsoleView: React.JSX.Element;
+//# sourceMappingURL=ConsoleView.d.ts.map

package/types/content/views/FlowView.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const FlowView: React.JSX.Element;
+//# sourceMappingURL=FlowView.d.ts.map

package/types/content/views/LogsView.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const LogsView: React.JSX.Element;
+//# sourceMappingURL=LogsView.d.ts.map

package/types/content/views/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const views: import("react").JSX.Element[];
+//# sourceMappingURL=index.d.ts.map

package/types/helpers/genDataChangeTransaction.d.ts

@@ -0,0 +1,8 @@
+import type { DevtoolsDataChangeEvent, Transaction } from "@player-tools/devtools-types";
+import type { Flow } from "@player-ui/react";
+export declare const genDataChangeTransaction: ({ playerID, data, pluginID, }: {
+    playerID: string;
+    data: Flow["data"];
+    pluginID: string;
+}) => Transaction<DevtoolsDataChangeEvent>;
+//# sourceMappingURL=genDataChangeTransaction.d.ts.map

package/types/helpers/getEvaluateExpression.d.ts

@@ -0,0 +1,4 @@
+import { ExpressionEvaluator } from "@player-ui/react";
+import { Evaluation } from "../types";
+export declare const getEvaluateExpression: (expressionEvaluator?: WeakRef<ExpressionEvaluator>) => (expression: string) => Evaluation;
+//# sourceMappingURL=getEvaluateExpression.d.ts.map

package/types/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export { getEvaluateExpression } from "./getEvaluateExpression";
+export { genDataChangeTransaction } from "./genDataChangeTransaction";
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,18 @@
+import type { DataController, ExpressionEvaluator, Flow, Player, ReactPlayer, ReactPlayerPlugin, ViewInstance } from "@player-ui/react";
+/** Basic Web Devtools Plugin */
+export declare class BasicWevDevtoolsPlugin implements ReactPlayerPlugin {
+    name: string;
+    data: Record<string, unknown>;
+    playerConfig: Record<string, unknown>;
+    logs: {
+        severity: string;
+        message: any;
+    }[];
+    flow?: Flow;
+    expressionEvaluator?: WeakRef<ExpressionEvaluator>;
+    view?: WeakRef<ViewInstance>;
+    dataController?: WeakRef<DataController>;
+    apply(player: Player): void;
+    applyReact(reactPlayer: ReactPlayer): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { ExpressionEvaluator, ViewInstance } from "@player-ui/react";
+import { Flow } from "@player-ui/types";
+export interface Evaluation {
+    /** A unique key for this expression */
+    id: string;
+    /** The expression itself */
+    expression: string;
+    /** The result for a given expression */
+    result?: unknown;
+    /** Whether there were any errors with the result */
+    severity?: "error" | "warning";
+}
+export interface WrapperComponentProps {
+    /** component's children */
+    readonly children: React.ReactNode;
+    /** Inspected player data */
+    data: Record<string, unknown>;
+    /** Inspected player config */
+    playerConfig: Record<string, unknown>;
+    /** Inspected player logs */
+    logs: {
+        /** Log severity */
+        severity: string;
+        /** Log message */
+        message: string;
+    }[];
+    /** Inspected player flow */
+    flow?: Flow;
+    /** expression evaluator */
+    expressionEvaluator?: WeakRef<ExpressionEvaluator>;
+    /** view instace */
+    view?: WeakRef<ViewInstance>;
+}
+//# sourceMappingURL=types.d.ts.map