Skip to content
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

LG-3757: Create bundler-ready module entrypoint #165

Merged
merged 7 commits into from Nov 30, 2020

Conversation

aduth
Copy link
Member

@aduth aduth commented Nov 16, 2020

Why: As a developer using the login.gov Design System, I expect that I can use identity-style-guide as a proper NPM package, so that I can deduplicate shared dependencies (see LG-3716) and take advantage of dead code elimination to reduce bundle size by omitting unused components.

Changelog:

  • The published NPM package can now be imported into a project. Bundlers that support dead-code elimination (Webpack, etc.) can automatically remove unused code to optimize bundle size. See Usage guide for more information. Existing usage of JavaScript code from assets/ is unaffected by these changes.

Usage Documentation: https://federalist-2f194a10-945e-4413-be01-46ca6dae5358.app.cloud.gov/preview/18f/identity-style-guide/aduth-lg-3716-package-entry/usage/#use-as-a-javascript-package

History:

#148 added a main to the package's package.json, which at least allows for a developer to import the package. However, because this points to a precompiled distributable asset, dependencies cannot be deduplicated.

Impact:

Preliminary testing in identity-idp reveals bundle size reduction of 88% gzipped (451kb to 56.3kb), largely attributed to elimination of unused zxcvbn dependency.

BeforeAfter
js/application-117899d0f4756bf36d57.js         1 MiB    2, 3  [emitted] [immutable]  [big]  application
js/application-117899d0f4756bf36d57.js.br    402 KiB          [emitted]              [big]
js/application-117899d0f4756bf36d57.js.gz    451 KiB          [emitted]              [big]
js/application-646a51c2eba309441c63.js       203 KiB    2, 3  [emitted] [immutable]         application
js/application-646a51c2eba309441c63.js.br   47.7 KiB          [emitted]
js/application-646a51c2eba309441c63.js.gz   56.3 KiB          [emitted]

@aduth
Copy link
Member Author

aduth commented Nov 16, 2020

The Snyk advisory is arguably not worth concerning over, but it can't be resolved without upgrading USWDS, incidentally resolved by #159.

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, one question

src/js/index.js Outdated Show resolved Hide resolved
@aduth
Copy link
Member Author

aduth commented Nov 17, 2020

Also, should have mentioned earlier that the "visual-regression" failure is expected: It's catching the new content added to the "Usage" page. 😅

At some point I'd like to revisit this to ideally report as a comment and not as a build failure.

**Why**: As a developer using the login.gov Design System, I expect that I can use identity-style-guide as a proper NPM package, so that I can deduplicate shared dependencies (see LG-3716) and take advantage of dead code elimination to reduce bundle size by omitting unused components.
**Why**: Preserve backward-compatibility while renaming source to reflect auto setup behavior
**Why**: Easier integration into existing CI setup, more consistent build artifacts
**Why**: Lint includes import validation. Since there are internal references to built package, must be prebuilt for lint.
**Why**: Changes in #167 bypass Make for running lint, but in any case, the package needs to be built.
@aduth aduth force-pushed the aduth-lg-3716-package-entry branch from 30a0011 to db52eee Compare November 30, 2020 18:38
@aduth
Copy link
Member Author

aduth commented Nov 30, 2020

Rebased after merging #159:

  • Snyk advisory should hopefully clear up.
  • Added components introduced in recent versions of USWDS (db52eee).
  • For CHANGELOG.md, reconciled as "New Features" of 3.0.0 major version.

@aduth
Copy link
Member Author

aduth commented Nov 30, 2020

Visual regression shows small adjustment of padding in the header. It looks that this may have been some flakiness in the rebuild from #159, since it looks more correct in the "changes", and the "changes" are reflected even in what I see in the master branch run locally.

@aduth aduth merged commit 4ce4835 into master Nov 30, 2020
@aduth aduth deleted the aduth-lg-3716-package-entry branch November 30, 2020 19:47
aduth added a commit that referenced this pull request Dec 7, 2020
**Why**: When using the ES module entrypoint, CommonJS "module.exports" and "require" are invalid.

This should only be an issue when using the ES module entrypoint `build/esm/index.js`, and not an issue for CommonJS usage (`build/cjs/index.js`) or the precompiled copy (`dist/assets/js/main.js`).

This was likely missed due to merge timing between #166 and #165.
aduth added a commit that referenced this pull request Dec 8, 2020
**Why**: When using the ES module entrypoint, CommonJS "module.exports" and "require" are invalid.

This should only be an issue when using the ES module entrypoint `build/esm/index.js`, and not an issue for CommonJS usage (`build/cjs/index.js`) or the precompiled copy (`dist/assets/js/main.js`).

This was likely missed due to merge timing between #166 and #165.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants