attempt to resize Frame components dynamically

docs/src/Frame.js

@@ -5,34 +5,53 @@ import Document, {Head} from 'next/document'
 import {BorderBox} from '@primer/components'
 import {assetPrefix} from './utils'
 
+const DEFAULT_IFRAME_HEIGHT = 150
+
 export default class Frame extends React.Component {
   static defaultProps = {
-    bg: 'white',
     border: 0,
-    p: 3,
+    borderRadius: 0,
+    minHeight: 0,
     width: '100%'
   }
 
+  constructor(props) {
+    super(props)
+    this.state = {files: [], height: props.height}
+  }
+
   componentDidMount() {
     this.doc = this.node.contentDocument
-    this.forceUpdate()
+    const files = JSON.parse(document.body.dataset.files || '[]')
+    this.setState({files})
+    this.node.addEventListener('load', () => this.setState({loaded: true}))
   }
 
   getCssLinks() {
-    const context = JSON.parse(document.body.dataset.context || '{}')
-    const {files = []} = context
-    return files.filter(file => file.endsWith('.css'))
-      .map(file => <link rel="stylesheet" href={`${assetPrefix}/_next/${file}`} />)
+    const {files} = this.state
+    return files
+      ? files
+          .filter(file => file.endsWith('.css'))
+          .map(file => <link rel="stylesheet" href={`${assetPrefix}/_next/${file}`} key={file} />)
+      : null
+  }
+
+  getHeight() {
+    if (!this.node) return null
+    this.node.style.height = 'max-content'
+    const {body} = this.node.contentDocument
+    return body.offsetHeight > DEFAULT_IFRAME_HEIGHT ? body.offsetHeight : body.scrollHeight
   }
 
   render() {
     const {children, ...rest} = this.props
+    const height = this.getHeight()
+    const style = height ? {height} : null
     return (
-      <BorderBox as="iframe" {...rest} ref={node => (this.node = node)}>
-        {this.doc ? [
-          ReactDOM.createPortal(this.getCssLinks(), this.doc.head),
-          ReactDOM.createPortal(children, this.doc.body)
-        ] : null}
+      <BorderBox as="iframe" style={style} {...rest} ref={node => (this.node = node)}>
+        {this.doc
+          ? [ReactDOM.createPortal(this.getCssLinks(), this.doc.head), ReactDOM.createPortal(children, this.doc.body)]
+          : null}
       </BorderBox>
     )
   }