-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Link a VSCode extension for working with Material-UI #19280
[docs] Link a VSCode extension for working with Material-UI #19280
Conversation
No bundle size changes comparing 39c8170...d741869 |
@jedwards1211 Thanks for sharing. This is a pretty exciting path to explore and raise an interesting question: How can we improve the DX, down to the code editor? However, I think that it's too early to promote it here. I think that the best approach would be to see how it perform (as evaluated by the community, not the core team), then we can give it further exposure. A few notes:
|
Actually someone made this for code snippets, but I haven't tried it: https://marketplace.visualstudio.com/items?itemName=Arunagiritm.material-ui I should provide a better demo of the Box codemod...the tedious thing when using |
I'm sorry but I got the import path for Is there an alternative path I can import it from? |
When using system, do you typically just stuff all the style function imports you need for the entire project in one module and then import that wherever you need it? I figured that with code splitting some chunks might be smaller if each module that uses system imports only the style functions it needs. |
@oliviertassinari okay, I fixed the import paths now, looks like there's no problem with importing |
Thanks for raising the issue with the docs. I think that we need to update the TypeScript's imports. Regarding the Box, the tree shaking win is negligible. I think that you will be better off optimizing the cost of changes. Closing per the initial concern: let's have the community to weight in. |
What do you mean by optimizing the cost of changes? |
What happens if you want to use a new prop that isn't available? You will need to rerun the codemod. |
Right, but no one starts off by using every single style function anyway, do they? Running the codemod takes less than a second, you can even assign a keyboard shortcut to it. I think you overestimate the effort required to use it. The extension doesn't run jscodeshift on your entire project, it just runs it on the current text editor. |
Try the Box codemod out and see how it feels to actually use it. It frees you from ever looking up which style function goes with which properties ever again, which is something you'd still have to do once in awhile if you compose all the style functions together in a single place in your project. |
I don't think the community will actually be able to discover this and try it out unless it's publicized somehow...would it be too much to ask you to mention it on Twitter if I can't get a link in the related projects? |
I think that most do, at least when they use the Box. I have personally never imported anything from
The Bootstrap community was able to discover the VS code extensions without linking it to the documentation. Same thing for Vuetify. For a UI library, I think that developers will be most interested in snippets. However, it might inspire others, so why not! |
Regarding the withStyles codemod, it's pretty cool. Every time I have to add styles to a component, I feel friction, no more :). |
@jedwards1211 What about the following action plan? :)
|
That sounds good, I can work on that in the next few days |
Okay looking at @tmarun's snippets I see some problems:
How about I make a fork that addresses these issues? I'd also like to make the project structure more maintainable. (The JSON syntax for multiline snippets is truly awful, I'd rather define the snippets in JS files and have a build task output the final JSON for VSCode to use) |
@jedwards1211 Thanks for the feedback on the snippet extension. The point regarding TypeScript is interesting. It seems that the withStyles codemod fails on a JavaScript file: Regarding the prefix, I have seen Bootstrap prefix it with Regarding forking, I don't think that Material-UI should officially support any extension, but if you have interests in pushing this further, sure, the better quality the extension available, the better for the community :)! Maybe you could find ways to join forces with @tmarun. No matter what, I wonder if developers would prefer different extensions for each concerns or a single one. |
@jedwards1211 I hope these extentions will get adoption, keep up the good work :) |
Thanks! |
We want to use and document styled-components by default in v5. A codemod that could help with this would also be great. |
Oh no 😱 |
@jedwards1211 Ideally, styled-components will be optional but come by default. |
Huh, what's motivating this? I don't get why any React devs would be into it. We don't like putting our HTML in template strings, so why would we want to put our CSS in template strings?
That said I could try to make a codemod for it. I would want to make a codemod for the reverse direction back to JSS too though. Though it would be harder because I would have to parse the CSS in the template strings -- which is an example of how template strings are less powerful to work with than JS objects. |
@jedwards1211 We track it here: #6115 |
I think VSCode users out there will really love this extension I just made!
It has commands for wrapping a component in the text editor in
withStyles
, and another for automatically creating/updating up the declaration ofBox
for work with@material-ui/system
.https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs