-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
Labels
Context: JavaScriptIssue is in JavaScriptIssue is in JavaScriptStatus: Voting Open 👍Collecting upvotes to measure community interestCollecting upvotes to measure community interestType: Feature RequestNew functionalityNew functionality
Description
ECMAScript Modules (aka "ES6 Modules" or "ESM") is a module system that natively works in most browsers. Newer versions of Node.js also natively support it. The USWDS javascript code should switch from the current module system, CommonJS, to using ECMAScript Modules.
What makes ESM better?
- Tools like Rollup and Webpack can tree-shake ESM dependencies, but can't tree-shake CommonJS dependencies. If we want to do the following:
Webpack or Rollup knows that we only need the
import { accordion } from 'uswds/src/js/components' import domready from 'domready' domready(() => { accordion.on() })
accordion
component's javascript, and it can delete all other component javascript.
Caveat: tree shaking can be finicky, and other changes may need to be made to get it fully working. Those changes could be fast-follows to the initial work of getting ESM working. - ESM can be transpiled down to CommonJS, and then run through browserify like we do today. But in a few years when browser support for ESM is sufficient, the transpilation can simply be turned off and we can switch to directly taking advantage of native browser module support.
Additional context
In some ways this is the javascript sister issue to #2854.
thescientist13, EricRohlfs, fafnirical, welzerich, rachidatecs and 4 morethescientist13 and rachidatecs
Metadata
Metadata
Assignees
Labels
Context: JavaScriptIssue is in JavaScriptIssue is in JavaScriptStatus: Voting Open 👍Collecting upvotes to measure community interestCollecting upvotes to measure community interestType: Feature RequestNew functionalityNew functionality
Type
Projects
Status
On Hold