Revert "Fix islands serialization"

This reverts commit d064f7d.
solidjs · Nov 18, 2023 · eeb3f17 · eeb3f17
1 parent d5d1b82
commit eeb3f17
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 27 deletions.
diff --git a/packages/start/islands/index.tsx b/packages/start/islands/index.tsx
@@ -2,13 +2,14 @@ import { Component, ComponentProps, 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" {
   namespace JSX {
     interface IntrinsicElements {
       "solid-island": {
-        "data-id": string;
+        "data-props": string;
         "data-component": string;
         "data-island": string;
         "data-when": "idle" | "load";
@@ -44,9 +45,12 @@ export function island<T extends Component<any>>(
     );
   }
 
-  return ((props: ComponentProps<T>) => {
+  return ((compProps: 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[] = [];
       if (import.meta.env.PROD) {
@@ -60,31 +64,42 @@ 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 {...props} />;
+        return <Component {...compProps} />;
       }
-
-      // TODO
-      const islandID = sharedConfig.context.push(props)
-
-      // Replace
-      sharedConfig.context.id = islandID;
 
       return (
         <Hydration>
           <solid-island
-            data-id={islandID}
             data-component={fpath!}
             data-island={path}
             data-when={(props as any)["client:idle"] ? "idle" : "load"}
             data-css={JSON.stringify(styles)}
+            {...serialize(props)}
           >
-            <IslandComponent {...props} />
+            <IslandComponent {...spreadProps} />
           </solid-island>
         </Hydration>
       );
+    } else {
+      return <Component {...compProps} />;
     }
-    return <Component {...props} />;
   }) as T;
 }
diff --git a/packages/start/islands/mount.tsx b/packages/start/islands/mount.tsx
@@ -1,7 +1,6 @@
 import { diff, Patch } from "micromorph";
-import { sharedConfig } from "solid-js";
 import { createStore } from "solid-js/store";
-import { createComponent, hydrate } from "solid-js/web";
+import { createComponent, getHydrationKey, getOwner, hydrate } from "solid-js/web";
 
 export function hydrateServerRouter() {
   const map = new WeakMap();
@@ -19,28 +18,32 @@ export function hydrateServerRouter() {
     }
 
     let Component = window._$HY.islandMap[el.dataset.island!];
-    let id = el.dataset.id;
-    if (!Component || !id || !sharedConfig.load) return;
-    _$DEBUG("hydrating island", el.dataset.island, id, el);
+    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);
 
     let props = createStore({
-      ...sharedConfig.load(id),
-      // get children() {
-      //   const p = el.getElementsByTagName("solid-children");
-      //   getHydrationKey();
-      //   [...p].forEach(a => {
-      //     (a as any).__$owner = getOwner();
-      //   });
-      //   return;
-      // }
+      ...JSON.parse(el.dataset.props!),
+      get children() {
+        const p = el.getElementsByTagName("solid-children");
+        getHydrationKey();
+        [...p].forEach(a => {
+          (a as any).__$owner = getOwner();
+        });
+        return;
+      }
     });
 
     map.set(el, props);
 
     hydrate(() => createComponent(Component, props[0]), el, {
-      renderId: id,
+      renderId: hk.slice(0, hk.length - 1) + `${1 + Number(el.dataset.offset)}-`,
       owner: lookupOwner(el)
     });
+
+    delete el.dataset.hk;
+    el.dataset.hkk = hk;
   }
 
   let queue: HTMLElement[] = [];