Playground encapsulation / iframe around the playground

core/gatsby-theme-docz/package.json

@@ -41,6 +41,7 @@
     "prop-types": "^15.7.2",
     "re-resizable": "^6.1.0",
     "react-feather": "^2.0.3",
+    "react-frame-component": "^4.1.1",
     "react-helmet-async": "^1.0.4",
     "react-live": "^2.2.1",
     "rehype-docz": "^2.1.0",

core/gatsby-theme-docz/src/components/Playground/index.js

@@ -9,6 +9,7 @@ import copy from 'copy-text-to-clipboard'
 import { usePrismTheme } from '~utils/theme'
 import * as styles from './styles'
 import * as Icons from '../Icons'
+import { Preview } from '../Preview'
 
 const transformCode = code => {
   if (code.startsWith('()') || code.startsWith('class')) return code
@@ -67,7 +68,9 @@ export const Playground = ({ code, scope, language }) => {
         <div sx={styles.previewWrapper}>
           <div sx={styles.previewInner(showingCode)}>
             {showLivePreview && (
-              <LivePreview sx={styles.preview} data-testid="live-preview" />
+              <Preview>
+                <LivePreview sx={styles.preview} data-testid="live-preview" />
+              </Preview>
             )}
           </div>
           <div sx={styles.buttons}>

core/gatsby-theme-docz/src/components/Preview/index.js

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import Frame from 'react-frame-component'
+
+export const Preview = ({ children }) => {
+  return (
+    <Frame
+      style={{
+        width: '100%',
+        height: '100%',
+        border: 'none',
+      }}
+    >
+      {children}
+    </Frame>
+  )
+}

examples/styled-components/package.json

@@ -16,6 +16,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-frame-component": "^4.1.1",
     "styled-components": "^4.3.2"
   }
 }

examples/styled-components/src/gatsby-theme-docz/components/Preview/index.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import * as React from 'react'
+import Frame, { FrameContextConsumer } from 'react-frame-component'
+import { StyleSheetManager } from 'styled-components'
+
+export const Preview = ({ children }) => {
+  return (
+    <Frame
+      style={{
+        width: '100%',
+        height: '100%',
+        border: 'none',
+      }}
+    >
+      <FrameContextConsumer>
+        {frameContext => (
+          <StyleSheetManager target={frameContext.document.head}>
+            <>{children}</>
+          </StyleSheetManager>
+        )}
+      </FrameContextConsumer>
+    </Frame>
+  )
+}

yarn.lock

@@ -15840,6 +15840,11 @@ react-feather@^2.0.3:
   dependencies:
     prop-types "^15.7.2"
 
+react-frame-component@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.1.tgz#ea8f7c518ef6b5ad72146dd1f648752369826894"
+  integrity sha512-NfJp90AvYA1R6+uSYafQ+n+UM2HjHqi4WGHeprVXa6quU9d8o6ZFRzQ36uemY82dlkZFzf2jigFx6E4UzNFajA==
+
 react-helmet-async@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"