fix #2250 hydration error, fix lazy component loading, better hydrati…

…on cancelation

.changeset/chilled-walls-collect.md

@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+fix #2250 hydration error, fix lazy component loading, better hydration cancelation

package.json

@@ -37,10 +37,10 @@
     "babel-plugin-jsx-dom-expressions": "^0.38.1",
     "coveralls": "^3.1.1",
     "csstype": "^3.1.0",
-    "dom-expressions": "0.38.1",
-    "hyper-dom-expressions": "0.38.1",
+    "dom-expressions": "0.38.3",
+    "hyper-dom-expressions": "0.38.3",
     "jsdom": "^21.1.1",
-    "lit-dom-expressions": "0.38.1",
+    "lit-dom-expressions": "0.38.3",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",

packages/solid/src/render/component.ts

@@ -356,7 +356,7 @@ export function lazy<T extends Component<any>>(
       sharedConfig.count || (sharedConfig.count = 0);
       sharedConfig.count++;
       (p || (p = fn())).then(mod => {
-        setHydrateContext(ctx);
+        !sharedConfig.done && setHydrateContext(ctx);
         sharedConfig.count!--;
         set(() => mod.default);
         setHydrateContext();
@@ -367,18 +367,18 @@ export function lazy<T extends Component<any>>(
       comp = s;
     }
     let Comp: T | undefined;
-    return createMemo(
-      () =>
-        (Comp = comp()) &&
-        untrack(() => {
-          if ("_SOLID_DEV_") Object.assign(Comp!, { [$DEVCOMP]: true });
-          if (!ctx) return Comp!(props);
-          const c = sharedConfig.context;
-          setHydrateContext(ctx);
-          const r = Comp!(props);
-          setHydrateContext(c);
-          return r;
-        })
+    return createMemo(() =>
+      (Comp = comp())
+        ? untrack(() => {
+            if ("_SOLID_DEV_") Object.assign(Comp!, { [$DEVCOMP]: true });
+            if (!ctx || sharedConfig.done) return Comp!(props);
+            const c = sharedConfig.context;
+            setHydrateContext(ctx);
+            const r = Comp!(props);
+            setHydrateContext(c);
+            return r;
+          })
+        : ""
     ) as unknown as JSX.Element;
   }) as T;
   wrap.preload = () => p || ((p = fn()).then(mod => (comp = () => mod.default)), p);

packages/solid/src/render/hydration.ts

@@ -19,6 +19,7 @@ type SharedConfig = {
 export const sharedConfig: SharedConfig = {
   context: undefined,
   registry: undefined,
+  done: false,
   getContextId() {
     return getContextId(this.context!.count);
   },