-
Notifications
You must be signed in to change notification settings - Fork 798
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML #12381
Conversation
Caution: This PR has changes that must be merged to WordPress.com |
Thank you for the great PR description! When this PR is ready for review, please apply the Scheduled Jetpack release: June 4, 2019. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks amazing, works well, thank you! Only one thing: can we remove jsdom entirely, or should we go on like this? If we can, feel free to merge this.
Thanks @jeherve and @zinigor for reviewing! ❤️
Answered here:
|
This commit adds infrastructure to server-side render individual React components during build so they can be used in PHP. The idea is that props can be passed to the component using a simplistic templating language on the server side. The benefit is that we'll be able to re-use markup and styling and don't have to duplicate code in PHP. This is inspired by [prior art in `static.jsx`](https://github.com/Automattic/jetpack/blob/f25e25705c67146317c1cb7334856352bd47b44b/webpack.config.js#L43-L76) -- see e.g.#12381 -- but hopes to apply the same principle in a cleaner, more granular way (component level). It also adds functionality to fetch plans data from the relevant WP.com endpoint.
Closes #12127 (this is a simpler version of that PR). Prep work for #12072.
Big props @sirreal who pointed me to the right Webpack plugin for the job 👍
Changes proposed in this Pull Request:
tools/builder/react.js
usesstatic.jsx
to produce minimal static markup (HTML) versions of the dashboard (really just "Turn on your JavaScript" notices). Itrequire()
s the webpack-bundled version ofstatic.jsx
to that end, and attachesrenderToStaticMarkup()
-produced strings towindow
, which it then writes to HTML files.Getting rid of the complexity added by passing information by attaching to
window
(and thus requiringjsdom
etc) is the main objective of this PR. This is achieved by usingStaticSiteGeneratorPlugin
, which is meant for this kind of thing. In a subsequent PR, I hope to get rid oftools/builder/react.js
pretty much entirely. This will make it much easier to base the build system for Jetpack's React Dashboard oncalypso-build
(see #12072).Testing instructions:
wp-admin/admin.php?page=jetpack#/settings
)/wp-admin/admin.php?page=jetpack_modules
Proposed changelog entry for your changes:
Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML