Build website based on the published code #706
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Build successful! 🎉 |
devongovett
commented
Jul 8, 2020
| import docs from 'docs:@react-aria/overlays'; | ||
| import {HeaderInfo, PropTable} from '@react-spectrum/docs'; | ||
| import packageData from '../package.json'; | ||
| import packageData from '@react-aria/overlays/package.json'; |
Member
Author
There was a problem hiding this comment.
We need to make sure we always load the package.json this way from now on. When building for production, the code and docs aren't in the same file structure so relative paths won't work.
devongovett
commented
Jul 8, 2020
| resolutions: packageJSON.resolutions, | ||
| browserslist: packageJSON.browserslist, | ||
| scripts: { | ||
| build: "PARCEL_WORKER_BACKEND=process parcel build 'docs/*/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx' --no-scope-hoist", |
Member
Author
There was a problem hiding this comment.
cc @mischnic had to turn off scope hoisting here. The ListBox page throws an error: Uncaught ReferenceError: $a5f3adf7483dfc2b62c1ecfb0311eae$export$Section is not defined. I didn't have a chance to look into it yet.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
dannify
approved these changes
Jul 10, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR has two parts: the new parcel build strategy, and building the website based on published code when deploying to the public site.
New Parcel build strategy
TL;DR it outputs smaller JS and CSS with less duplication. e.g. the Breadcrumbs page loaded 3 CSS files amounting to ~40kB before, and now loads a single CSS file that's only 30kB. 🎉
Previously, we used a custom parcel packager plugin to do the static rendering of react components during the build. This required the MDX transformer to do some hacks using inline bundles to create a fake HTML file with some inline JS that was later transformed into the final HTML by the packager. Now it's possible to change the type of file in an Optimizer plugin, so this allows the JS to go through the pipeline as normal, and get rendered to HTML as a final step. This is much simpler and less hacky.
In addition, we now keep all JS and CSS referenced from the MDX file (both in the server and client bundles) in the same bundle group, which allows Parcel to deduplicate them. And Parcel also now optimizes for HTTP/2, so more code can be deduplicated into smaller bundles between pages, leading to better caching. Finally, we ensure that all CSS is minified properly. Some of it wasn't before because it came from the server JS bundle, which is unminified (since it'll be running ahead of time).
Building the website based on published code
The second part is a script that builds the website based on the published code from npm rather than the current code in the repo when deploying the public website (not on PRs). This required copying the necessary code to actually build the docs, along with the current MDX files from the repo into a temporary directory. Then, we install the current code from npm and generate the docs as normal. Finally, we copy the result back into the repo and deploy it.