Multi-build support (cjs, esm, esnext) for all quilt packages

[ismail-syed]

Description

This PR migrates quilts build system to SK-next (shopify/sewing-kit-next) to provide multiple build outputs (cjs, esm, esnext). Most of this PR is a revive of our previous exploration. The benefit of migrating our build system over to SK-next is because our tooling leverages esnext supported packages to provide treeshaking. In our previous exploration, we also consumed these changes into an app, where we noted significant bundle size decreases.

Why such a big PR? Over 300 file changes

We currently have 69 packages in quilt. Migrating only some and not all will be a very wonky dev experience. Please call me out on parts I can break out 😄 .

Summary of changes

• Migrate build setup to SK-next
  • A project root sewing-kit.config.ts that encompasses all the workspace level configs. Workspace refers to the whole monorepo, think of yarn workspaces.
  • A config/sewing-kit/index.ts which is used as an SK config that is consumed by all other package level SK-next configs.
  • A sewing-kit.config.ts file for each package
• Updates various configs as part of the migration (eslint, gitignore, eslintignore, tsconfigs, jest)

Overall CI times

Cache	Before	After
Cold	9m 12s	18m 15s
Warm	7m 47s	5m 46s

NOTE: Cold builds have regressed ~2x because the builds are generating over twice as many build files than they were previously.

Why do we need to do this anyways?

esnext builds provide better tree-shaking support for our quilt packages . 🎩 'd on shirnk-ray (https://github.com/Shopify/shrink-ray/pull/1718). As expected we're getting noticeable reductions in the vendor bundle size.

🎩

The team did a thorough 🎩 during #1538 so much of this is 👍.
I also 🎩 'd on shirnk-ray (https://github.com/Shopify/shrink-ray/pull/1718)

For reviews a simple yarn run build should suffice.

Type of change

• Patch: Bug (non-breaking change which fixes an issue)
• Minor: New feature (non-breaking change which adds functionality)
• Major: Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• I have not added CHANGELOG notes. I will do this in a separate PR as this is already really large. (See Update changelogs for multi-build support #1709)

[ismail-syed]

1. tophat is broken

This seems legit, still looking into this. I recall we had tophat related issues with sk-next built libraries. @gmcgibbon took at stab a fixing this with https://github.com/Shopify/sewing-kit-next/pull/98. I'll see if we can find a solution for quilt.

2. Creating new package cause unnecessary update to tsconfig.json

Fixed with fef0de7

3. Run into an error during linting

I wasn't able to reproduce this. Can you see if this works? git clean -fxd && yarn install && yarn run lint

[ismail-syed]

🎩 'd on shirnk-ray (https://github.com/Shopify/shrink-ray/pull/1718). As expected we're getting noticeable reductions in the vendor bundle size.

Update: Merged/Deployed to staging. All is good 👍

[ismail-syed]

@michenly yarn tophat is doesn't integrate well with sk-next's build command yet. It's quite tailored for a tsc build. The way I see it, we have 2 options:

1. Merge this PR and then address sk-next/yarn tophat.
2. Address sk-next/yarn tophat integrations first then merge this PR.

[michenly]

Tested 2 & 3 again and those seems to be resolved. tophat regression while annoying we can deal with that in a separate PR.

[marutypes]

Code looks good,

Bundle size changes look great, a bit worried about cold-cache build times but seems inescapable given multi-format builds...

[ryanwilsonperkin]

Hey! 👋🏻 I believe this PR broke @shopify/react-form. I have an issue written up here: #1715