Move WebPreview to calypso-ui package

[joshuatf]

Changes proposed in this Pull Request

• Moves the WebPreview component and necessary dependencies to the calypso-ui package.
• Refactors the WebPreview component and separates device logic.
• Moves the AsyncLoad component to calypso-ui.
• Moves the SpinnerLine component to calypso-ui.

Thoughts

• There's one test still failing for translation. Not sure if this has something to do with the default translate prop added here or another error. Any feedback here appreciated!
• In order to keep the scope down on this PR, I chose to separate out the toolbar from the WebPreview component. While some of this logic could benefit from being shared across projects, there are many dependencies tied up in Calypso.
• Similarly, the touch-detect hasTouch() method was manually copied over to avoid creating a new calypso-lib package.
• Devices and logic around the SEO panel were separated from the main component since these will probably vary widely from project to project.

Testing instructions

• Visit all the areas around the site that use the WebPreview component and make sure they continue to work as expected with correct buttons/content appearing based on props.
• Make sure that toggling the device in the toolbar continues to work as expected (especially when toggling between custom preview content types like seo).
• Make sure that the SpinnerLine continues to work across the site.
• Make sure the inline help popover does not lose focus if open before loading a new URL in the iframe.
• Optionally: npm link the calypso-ui package, bump the version, and test that you can import the WebPreview component in another project.

Fixes #34295

[matticbot]

Test live: https://calypso.live/?branch=add/34295-calypso-ui-webpreview

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~1854 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest     -13558 B  (-8.3%)    -1854 B  (-6.2%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~97568 bytes added 📈 [gzipped])

name                   parsed_size            gzip_size
entry-main               +414839 B  (+25.5%)   +97429 B  (+24.0%)
entry-domains-landing      +1294 B   (+0.2%)     +139 B   (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~363261 bytes removed 📉 [gzipped])

name                   parsed_size            gzip_size
reader                   -252329 B  (-64.6%)   -64464 B  (-64.6%)
help                      -66771 B   (-7.4%)   -14663 B  (-10.6%)
post-editor               -61811 B   (-2.8%)   -13284 B   (-2.6%)
comments                  -61312 B   (-7.0%)   -19451 B  (-15.5%)
woocommerce               -55596 B   (-2.6%)   -18025 B   (-3.2%)
stats                     -51476 B   (-4.8%)   -13816 B   (-7.5%)
posts-pages               -43309 B  (-13.9%)   -11953 B  (-15.0%)
posts-custom              -43014 B  (-15.7%)   -11854 B  (-16.9%)
gutenberg-editor          -42051 B   (-6.4%)   -10646 B   (-5.9%)
purchases                 -39200 B   (-4.5%)   -10100 B   (-4.9%)
marketing                 -37850 B   (-5.2%)    -9005 B   (-4.9%)
checkout                  -36530 B   (-4.3%)    -9579 B   (-4.7%)
settings-writing          -36334 B   (-4.4%)    -9206 B   (-7.7%)
media                     -36195 B   (-9.8%)    -9204 B   (-9.6%)
plans                     -35463 B   (-6.9%)    -9200 B   (-7.1%)
domains                   -35268 B   (-4.0%)    -8458 B   (-4.2%)
email                     -31611 B   (-9.5%)    -8042 B   (-9.4%)
wp-super-cache            -28249 B  (-12.8%)    -7894 B  (-14.2%)
security                  -27997 B   (-6.9%)    -7134 B   (-7.1%)
earn                      -24325 B  (-10.2%)    -6199 B  (-10.4%)
settings                  -23135 B   (-2.5%)    -5414 B   (-3.6%)
people                    -22692 B   (-6.5%)    -5406 B   (-6.2%)
activity                  -20723 B   (-2.7%)    -5219 B   (-4.9%)
theme                     -20251 B   (-6.8%)    -4689 B   (-6.1%)
plugins                   -19434 B   (-3.8%)    -4485 B   (-3.5%)
settings-security         -17400 B   (-8.1%)    -3753 B   (-6.9%)
account                   -17221 B   (-5.3%)    -4630 B   (-5.6%)
happychat                 -17200 B   (-6.9%)    -5700 B   (-8.8%)
notification-settings     -16945 B   (-5.4%)    -3746 B   (-4.9%)
google-my-business        -15631 B   (-5.6%)    -4722 B   (-6.1%)
zoninator                 -15393 B   (-7.5%)    -3518 B   (-6.6%)
settings-discussion       -14651 B   (-8.6%)    -3296 B   (-7.7%)
settings-performance      -14041 B   (-7.2%)    -3346 B   (-6.5%)
jetpack-connect           -12329 B   (-2.3%)    -3606 B   (-2.6%)
themes                    -12278 B   (-3.3%)    -3053 B   (-3.1%)
site-blocks                -9543 B   (-3.9%)    -2312 B   (-3.7%)
export                     -8873 B   (-3.7%)    -2494 B   (-4.0%)
import                     -8833 B   (-4.3%)    -2293 B   (-4.3%)
account-close              -8815 B   (-2.6%)    -2193 B   (-2.5%)
privacy                    -6379 B   (-2.8%)    -1512 B   (-2.6%)
me                         -6379 B   (-2.9%)    -1510 B   (-2.7%)
customize                  -6137 B   (-2.8%)    -1558 B   (-2.6%)
feature-upsell             -5324 B   (-3.8%)    -1434 B   (-4.3%)
checklist                  -4907 B   (-4.3%)    -1514 B   (-4.9%)
concierge                  -4887 B   (-0.8%)    -1343 B   (-2.3%)
signup                     -4534 B   (-2.0%)    -1318 B   (-2.3%)
preview                    -3387 B   (-3.8%)    -1158 B   (-4.7%)
sites                      -3386 B   (-4.1%)    -1245 B   (-5.5%)
sensei                     -3386 B   (-4.0%)    -1205 B   (-5.2%)
hello-dolly                -3386 B   (-3.8%)    -1184 B   (-4.8%)
login                      -2734 B   (-2.5%)     -616 B   (-2.2%)
accept-invite              -2488 B   (-1.6%)     -572 B   (-1.4%)
jetpack-onboarding         -2279 B   (-4.3%)     -435 B   (-3.3%)
auth                       -1299 B   (-6.4%)     -284 B   (-4.9%)
account-recovery           -1291 B   (-3.3%)     -264 B   (-2.8%)
devdocs                     -437 B   (-0.3%)      -57 B   (-0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~259576 bytes removed 📉 [gzipped])

