Merge #1926

1926: Misc fixes for msw r=ZauberNerd a=ZauberNerd

<details>
<summary>Bors merge bot cheat sheet</summary>

We are using [bors-ng](https://github.com/bors-ng/bors-ng) to automate merging of our pull requests. The following table provides a summary of commands that are available to reviewers (members of this repository with push access) and delegates (in case of `bors delegate+` or `bors delegate=[list]`).

| Syntax | Description |
| --- | --- |
| bors merge | Run the test suite and push to master if it passes. Short for "reviewed: looks good." |
| bors merge- | Cancel an r+, r=, merge, or merge= |
| bors try | Run the test suite without pushing to master. |
| bors try- | Cancel a try |
| bors delegate+ | Allow the pull request author to merge their changes. |
| bors delegate=[list] | Allow the listed users to r+ this pull request's changes. |
| bors retry | Run the previous command a second time. |

This is a short collection of opinionated commands. For a full list of the commands read the [bors reference](https://bors.tech/documentation/).

</details>


Co-authored-by: ZauberNerd <[email protected]>

packages/msw/index.d.ts

@@ -1,6 +1,6 @@
 import { graphql as mswGraphQL, rest as mswRest } from 'msw';
 
-declare module 'hops-msw/unit' {
+declare module 'hops-msw' {
   export const rest: typeof mswRest;
   export const graphql: typeof mswGraphQL;
 }

packages/msw/mixin.browser.js

@@ -1,6 +1,9 @@
 /* eslint-env browser */
 
 import { Mixin } from 'hops-mixin';
+import createDebug from 'hops-debug';
+
+const debug = createDebug('hops:msw:browser');
 
 const createBrowserMock = (
   { graphql, rest },
@@ -37,6 +40,13 @@ class MswMixin extends Mixin {
       return;
     }
 
+    if (!('serviceWorker' in navigator)) {
+      debug('This browser does not support service workers.');
+      return;
+    }
+
+    debug('wait until browser mocks are registered:', mswWaitForBrowserMocks);
+
     // eslint-disable-next-line node/no-unsupported-features/es-syntax
     const { setupWorker, graphql, rest } = await import('msw');
     const worker = setupWorker();
@@ -72,7 +82,7 @@ class MswMixin extends Mixin {
     return new Promise((resolve) => {
       window.hopsMswMocksReady = () => resolve();
 
-      if (!mswWaitForBrowserMocks) {
+      if (!mswWaitForBrowserMocks || window.hopsMswMocksRegistered) {
         window.hopsMswMocksReady();
       }
     });

packages/msw/mixin.core.js

@@ -1,4 +1,5 @@
 const { Mixin } = require('hops-mixin');
+const debug = require('hops-debug')('hops:msw:core');
 
 function exists(path) {
   try {
@@ -32,6 +33,7 @@ const getMockServiceWorkerContent = () => {
 module.exports = class MswMixin extends Mixin {
   configureBuild(webpackConfig) {
     if (exists(this.config.mockServiceWorkerHandlersFile)) {
+      debug('handlers file exists - registering the webpack alias now');
       webpackConfig.resolve.alias['hops-msw/handlers'] = require.resolve(
         this.config.mockServiceWorkerHandlersFile
       );
@@ -46,11 +48,13 @@ module.exports = class MswMixin extends Mixin {
     const { graphql, rest } = require('msw');
     const { setupServer } = require('msw/node');
     const { json: bodyParserJson } = require('body-parser');
+    const cookieParser = require('cookie-parser');
 
     let mockServiceWorker;
     const mockServer = setupServer();
 
     if (exists(this.config.mockServiceWorkerHandlersFile)) {
+      debug('handlers file exists - registering the server handlers now');
       const { handlers } = require(this.config.mockServiceWorkerHandlersFile);
 
       handlers.forEach((handler) => mockServer.use(handler));
@@ -59,6 +63,8 @@ module.exports = class MswMixin extends Mixin {
     mockServer.listen();
     process.on('SIGTERM', () => mockServer.close());
 
+    middlewares.parse.push(cookieParser());
+
     middlewares.files.push({
       path: this.config.mockServiceWorkerUri,
       handler: (_, res) => {
@@ -79,9 +85,9 @@ module.exports = class MswMixin extends Mixin {
         (req, res) => {
           const { mocks } = req.body;
 
-          // setting this on `app.locals`, because it is a "global" and
-          // affects all following requests
-          app.locals.mswWaitForBrowserMocks = true;
+          debug('/_msw/register called with:', mocks);
+
+          res.cookie('mswWaitForBrowserMocks', 'true');
 
           mocks.forEach(({ type, method, identifier, data }) => {
             switch (type) {
@@ -128,9 +134,11 @@ module.exports = class MswMixin extends Mixin {
       method: 'get',
       path: '/_msw/reset',
       handler: (_, res) => {
+        debug('/_msw/reset called');
+
         mockServer.resetHandlers();
 
-        app.locals.mswWaitForBrowserMocks = false;
+        res.clearCookie('mswWaitForBrowserMocks');
 
         res.type('text/plain').end('ok');
       },

packages/msw/mixin.server.js

@@ -1,13 +1,18 @@
 /* eslint-env browser, node */
 
 import { Mixin } from 'hops-mixin';
+import createDebug from 'hops-debug';
+
+const debug = createDebug('hops:msw:server');
 
 class MswMixin extends Mixin {
-  enhanceServerData(serverData, req, res) {
-    // this value has been set on `app.locals`, because it is a "global"
-    // value that should affect all following requests after it has been
-    // set.
-    const { mswWaitForBrowserMocks = false } = res.app.locals;
+  enhanceServerData(serverData, req) {
+    debug(
+      'cookie "mswWaitForBrowserMocks":',
+      req.cookies.mswWaitForBrowserMocks
+    );
+
+    const { mswWaitForBrowserMocks = false } = req.cookies;
 
     return {
       ...serverData,

packages/msw/package.json

@@ -23,8 +23,10 @@
   },
   "dependencies": {
     "body-parser": "^1.19.0",
+    "cookie-parser": "^1.4.4",
     "cross-fetch": "^3.1.4",
     "execa": "^5.1.1",
+    "hops-debug": "15.0.0-nightly.10",
     "hops-mixin": "15.0.0-nightly.10",
     "msw": "^0.33.0"
   },