@primer/gatsby-theme-doctocat 4.2.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.2.1
+
+### Patch Changes
+
+- [`6c4da9e`](https://github.com/primer/doctocat/commit/6c4da9e5787862460972b2af75a27e5909093a05) [#498](https://github.com/primer/doctocat/pull/498) Thanks [@colebemis](https://github.com/colebemis)! - Fix live examples disappearing on hard reload
+
 ## 4.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -70,7 +70,6 @@
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",
     "react-focus-on": "^3.3.0",
-    "react-frame-component": "^5.2.1",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",

package/src/components/frame.js

@@ -1,20 +1,24 @@
 import React from 'react'
-import FrameComponent, {FrameContextConsumer} from 'react-frame-component'
+import ReactDOM from 'react-dom'
 import {StyleSheetManager} from 'styled-components'
 import Measure from 'react-measure'
 
 function Frame({children}) {
   const [height, setHeight] = React.useState('auto')
+  const [iframeRef, setIframeRef] = React.useState(null)
+  const contentDocument = iframeRef ? iframeRef.contentWindow.document : null
+
   return (
-    <FrameComponent style={{width: '100%', border: 0, borderRadius: 6, height}}>
-      <FrameContextConsumer>
-        {({document}) => {
-          // By default, styled-components injects styles in the head of the page.
-          // However, styles from the page's head don't apply inside iframes.
-          // We're using StyleSheetManager to make styled-components inject styles
-          // into the head of the iframe instead.
-          return (
-            <StyleSheetManager target={document.head}>
+    // eslint-disable-next-line jsx-a11y/iframe-has-title
+    <iframe ref={setIframeRef} style={{width: '100%', border: 0, borderRadius: 6, height}}>
+      {
+        // By default, styled-components injects styles in the head of the page.
+        // However, styles from the page's head don't apply inside iframes.
+        // We're using StyleSheetManager to make styled-components inject styles
+        // into the head of the iframe instead.
+        contentDocument !== null &&
+          ReactDOM.createPortal(
+            <StyleSheetManager target={contentDocument.head}>
               <Measure
                 // iframes don't adjust to the height of their content by default.
                 // We're using Measure to calculate the size of the content
@@ -24,11 +28,11 @@ function Frame({children}) {
               >
                 {({measureRef}) => <div ref={measureRef}>{children}</div>}
               </Measure>
-            </StyleSheetManager>
+            </StyleSheetManager>,
+            contentDocument.body
           )
-        }}
-      </FrameContextConsumer>
-    </FrameComponent>
+      }
+    </iframe>
   )
 }