@noya-app/noya-multiplayer-react 0.1.21 → 0.1.23

package/src/noyaApp.ts

@@ -0,0 +1,185 @@
+/* eslint-disable no-restricted-globals */
+import {
+  createValue,
+  localStorageSync,
+  MultiplayerUser,
+  SyncAdapter,
+  TSchema,
+  webSocketSync,
+} from "@noya-app/state-manager";
+import { useEffect, useMemo, useState } from "react";
+import { useMultiplayerState, UseMultiplayerStateOptions } from "./hooks";
+import { StateInspectorOptions } from "./inspector/StateInspector";
+
+export type AppViewType = "editable" | "readOnly" | "preview";
+
+export type AppTheme = "light" | "dark";
+
+export type AppData<State> = {
+  multiplayerUrl?: string;
+  theme: AppTheme;
+  viewType: AppViewType;
+  initialState: State;
+  inspector: boolean | StateInspectorOptions;
+};
+
+export function createDefaultAppData<State>(
+  initialState: State
+): AppData<State> {
+  return {
+    theme: "light",
+    viewType: "editable",
+    initialState,
+    inspector: false,
+  };
+}
+
+export function getAppData<State>(): AppData<State> | undefined;
+export function getAppData<State>(initialState: State): AppData<State>;
+export function getAppData<State>(
+  initialState?: State
+): AppData<State> | undefined {
+  try {
+    const urlHash = (window.location.hash || "").replace(/^#/, "");
+    const params = new URLSearchParams(urlHash);
+    const data = params.get("data");
+    if (!data) {
+      return initialState ? createDefaultAppData(initialState) : undefined;
+    }
+    const parsed = JSON.parse(data);
+    if (!parsed.initialState) {
+      parsed.initialState = initialState;
+    }
+    return parsed;
+  } catch (e) {
+    return initialState ? createDefaultAppData(initialState) : undefined;
+  }
+}
+
+type AppDataOptions = {
+  schema?: TSchema;
+};
+
+/**
+ * Get data from host app. Fall back to default data.
+ */
+export function useAppData<S extends object>(
+  initialState: S,
+  { schema }: AppDataOptions = {}
+) {
+  const appData = useMemo(() => {
+    return getAppData(
+      schema ? createValue(schema, initialState) : initialState
+    );
+  }, [initialState, schema]);
+
+  return appData;
+}
+
+export type IframeToHostMessage =
+  | {
+      type: "application.setMenuItems";
+      payload: {
+        menuItems: any[];
+      };
+    }
+  | {
+      type: "multiplayer.setUsers";
+      payload: {
+        users: any[];
+      };
+    };
+
+export type HostToIframeMessage = {
+  type: "application.selectMenuItem";
+  payload: {
+    value: string;
+  };
+};
+
+export function useBroadcastConnectedUsers(connectedUsers: MultiplayerUser[]) {
+  useEffect(() => {
+    if (!isEmbeddedApp()) return;
+
+    const message: IframeToHostMessage = {
+      type: "multiplayer.setUsers",
+      payload: { users: connectedUsers },
+    };
+
+    parent?.postMessage(message, "*");
+  }, [connectedUsers]);
+}
+
+export function useBroadcastMenuItems<T>(
+  menuItems: any[],
+  handleSelectMenuItem: (value: T) => void
+) {
+  useEffect(() => {
+    if (!isEmbeddedApp()) return;
+
+    const message: IframeToHostMessage = {
+      type: "application.setMenuItems",
+      payload: { menuItems },
+    };
+
+    parent?.postMessage(message, "*");
+
+    const listener = (event: MessageEvent<HostToIframeMessage>) => {
+      if (event.data.type === "application.selectMenuItem") {
+        handleSelectMenuItem(event.data.payload.value as T);
+      }
+    };
+
+    window.addEventListener("message", listener);
+
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }, [handleSelectMenuItem, menuItems]);
+}
+
+export function isEmbeddedApp() {
+  return window.self !== window.top;
+}
+
+export function useNoyaAppState<S extends object, M = void, E = void>(
+  initialState: S | (() => S),
+  options: UseMultiplayerStateOptions<S, M, E> & {
+    localStorageKey?: string;
+  }
+) {
+  // Resolve state to a value
+  const [state] = useState(initialState);
+
+  const {
+    multiplayerUrl,
+    inspector,
+    initialState: noyaAppInitialState,
+    theme,
+    viewType,
+  } = useAppData(state, {
+    schema: options.schema,
+  });
+
+  const sync = useMemo((): SyncAdapter<S, M, E> => {
+    return multiplayerUrl
+      ? webSocketSync(multiplayerUrl)
+      : localStorageSync({ key: options.localStorageKey || "noya-app" });
+  }, [multiplayerUrl, options.localStorageKey]);
+
+  const result = useMultiplayerState(noyaAppInitialState, {
+    ...options,
+    inspector: options.inspector ?? inspector,
+    sync,
+  });
+
+  const [, , extras] = result;
+
+  useBroadcastConnectedUsers(extras.connectedUsers);
+
+  const mergedExtras = useMemo(() => {
+    return { ...extras, theme, viewType } as const;
+  }, [extras, theme, viewType]);
+
+  return [result[0], result[1], mergedExtras] as const;
+}