From fcb13eeda90406af323daa264471583bc55b3c3c Mon Sep 17 00:00:00 2001
From: Matt Sutkowski <msutkowski@gmail.com>
Date: Thu, 23 Sep 2021 15:09:29 -0700
Subject: [PATCH] chore: fix delay input, reorg exports, add utils, fix example
 (#4)

---
 example/constants.ts                        |   1 +
 example/index.tsx                           |   2 +
 example/mockServiceWorker.js                | 338 ++++++++++++++++++++
 example/mocks/browser.ts                    |   6 +-
 example/package.json                        |   6 +-
 example/yarn.lock                           |  80 ++++-
 src/{index.tsx => component/MSWToolbar.tsx} |  39 ++-
 src/{hooks.tsx => component/hooks.ts}       |   0
 src/{ => component}/styles.module.css       |   0
 src/helpers/index.ts                        |   1 +
 src/helpers/settings.ts                     |  33 ++
 src/index.ts                                |   5 +
 src/types.ts                                |   3 +
 src/utils.ts                                |   3 -
 src/utils/index.ts                          |  32 ++
 15 files changed, 521 insertions(+), 28 deletions(-)
 create mode 100644 example/constants.ts
 create mode 100644 example/mockServiceWorker.js
 rename src/{index.tsx => component/MSWToolbar.tsx} (85%)
 rename src/{hooks.tsx => component/hooks.ts} (100%)
 rename src/{ => component}/styles.module.css (100%)
 create mode 100644 src/helpers/index.ts
 create mode 100644 src/helpers/settings.ts
 create mode 100644 src/index.ts
 create mode 100644 src/types.ts
 delete mode 100644 src/utils.ts
 create mode 100644 src/utils/index.ts

diff --git a/example/constants.ts b/example/constants.ts
new file mode 100644
index 0000000..c7852db
--- /dev/null
+++ b/example/constants.ts
@@ -0,0 +1 @@
+export const APP_NAME = 'exampleApp';
diff --git a/example/index.tsx b/example/index.tsx
index eee1c2a..22c0d04 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { MSWToolbar } from '../.';
 import { Button, ChakraProvider, HStack } from '@chakra-ui/react';
 import type { SetupWorkerApi } from 'msw';
+import { APP_NAME } from './constants';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -32,6 +33,7 @@ const App = () => {
               <Button onClick={() => alert('Yadiddit')}>Another</Button>
             </HStack>
           }
+          prefix={APP_NAME}
         >
           <Button
             onClick={() =>
diff --git a/example/mockServiceWorker.js b/example/mockServiceWorker.js
new file mode 100644
index 0000000..8616766
--- /dev/null
+++ b/example/mockServiceWorker.js
@@ -0,0 +1,338 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (0.35.0).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = 'f0a916b13c8acc2b526a03a6d26df85f'
+const bypassHeaderName = 'x-msw-bypass'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  return self.skipWaiting()
+})
+
+self.addEventListener('activate', async function (event) {
+  return self.clients.claim()
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll()
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+// Resolve the "master" client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMasterClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll()
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMasterClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const clonedResponse = response.clone()
+      sendToClient(client, {
+        type: 'RESPONSE',
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: serializeHeaders(clonedResponse.headers),
+          redirected: clonedResponse.redirected,
+        },
+      })
+    })()
+  }
+
+  return response
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  const requestClone = request.clone()
+  const getOriginalResponse = () => fetch(requestClone)
+
+  // Bypass mocking when the request client is not active.
+  if (!client) {
+    return getOriginalResponse()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return await getOriginalResponse()
+  }
+
+  // Bypass requests with the explicit bypass header
+  if (requestClone.headers.get(bypassHeaderName) === 'true') {
+    const cleanRequestHeaders = serializeHeaders(requestClone.headers)
+
+    // Remove the bypass header to comply with the CORS preflight check.
+    delete cleanRequestHeaders[bypassHeaderName]
+
+    const originalRequest = new Request(requestClone, {
+      headers: new Headers(cleanRequestHeaders),
+    })
+
+    return fetch(originalRequest)
+  }
+
+  // Send the request to the client-side MSW.
+  const reqHeaders = serializeHeaders(request.headers)
+  const body = await request.text()
+
+  const clientMessage = await sendToClient(client, {
+    type: 'REQUEST',
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: reqHeaders,
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body,
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  })
+
+  switch (clientMessage.type) {
+    case 'MOCK_SUCCESS': {
+      return delayPromise(
+        () => respondWithMock(clientMessage),
+        clientMessage.payload.delay,
+      )
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return getOriginalResponse()
+    }
+
+    case 'NETWORK_ERROR': {
+      const { name, message } = clientMessage.payload
+      const networkError = new Error(message)
+      networkError.name = name
+
+      // Rejecting a request Promise emulates a network error.
+      throw networkError
+    }
+
+    case 'INTERNAL_ERROR': {
+      const parsedBody = JSON.parse(clientMessage.payload.body)
+
+      console.error(
+        `\
+[MSW] Uncaught exception in the request handler for "%s %s":
+
+${parsedBody.location}
+
+This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
+`,
+        request.method,
+        request.url,
+      )
+
+      return respondWithMock(clientMessage)
+    }
+  }
+
+  return getOriginalResponse()
+}
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = uuidv4()
+
+  return event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`,
+      )
+    }),
+  )
+})
+
+function serializeHeaders(headers) {
+  const reqHeaders = {}
+  headers.forEach((value, name) => {
+    reqHeaders[name] = reqHeaders[name]
+      ? [].concat(reqHeaders[name]).concat(value)
+      : value
+  })
+  return reqHeaders
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(JSON.stringify(message), [channel.port2])
+  })
+}
+
+function delayPromise(cb, duration) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(cb()), duration)
+  })
+}
+
+function respondWithMock(clientMessage) {
+  return new Response(clientMessage.payload.body, {
+    ...clientMessage.payload,
+    headers: clientMessage.payload.headers,
+  })
+}
+
+function uuidv4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
diff --git a/example/mocks/browser.ts b/example/mocks/browser.ts
index aae5d09..4e00347 100644
--- a/example/mocks/browser.ts
+++ b/example/mocks/browser.ts
@@ -1,10 +1,14 @@
 import { rest, setupWorker } from 'msw';
+import { createUtils } from '../../';
+import { APP_NAME } from '../constants';
+
+const { json } = createUtils(APP_NAME);
 
 export const getWorker = () => {
   return setupWorker(
     ...[
       rest.get('http://www.example.com', (_req, res, ctx) => {
-        return res(ctx.json({ okay: 'there' }));
+        return json(res, ctx, { okay: 'there' });
       }),
     ]
   );
diff --git a/example/package.json b/example/package.json
index e112778..5851fcf 100644
--- a/example/package.json
+++ b/example/package.json
@@ -4,8 +4,9 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "start": "yarn copy-worker && parcel index.html",
+    "build": "yarn copy-worker && parcel build index.html",
+    "copy-worker": "copyfiles mockServiceWorker.js ./dist"
   },
   "resolutions": {
     "@babel/preset-env": "7.13.8"
@@ -25,6 +26,7 @@
   "devDependencies": {
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4",
+    "copyfiles": "^2.4.1",
     "msw": "^0.35.0",
     "parcel": "^1.12.3",
     "prettier": "^2.4.1",
diff --git a/example/yarn.lock b/example/yarn.lock
index 7e59cea..5dfcbe0 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -2592,6 +2592,19 @@ copy-to-clipboard@3.3.1:
   dependencies:
     toggle-selection "^1.0.6"
 
+copyfiles@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5"
+  integrity sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==
+  dependencies:
+    glob "^7.0.5"
+    minimatch "^3.0.3"
+    mkdirp "^1.0.4"
+    noms "0.0.0"
+    through2 "^2.0.1"
+    untildify "^4.0.0"
+    yargs "^16.1.0"
+
 core-js-compat@^3.8.1, core-js-compat@^3.9.0:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.0.tgz#fb360652201e8ac8da812718c008cd0482ed9b42"
@@ -3580,6 +3593,18 @@ glob@^7.0.0, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.0.5:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -4199,6 +4224,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -4553,7 +4583,7 @@ minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.4:
+minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -4580,6 +4610,11 @@ mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mkdirp@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4709,6 +4744,14 @@ node-releases@^1.1.75:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.76.tgz#df245b062b0cafbd5282ab6792f7dccc2d97f36e"
   integrity sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA==
 
+noms@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
+  integrity sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "~1.0.31"
+
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -5714,6 +5757,16 @@ readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@~1.0.31:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -6314,6 +6367,11 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -6439,7 +6497,7 @@ terser@^5.6.1:
     source-map "~0.7.2"
     source-map-support "~0.5.20"
 
-through2@^2.0.0, through2@~2.0.3:
+through2@^2.0.0, through2@^2.0.1, through2@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -6706,6 +6764,11 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
 upath@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
@@ -6967,6 +7030,19 @@ yargs-parser@^20.2.2:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
+yargs@^16.1.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yargs@^17.0.1:
   version "17.1.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.1.1.tgz#c2a8091564bdb196f7c0a67c1d12e5b85b8067ba"
diff --git a/src/index.tsx b/src/component/MSWToolbar.tsx
similarity index 85%
rename from src/index.tsx
rename to src/component/MSWToolbar.tsx
index c6132ee..75e7828 100644
--- a/src/index.tsx
+++ b/src/component/MSWToolbar.tsx
@@ -7,10 +7,16 @@ import {
   RestContext,
 } from 'msw';
 import { usePrevious } from './hooks';
-import { capitalize } from './utils';
 import styles from './styles.module.css';
+import { WorkerMode } from '../types';
+import { get, modes, set } from '../helpers';
 
 interface Props {
+  /**
+   * A prefix will be prepended to the localStorage key we use for persisting settings. If you use this component
+   * on many applications locally, you'll want to set this so configuration from app A doesn't impact app B.
+   */
+  prefix?: string;
   /**
    * The base url of your requests. This is required to use 'error' mode as it takes the base domain and intercepts any request regardless of the path.
    */
@@ -49,6 +55,7 @@ export const MSWToolbar = ({
   apiUrl = '',
   actions,
   worker,
+  prefix = '',
 }: Props) => {
   if ((isEnabled && !worker) || (isEnabled && worker && !worker.start)) {
     console.warn(
@@ -60,14 +67,11 @@ export const MSWToolbar = ({
 
   const [isReady, setIsReady] = React.useState(isEnabled ? false : true);
 
-  type WorkerMode = 'normal' | 'error';
-  const modes: WorkerMode[] = ['normal', 'error'];
-
   const [mode, setMode] = React.useState<WorkerMode>(
-    (localStorage.getItem('mswWorkerMode') as WorkerMode) ?? 'normal'
+    get(prefix, 'mode', 'normal')
   );
 
-  const lastWorkerStateFromStorage = localStorage.getItem('mswWorkerStatus');
+  const lastWorkerStateFromStorage = get(prefix, 'status', 'disabled');
 
   const [workerEnabled, setWorkerEnabled] = React.useState(
     lastWorkerStateFromStorage === 'enabled'
@@ -78,9 +82,7 @@ export const MSWToolbar = ({
     previousWorkerEnabled !== undefined &&
     workerEnabled !== previousWorkerEnabled;
 
-  const [delay, setDelay] = React.useState(
-    localStorage?.getItem('mswDelay') ?? 75
-  );
+  const [delay, setDelay] = React.useState(get(prefix, 'delay', '75'));
 
   React.useEffect(() => {
     if (!worker || !isEnabled || workerRef.current) return;
@@ -102,15 +104,12 @@ export const MSWToolbar = ({
 
       workerRef.current[action]();
 
-      localStorage.setItem(
-        'mswWorkerStatus',
-        workerEnabled ? 'enabled' : 'disabled'
-      );
+      set(prefix, 'status', workerEnabled ? 'enabled' : 'disabled');
     }
-  }, [workerEnabled, hasChangedWorkerState]);
+  }, [workerEnabled, hasChangedWorkerState, prefix]);
 
   React.useEffect(() => {
-    localStorage.setItem('mswWorkerMode', mode);
+    set(prefix, 'mode', mode);
 
     switch (mode) {
       case 'normal':
@@ -135,11 +134,11 @@ export const MSWToolbar = ({
       default:
         return;
     }
-  }, [mode, isReady, apiUrl]);
+  }, [mode, isReady, apiUrl, prefix]);
 
   React.useEffect(() => {
-    localStorage?.setItem('mswDelay', String(delay));
-  }, [delay]);
+    set(prefix, 'delay', String(delay));
+  }, [delay, prefix]);
 
   if (!isEnabled || !worker) return <>{children}</>;
 
@@ -179,7 +178,7 @@ export const MSWToolbar = ({
               >
                 {modes.map(m => (
                   <option value={m} key={m}>
-                    {capitalize(m)}
+                    {m}
                   </option>
                 ))}
               </select>
@@ -189,7 +188,7 @@ export const MSWToolbar = ({
               <input
                 id="delay"
                 type="number"
-                onChange={value => setDelay(Number(value))}
+                onChange={event => setDelay(event.target.value)}
                 value={delay}
               />
             </div>
diff --git a/src/hooks.tsx b/src/component/hooks.ts
similarity index 100%
rename from src/hooks.tsx
rename to src/component/hooks.ts
diff --git a/src/styles.module.css b/src/component/styles.module.css
similarity index 100%
rename from src/styles.module.css
rename to src/component/styles.module.css
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
new file mode 100644
index 0000000..fa8ac58
--- /dev/null
+++ b/src/helpers/index.ts
@@ -0,0 +1 @@
+export * from './settings';
diff --git a/src/helpers/settings.ts b/src/helpers/settings.ts
new file mode 100644
index 0000000..dcb3441
--- /dev/null
+++ b/src/helpers/settings.ts
@@ -0,0 +1,33 @@
+import { Setting } from '..';
+import { WorkerMode, WorkerStatus } from '../types';
+
+export const modes: WorkerMode[] = ['normal', 'error'];
+
+type SettingValueMap = {
+  mode: WorkerMode;
+  status: WorkerStatus;
+  delay: string;
+};
+
+type AllowedValueForSetting<Setting> = SettingValueMap[Setting &
+  keyof SettingValueMap];
+
+const buildKey = (prefix: string, key: string) =>
+  `${prefix && `${prefix}_`}msw_toolbar_${key}`;
+
+export const get = <S extends Setting>(
+  prefix: string,
+  key: S,
+  defaultValue: AllowedValueForSetting<S>
+) => {
+  const value = localStorage.getItem(buildKey(prefix, key)) ?? defaultValue;
+  return value as NonNullable<typeof defaultValue>;
+};
+
+export const set = <S extends Setting>(
+  prefix: string,
+  key: S,
+  value: AllowedValueForSetting<S>
+) => {
+  localStorage.setItem(buildKey(prefix, key), value);
+};
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..a81b68d
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,5 @@
+import { MSWToolbar } from './component/MSWToolbar';
+import { createUtils } from './utils';
+
+export { MSWToolbar, createUtils };
+export * from './types';
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..f20b49c
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,3 @@
+export type Setting = 'mode' | 'delay' | 'status';
+export type WorkerStatus = 'enabled' | 'disabled';
+export type WorkerMode = 'normal' | 'error';
diff --git a/src/utils.ts b/src/utils.ts
deleted file mode 100644
index 14a35e4..0000000
--- a/src/utils.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function capitalize(str: string) {
-  return str.length ? str.replace(str[0], str[0].toUpperCase()) : '';
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..6f57b81
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,32 @@
+import { ResponseComposition, RestContext } from 'msw';
+import { get } from '../helpers';
+
+/**
+ * Creates a collection of utils that are scoped to a given application prefix
+ */
+export const createUtils = (prefix: string = '') => {
+  /**
+   * A small helper that returns ctx.delay with the value from the toolbar
+   */
+  function getDelay(ctx: RestContext) {
+    return ctx.delay(Number(get(prefix, 'delay', '0')));
+  }
+
+  return {
+    getDelay,
+    /**
+     * A small helper that returns the given data with the delay from the toolbar
+     */
+    json(res: ResponseComposition<any>, ctx: RestContext, data?: any) {
+      return res(ctx.json(data), getDelay(ctx));
+    },
+    /**
+     * Returns a 404 with the delay from the toolbar
+     */
+    notFound(res: ResponseComposition<any>, ctx: RestContext) {
+      return res(ctx.status(404), getDelay(ctx));
+    },
+  };
+};
+
+export * from '../helpers/settings';