Comments (5)
I've had a quick look at using webpack V5 a while ago now, I managed to get it to output an ES6 module however it seems like this feature is very much experimental as it opened up a rabbit hole of issues trying to get the ES module to work with my Next.js build.
I'd like to iterate @jkjustjoshing 's queries above, and see if there would be any appetite in using rollup.js as the approach instead? I think either of his options sound fine. Otherwise I could have another look at the webpack changes I made previously and open a PR with some notes with the issues I encountered so others can take a look? The changes required for webpack were pretty minior, but it seems like a concerning route if webpack is likely to cause more issues down the line.
I'd also like to know what the current teams resourcing is like in terms of supporting a PR, or whether this issue is on your roadmap?
This would also be a great issue to solve from an environmental perspective, I'd imagine there are quite a few high traffic sites that could split their JavaScript bundles in half.
from react-uswds.
Did you consider esbuild as an alternative to rollup?
from react-uswds.
@suzubara has any further thought been given to this since the ticket was created? I'd love to avoid pulling in several hundred more kb than I need of dependencies!
I was about to open a similar issue (glad I searched the open issues first!). Here are some thoughts/observations I have.
It doesn't seem like Webpack has great support for ES Module outputs. It also doesn't seem to easily output 2 parallel bundles (assuming we want to keep the CommonJS UMD output as well). There are 2 ways to solve this that I can think of:
- Switch to Rollup (as you mention in the ticket title). The
webpack.config.js
file doesn't seem to be doing anything too complicated or unique, so rewriting it in Rollup would probably not be too challenging. (Storybook would still use webpack under-the-hood, but that's abstracted away from us). - Add a second build step with Rollup. Still generate
index.js
anduswds.css
using Webpack, but then use Rollup to generate theindex.esm.js
file. This would get complicated/messy if the Javascript file depends on any of the other assets inside the./lib
folder, but from what I can tell the assets are only referenced byuswds.css
, so this wouldn't be an issue.
Do you think the team is leaning more towards one or the other of those solutions? Is a PR for this something the team would be open to, or is it a large enough change that you'd need to dedicate more internal resources to it than you're able to right now?
from react-uswds.
I have a proof-of-concept of using vite/vitest here: #2716
from react-uswds.
Now that #2716 has been merged, what's the state of this issue?
from react-uswds.
Related Issues (20)
- [build] Group dependency update PRs HOT 1
- [fix] <Search/> component does not have "X" to clear HOT 3
- [build] Fix USWDS.svg 404 in storybook HOT 1
- [fix] StepIndicator has hard-coded English status "[not] completed"
- [docs] Storybook: odd styling for label with required marker HOT 2
- [fix] smooth scrolling css leaks from component to whole package
- [feat] Automated accessibility check to our development pipeline. HOT 4
- [fix] Character counts announced excessively by screen readers
- [fix]: Pagination a11y issue on role attribute
- [fix] DatePicker component uses defaultProps which is to be deprecated and causes console warning. HOT 2
- Button component doesn't accept className prop when consumed
- [feat] The TimePicker component should support 24 hour time formats
- [feat] Add Page Number Value to Pagination Buttons
- [feat] Export the Calendar component as standalone from DatePicker
- [feat] Add a default mode prop to the Calendar component
- Header navigation in Mobile menu doesn't have a outline on Close icon when opened
- [fix] The Label component doesn't have any spacing in between the label text and the hint text
- Default Styling for this `<Breadcrumb />` Class Puts it Way Off Screen
- [fix] TimePicker/DatePicker onChange callback is triggered on initial render
- [feat] Add value prop to DatePicker/TimePicker
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 react-uswds.