Preact fails to reconcile scripts correctly when doing client-side navigation. #242
Comments
|
Why are we letting Preact handle script insertion in this case? Is it not the purpose of the |
I don't think we are intentionally letting Preact handle this case. It's just that we didn't handle this behavior correctly before. Do you have a some specific idea on how to handle it? I think that if a script has already been loaded and is in the cache, we should remove any diff --git a/src/runtime/hooks.js b/src/runtime/hooks.js
index 51cc514..b524932 100644
--- a/src/runtime/hooks.js
+++ b/src/runtime/hooks.js
@@ -1,6 +1,7 @@
import { h, options, createContext, cloneElement } from 'preact';
import { useRef, useMemo } from 'preact/hooks';
import { rawStore as store } from './store';
+import { scripts } from './router';
// Main context.
const context = createContext({});
@@ -143,5 +144,16 @@ options.vnode = (vnode) => {
vnode.type = Directive;
}
+ // if the vnode is a script
+ if (vnode.type === 'script') {
+ // if the script has a src attribute
+ if (vnode.props.src) {
+ if (scripts.has(vnode.props.src)) {
+ // if the script has already been loaded, don't load it again
+ vnode.props.src = '';
+ }
+ }
+ }
+
if (old) old(vnode);
}; |
That sounds reasonable.
Not yet. I think we need to analyze this behavior better and understand all the possible implications 🙂 |
|
I'm going to close this issue as part of the migration to the Gutenberg repository. This task was added to the Roadmap and we'll reopen an issue/discussion once it's time to start working on this again. |
Originally reported in WordPress/wp-movies-demo#52 (comment)
When client-side navigations are enabled, and the user navigates between two pages that load different scripts, Preact fails to reconcile the tree in the expected way.
Consider this situation:
page 1
page 2
In this case, Preact doesn't know that the
<script src="C.js">is the same node and will re-render it which causes theC.jsscript to be downloaded again on the new page.Reproduction on StackBlitz
The text was updated successfully, but these errors were encountered: