From f5ad5ff60f5def4c001c5f95498ce55f66fd726a Mon Sep 17 00:00:00 2001
From: mattcompiles <mattjones701@gmail.com>
Date: Mon, 1 Jun 2020 09:36:46 +1000
Subject: [PATCH] feat: Add paramType config to use standard search queries
 (#161)

Co-authored-by: Michael Taranto <michaeltaranto@users.noreply.github.com>
---
 .github/workflows/preview-site.yml         |   2 +-
 README.md                                  |   1 +
 cypress/integration/editor.js              |   5 +
 cypress/integration/smoke.js               |   6 +-
 cypress/integration/snippets.js            |   6 +-
 cypress/integration/toolbar.js             |   5 +
 cypress/integration/urlHandling.js         |  71 ++++++++---
 cypress/projects/basic/playroom.config.js  |   1 +
 cypress/projects/themed/components.js      |  27 +++++
 cypress/projects/themed/playroom.config.js |  10 ++
 cypress/projects/themed/serve.json         |   3 +
 cypress/projects/themed/snippets.js        |  22 ++++
 cypress/projects/themed/themes.js          |   2 +
 cypress/support/index.js                   |  17 ---
 cypress/support/utils.js                   |  16 +++
 lib/provideDefaultConfig.js                |   1 +
 package.json                               |  23 ++--
 src/Playroom/Frame.js                      |  44 -------
 src/Playroom/Frame.tsx                     |  38 ++++++
 src/Playroom/Frames/Frames.tsx             |  13 +-
 src/Playroom/Frames/Iframe.tsx             |   4 +-
 src/Playroom/Preview.tsx                   |  49 +++-----
 src/Playroom/WindowPortal/index.tsx        |   2 +-
 src/StoreContext/StoreContext.tsx          |   6 +-
 src/config.ts                              |   5 +
 src/index.d.ts                             |   1 +
 src/index.js                               |   3 +-
 src/utils/getParamsFromQuery.ts            |  10 --
 src/utils/params.ts                        |  37 ++++++
 src/utils/usePreviewUrl.ts                 |   6 +-
 utils/index.d.ts                           |   4 +
 utils/index.js                             |   8 +-
 yarn.lock                                  | 131 ++++++++++++++++++++-
 33 files changed, 427 insertions(+), 152 deletions(-)
 create mode 100644 cypress/projects/themed/components.js
 create mode 100644 cypress/projects/themed/playroom.config.js
 create mode 100644 cypress/projects/themed/serve.json
 create mode 100644 cypress/projects/themed/snippets.js
 create mode 100644 cypress/projects/themed/themes.js
 delete mode 100644 src/Playroom/Frame.js
 create mode 100644 src/Playroom/Frame.tsx
 create mode 100644 src/config.ts
 delete mode 100644 src/utils/getParamsFromQuery.ts
 create mode 100644 src/utils/params.ts

diff --git a/.github/workflows/preview-site.yml b/.github/workflows/preview-site.yml
index be1e2432..3ffafe2c 100644
--- a/.github/workflows/preview-site.yml
+++ b/.github/workflows/preview-site.yml
@@ -24,7 +24,7 @@ jobs:
         run: yarn --frozen-lockfile
 
       - name: Build
-        run: yarn example:braid:build
+        run: yarn preview:build
 
       - name: Deploy to surge
         run: yarn deploy-preview -d playroom--${GITHUB_SHA}.surge.sh
diff --git a/README.md b/README.md
index c765d037..25a6b77d 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ module.exports = {
   widths: [320, 375, 768, 1024],
   port: 9000,
   openBrowser: true,
+  paramType: 'search', // default is 'hash'
   exampleCode: `
     <Button>
       Hello World!
diff --git a/cypress/integration/editor.js b/cypress/integration/editor.js
index 563b35cc..c8b85103 100644
--- a/cypress/integration/editor.js
+++ b/cypress/integration/editor.js
@@ -4,9 +4,14 @@ import {
   assertFirstFrameContains,
   assertCodePaneContains,
   assertCodePaneLineCount,
+  loadPlayroom,
 } from '../support/utils';
 
 describe('Editor', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
   it('renders to frame', () => {
     typeCode('<Foo />');
     assertFirstFrameContains('Foo');
diff --git a/cypress/integration/smoke.js b/cypress/integration/smoke.js
index d2145102..b6432b69 100644
--- a/cypress/integration/smoke.js
+++ b/cypress/integration/smoke.js
@@ -1,6 +1,10 @@
-import { getFirstFrame } from '../support/utils';
+import { getFirstFrame, loadPlayroom } from '../support/utils';
 
 describe('Smoke', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
   it('frames are interactive', () => {
     getFirstFrame().click('center');
   });
diff --git a/cypress/integration/snippets.js b/cypress/integration/snippets.js
index 93498b73..35dee516 100644
--- a/cypress/integration/snippets.js
+++ b/cypress/integration/snippets.js
@@ -10,10 +10,14 @@ import {
   assertSnippetCount,
   assertSnippetsListIsVisible,
   mouseOverSnippet,
+  loadPlayroom,
 } from '../support/utils';
 
 describe('Snippets', () => {
-  beforeEach(() => typeCode('<div>Initial <span>code'));
+  beforeEach(() => {
+    loadPlayroom();
+    typeCode('<div>Initial <span>code');
+  });
 
   it('driven with mouse', () => {
     // Open and format for insertion point
diff --git a/cypress/integration/toolbar.js b/cypress/integration/toolbar.js
index f7dd3f74..c59ac262 100644
--- a/cypress/integration/toolbar.js
+++ b/cypress/integration/toolbar.js
@@ -5,9 +5,14 @@ import {
   typeCode,
   gotoPreview,
   visit,
+  loadPlayroom,
 } from '../support/utils';
 
 describe('Toolbar', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
   it('filter widths', () => {
     const frames = ['320px', '375px', '768px', '1024px'];
     const widthIndexToSelect = 1;
diff --git a/cypress/integration/urlHandling.js b/cypress/integration/urlHandling.js
index ad037076..bba7a493 100644
--- a/cypress/integration/urlHandling.js
+++ b/cypress/integration/urlHandling.js
@@ -6,29 +6,64 @@ import {
 } from '../support/utils';
 
 describe('URL handling', () => {
-  it('code (base64 encoding)', () => {
-    visit(
-      'http://localhost:9000/#?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
-    );
+  describe('where paramType is hash', () => {
+    it('code (base64 encoding)', () => {
+      visit(
+        'http://localhost:9000/#?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
+      );
 
-    assertFirstFrameContains('Foo\nFoo\nBar');
-    assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
-  });
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
+
+    it('code (LZ-based compression)', () => {
+      visit(
+        'http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
+      );
 
-  it('code (LZ-based compression)', () => {
-    visit(
-      'http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
-    );
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
 
-    assertFirstFrameContains('Foo\nFoo\nBar');
-    assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    it('widths', () => {
+      visit(
+        'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
+      );
+
+      assertFramesMatch(['375px', '768px']);
+    });
   });
 
-  it('widths', () => {
-    visit(
-      'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
-    );
+  describe('where paramType is search', () => {
+    it('code (base64 encoding)', () => {
+      visit(
+        'http://localhost:9001/index.html?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
+      );
+
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
+
+    it('code (LZ-based compression)', () => {
+      visit(
+        'http://localhost:9001/index.html?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
+      );
+
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
+
+    it('widths', () => {
+      visit(
+        'http://localhost:9001/index.html?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
+      );
 
-    assertFramesMatch(['375px', '768px']);
+      assertFramesMatch([
+        'themeOne – 375px',
+        'themeTwo – 375px',
+        'themeOne – 768px',
+        'themeTwo – 768px',
+      ]);
+    });
   });
 });
diff --git a/cypress/projects/basic/playroom.config.js b/cypress/projects/basic/playroom.config.js
index c010ce0a..76fe3a9b 100644
--- a/cypress/projects/basic/playroom.config.js
+++ b/cypress/projects/basic/playroom.config.js
@@ -3,4 +3,5 @@ module.exports = {
   snippets: './snippets',
   outputPath: './dist',
   openBrowser: false,
+  storageKey: 'playroom-example-basic',
 };
diff --git a/cypress/projects/themed/components.js b/cypress/projects/themed/components.js
new file mode 100644
index 00000000..2188e9d8
--- /dev/null
+++ b/cypress/projects/themed/components.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withPropTypes = (component) => {
+  component.propTypes = {
+    color: PropTypes.oneOf(['red', 'blue']),
+    children: PropTypes.node,
+  };
+
+  return component;
+};
+const parent = {
+  border: '1px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};
+
+export const Foo = withPropTypes(({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Foo{children ? <div style={parent}>{children}</div> : null}
+  </div>
+));
+
+export const Bar = withPropTypes(({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Bar{children ? <div style={parent}>{children}</div> : null}
+  </div>
+));
diff --git a/cypress/projects/themed/playroom.config.js b/cypress/projects/themed/playroom.config.js
new file mode 100644
index 00000000..59b48319
--- /dev/null
+++ b/cypress/projects/themed/playroom.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  components: './components',
+  snippets: './snippets',
+  themes: './themes',
+  outputPath: './dist',
+  openBrowser: false,
+  paramType: 'search',
+  port: 9001,
+  storageKey: 'playroom-example-themed',
+};
diff --git a/cypress/projects/themed/serve.json b/cypress/projects/themed/serve.json
new file mode 100644
index 00000000..b308df80
--- /dev/null
+++ b/cypress/projects/themed/serve.json
@@ -0,0 +1,3 @@
+{
+  "cleanUrls": false
+}
diff --git a/cypress/projects/themed/snippets.js b/cypress/projects/themed/snippets.js
new file mode 100644
index 00000000..51dcb7ab
--- /dev/null
+++ b/cypress/projects/themed/snippets.js
@@ -0,0 +1,22 @@
+export default [
+  {
+    group: 'Foo',
+    name: 'Default',
+    code: '<Foo>Foo</Foo>',
+  },
+  {
+    group: 'Foo',
+    name: 'Red',
+    code: '<Foo color="red">Red Foo</Foo>',
+  },
+  {
+    group: 'Bar',
+    name: 'Default',
+    code: '<Bar>Bar</Bar>',
+  },
+  {
+    group: 'Bar',
+    name: 'Blue',
+    code: '<Bar color="blue">Blue Bar</Bar>',
+  },
+];
diff --git a/cypress/projects/themed/themes.js b/cypress/projects/themed/themes.js
new file mode 100644
index 00000000..3bf7ddd6
--- /dev/null
+++ b/cypress/projects/themed/themes.js
@@ -0,0 +1,2 @@
+export const themeOne = { name: 'one' };
+export const themeTwo = { name: 'two' };
diff --git a/cypress/support/index.js b/cypress/support/index.js
index 1207eb6e..ba360413 100644
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@@ -1,18 +1 @@
 require('./commands');
-const { getFirstFrame } = require('./utils');
-
-beforeEach(() => {
-  cy.visit('http://localhost:9000')
-    .window()
-    .then((win) => {
-      const { storageKey } = win.__playroomConfig__;
-      indexedDB.deleteDatabase(storageKey);
-    })
-    .reload()
-    .then(() =>
-      getFirstFrame().then(
-        ($iframe) =>
-          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
-      )
-    );
-});
diff --git a/cypress/support/utils.js b/cypress/support/utils.js
index df701c51..6773bd55 100644
--- a/cypress/support/utils.js
+++ b/cypress/support/utils.js
@@ -110,3 +110,19 @@ export const assertPreviewContains = (text) =>
   cy.get('body').then((el) => {
     expect(el.get(0).innerText).to.eq(text);
   });
+
+export const loadPlayroom = () =>
+  cy
+    .visit('http://localhost:9000')
+    .window()
+    .then((win) => {
+      const { storageKey } = win.__playroomConfig__;
+      indexedDB.deleteDatabase(storageKey);
+    })
+    .reload()
+    .then(() =>
+      getFirstFrame().then(
+        ($iframe) =>
+          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
+      )
+    );
diff --git a/lib/provideDefaultConfig.js b/lib/provideDefaultConfig.js
index bfc6a068..fbe37211 100644
--- a/lib/provideDefaultConfig.js
+++ b/lib/provideDefaultConfig.js
@@ -17,5 +17,6 @@ module.exports = ({ storageKey, ...restConfig }) => ({
   openBrowser: true,
   storageKey: storageKey || generateStorageKey(),
   baseUrl: '',
+  paramType: 'hash',
   ...restConfig,
 });
diff --git a/package.json b/package.json
index eefc47bb..c9851f81 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,19 @@
     "playroom": "bin/cli.js"
   },
   "scripts": {
-    "cypress": "start-server-and-test example:build-and-serve http://localhost:9000 'cypress run'",
-    "cypress:dev": "start-server-and-test example:start http://localhost:9000 'cypress open'",
-    "example:braid:build": "cd examples/braid-design-system && yarn && yarn build",
-    "example:start": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
-    "example:build": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
-    "example:serve": "PORT=9000 serve cypress/projects/basic/dist",
-    "example:build-and-serve": "yarn example:build && yarn example:serve",
+    "cypress": "start-server-and-test examples:build-and-serve '9000|9001' 'cypress run'",
+    "cypress:dev": "start-server-and-test examples:start '9000|9001' 'cypress open'",
+    "example:start:basic": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
+    "example:build:basic": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
+    "example:serve:basic": "PORT=9000 serve cypress/projects/basic/dist",
+    "example:start:themed": "./bin/cli.js start --config cypress/projects/themed/playroom.config.js",
+    "example:build:themed": "./bin/cli.js build --config cypress/projects/themed/playroom.config.js",
+    "example:serve:themed": "PORT=9001 serve --config ../serve.json cypress/projects/themed/dist",
+    "examples:start": "concurrently 'npm:example:start:*'",
+    "examples:build": "concurrently 'npm:example:build:*'",
+    "examples:serve": "concurrently 'npm:example:serve:*'",
+    "examples:build-and-serve": "yarn examples:build && yarn examples:serve",
+    "preview:build": "cd examples/braid-design-system && yarn && yarn build",
     "commit": "git-cz",
     "lint": "eslint . && prettier --list-different '**/*.{js,md,less,ts,tsx}' && tsc --noEmit",
     "format": "prettier --write '**/*.{js,md,less,ts,tsx}'",
@@ -69,6 +75,7 @@
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.84",
     "@types/dedent": "^0.7.0",
+    "@types/history": "^4.7.6",
     "@types/lodash": "^4.14.149",
     "@types/lz-string": "^1.3.33",
     "@types/prettier": "^2.0.0",
@@ -89,6 +96,7 @@
     "find-up": "^4.1.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fuzzy": "^0.1.3",
+    "history": "^4.10.1",
     "html-webpack-plugin": "^4.0.0-beta.5",
     "intersection-observer": "^0.7.0",
     "less": "^3.10.3",
@@ -124,6 +132,7 @@
     "@types/jest": "^25.2.1",
     "commitizen": "^4.0.4",
     "commitlint-config-seek": "^1.0.0",
+    "concurrently": "^5.2.0",
     "cypress": "^3.8.3",
     "cz-conventional-changelog": "^3.1.0",
     "eslint": "^6.8.0",
diff --git a/src/Playroom/Frame.js b/src/Playroom/Frame.js
deleted file mode 100644
index 6c34c355..00000000
--- a/src/Playroom/Frame.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Component } from 'react';
-import getParamsFromQuery from '../utils/getParamsFromQuery';
-import CatchErrors from './CatchErrors/CatchErrors';
-import RenderCode from './RenderCode/RenderCode';
-
-export default class Frame extends Component {
-  constructor(props) {
-    super(props);
-
-    const { themeName, code = '' } = getParamsFromQuery();
-
-    this.state = {
-      themeName,
-      code,
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener('hashchange', () => {
-      const { themeName, code } = getParamsFromQuery();
-
-      if (themeName && code) {
-        this.setState({ themeName, code });
-      }
-    });
-  }
-
-  render() {
-    const { themeName, code } = this.state;
-    const { themes, components, FrameComponent } = this.props;
-
-    const resolvedThemeName =
-      themeName === '__PLAYROOM__NO_THEME__' ? null : themeName;
-    const resolvedTheme = resolvedThemeName ? themes[resolvedThemeName] : null;
-
-    return (
-      <CatchErrors code={code}>
-        <FrameComponent themeName={resolvedThemeName} theme={resolvedTheme}>
-          <RenderCode code={code} scope={components} />
-        </FrameComponent>
-      </CatchErrors>
-    );
-  }
-}
diff --git a/src/Playroom/Frame.tsx b/src/Playroom/Frame.tsx
new file mode 100644
index 00000000..b175d744
--- /dev/null
+++ b/src/Playroom/Frame.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useParams } from '../utils/params';
+// @ts-ignore
+import CatchErrors from './CatchErrors/CatchErrors';
+// @ts-ignore
+import RenderCode from './RenderCode/RenderCode';
+
+interface FrameProps {
+  themes: Record<string, any>;
+  components: Array<any>;
+  FrameComponent: React.ComponentType<{
+    themeName: string | null;
+    theme: string;
+  }>;
+}
+export default function Frame({
+  themes,
+  components,
+  FrameComponent,
+}: FrameProps) {
+  const { themeName, code } = useParams((rawParams) => ({
+    themeName:
+      typeof rawParams.themeName === 'string' ? rawParams.themeName : '',
+    code: typeof rawParams.code === 'string' ? rawParams.code : '',
+  }));
+
+  const resolvedThemeName =
+    themeName === '__PLAYROOM__NO_THEME__' ? null : themeName;
+  const resolvedTheme = resolvedThemeName ? themes[resolvedThemeName] : null;
+
+  return (
+    <CatchErrors code={code}>
+      <FrameComponent themeName={resolvedThemeName} theme={resolvedTheme}>
+        <RenderCode code={code} scope={components} />
+      </FrameComponent>
+    </CatchErrors>
+  );
+}
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 308c351a..e10c954a 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -5,19 +5,18 @@ import { compileJsx } from '../../utils/compileJsx';
 import { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
+import playroomConfig from '../../config';
 
 // @ts-ignore
 import styles from './Frames.less';
 
-interface FrameProps {
+interface FramesProps {
   code: string;
   themes: PlayroomProps['themes'];
   widths: PlayroomProps['widths'];
 }
 
-const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
-
-export default function Frame({ code, themes, widths }: FrameProps) {
+export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
 
   const frames = flatMap(widths, (width) =>
@@ -55,9 +54,9 @@ export default function Frame({ code, themes, widths }: FrameProps) {
           </div>
           <Iframe
             intersectionRootRef={scrollingPanelRef}
-            src={`${
-              playroomConfig.baseUrl
-            }frame.html#?themeName=${encodeURIComponent(
+            src={`${playroomConfig.baseUrl}frame.html${
+              playroomConfig.paramType === 'hash' ? '#' : ''
+            }?themeName=${encodeURIComponent(
               frame.theme
             )}&code=${encodeURIComponent(renderCode)}`}
             className={styles.frame}
diff --git a/src/Playroom/Frames/Iframe.tsx b/src/Playroom/Frames/Iframe.tsx
index 0b9e3418..9285b94f 100644
--- a/src/Playroom/Frames/Iframe.tsx
+++ b/src/Playroom/Frames/Iframe.tsx
@@ -7,13 +7,13 @@ import React, {
 } from 'react';
 import { useIntersection } from 'react-use';
 
+import playroomConfig from '../../config';
+
 interface IframeProps extends AllHTMLAttributes<HTMLIFrameElement> {
   src: string;
   intersectionRootRef: MutableRefObject<Element | null>;
 }
 
-const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
-
 export default function Iframe({
   intersectionRootRef,
   style,
diff --git a/src/Playroom/Preview.tsx b/src/Playroom/Preview.tsx
index 9ed17d39..b63bcfcb 100644
--- a/src/Playroom/Preview.tsx
+++ b/src/Playroom/Preview.tsx
@@ -1,7 +1,7 @@
-import React, { useState, ComponentType, useEffect } from 'react';
+import React, { ComponentType } from 'react';
 import lzString from 'lz-string';
 
-import getParamsFromQuery from '../utils/getParamsFromQuery';
+import { useParams } from '../utils/params';
 import { compileJsx } from '../utils/compileJsx';
 import SplashScreen from './SplashScreen/SplashScreen';
 
@@ -14,22 +14,6 @@ interface PreviewState {
   code?: string;
   themeName?: string;
 }
-const getStateFromUrl = (): PreviewState => {
-  const params = getParamsFromQuery();
-
-  if (params.code) {
-    const { code, theme } = JSON.parse(
-      lzString.decompressFromEncodedURIComponent(String(params.code))
-    );
-
-    return {
-      code: compileJsx(code),
-      themeName: theme,
-    } as PreviewState;
-  }
-
-  return {};
-};
 
 export interface PreviewProps {
   components: Record<string, ComponentType>;
@@ -37,19 +21,22 @@ export interface PreviewProps {
   FrameComponent: ComponentType<{ themeName: string; theme: any }>;
 }
 export default ({ themes, components, FrameComponent }: PreviewProps) => {
-  const [{ themeName, code }, setPreviewState] = useState(getStateFromUrl);
-
-  useEffect(() => {
-    const onHashChange = () => {
-      setPreviewState(getStateFromUrl());
-    };
-
-    window.addEventListener('hashchange', onHashChange);
-
-    return () => {
-      window.removeEventListener('hashchange', onHashChange);
-    };
-  }, []);
+  const { themeName, code } = useParams(
+    (rawParams): PreviewState => {
+      if (rawParams.code) {
+        const result = JSON.parse(
+          lzString.decompressFromEncodedURIComponent(String(rawParams.code))
+        );
+
+        return {
+          code: compileJsx(result.code),
+          themeName: result.theme,
+        };
+      }
+
+      return {};
+    }
+  );
 
   const resolvedTheme = themeName ? themes[themeName] : null;
 
diff --git a/src/Playroom/WindowPortal/index.tsx b/src/Playroom/WindowPortal/index.tsx
index 7d148cdb..e79dffb1 100644
--- a/src/Playroom/WindowPortal/index.tsx
+++ b/src/Playroom/WindowPortal/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
-const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
+import playroomConfig from '../../config';
 
 const copyStyles = (sourceDoc: Document, targetDoc: Document) => {
   const list = Array.from(sourceDoc.styleSheets) as CSSStyleSheet[];
diff --git a/src/StoreContext/StoreContext.tsx b/src/StoreContext/StoreContext.tsx
index 6405d517..5a65a0c0 100644
--- a/src/StoreContext/StoreContext.tsx
+++ b/src/StoreContext/StoreContext.tsx
@@ -14,11 +14,11 @@ import { useDebouncedCallback } from 'use-debounce';
 
 import { createUrl, CreateUrlOptions, Snippet } from '../../utils';
 import { formatForInsertion, formatAndInsert } from '../utils/formatting';
-import getParamsFromQuery from '../utils/getParamsFromQuery';
+import { getParamsFromQuery, replaceUrl } from '../utils/params';
 import { PlayroomProps } from '../Playroom/Playroom';
 import { isValidLocation } from '../utils/cursor';
+import playroomConfig from '../config';
 
-const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
 const exampleCode = dedent(playroomConfig.exampleCode || '').trim();
 
 const store = localforage.createInstance({
@@ -396,7 +396,7 @@ export const StoreProvider = ({
       // they are also removed from the url. Replacing state
       // with an empty string (returned from `createUrl`)
       // does not do anything, so replacing with `#`
-      history.replaceState(null, '', createUrl(params) || '#');
+      replaceUrl(createUrl({ ...params, paramType: playroomConfig.paramType }));
     },
     500
   );
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 00000000..df21ff28
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,5 @@
+const playroomConfig = __PLAYROOM_GLOBAL__CONFIG__;
+
+window.__playroomConfig__ = playroomConfig;
+
+export default playroomConfig;
diff --git a/src/index.d.ts b/src/index.d.ts
index abcc9d58..0d6afd57 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -11,6 +11,7 @@ interface PlayroomConfig {
   storageKey?: string;
   webpackConfig?: () => void;
   baseUrl?: string;
+  paramType: 'hash' | 'search';
   iframeSandbox?: string;
 }
 
diff --git a/src/index.js b/src/index.js
index 75390968..aa2c9f0f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { render } from 'react-dom';
+
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
+import playroomConfig from './config';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -9,7 +11,6 @@ const polyfillIntersectionObserver = () =>
     : import('intersection-observer');
 
 polyfillIntersectionObserver().then(() => {
-  const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
   const widths = playroomConfig.widths || [320, 375, 768, 1024];
 
   const outlet = document.createElement('div');
diff --git a/src/utils/getParamsFromQuery.ts b/src/utils/getParamsFromQuery.ts
deleted file mode 100644
index 685c6ecb..00000000
--- a/src/utils/getParamsFromQuery.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import queryString from 'query-string';
-
-export default () => {
-  try {
-    const hash = window.location.hash.replace(/^#/, '');
-    return queryString.parse(hash);
-  } catch (err) {
-    return {};
-  }
-};
diff --git a/src/utils/params.ts b/src/utils/params.ts
new file mode 100644
index 00000000..36bafd32
--- /dev/null
+++ b/src/utils/params.ts
@@ -0,0 +1,37 @@
+import { createBrowserHistory } from 'history';
+import { useState, useEffect } from 'react';
+import queryString, { ParsedQuery } from 'query-string';
+
+import playroomConfig from '../config';
+
+const history = createBrowserHistory();
+
+export const replaceUrl = (url: string) => history.replace(url);
+
+export function getParamsFromQuery(location = history.location) {
+  try {
+    return queryString.parse(
+      playroomConfig.paramType === 'hash'
+        ? location.hash.replace(/^#/, '')
+        : location.search
+    );
+  } catch (err) {
+    return {};
+  }
+}
+
+export function useParams<ReturnType>(
+  selector: (rawParams: ParsedQuery) => ReturnType
+): ReturnType {
+  const [params, setParams] = useState(getParamsFromQuery);
+
+  useEffect(
+    () =>
+      history.listen((location) => {
+        setParams(getParamsFromQuery(location));
+      }),
+    []
+  );
+
+  return selector(params);
+}
diff --git a/src/utils/usePreviewUrl.ts b/src/utils/usePreviewUrl.ts
index b21ad922..44499bfd 100644
--- a/src/utils/usePreviewUrl.ts
+++ b/src/utils/usePreviewUrl.ts
@@ -2,8 +2,11 @@ import { useContext } from 'react';
 
 import { StoreContext } from './../StoreContext/StoreContext';
 import { createPreviewUrl } from '../../utils';
+import playroomConfig from '../config';
 
-const baseUrl = window.location.href.split('#')[0];
+const baseUrl = window.location.href
+  .split(playroomConfig.paramType === 'hash' ? '#' : '?')[0]
+  .split('index.html')[0];
 
 export default (theme: string) => {
   const [{ code }] = useContext(StoreContext);
@@ -14,5 +17,6 @@ export default (theme: string) => {
     baseUrl,
     code,
     theme: isThemed ? theme : undefined,
+    paramType: playroomConfig.paramType,
   });
 };
diff --git a/utils/index.d.ts b/utils/index.d.ts
index b352378d..3ffd401e 100644
--- a/utils/index.d.ts
+++ b/utils/index.d.ts
@@ -6,11 +6,14 @@ interface Snippet {
 
 type Snippets = Snippet[];
 
+type ParamType = 'hash' | 'search';
+
 interface CreateUrlOptions {
   baseUrl?: string;
   code?: string;
   themes?: string[];
   widths?: number[];
+  paramType?: ParamType;
 }
 
 export const createUrl: (options: CreateUrlOptions) => string;
@@ -19,6 +22,7 @@ interface CreatePreviewUrlOptions {
   baseUrl?: string;
   code?: string;
   theme?: string;
+  paramType?: ParamType;
 }
 
 export const createPreviewUrl: (options: CreatePreviewUrlOptions) => string;
diff --git a/utils/index.js b/utils/index.js
index 0eb82b3f..10316e7c 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -1,6 +1,6 @@
 const lzString = require('lz-string');
 
-const createUrl = ({ baseUrl, code, themes, widths }) => {
+const createUrl = ({ baseUrl, code, themes, widths, paramType = 'hash' }) => {
   let path = '';
 
   if (code || themes || widths) {
@@ -11,7 +11,7 @@ const createUrl = ({ baseUrl, code, themes, widths }) => {
     });
 
     const compressedData = lzString.compressToEncodedURIComponent(data);
-    path = `#?code=${compressedData}`;
+    path = `${paramType === 'hash' ? '#' : ''}?code=${compressedData}`;
   }
 
   if (baseUrl) {
@@ -23,7 +23,7 @@ const createUrl = ({ baseUrl, code, themes, widths }) => {
   return path;
 };
 
-const createPreviewUrl = ({ baseUrl, code, theme }) => {
+const createPreviewUrl = ({ baseUrl, code, theme, paramType = 'hash' }) => {
   let path = '';
 
   if (code || theme) {
@@ -33,7 +33,7 @@ const createPreviewUrl = ({ baseUrl, code, theme }) => {
     });
 
     const compressedData = lzString.compressToEncodedURIComponent(data);
-    path = `/preview#?code=${compressedData}`;
+    path = `/preview${paramType === 'hash' ? '#' : ''}?code=${compressedData}`;
   }
 
   if (baseUrl) {
diff --git a/yarn.lock b/yarn.lock
index cf1a6e1d..31c813a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1611,6 +1611,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/history@^4.7.6":
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.6.tgz#ed8fc802c45b8e8f54419c2d054e55c9ea344356"
+  integrity sha512-GRTZLeLJ8ia00ZH8mxMO8t0aC9M1N9bN461Z2eaRurJo6Fpa+utgCwLzI4jQHcrdzuzp5WPN9jRwpsCQ1VhJ5w==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -3264,6 +3269,15 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -3538,6 +3552,21 @@ concat-stream@1.6.2, concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concurrently@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.2.0.tgz#ead55121d08a0fc817085584c123cedec2e08975"
+  integrity sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==
+  dependencies:
+    chalk "^2.4.2"
+    date-fns "^2.0.1"
+    lodash "^4.17.15"
+    read-pkg "^4.0.1"
+    rxjs "^6.5.2"
+    spawn-command "^0.0.2-1"
+    supports-color "^6.1.0"
+    tree-kill "^1.2.2"
+    yargs "^13.3.0"
+
 config-chain@^1.1.12:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -4030,6 +4059,11 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^2.0.1:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
+  integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -5987,6 +6021,18 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+history@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8182,7 +8228,7 @@ longest@^2.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-2.0.1.tgz#781e183296aa94f6d4d916dc335d0d17aefa23f8"
   integrity sha1-eB4YMpaqlPbU2RbcM10NF676I/g=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -10441,6 +10487,15 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
+read-pkg@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
+  integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
+  dependencies:
+    normalize-package-data "^2.3.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+
 read-pkg@^5.0.0, read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -10818,6 +10873,11 @@ resolve-global@1.0.0, resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -10970,6 +11030,13 @@ rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.3, rxjs@^6.5.4:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.5.2:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.5.tgz#c5c884e3094c8cfee31bf27eb87e54ccfc87f9ec"
+  integrity sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -11504,6 +11571,11 @@ sourcemap-codec@^1.4.1:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
+  integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
+
 spawn-error-forwarder@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/spawn-error-forwarder/-/spawn-error-forwarder-1.0.0.tgz#1afd94738e999b0346d7b9fc373be55e07577029"
@@ -11802,7 +11874,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0:
+string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -11883,7 +11955,7 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
@@ -12200,11 +12272,21 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tiny-relative-date@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
+tiny-warning@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
@@ -12313,6 +12395,11 @@ traverse@~0.6.6:
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
   integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
 
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 trim-newlines@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
@@ -12727,6 +12814,11 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -13078,6 +13170,15 @@ wrap-ansi@^3.0.1:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -13192,6 +13293,14 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^16.1.0:
   version "16.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1"
@@ -13251,6 +13360,22 @@ yargs@^11.0.0:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
+yargs@^13.3.0:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
+
 yargs@^15.0.1:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.1.0.tgz#e111381f5830e863a89550bd4b136bb6a5f37219"