Comments (1)
@SantosGuillamot, I've been taking a look at this issue, and I think we can ignore the ref
attribute while generating virtual nodes, i.e., something like:
diff --git a/src/runtime/vdom.js b/src/runtime/vdom.js
index 5657128..b11cec9 100644
--- a/src/runtime/vdom.js
+++ b/src/runtime/vdom.js
@@ -24,6 +24,8 @@ export default function toVdom(node) {
const [, prefix, suffix] = /wp-([^:]+):?(.*)$/.exec(n);
wpDirectives[prefix] = wpDirectives[prefix] || {};
wpDirectives[prefix][suffix || 'default'] = val;
+ } else if (n === 'ref') {
+ continue;
} else {
props[n] = attributes[i].value;
}
What does this imply? Practically nothing, because even if the ref
attribute is not saved in the props generated by running toVdom()
, the attribute remains in the DOM node after hydrating; it is not removed.
There could be problems if that node is in any part of the DOM that is unmounted and mounted again, in which case there would be two possibilities:
- The third-party library that handles the
ref
attribute has already been run before hydrate, so the changes it makes are most likely already in the DOM, and everything will work as usual. - This third-party library runs after hydration; if that happens, when unmounting and re-mounting the node, it is most likely that this third-party library will not be executed again, so it doesn't matter if
ref
is there or not. 🤷
from block-interactivity-experiments.
Related Issues (20)
- Decide if we want to expose some parts of the router and/or other configuration in the store HOT 10
- Hydrate islands inside templates HOT 1
- Explore how to integrate the new View Transitions API HOT 2
- Add `data-wp-key` attribute HOT 1
- Fallback to server navigation when fetching on the client navigation fails HOT 2
- Gutenberg repo draft PR - Try: Dynamic text autocompleter PR HOT 3
- Refs are not passed correctly to directive callbacks
- Router: cancel navigation when another starts
- Router: keep favicon when doing client-side navigation
- Helper function for adding data-wp-context in PHP HOT 12
- Router: support hash
- Relative URLs in cached CSS files are not properly resolved HOT 2
- Helper functions for selectors/actions
- Support multisite with subdirectories in `navigate` function HOT 5
- Using useRef/wp-ref to get a reference to the DOM element HOT 4
- Potential JS overhead for URLs or sites that use just 1-2 simple interactivity features HOT 3
- `useSignalEffect` is not working as expected when using `visibility: hidden/visible` in CSS animations HOT 4
- Rename `data-wp-island` to `data-wp-interactive` HOT 2
- Preact fails to reconcile scripts correctly when doing client-side navigation. HOT 4
- The Interactivity API issues/discussions have been moved to Gutenberg
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from block-interactivity-experiments.