@noya-app/noya-multiplayer-react 0.1.27 → 0.1.29

package/src/__tests__/noyaApp.test.ts

@@ -0,0 +1,107 @@
+import { expect, it } from "bun:test";
+import { Type } from "..";
+import { getAppData } from "../noyaApp";
+
+it("gets AppData with no data", () => {
+  const initialState = { foo: "bar" };
+  const data = getAppData(initialState, undefined, {
+    window: { location: { hash: "" } },
+  });
+
+  expect(data).toEqual({
+    theme: "light",
+    viewType: "editable",
+    initialState,
+    inspector: false,
+  });
+});
+
+it("gets AppData with data param", () => {
+  const dataParam = JSON.stringify({
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+  });
+
+  const data = getAppData(null as unknown, undefined, {
+    window: {
+      location: {
+        hash: `#data=${dataParam}`,
+      },
+    },
+  });
+
+  expect(data).toEqual({
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+  });
+});
+
+it("uses initial state if data doesn't parse", () => {
+  const data = getAppData({ foo: "bar" }, undefined, {
+    window: { location: { hash: "#data=not-json" } },
+  });
+
+  expect(data).toEqual({
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+  });
+});
+
+it("gets AppData with schema", () => {
+  const schema = Type.Object({
+    foo: Type.String({ default: "bar" }),
+  });
+
+  const data = getAppData(null as unknown, schema, {
+    window: { location: { hash: "" } },
+  });
+
+  expect(data).toEqual({
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+  });
+});
+
+// it("enforces schema on data param", () => {
+//   const schema = Type.Object({
+//     foo: Type.String({ default: "bar" }),
+//   });
+
+//   const data = getAppData({ foo: "baz" }, schema, {
+//     window: {
+//       location: {
+//         hash: `#data=${JSON.stringify({ a: 123 })}`,
+//       },
+//     },
+//   });
+
+//   expect(data).toEqual({
+//     theme: "light",
+//     viewType: "editable",
+//     initialState: { foo: "bar" },
+//     inspector: false,
+//   });
+// });
+
+it("gets AppData with function initial state", () => {
+  const initialState = () => ({ foo: "bar" });
+
+  const data = getAppData(initialState, undefined, {
+    window: { location: { hash: "" } },
+  });
+
+  expect(data).toEqual({
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+  });
+});

package/src/noyaApp.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-restricted-globals */
 import {
   createOrCastValue,
+  findAllDefs,
   localStorageSync,
   MultiplayerUser,
   SyncAdapter,
@@ -34,46 +35,56 @@ export function createDefaultAppData<State>(
   };
 }
 
-export function getAppData<State>(): AppData<State> | undefined;
-export function getAppData<State>(initialState: State): AppData<State>;
-export function getAppData<State>(
-  initialState?: State
-): AppData<State> | undefined {
+export type GetAppDataOptions = {
+  window?: { location: { hash: string } };
+};
+
+export function enforceSchema<State>(
+  initialState: State,
+  schema?: TSchema
+): State {
+  return schema
+    ? (createOrCastValue({
+        schema,
+        value: initialState,
+        defs: findAllDefs(schema),
+      }) as State)
+    : initialState;
+}
+
+export function parseAppDataParameter(options?: GetAppDataOptions) {
+  const window = options?.window ?? globalThis;
+  const urlHash = (window.location.hash || "").replace(/^#/, "");
+  const params = new URLSearchParams(urlHash);
+  const data = params.get("data");
+  if (!data) return null;
   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;
+    return JSON.parse(data);
   } catch (e) {
-    return initialState ? createDefaultAppData(initialState) : undefined;
+    return null;
   }
 }
 
-type AppDataOptions = {
-  schema?: TSchema;
-};
+export function getAppData<State>(
+  initialState: State | (() => State),
+  schema?: TSchema,
+  options?: GetAppDataOptions
+): AppData<State> {
+  const resolvedInitialState =
+    initialState instanceof Function ? initialState() : initialState;
 
-/**
- * Get data from host app. Fall back to default data.
- */
-export function useAppData<S>(
-  initialState: S,
-  { schema }: AppDataOptions = {}
-) {
-  const appData = useMemo(() => {
-    return getAppData(
-      schema ? (createOrCastValue(schema, initialState) as S) : initialState
-    );
-  }, [initialState, schema]);
+  try {
+    const appData: AppData<unknown> =
+      parseAppDataParameter(options) ??
+      createDefaultAppData(resolvedInitialState);
 
-  return appData;
+    return {
+      ...appData,
+      initialState: enforceSchema(appData.initialState, schema) as State,
+    };
+  } catch (e) {
+    return createDefaultAppData(enforceSchema(resolvedInitialState, schema));
+  }
 }
 
 export type IframeToHostMessage =
@@ -148,17 +159,17 @@ export function useNoyaAppState<S, M = void, E = void>(
     localStorageKey?: string;
   }
 ) {
-  // Resolve state to a value
-  const [state] = useState(initialState);
-
-  const {
-    multiplayerUrl,
-    inspector,
-    initialState: noyaAppInitialState,
-    theme,
-    viewType,
-  } = useAppData(state, {
-    schema: options.schema,
+  // Keep these stable after initial render
+  const [
+    {
+      multiplayerUrl,
+      inspector,
+      initialState: noyaAppInitialState,
+      theme,
+      viewType,
+    },
+  ] = useState(() => {
+    return getAppData(initialState, options.schema);
   });
 
   const sync = useMemo((): SyncAdapter<S, M, E> => {