Change to preconstruct to build

[alexanderchan]

As mentioned by @jxnblk in #668 (comment) there were some points related to TS and microbundle. This PR is just to show the changes that could be done to adopt preconstruct.tools that used by emotion that could be considered as an alternative build system.

On my machine it drops the library build time from about 60s to 10s (cached after the initial warm build) using yarn prepare

It has a few other benefits in addition to the speed of the build:

• if yarn run preconstruct dev is run, the dev experience imho is improved in that dependent modules dist files link to the live version of the src files so that one doesn't need to wait for a re-build. Also, direct navigation to the original src file is possible from the other package
• typescript config defaults to the top level tsconfig with no additional setup but can still be overridden, similarly babel defaults to the top level babel.config.js. Sub packages don't require having any build specific configuration

the preconstruct docs do a good job of highlighting more of their why.

Note that I left the development setup as yarn dev:init rather than setting up "postinstall": "preconstruct dev" but that's something to consider adding if we want to go forward with this type of change.

We could also remove the prepare in favour of a postinstall script since we don't technically need to build every time we install, saving us another 10s when we install.

[alexanderchan]

closing but hopefully gives some ideas on an alternative build to microbundle

[hasparus]

Thanks for the PR, @alexanderchan!

I'm reopening this. Lerna is a bit of a pain right now, and migration towards Preconstruct and Changesets seems like a great idea. Contributing to Emotion is way more enjoyable than contributing to Theme UI right now.

@atanasster @lachlanjc could skim over this PR and tell me what you think?

[alexanderchan]

@hasparus you're welcome! We've been enjoying using theme-ui and preconstruct for our builds (and not needing a watch step for dev) for our component library based on theme-ui so hopefully it works out here for you guys.

Thanks for mentioning changesets, I'll definitely have to look into that too. Let me know if there's anything else I can help with.

We'll probably need some help to resolve type issues from the typecheck. They appear to be valid and I'm not sure if we want to relax the types to be strict: false, but that will help with some of the errors.

[hasparus]

We'll probably need some help to resolve type issues from the typecheck. They appear to be valid and I'm not sure if we want to relax the types to be strict: false, but that will help with some of the errors.

Oh, typecheck errors are actually something I don't suck at :D I'm gonna take a look.

[pkieltyka]

hey all, just FYI preconstruct v2 is out which irons out a few kinks from v1, the updates will be very minor to your PR here, but thought I'd mention it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/cjlkp9ktq
✅ Preview: https://theme-ui-git-add-preconstruct.systemui.vercel.app