Build: Simplify Dashboard Build Toolchain by ockham · Pull Request #12127 · Automattic/jetpack

ockham · 2019-04-23T13:00:56Z

WIP. Prep work for #12072.

One core thing I've identified is that 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.

Maybe we can instead produce those HTML files as by-products of the bundling, i.e. through a Webpack plugin or loader? https://github.com/GoogleChromeLabs/prerender-loader#string-prerendering looks very promising!

Alternatively, we shouldn't bundle but just transpile static.jsx so we can simply require() it from tools/builder/react.js.

Changes proposed in this Pull Request:

Don't use window/jsdom in build system.

Testing instructions:

yarn distclean && yarn
yarn build-client
yarn docker:up

Navigate to /wp-admin/admin.php?page=jetpack_modules
Disable JavaScript
See this message?

Proposed changelog entry for your changes:

Build: Simplify Dashboard Build Toolchain

jetpackbot · 2019-04-23T13:03:30Z

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 a251422

matticbot · 2019-04-23T14:06:36Z

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 D27270-code before merging this PR. Thank you!

matticbot · 2019-04-23T14:13:57Z

ockham, Your synced wpcom patch D27270-code has been updated.

matticbot · 2019-04-23T14:19:53Z

ockham, Your synced wpcom patch D27270-code has been updated.

ockham · 2019-04-23T14:22:57Z

-};
+export const setInitialState = () => ( {
+	type: JETPACK_SET_INITIAL_STATE,
+	initialState: window.Initial_State,


We should probably parametrize the action for initialState to put the burden of instantiating it with window.Initial_State on the consumer.

ockham · 2019-04-23T14:23:35Z

+				<StaticMain />
+			</Provider>
+		</div>
+	);


See https://github.com/GoogleChromeLabs/prerender-loader#string-prerendering

ockham · 2019-04-23T14:24:06Z

 );

-window.versionNotice = Server.renderToStaticMarkup(
+window.versionNotice = renderToStaticMarkup(


Will probably need to move noscriptNotice and versionNotice to separate files,

matticbot · 2019-04-24T06:51:44Z

ockham, Your synced wpcom patch D27270-code has been updated.

matticbot · 2019-04-25T08:29:09Z

ockham, Your synced wpcom patch D27270-code has been updated.

simison · 2019-04-26T16:01:17Z

Prolly just onBuild.bind( this, done ) would work here but good also as-is.

matticbot · 2019-04-26T16:02:23Z

ockham, Your synced wpcom patch D27270-code has been updated.

simison · 2019-04-26T16:02:43Z

Rebased

matticbot · 2019-05-14T19:53:45Z

ockham, Your synced wpcom patch D27270-code has been updated.

matticbot · 2019-05-14T23:22:03Z

ockham, Your synced wpcom patch D27270-code has been updated.

This was solely meant to facilitate migration from Webpack v1 to v2. The debug option specifically was dropped by Webpack 3. https://webpack.js.org/plugins/loader-options-plugin/

ockham · 2019-05-15T13:32:08Z

Closing in favor of #12381.

ockham added [Status] In Progress Build labels Apr 23, 2019

ockham requested a review from a team April 23, 2019 13:00

ockham self-assigned this Apr 23, 2019

matticbot added the Touches WP.com Files label Apr 23, 2019

ockham commented Apr 23, 2019

View reviewed changes

ockham force-pushed the update/simplify-jetpack-build-system branch from 54de292 to 3aa10e9 Compare April 24, 2019 07:22

simison reviewed Apr 26, 2019

View reviewed changes

simison force-pushed the update/simplify-jetpack-build-system branch from 73cff5d to f269d39 Compare April 26, 2019 16:02

ockham added 11 commits May 14, 2019 21:50

Static.jsx: Named import

22d9ff6

Simplify mapDispatchToProps

e398170

Doesn't need to be an async action

92cd73e

Add prerender-loader devDep

b84f176

Add HtmlWebpackPlugin devDep

e07b997

First try

488eec4

Have setInitialState accept an initialState arg

18e97d9

StaticMain: Set initialState based on const rather than window global

67d6a7e

Don't set individual reducers' initialState based on window global

2d0a08e

Use constructor() instead of UNSAFE_componentWillMount()

4fec464

Separate templates

55eb3aa

ockham added 3 commits May 14, 2019 21:52

React Builder: Remove buildStatic task

01edc9c

Kinda works

0f0fce0

Simplify onBuild

3a2ec1b

ockham force-pushed the update/simplify-jetpack-build-system branch from f269d39 to 3a2ec1b Compare May 14, 2019 19:53

ockham added 7 commits May 15, 2019 00:15

Try StaticSiteGeneratorPlugin based approach

f13d9b4

State: Guard 2 Selectors in get()s

1ad7143

Analytics: Check if window exists

9042be4

Actually render static.jsx

267f28b

Consolidate

c62bf35

Remove now-obsolete dependencies

d459950

TEMP: Comment out WordPressExternalDependenciesPlugin

4f9397e

Remove obsolete settings

3a035a0

simison mentioned this pull request May 15, 2019

calypsoify: use css vars from calypso-color-schemes #12359

Closed

ockham added 2 commits May 15, 2019 13:48

Tools: Remove webpack.LoaderOptionsPlugin

e396b3c

This was solely meant to facilitate migration from Webpack v1 to v2. The debug option specifically was dropped by Webpack 3. https://webpack.js.org/plugins/loader-options-plugin/

Separate Webpack configs

ef045b8

ockham force-pushed the update/simplify-jetpack-build-system branch from 2a806f7 to ef045b8 Compare May 15, 2019 12:27

More safeguards

a251422

ockham mentioned this pull request May 15, 2019

Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML #12381

Merged

ockham closed this May 15, 2019

ockham deleted the update/simplify-jetpack-build-system branch May 15, 2019 13:32

kraftbj removed the [Status] In Progress label Oct 8, 2021

Conversation

ockham commented Apr 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Testing instructions:

Proposed changelog entry for your changes:

Uh oh!

jetpackbot commented Apr 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Apr 23, 2019

Uh oh!

matticbot commented Apr 23, 2019

Uh oh!

matticbot commented Apr 23, 2019

Uh oh!

ockham Apr 23, 2019

Choose a reason for hiding this comment

Uh oh!

ockham Apr 23, 2019

Choose a reason for hiding this comment

Uh oh!

ockham Apr 23, 2019

Choose a reason for hiding this comment

Uh oh!

matticbot commented Apr 24, 2019

Uh oh!

matticbot commented Apr 25, 2019

Uh oh!

simison Apr 26, 2019

Choose a reason for hiding this comment

Uh oh!

ockham May 14, 2019

Choose a reason for hiding this comment

Uh oh!

matticbot commented Apr 26, 2019

Uh oh!

simison commented Apr 26, 2019

Uh oh!

matticbot commented May 14, 2019

Uh oh!

matticbot commented May 14, 2019

Uh oh!

ockham commented May 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ockham commented Apr 23, 2019 •

edited

Loading

jetpackbot commented Apr 23, 2019 •

edited

Loading