Fix live examples disappearing on hard reload

The version bump from 4.1.3 to 5.2.1 of react-frame-component seems to have introduced this issue: primer@a407024 There is an unresolved open issue ryanseddon/react-frame-component#207 so I looked into if the dependency could be removed.
orhantoy · Oct 14, 2022 · 6deef70 · 6deef70
1 parent c7464fb
commit 6deef70
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/theme/package.json b/theme/package.json
@@ -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",

diff --git a/theme/src/components/frame.js b/theme/src/components/frame.js
@@ -1,34 +1,37 @@
 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}>
-              <Measure
-                // iframes don't adjust to the height of their content by default.
-                // We're using Measure to calculate the size of the content
-                // and adjust the iframe's height dynamically.
-                bounds={true}
-                onResize={rect => setHeight(rect.bounds.height)}
-              >
-                {({measureRef}) => <div ref={measureRef}>{children}</div>}
-              </Measure>
-            </StyleSheetManager>
-          )
-        }}
-      </FrameContextConsumer>
-    </FrameComponent>
+    // 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
+              // and adjust the iframe's height dynamically.
+              bounds={true}
+              onResize={rect => setHeight(rect.bounds.height)}
+            >
+              {({measureRef}) => <div ref={measureRef}>{children}</div>}
+            </Measure>
+          </StyleSheetManager>,
+          contentDocument.body
+        )
+      }
+    </iframe>
   )
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -14045,11 +14045,6 @@ react-focus-on@^3.3.0:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-react-frame-component@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-5.2.1.tgz#6bd5ec73ef7d720f57ee8f259546ed926a941267"
-  integrity sha512-nrSh1OZuHlX69eWqJPiUkPT9S6/wxc4PpJV+vOQ4pHQQ8XmIsIT+utWT+nX32ZfANHZuKONA7JsWMUGT36CqaQ==
-
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"