Comments (4)
The problem here is that for back compatibility actions are treated as coarse. When you pass an object it deeply reads it to retrigger everytime something changes.
svelte/packages/svelte/src/internal/client/dom/elements/actions.js
Lines 21 to 24 in d1f5d5d
however deep_read_state
can't work with classes since getters and setters are not enumerable.
In theory we could check and access every getter on the prototype...i'll see if there's a decent way of doing it.
from svelte.
Ugh i tried to do something like this
const is_object_literal =
typeof value === 'object' && value !== null && value.constructor === Object;
if (STATE_SYMBOL in value) {
deep_read(value);
} else if (!Array.isArray(value)) {
if (is_object_literal && Object.keys(value).length === 0) {
for (let key in value) {
const prop = value[key];
if (typeof prop === 'object' && prop && STATE_SYMBOL in prop) {
deep_read(prop);
}
}
} else {
const keys = Object.getOwnPropertyDescriptors(Object.getPrototypeOf(value));
for (const key in keys) {
if (keys[key].get) {
value[key];
}
}
}
}
but there's Proxy involved so is_object_literal
gives false positives and it messes with the legacy labeled statement.
Another option could be dynamically add a symbol property to every compiled class that enumerates the fields but it's a pretty involved modification so i would love to hear the opinion of the maintainers before going on 😄
from svelte.
I don't think it should trigger in either case with fine-grained reactivity 🤔
With runes I would probably use an effect instead of the update
function:
const myAction = (node, counter) => {
$effect(() => {
node.innerHTML = counter.value;
});
}
from svelte.
We shouldn't change anything here. The rule is "POJOs are auto-fine-grained and classes are not", and we shouldn't make an exception for actions. If using actions + runes one shouldn't use the update
return type but instead use $effect
to react to changes.
from svelte.
Related Issues (20)
- Svelte 5: The `on` of `svelte/events` is restricted to use with `Element` only HOT 3
- Svelte 5: input value not updated during hydration
- Svelte 5: Customized built-in elements HOT 3
- svelte:head to allow ordering because meta tags are underneath script tags HOT 4
- Keyframes names scoped don't work correct in css nesting HOT 1
- TS EventHandler param type not matches HOT 2
- [email protected] breaks `svelte-check` HOT 1
- Svelte 5: snippets with multiple default values get incorrectly parsed
- Svelte 5: Syntax error on snippets with inline typing with optional properties HOT 3
- Svelte 5: compiler crash when using function in both event handler and markup
- Runes: Add an idiomatic way to clean up side-effects HOT 5
- Setting class $state property in constructor breaks all tracking HOT 15
- Inconsistent behavior of `let` directive in combination with snippets HOT 5
- Svelte 5: `<tr>` is invalid inside `<table>` HOT 2
- Svelte 5: hydration error on each with 0 elements on the server and some elements on the client
- Memory leak on component unmount HOT 1
- Svelte 5: post increment/decrement of proxy property is miscompiled HOT 1
- Svelte 5: How to fix svelte/internal which was a private module used by Svelte 4 components that no longer exists in Svelte 5 HOT 2
- Rename `legacy.componentApi` to `compatibility.classComponent` HOT 1
- enhancement(custom element): svelte 5 should automatically set converters based on types
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 svelte.