[1.x] Fix <Render /> component to respect "preserveState" #1943
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pedroborges
changed the title
pedroborges
force-pushed
the
fix-svelte-render
branch
from
205aaf8 to
920c41f
Compare
pedroborges
changed the title
pedroborges
changed the title
# Conflicts: # packages/svelte/src/lib/components/Render.svelte # Conflicts: # packages/svelte/src/lib/components/Render.svelte
This reverts commit a5ae84f.
pedroborges
force-pushed
the
fix-svelte-render
branch
from
920c41f to
5589c19
Compare
pedroborges
commented
Sep 16, 2024
| {#if children.length > 0} | ||
| <svelte:component this={component} {...props}> | ||
| {#each children as child, index (component && component.length === index ? $store.key : null)} | ||
| {#each children as child} |
There was a problem hiding this comment.
Since children always contains a single element, there's no need to use a key in the #each block in this case.
pedroborges
added a commit
to olragon/inertia
that referenced
this pull request
Sep 24, 2024
* master: (95 commits) [1.x] Fix props reactivity (inertiajs#1969) [1.x] useForm wrongly overwrites default values after successful submission (inertiajs#1935) Update changelog [1.x] Fix `resetScrollPositions` and `restoreScrollPositions` router methods (inertiajs#1980) [1.x] Fix [scroll-region] on html element with overflow-scroll (inertiajs#1782) [1.x] Fix useForm re-renders by memoizing functions in React (inertiajs#1607) [1.x] Fix "DataCloneError: <Object> could not be cloned" (inertiajs#1967) [1.x] preserveScroll should be true on initial page visit (inertiajs#1360) Fix type augmentation (inertiajs#1958) [1.x] Fix doubling hash in React StrictMode (inertiajs#1728) [1.x] Add SSR support for Svelte 5 (inertiajs#1970) [1.x] Fix <Render /> component to respect "preserveState" (inertiajs#1943) [1.x] Fix 'received an unexpected slot "default"' warning (inertiajs#1941) QA: Add @types/lodash to fix svelte-check QA: Update reactive if statement Review useForm types QA: Move the if server up QA: Revert tsconfig change QA: Remove plural QA: Remove unused props type + add extra types just in case ... # Conflicts: # packages/react/src/index.ts
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issues with the page component rendering in the Svelte adapter have been reported a couple time (see: #1621, #1733). The last attempt to solve this (#1763) created another issue because it doesn't respect
preserveStateand reuses page components even whenpreserveStateis set tofalse. This PR fixes this issue.I have updated the Svelte playground with a reproducible to help me find a solution and also help the reviewer. We can revert these changes to the playground before merging this PR.
Before
Navigating between
/fooand/bar, which use the same page component, doesn't refresh the page component, but only updates its props. The same page component is reused instead of being destroyed and a new one being mounted.After
Navigating between
/fooand/barwill use a fresh instance of the page component each time, see the "mounted" and "destroyed" logs.This PR still doesn't fully solve the issue described in #1670. Notice on the blue arrows on the "After" screenshot that in some cases the component prop is updated shortly after the component is initialized. In my tests, this only happened when I tried to use a prop inside the
<script>block. Using props in reactive expressions and lifecycle hooks such asonMountworks just fine.After a lot of debugging, I found out that this happens because we are using a Svelte store to persist component and props state. When the store is updated their listeners can be slightly out-of-sync. This causes the internal
<App />component to pass outdated props down to the component tree.I have a working solution and will open a separate PR to fix that because there might be a small breaking change.