Comments (11)
@rofrischmann FWIW: https://bugs.chromium.org/p/chromium/issues/detail?id=387952#c6 -- and it's tagged as "WontFix"
from fela.
I see. So what you're saying is not to use insertRule if possible?
from fela.
@rofrischmann Using that API severely limits dev tools usage, can't even toggle the properties in chrome:
from fela.
I've created a small benchmark to generally check the speed (https://gist.github.com/rofrischmann/15073c4297e0bbd6e0732e4903655d7c).
You might want to run this using es6fiddle.
Seems like insertRule
is many times faster actually.
[Log] Running 10 times...
[Debug] insertRule: 0.391ms
[Debug] concatTextContent: 1.055ms
[Debug] overwriteTextContent: 0.970ms
[Log] Running 100 times...
[Debug] insertRule: 0.338ms
[Debug] concatTextContent: 17.685ms
[Debug] overwriteTextContent: 18.403ms
[Log] Running 1000 times...
[Debug] insertRule: 3.450ms
[Debug] concatTextContent: 857.059ms
[Debug] overwriteTextContent: 791.947ms
[Log] Running 10000 times...
[Debug] insertRule: 49.079ms
[Debug] concatTextContent: 92909.438ms
[Debug] overwriteTextContent: 85547.511ms
Well, we're talking about milliseconds, but as we know it we should consider using insertRule
for production. There's no problem in keeping the textContent
method for development. It even helps to keep using middleware without changes e.g. beautifer or logger.
from fela.
@rofrischmann Thanks for running those benchmarks, very interesting!
Couple of quick Qs:
- Have you tried using this lib yet with HMR or redux time time travel?
- How does the lib solve specificity concerns when nesting components and passing
className
s?
from fela.
What do you think of your approach here vs your approach in react-look
? Seems like the libs both cover some of the same ground. Is there a reason you decided to start up this project too?
from fela.
Well yeah, I am experimenting since I started with Look and came up with the solution that generating CSS still is the best way, but needs to be more dynamic.
Yet Look somehow got kind of verbose (I was really overwhelmed by JavaScript, ES2015 and Open Source in general as I just started learning all of it).
I've learned a lot since then and lately asked myself why Look is so restricted to React actually.
I already experimented with an universal API earlier, but had no idea how to actually solve certain problems.
Fela now is kind of a well planed version of all my ideas in a minimal amount of code with not many features.
What I like is that Fela runs free of any library and does not require a lot of additional markup, wrapping or helpers. Wrapping the whole Component and all the stuff just gets complicated so fast that its hard to keep track (and updated docs) even for myself as a maintainer, but I am not saying that I will not further improve and support Look for now. Might just slowly migrate to Fela.
Actually I did not test it with HMR or time travel, but might do this. HMR should work I guess, but for time travel we might need to implement another middleware (which is also one of the cool new features that Look does not provided that easy).
I guess you will better understand what I mean when the React bindings are out. It doesn't really have any special fancy API it just works :p
I will update this comment at home to answer all your questions correctly. Is there a special specificity problem you are interested in?
from fela.
Thanks for the detailed response! You have reflected some of my own fears about react-look
there.
Here's some pseudocode demonstrating the specificity question/concern:
// assume `classes` holds fela classNames for this react component
const Button = (props) => (
<button className=${classnames(classes.button, props.className)}>
{props.children}
</button>
);
// assume `classes` holds fela classNames for this react component
const MyBox = () => (
<div className={classes.base}>
<Button className={classes.button}>Hello</Button>
</div>
);
How does fela handle the specificity issue there when overriding styles via passing another classname created by fela?
from fela.
@rofrischmann Could we use node.sheet.insertRule(rule)
in production and another method in development? Or that would be too error prone?
from fela.
@nathanmarks That seems to be an example I did not consider to handle actually, maybe I got the term specificity wrong at all. Do you have any example of libs/ideas that handle this case wisely?
Yet I think it perhaps is a problem of design in general, I could just come up with some ideas to solve this case, but I am not sure if you could apply it everywhere. Would be interesting to actually test out some real use cases soon.
@oliviertassinari Yeah, I was think about that. I already eliminate all NODE_ENV != 'production' paths while building, so that should not be a problem. I though might get too complex. An alternative would be to just implement a simple middleware that handle modifies the change event action. Let me know what you think of both ways.
@nathanmarks @oliviertassinari Feel free to join me on Gitter for further chatting :P
from fela.
@rofrischmann I'll find you on there
from fela.
Related Issues (20)
- react-fela providers only accept single element children HOT 2
- Use fela with ReactDOM.createPortal on a different window HOT 1
- fela-plugin-responsive-value doesn’t handle nested objects
- Fela doesn’t hydrate CSS custom properties HOT 1
- fela-plugin-multiple-selectors doesn’t extend styles
- renderStatic doesn’t handle nested objects
- Document targetDocument
- renderToNodeList not exported in react-fela/index.d.ts HOT 1
- Typescript plugin doesn't extend style definition HOT 5
- Native ESM support HOT 5
- renderStatic not applying some plugins HOT 6
- Missing changelog for 11.5.x & 11.6.x HOT 2
- Rehydration of `&` selectors HOT 10
- Rules are mixing between components when we switch between pages. HOT 1
- Typescript interface for renderer configuration (IConfig) misses some options HOT 2
- Transform key as array ignored HOT 5
- [Feature] Add bindings for solid-js HOT 1
- Fail to set backgroundImage fallback value HOT 3
- Bug: no fela styles on saved page HOT 1
- react-native: no style export in useFela hook HOT 2
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 fela.