Comments (4)
Technically as far is it concerned class is reactive here because you are using props.class syntax. It can't know that it isn't. Reactive class means there is always potential for it to overwrite. We can't do inline optimizations on classList with computed keys currently. I suppose the compiler could be more optimized. But this is generally the problem with reactive class + classList and why there is intention to do something about classList in the future.
from solid.
Hmm, I thought the rules was that one can use classList and class together as long as only one is reactive.
We can't do inline optimizations on classList with computed keys currently.
But I didn't know about this :( Why is it not possible? I need computed keys to get dashes in the class lol.
If I was solid I'd tackle the problem by splitting class
by
(space) and then feeding the output into classList, what's wrong with that approach? Is it really so important to accurately reflect double spaces and other imperfections in the class attribute value? (Like class1 class2
instead of class1 class2
)
Edit:
I need computed keys to get dashes in the class lol.
I'm obviously stupid, I can just do { "stuff-with-dashes": true }
from solid.
To be fair computed property compilation is probably possible if the computed property itself isn't dynamic (a signal or member expression). Also a literal could be eliminated too. These are all optimization edge cases. I just bailed out the optimization sooner because of sake of time and some complexity I hit.
That being said this behavior due to the way class
+ classList
work in general is sort of by design. Poor design, perhaps but it is the way it works right now. I can't compile this problem away in the general sense and it is something that is known issue. Nothing to fix right now other than hope to change the design in the future.
from solid.
Nothing to fix right now other than hope to change the design in the future.
That's totally fair. Thanks for the information! But I still wonder about your reasoning regarding why not split class into classList in the JSX transformation output for now to fix all the bugs, at the expense of some performance?
from solid.
Related Issues (20)
- [Bug] Repeated call syntax in JSX breaks reactivity HOT 1
- [Astro] resource and signal rendering is mixed up on the client HOT 2
- Refs don't work correctly when using dynamic
- Refs don't work when optional on a component HOT 4
- Cannot use istanbul ignore comments for generated code HOT 2
- setting element reference in `setStore` modifies the values in the array HOT 13
- `this` inside jsx-template inside a constructor of a derived class causes transformation-bug HOT 2
- The update of props is not granular enough. HOT 4
- No value attribute on CSR, but present in SSR
- Cannot properly bind numbers to Select HOT 1
- Double mounting for children element. HOT 2
- Is [email protected] active now? HOT 2
- Enhancement - Prop destructuring HOT 4
- [SSR/Astro] DOM Not Updated from State by Client Updates onMount HOT 5
- Boolean attributes HOT 1
- Component doesn't reliably respond to a signal after hydration HOT 3
- JSX does not wait for transitions to complete when using a ternary in a prop value HOT 4
- What is the minimum browser support for SolidJS? HOT 2
- TypeScript doesn't give error when calling a SetStoreFunction<T> where T is an array of objects HOT 13
- SyntaxError: The requested module 'node:events' does not provide an export named 'addAbortListener' HOT 4
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 solid.