fix(components): Enabled Tree Shaking properly in Atlantis.

[scotttjob]

Motivations

We had a report that we weren't tree shaking properly, and users were getting reduced bundle sizes by using our legacy/compatibility bundles which was not intended (they are there to support legacy usages only).

This PR adds the required configuration to tell Rollup/Vite to properly tree shake our components.

We added sideEffects: false to our package.json. This tells bundlers that your code does not 'do' anything when loading the package. It has no side effects from loading the base entry point. Earlier this year we were forcibly injecting styles when loading our components, but we no longer do that (you have to import our styles manually via css) so this is now true!

This PR also resulted in a few deep dives into Atlantis. We did two dives, one to see what it would look like to get a pure ESM build with no compatibility layers. The other was a dive to see what it would look like for us to replace rollup with vite in library mode.

In the wake of those dives, we have a list of tasks that can bring down our package size even further. The pure ESM build of Atlantis for instance is 60kb before tree shaking with room for further improvement via bundler configuration.

Screen Shots

These screenshots come from a 'clean' project that I created with Vite. I wanted the absolute bare minimum project to show the difference in sizes for built Atlantis with and without sideEffects on. Note gzip is not enabled, so sizes shown are uncompressed.

Legacy Imports

ESM Imports as of Today

This PR

Build for Prod with existing approach (in sample repo)

Build for Prod with this PR + Prerelease (in sample repo)

Changes can be
tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages]

Deploying atlantis with    Cloudflare Pages

Latest commit:	404bbfd
Status:	✅  Deploy successful!
Preview URL:	https://814f7837.atlantis.pages.dev
Branch Preview URL:	https://scott-t-tree-shaking-atlanti.atlantis.pages.dev

View logs

[github-actions]

Published Pre-release for 404bbfd with versions:

  - @jobber/components@5.47.2-scottttr-404bbfd.13+404bbfda
  - @jobber/components-native@0.74.1-scottttr-404bbfd.21+404bbfda
  - @jobber/design@0.67.6-scottttr-404bbfd.11+404bbfda
  - @jobber/eslint-config@0.13.3-scottttr-404bbfd.208+404bbfda
  - @jobber/formatters@0.3.1-scottttr-404bbfd.356+404bbfda
  - @jobber/generators@0.11.2-scottttr-404bbfd.28+404bbfda
  - @jobber/hooks@2.11.3-scottttr-404bbfd.28+404bbfda
  - @jobber/stylelint-config@0.7.3-scottttr-404bbfd.208+404bbfda

To install the new version(s) for Web run:

npm install @jobber/components@5.47.2-scottttr-404bbfd.13+404bbfda @jobber/design@0.67.6-scottttr-404bbfd.11+404bbfda @jobber/eslint-config@0.13.3-scottttr-404bbfd.208+404bbfda @jobber/formatters@0.3.1-scottttr-404bbfd.356+404bbfda @jobber/generators@0.11.2-scottttr-404bbfd.28+404bbfda @jobber/hooks@2.11.3-scottttr-404bbfd.28+404bbfda @jobber/stylelint-config@0.7.3-scottttr-404bbfd.208+404bbfda

To install the new version(s) for Mobile run:

npm install @jobber/components-native@0.74.1-scottttr-404bbfd.21+404bbfda @jobber/design@0.67.6-scottttr-404bbfd.11+404bbfda @jobber/eslint-config@0.13.3-scottttr-404bbfd.208+404bbfda @jobber/formatters@0.3.1-scottttr-404bbfd.356+404bbfda @jobber/generators@0.11.2-scottttr-404bbfd.28+404bbfda @jobber/hooks@2.11.3-scottttr-404bbfd.28+404bbfda @jobber/stylelint-config@0.7.3-scottttr-404bbfd.208+404bbfda

[jdeichert]

Tested the pre-release in JO/JF, seems to be working as expected!

[Aiden-Brine]

Updated and tested on JO and JF. Ready to go!