From c8fe58e9d259e463def62535f6d23454d4f30cee Mon Sep 17 00:00:00 2001 From: Ryan Carniato Date: Thu, 8 Aug 2024 15:56:01 -0700 Subject: [PATCH] fix #2250 hydration error, fix lazy component loading, better hydration cancelation --- .changeset/chilled-walls-collect.md | 5 +++++ package.json | 6 +++--- packages/solid/src/render/component.ts | 26 +++++++++++++------------- packages/solid/src/render/hydration.ts | 1 + pnpm-lock.yaml | 24 ++++++++++++------------ 5 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 .changeset/chilled-walls-collect.md diff --git a/.changeset/chilled-walls-collect.md b/.changeset/chilled-walls-collect.md new file mode 100644 index 000000000..efda8079c --- /dev/null +++ b/.changeset/chilled-walls-collect.md @@ -0,0 +1,5 @@ +--- +"solid-js": patch +--- + +fix #2250 hydration error, fix lazy component loading, better hydration cancelation diff --git a/package.json b/package.json index 261d6bae6..f97cb7b52 100644 --- a/package.json +++ b/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", diff --git a/packages/solid/src/render/component.ts b/packages/solid/src/render/component.ts index d60796387..5561ac422 100644 --- a/packages/solid/src/render/component.ts +++ b/packages/solid/src/render/component.ts @@ -356,7 +356,7 @@ export function lazy>( 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>( 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); diff --git a/packages/solid/src/render/hydration.ts b/packages/solid/src/render/hydration.ts index 94bd08f3d..1fce9b0a0 100644 --- a/packages/solid/src/render/hydration.ts +++ b/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); }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c959dda54..cc13b9197 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,17 +57,17 @@ importers: specifier: ^3.1.0 version: 3.1.0 dom-expressions: - specifier: 0.38.1 - version: 0.38.1(csstype@3.1.0)(seroval-plugins@1.1.0)(seroval@1.1.0) + specifier: 0.38.3 + version: 0.38.3(csstype@3.1.0)(seroval-plugins@1.1.0)(seroval@1.1.0) hyper-dom-expressions: - specifier: 0.38.1 - version: 0.38.1 + specifier: 0.38.3 + version: 0.38.3 jsdom: specifier: ^21.1.1 version: 21.1.1 lit-dom-expressions: - specifier: 0.38.1 - version: 0.38.1 + specifier: 0.38.3 + version: 0.38.3 ncp: specifier: ^2.0.0 version: 2.0.0 @@ -2897,8 +2897,8 @@ packages: path-type: 4.0.0 dev: true - /dom-expressions@0.38.1(csstype@3.1.0)(seroval-plugins@1.1.0)(seroval@1.1.0): - resolution: {integrity: sha512-sGevejMHZCk9DtBFEtSXv1TYLTbB6lmocpEb/ct1lTLE6cEww7cXoPHxb/3gvA4SDPRJbdcx41n0HMivqS/0GA==} + /dom-expressions@0.38.3(csstype@3.1.0)(seroval-plugins@1.1.0)(seroval@1.1.0): + resolution: {integrity: sha512-aoANFE9O8vHeQbxJ9j2Ty9Sh3HR6+0w6H27PxfFU7G1J55+/tSDOUZuabiJiSm96kSYTRlFMYxJh9Hy8zTdlFw==} peerDependencies: csstype: ^3.0 seroval: ^1.1.0 @@ -3638,8 +3638,8 @@ packages: resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==} dev: true - /hyper-dom-expressions@0.38.1: - resolution: {integrity: sha512-NPA2f4PmWyb3D43YEADeK/M/jlf5zTvFLF+HIl9HNlCRLLWWJA4W+UOWtFIPBHQgcL7NPblldA8Fq8QcsqvD4Q==} + /hyper-dom-expressions@0.38.3: + resolution: {integrity: sha512-BfQpM44M8+GQTpByKQWGdQaMKMblvJ3RKwcdpInroHg5AkYtk1QjyhXJ3omh4pia9NxMGUwFw04jRfUGSv4gBQ==} dev: true /iconv-lite@0.4.24: @@ -4080,8 +4080,8 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true - /lit-dom-expressions@0.38.1: - resolution: {integrity: sha512-ItK30m9BIRbNLK6hI4zA1eP5uykKLYDApt8hEWR6lReWup+wiwKw6HrKwzv6/SjMCn5jVHNWTiMRa4GsAz1iLw==} + /lit-dom-expressions@0.38.3: + resolution: {integrity: sha512-Qaznt1eySeJD5v2uQwyR7krDO4bqvSkdWz80H08+3C7NdHdVsIizxojunK1Vk2DMElHd7o/8hidCByWL9+ro8Q==} dev: true /load-json-file@4.0.0: