From 65a3e423af7aeab9aca0ec8a9f9fa826178ef436 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 25 Oct 2023 15:57:40 +0800
Subject: [PATCH 1/2] Utilize `sharedConfig.context.serialize`

---
 packages/start/islands/index.tsx | 35 +++++++++-----------------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/start/islands/index.tsx b/packages/start/islands/index.tsx
index 5913feb9b..eaa69ec54 100644
--- a/packages/start/islands/index.tsx
+++ b/packages/start/islands/index.tsx
@@ -9,7 +9,6 @@ declare module "solid-js" {
   namespace JSX {
     interface IntrinsicElements {
       "solid-island": {
-        "data-props": string;
         "data-component": string;
         "data-island": string;
         "data-when": "idle" | "load";
@@ -45,11 +44,9 @@ export function island<T extends Component<any>>(
     );
   }
 
-  return ((compProps: ComponentProps<T>) => {
+  return ((props: ComponentProps<T>) => {
     if (import.meta.env.SSR) {
       const context = useRequest();
-      const [, props] = splitProps(compProps, ["children"] as any);
-      const [, spreadProps] = splitProps(compProps, [] as any);
 
       let fpath: string;
       let styles: string[] = [];
@@ -64,27 +61,17 @@ export function island<T extends Component<any>>(
         fpath = path;
       }
 
-      const serialize = (props: ComponentProps<T>) => {
-        let offset = 0;
-        let el = JSON.stringify(props, (key, value) => {
-          if (value && value.t) {
-            offset++;
-            return undefined;
-          }
-          return value;
-        });
-
-        return {
-          "data-props": el,
-          "data-offset": offset
-        };
-      };
-
       // @ts-expect-error
       if (!sharedConfig.context?.noHydrate) {
-        return <Component {...compProps} />;
+        return <Component {...props} />;
       }
 
+      sharedConfig.context.serialize(
+        // TODO how to get the ID?
+        props,
+      );
+      
+
       return (
         <Hydration>
           <solid-island
@@ -92,14 +79,12 @@ export function island<T extends Component<any>>(
             data-island={path}
             data-when={(props as any)["client:idle"] ? "idle" : "load"}
             data-css={JSON.stringify(styles)}
-            {...serialize(props)}
           >
-            <IslandComponent {...spreadProps} />
+            <IslandComponent {...props} />
           </solid-island>
         </Hydration>
       );
-    } else {
-      return <Component {...compProps} />;
     }
+    return <Component {...props} />;
   }) as T;
 }

From 7a7c2a0946810f59243384be55d74c95f44d2bb9 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 25 Oct 2023 16:12:38 +0800
Subject: [PATCH 2/2] Fix id generation

---
 packages/start/islands/index.tsx | 10 +++++++---
 packages/start/islands/mount.tsx |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/start/islands/index.tsx b/packages/start/islands/index.tsx
index eaa69ec54..8c7d03bd1 100644
--- a/packages/start/islands/index.tsx
+++ b/packages/start/islands/index.tsx
@@ -1,8 +1,7 @@
-import { Component, ComponentProps, lazy, sharedConfig } from "solid-js";
+import { Component, ComponentProps, createUniqueId, lazy, sharedConfig } from "solid-js";
 import { Hydration, NoHydration } from "solid-js/web";
 import { useRequest } from "../server/ServerContext";
 import { IslandManifest } from "../server/types";
-import { splitProps } from "./utils";
 export { default as clientOnly } from "./clientOnly";
 
 declare module "solid-js" {
@@ -66,8 +65,12 @@ export function island<T extends Component<any>>(
         return <Component {...props} />;
       }
 
+      // FIXME Introduce a new ID generation scheme
+      // for islands
+      const id = createUniqueId();
+
       sharedConfig.context.serialize(
-        // TODO how to get the ID?
+        id,
         props,
       );
       
@@ -75,6 +78,7 @@ export function island<T extends Component<any>>(
       return (
         <Hydration>
           <solid-island
+            data-id={id}
             data-component={fpath!}
             data-island={path}
             data-when={(props as any)["client:idle"] ? "idle" : "load"}
diff --git a/packages/start/islands/mount.tsx b/packages/start/islands/mount.tsx
index 5e49995cd..8264101a4 100644
--- a/packages/start/islands/mount.tsx
+++ b/packages/start/islands/mount.tsx
@@ -21,7 +21,7 @@ export function hydrateServerRouter() {
     if (!Component || !el.dataset.hk) return;
 
     let hk = el.dataset.hk;
-    _$DEBUG("hydrating island", el.dataset.island, hk.slice(0, hk.length - 1) + `1-`, el);
+    // _$DEBUG("hydrating island", el.dataset.island, hk.slice(0, hk.length - 1) + `1-`, el);
 
     let props = createStore({
       ...JSON.parse(el.dataset.props!),
@@ -38,7 +38,7 @@ export function hydrateServerRouter() {
     map.set(el, props);
 
     hydrate(() => createComponent(Component, props[0]), el, {
-      renderId: hk.slice(0, hk.length - 1) + `${1 + Number(el.dataset.offset)}-`,
+      renderId: el.dataset.id,
       owner: lookupOwner(el)
     });