feat: support tree shaking

[gclark-eightfold]

SUMMARY:

Adds tree-shaking support for apps using Octuple. Core changes:

1. Add explicit sideEffects to package.json for CJS tree shaking.
2. Switch from Webpack to Rollup to support exporting ESM.

For the Webpack -> Rollup change, it may be possible to export ESM from webpack, but most sources I found said exporting ESM from webpack was not supported. Additionally, after examining quite a number of specifically react component libraries, it seemed like Rollup was the most common tool for this job.

Testing on Eightfold for the careerHub entry point only yielded a -20.9% decrease in the bundle size for the octuple chunk compared to v2.51.1

Here is the bundle analysis diff in Blindfold.ai after following the steps outlined in the Test Plan

Before

After

GITHUB ISSUE (Open Source Contributors)

NA

JIRA TASK (Eightfold Employees Only):

ENG-55139

CHANGE TYPE:

• Bugfix Pull Request
• Feature Pull Request

TEST COVERAGE:

• Tests for this change already exist
• I have added unittests for this change

TEST PLAN:

This test plan relies on running Blindfold locally, but can be done in isolation if desired

1. Clone the https://github.com/EightfoldAI/blindfold repo locally
2. In the root of the repo, add the following .env file. (If you have one already, just add ANALYZE_BUNDLES=1

ANALYZE_BUNDLES=1
BACKEND_BASE_URL="https://app.eightfold.ai"
NEXT_PUBLIC_HOST_URL="https://localhost:8000"
NEXTAUTH_URL="https://localhost:8000"

2. Run git checkout gclark/octuple-bundle-test to pull these changes.
3. Install deps with pnpm install. (Run npm install -g pnpm if you do not have pnpm installed)
4. Run pnpm build --filter nextjs to build the Blindfold app.
5. Once complete open the file located in apps/nextjs/.next/analyze/client.html in your web browser.
   • The bundle analysis does not show the entire octuple.js bundle present.
6. Run pnpm start --filter nextjs and go to http://localhost:8000/octuple
   • Verify the Octuple primary button is present on the page and styled correctly.
7. Remove the patch with pnpm patch-remove @eightfold.ai/octuple
8. Run pnpm build --filter nextjs again.
9. Once complete open the file located in apps/nextjs/.next/analyze/client.html in your web browser.
   • The bundle analysis does show the entire octuple.js bundle present.

[dkilgore-eightfold]

Need to bump node in .codesanbox dir

[dkilgore-eightfold]

@gclark-eightfold You may be correct:

webpack/webpack#2933

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.70%. Comparing base (45e0c60) to head (3730bf5).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #829   +/-   ##
=======================================
  Coverage   84.69%   84.70%           
=======================================
  Files        1098     1098           
  Lines       20417    20417           
  Branches     7718     7718           
=======================================
+ Hits        17293    17294    +1     
+ Misses       3040     3039    -1     
  Partials       84       84           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[dkilgore-eightfold]

Also removed this line and its import to fix the circular dep issue accross bundles:

https://github.com/EightfoldAI/octuple/blob/main/src/shared/utilities/flexGapSupported.ts#L7