Client-side hot reloading / HMR #630

vmarta · 2022-05-25T18:01:28Z

Description

This PR adds a new feature to the runtime SDK, the one that all front-end developers love and are used to using it for granted nowadays, which is CLIENT SIDE HOT RELOADING!

With client side hot reloading, developers can save their changes in code editor and see the changes reflected on the browser immediately, without refreshing the web page.

See it in action:

Screen.Recording.2022-05-25.at.5.00.33.PM.mov

Related PR #379

TODO:

file 3pp request

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

installed dependencies: @pmmmwh/react-refresh-webpack-plugin and react-refresh
add webpack plugin to the webpack configuration
update dev server to serve modules by using webpack hot middleware

How to Test-Drive This PR

npm start in typescript template or retail react app
see changes reflected on browser without refreshing
refresh the browser and verify that there is no error in the console ← meaning that both client and server bundles are in sync, and that the server-side hot reloading from before still works

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

packages/pwa-kit-dev/package.json

packages/pwa-kit-react-sdk/src/ssr/universal/utils.js

…Cloud/pwa-kit into hot-reloading

This would fix the CI tests too.

packages/pwa-kit-dev/src/configs/webpack/config.js

* add /__mrt/hmr and remove publicPath * update loadable extractor * remove debuggers * remove getPublicPath * fix src path * update /__mrt/hmr endpoint * use 501 for disabled endpoint

kevinxh · 2022-05-27T20:11:22Z

packages/pwa-kit-dev/src/configs/webpack/config.js

