Skip to content

Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML#12381

Merged
ockham merged 1 commit intomasterfrom
update/simplify-jetpack-build-system-take-two
May 15, 2019
Merged

Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML#12381
ockham merged 1 commit intomasterfrom
update/simplify-jetpack-build-system-take-two

Conversation

@ockham
Copy link
Copy Markdown
Contributor

@ockham ockham commented May 15, 2019 •
edited
Loading

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 uses static.jsx to produce minimal static markup (HTML) versions of the dashboard (really just "Turn on your JavaScript" notices). It require()s the webpack-bundled version of static.jsx to that end, and attaches renderToStaticMarkup()-produced strings to window, which it then writes to HTML files.

Getting rid of the complexity added by passing information by attaching to window (and thus requiring jsdom etc) is the main objective of this PR. This is achieved by using StaticSiteGeneratorPlugin, which is meant for this kind of thing. In a subsequent PR, I hope to get rid of tools/builder/react.js pretty much entirely. This will make it much easier to base the build system for Jetpack's React Dashboard on calypso-build (see #12072).

Testing instructions:

yarn distclean && yarn
yarn build-client
yarn docker:up
  • Verify that the React Dashboard still works (wp-admin/admin.php?page=jetpack#/settings)
  • Navigate to /wp-admin/admin.php?page=jetpack_modules
  • Disable JavaScript
  • See this message?

image

Proposed changelog entry for your changes:

Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML

@ockham ockham requested a review from a team May 15, 2019 13:25
@ockham ockham self-assigned this May 15, 2019
@matticbot
Copy link
Copy Markdown
Contributor

matticbot commented May 15, 2019

Caution: This PR has changes that must be merged to WordPress.com
Hello ockham! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D28237-code before merging this PR. Thank you!

@jetpackbot
Copy link
Copy Markdown
Collaborator

jetpackbot commented May 15, 2019

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: June 4, 2019.
Scheduled code freeze: May 28, 2019

Generated by 🚫 dangerJS against 2722d86

@ockham ockham mentioned this pull request May 15, 2019
Closed
@ockham ockham added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels May 15, 2019
@ockham ockham requested a review from a team May 15, 2019 13:33
jeherve
jeherve approved these changes May 15, 2019
View reviewed changes
Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to work well in my tests. I'd love it if @zinigor, who I believe worked on that part of the dashboard in the past, could take a look at it as well. :)

cc @zinigor If you have some free cycles.

@ockham ockham mentioned this pull request May 15, 2019
Merged
zinigor
zinigor approved these changes May 15, 2019
View reviewed changes
Copy link
Copy Markdown
Contributor

@zinigor zinigor left a comment •
edited
Loading

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.

simison
simison reviewed May 15, 2019
View reviewed changes
@ockham
Copy link
Copy Markdown
Contributor Author

ockham commented May 15, 2019

Thanks @jeherve and @zinigor for reviewing! ❤️

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.

Answered here:

Hehe, I was also hoping to get rid of it 😄 Unfortunately, we're still using jsdom-global in our tests, which in turn depends on jsdom. So I'm afraid we need to keep it for a little longer 😅

@ockham ockham merged commit 029180d into master May 15, 2019
@ockham ockham deleted the update/simplify-jetpack-build-system-take-two branch May 15, 2019 20:00
@matticbot matticbot removed the [Status] Needs Review This PR is ready for review. label May 15, 2019
@ockham ockham mentioned this pull request May 15, 2019
Merged
@jeherve jeherve added Admin Page React-powered dashboard under the Jetpack menu and removed [Status] Needs Changelog labels May 15, 2019
@kraftbj kraftbj added this to the 7.4 milestone May 16, 2019
@ockham ockham mentioned this pull request Jul 17, 2019
Merged
3 tasks
ockham added a commit that referenced this pull request Aug 2, 2019
@ockham
Build: Server-side Render UpgradeNudge for use in PHP (#13070)
508024e 
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@simison simison simison left review comments

@jeherve jeherve jeherve approved these changes

+1 more reviewer

@zinigor zinigor zinigor approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@ockham ockham

Labels

Admin Page React-powered dashboard under the Jetpack menu Build Touches WP.com Files

Projects

None yet

Milestone

7.4

Development

Successfully merging this pull request may close these issues.

7 participants

@ockham @matticbot @jetpackbot @simison @zinigor @jeherve @kraftbj