name                                                         parsed_size             gzip_size
async-load-components-web-preview-component                    -347827 B  (deleted)   -87172 B  (deleted)
async-load-design-blocks                                       -285700 B    (-9.7%)   -70102 B   (-11.5%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx     -60517 B   (-47.1%)   -14157 B   (-45.1%)
async-load-design                                               -58731 B    (-3.2%)   -15448 B    (-3.7%)
async-load-design-playground                                    -55051 B    (-3.3%)   -15174 B    (-3.9%)
async-load-blocks-inline-help                                   -48095 B   (-65.1%)   -10253 B   (-59.8%)
async-load-blocks-support-article-dialog-dialog                 -39711 B   (-80.2%)   -12339 B   (-80.2%)
async-load-post-editor-media-modal                              -22178 B    (-7.8%)    -5792 B    (-7.8%)
async-load-blocks-inline-help-popover                           -13679 B    (-2.1%)    -3117 B    (-4.0%)
async-load-my-sites-current-site-domain-warnings                -12106 B   (-21.4%)    -3750 B   (-26.0%)
async-load-components-happychat                                 -10821 B   (-38.3%)    -4017 B   (-44.7%)
async-load-quick-language-switcher                              -10015 B   (-34.2%)    -2141 B   (-28.3%)
async-load-signup-steps-clone-point                              -7401 B    (-1.4%)    -1766 B    (-4.2%)
async-load-signup-steps-theme-selection                          -5766 B   (-15.7%)    -1491 B   (-15.6%)
async-load-signup-steps-domains                                  -4587 B    (-2.2%)    -1114 B    (-2.2%)
async-load-layout-masterbar-drafts-popover                       -3008 B   (-36.9%)     -832 B   (-31.6%)
async-load-signup-steps-plans-atomic-store                       -2506 B    (-2.5%)     -704 B    (-2.6%)
async-load-signup-steps-plans                                    -2506 B    (-1.9%)     -699 B    (-2.0%)
async-load-my-sites-current-site-stale-cart-items-notice         -2447 B    (-2.5%)     -733 B    (-2.9%)
async-load-my-sites-current-site-notice                          -2447 B    (-2.1%)     -800 B    (-2.6%)
async-load-layout-guided-tours-component                         -2340 B    (-2.3%)     -489 B    (-2.3%)
async-load-signup-steps-user                                     -2279 B    (-2.8%)     -512 B    (-2.4%)
async-load-signup-steps-site                                     -2279 B    (-9.1%)     -414 B    (-6.7%)
async-load-signup-steps-rewind-form-creds                        -2279 B    (-5.1%)     -408 B    (-3.6%)
async-load-signup-steps-passwordless                             -2279 B    (-9.1%)     -425 B    (-7.0%)
async-load-signup-steps-clone-destination                        -2279 B   (-12.5%)     -458 B    (-9.3%)
async-load-signup-steps-clone-credentials                        -2279 B    (-5.6%)     -408 B    (-3.9%)
async-load-layout-guided-tours                                   -1833 B    (-4.8%)     -565 B    (-5.4%)
async-load-signup-steps-survey                                   -1761 B   (-10.2%)     -336 B    (-7.7%)
async-load-apps-notifications-index-jsx                          -1476 B    (-1.3%)     -345 B    (-1.0%)
async-load-signup-steps-import-url                               -1431 B    (-6.7%)     -315 B    (-5.1%)
async-load-signup-steps-site-topic                               -1329 B    (-4.7%)     -343 B    (-4.4%)
async-load-signup-steps-about                                    -1329 B    (-2.8%)     -282 B    (-2.2%)
async-load-reader-following-manage                               -1119 B    (-0.8%)     -293 B    (-0.8%)
async-load-signup-steps-site-title                               -1090 B    (-7.8%)     -239 B    (-6.3%)
async-load-signup-steps-rebrand-cities-welcome                   -1090 B    (-8.0%)     -162 B    (-4.6%)
async-load-my-sites-guided-transfer                              -1090 B    (-4.6%)     -176 B    (-3.1%)
async-load-blocks-login-social-connect-prompt                    -1087 B   (-22.2%)     -337 B   (-18.4%)
async-load-post-editor-editor-seo-accordion                      -1061 B   (-17.6%)     -358 B   (-18.0%)
async-load-post-editor-editor-sharing-accordion                  -1060 B    (-4.4%)     -344 B    (-5.7%)
async-load-post-editor-editor-location                           -1060 B   (-10.1%)     -310 B    (-9.7%)
async-load-docs-selectors                                         -608 B   (-10.3%)     -175 B    (-9.3%)
async-load-reader-search-stream                                   -411 B    (-0.4%)     -106 B    (-0.4%)
async-load-reader-tag-stream-main                                 -366 B    (-2.2%)      -90 B    (-1.8%)
async-load-reader-sidebar                                         -366 B    (-0.9%)      -85 B    (-0.9%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[justinshreve]

It looks like my changes fixed the command line tests, but we still have one failure in the desktop tests around image/svg handling.

https://circleci.com/gh/Automattic/wp-desktop/41728

I wonder if we need something like https://github.com/Automattic/wp-calypso/blob/master/packages/calypso-build/jest.config.js and/or https://github.com/Automattic/wp-calypso/blob/master/packages/calypso-build/webpack/file-loader.js for building the ui package?

[joshuatf]

It looks like the calypso-build should handle those file types. Not quite sure why this isn't working for desktop. Would appreciate input or guidance from anyone who better understands what's happening in the desktop build.

[jsnajdr]

Hi @joshuatf 👋 Thanks you for working on this component: it looks like a huge task 🙂

The reason why the Desktop build fails is that the Desktop Server imports the Themes section (which is server-side-rendered) which in turns imports the Web Preview component, and the SeoPreviewPane imported from there imports a PNG image as a webpack asset. In order for that to work server-side, webpack needs to be configured to ignore images and other non-JS assets. And it's not configured that way for Desktop Server build.

That would be an easy patch, but the error reveals a more serious issue: async loading of the WebPreview is broken for some reason and as the performance advisor comment says, this PR increases the size of the entrypoint chunk by 25%. And that's a lot.

Can you look into that issue? None of the Web Preview code should be loaded until some preview is actually displayed. However, the current components/web-preview component directly imports SeoPreviewPane and ./toolbar.

I think the best way to proceed is to start merging non-controversial parts of this big patch as separate PRs. For example, moving SpinnerLine to calypso-ui can be done independently. So can probably be done many of the refactorings.

This diff is really big, I see many weird and suspicious things when skimming through it, but I'm unable to do a comprehensive review of a patch of this size.

Some tips:

• calypso-ui components shouldn't use AsyncLoad. Code splitting decisions should be done in the app, not in a UI library
• AsyncLoad should be a separate package if you really need to extract it. It's a specialized tool, not a UI component. We'll eventually remove it completely in favor of a 3rd party library like loadable-components
• RootChild should be replaced by React.createPortal if possible. React didn't have a standardized solution yet when RootChild was created and we didn't migrate yet (see Modernize the RootChild component (try 2) #32899 for the WIP of the migration attempt and why it's not trivial)

[stale]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.