+
+    const rules = [
+        ruleForBabelLoader([require.resolve('react-refresh/babel')]),
+        ...config.module.rules.slice(1)


this seems fragile... can we give the loader rules an id and replace by id?

@kevinxh I've tried adding an id and it failed because not matching the expected config schema. That's why I end up with this instead.

This feels like the Builder class lacks some basic functionalities. We need to be able to manipulate the config in a safer manner. Imagine we have many extend function calls and each of them adds/removes different rules, it's gonna be hard to maintain the webpack config.

kevinxh · 2022-05-27T21:26:22Z

packages/template-retail-react-app/package.json

@@ -71,6 +71,7 @@
        "save-credentials": "pwa-kit-dev save-credentials",
        "start": "cross-env NODE_ICU_DATA=node_modules/full-icu pwa-kit-dev start",
        "start:inspect": "npm run start -- --inspect",
+        "start:no-hmr": "npm run start -- --noHMR",


I'm not sure if we want to have this as an project OOTB npm script. because if this feature works well, i'd imagine developers should never turn if off, or on a very very very rare case.

Disabling-hmr is still available in the CLI.

kevinxh · 2022-05-27T22:40:52Z

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -206,6 +209,7 @@ const withChunking = (config) => {

 const ruleForBabelLoader = (babelPlugins) => {
    return {
+        id: 'javascript',


javascript is the target language for this rule but I feel more natural to call this the babel-loader, I feel like babel-loader kinda implies it is js/ts and it is also a little bit more descriptive?

kevinxh · 2022-05-27T22:43:40Z

packages/pwa-kit-dev/src/configs/webpack/config.js

-        ...config.module.rules.slice(1)
-    ]
+    const newRule = ruleForBabelLoader([require.resolve('react-refresh/babel')])
+    const rules = findAndReplace(config.module.rules, (rule) => rule.id === 'javascript', newRule)


We discussed that in the future, we might expose functionality for end users to customize specific rules. Maybe via the Builder class. However, that's out side of scope for this PR.

kevinxh

Very excited to ship this feature!

kevinxh

don't forget to update changelog :)

vmarta added 6 commits May 19, 2022 12:49

Add the required npm modules

3ca80ca

Set up a working hmr

e561467

Merge branch 'develop' into hot-reloading

f839a20

Update package-lock.json

27c039e

Delete comments, todos

9b95213

Add a comment

9d0cefc

vmarta added the wip Work in process label May 25, 2022

No longer breaking the express template

87b87b1

kevinxh reviewed May 25, 2022

View reviewed changes

packages/pwa-kit-dev/package.json Show resolved Hide resolved

Some refactoring

be25694

kevinxh marked this pull request as ready for review May 25, 2022 23:53

kevinxh requested a review from a team as a code owner May 25, 2022 23:53

kevinxh added ready for review PR is ready to be reviewed and removed wip Work in process labels May 25, 2022

kevinxh reviewed May 26, 2022

View reviewed changes

packages/pwa-kit-react-sdk/src/ssr/universal/utils.js Outdated Show resolved Hide resolved

kevinxh and others added 4 commits May 25, 2022 17:40

attempt to fix test

0988489

Merge branch 'hot-reloading' of https://github.com/SalesforceCommerce…

429686f

…Cloud/pwa-kit into hot-reloading

revert previous change

26dd4c7

Only client now uses the hot-reload related plugins

6c9ff0c

This would fix the CI tests too.

kevinxh reviewed May 26, 2022

View reviewed changes

packages/pwa-kit-dev/src/configs/webpack/config.js Outdated Show resolved Hide resolved

Refactor to use the extend() method instead

ad8285e

kevinxh reviewed May 26, 2022

View reviewed changes

packages/pwa-kit-dev/src/configs/webpack/config.js Outdated Show resolved Hide resolved

Fix failing CI tests

22a9e33

kevinxh mentioned this pull request May 27, 2022

Loadable extractor fix for hot reloading #632

Merged

12 tasks

kevinxh and others added 2 commits May 27, 2022 12:57

Loadable extractor fix for hot reloading (#632)

ba99e9f

* add /__mrt/hmr and remove publicPath * update loadable extractor * remove debuggers * remove getPublicPath * fix src path * update /__mrt/hmr endpoint * use 501 for disabled endpoint

Additional folder to watch and build

8154083

kevinxh reviewed May 27, 2022

View reviewed changes

vmarta added 3 commits May 27, 2022 13:40

Able to turn off hmr

0d74030

Remove unnecessary line

204b05b

Add comments

a1819a1

Also check env variable before attaching the middleware

53d0f6c

kevinxh reviewed May 27, 2022

View reviewed changes

vmarta added 3 commits May 27, 2022 14:34

Remove npm scripts

a91da2b

Disabling-hmr is still available in the CLI.

More robust way to replace the babel-loader rule

1b24eaf

Merge branch 'develop' into hot-reloading

5dfe903

kevinxh reviewed May 27, 2022

View reviewed changes

kevinxh approved these changes May 27, 2022

View reviewed changes

kevinxh reviewed May 27, 2022

View reviewed changes

vmarta added 2 commits May 27, 2022 15:56

Rename id to be clearer

3e308cc

Update CHANGELOG.md

7ea58fa

vmarta merged commit 0974a89 into develop May 27, 2022

vmarta deleted the hot-reloading branch May 27, 2022 23:14

kevinxh mentioned this pull request Jul 5, 2022

Release v2.1.0 #655

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Client-side hot reloading / HMR #630

Client-side hot reloading / HMR #630

vmarta commented May 25, 2022 •

edited

Loading

kevinxh May 27, 2022

vmarta May 27, 2022

kevinxh May 27, 2022 •

edited

Loading

kevinxh May 27, 2022

kevinxh May 27, 2022

kevinxh May 27, 2022

kevinxh left a comment

kevinxh left a comment

Client-side hot reloading / HMR #630

Client-side hot reloading / HMR #630

Conversation

vmarta commented May 25, 2022 • edited Loading

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

kevinxh May 27, 2022

Choose a reason for hiding this comment

vmarta May 27, 2022

Choose a reason for hiding this comment

kevinxh May 27, 2022 • edited Loading

Choose a reason for hiding this comment

kevinxh May 27, 2022

Choose a reason for hiding this comment

kevinxh May 27, 2022

Choose a reason for hiding this comment

kevinxh May 27, 2022

Choose a reason for hiding this comment

kevinxh left a comment

Choose a reason for hiding this comment

kevinxh left a comment

Choose a reason for hiding this comment

vmarta commented May 25, 2022 •

edited

Loading

kevinxh May 27, 2022 •

edited

Loading