@tschk/moonshine-react 0.3.7 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tschk/moonshine-react",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "React renderer, islands, and signal hooks for Moonshine",
   "license": "ISC",
   "type": "module",

package/src/client.tsx

@@ -118,8 +118,8 @@ export function useStore<T extends object>(store: T): T {
   }
   useSyncExternalStore(
     node.subscribe,
-    () => store,
-    () => store,
+    () => node.version,
+    () => node.version,
   );
   return store;
 }

package/src/islands.tsx

@@ -62,7 +62,10 @@ export function island<P>(
     const mod = use(loader());
     const Component = ((mod as { default?: ComponentType<P> }).default ??
       mod) as FunctionComponent<P>;
-    const children = createElement(Component as any, props as any);
+    const children = createElement(
+      Component as FunctionComponent<unknown>,
+      props as unknown as Record<string, unknown>,
+    );
     if (registry) {
       registry.entries.set(id, {
         id,
@@ -74,13 +77,14 @@ export function island<P>(
       Fragment,
       null,
       createElement("div", { "data-moonshine-island": id }, children),
-      createElement("script", {
-        type: "application/json",
-        "data-moonshine-island-props": id,
-        dangerouslySetInnerHTML: {
-          __html: serializeIslandProps(props),
+      createElement(
+        "script",
+        {
+          type: "application/json",
+          "data-moonshine-island-props": id,
         },
-      }),
+        serializeIslandProps(props),
+      ),
     );
   };
   return IslandComponent;
@@ -107,7 +111,10 @@ export function hydrateIslands(): void {
       const { createElement } = await import("react");
       const Component = ((mod as { default?: ComponentType<unknown> })
         .default ?? mod) as FunctionComponent<unknown>;
-      hydrateRoot(marker, createElement(Component as any, props as any));
+      hydrateRoot(
+        marker,
+        createElement(Component, props as Record<string, unknown>),
+      );
     });
   }
 }

package/src/serialize.ts

@@ -1,8 +1,7 @@
-const HTML_ESCAPE = /[<>&\u2028\u2029]/g;
-
-function escapeHtmlChar(char: string): string {
-  return `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`;
-}
+// Island props go into a `<script>` tag, the same hazard the server's data
+// payload has, so both use the framework's one HTML-safe JSON serializer.
+// A second copy here is a second place to forget an escape vector.
+export { serializeData as serializeIslandProps } from "@tschk/moonshine-framework";
 
 function escapeHtmlValue(value: string): string {
   return value
@@ -13,30 +12,6 @@ function escapeHtmlValue(value: string): string {
     .replace(/'/g, "&#x27;");
 }
 
-export function serializeIslandProps(value: unknown): string {
-  // Ancestor chain, not a visited set: a value repeated in sibling positions
-  // is shared, not cyclic, and must still serialize.
-  const ancestors: unknown[] = [];
-  function replacer(this: object, _key: string, v: unknown): unknown {
-    if (v === undefined) return undefined;
-    const type = typeof v;
-    if (type === "function" || type === "symbol" || type === "bigint") {
-      throw new TypeError(`cannot serialize ${type}`);
-    }
-    if (v !== null && typeof v === "object") {
-      while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
-        ancestors.pop();
-      }
-      if (ancestors.includes(v)) throw new TypeError("cyclic reference");
-      ancestors.push(v);
-    }
-    return v;
-  }
-  const raw = JSON.stringify(value, replacer);
-  if (raw === undefined) return "null";
-  return raw.replace(HTML_ESCAPE, escapeHtmlChar);
-}
-
 export function escapeHtml(value: string): string {
   return escapeHtmlValue(value);
 }