From e690981cb714efc41d694e6cf91ff77904636483 Mon Sep 17 00:00:00 2001
From: patapat <patapat@gmail.com>
Date: Tue, 16 Apr 2024 17:41:37 -0700
Subject: [PATCH 1/2] Add style prop and add postMessage helper

---
 packages/anvil-embed-frame/src/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/anvil-embed-frame/src/index.js b/packages/anvil-embed-frame/src/index.js
index c18823f..59f4182 100644
--- a/packages/anvil-embed-frame/src/index.js
+++ b/packages/anvil-embed-frame/src/index.js
@@ -15,7 +15,8 @@ import PropTypes from 'prop-types'
 class AnvilEmbedFrame extends React.Component {
   constructor (props) {
     super(props)
-    this.iframeRef = React.createRef()
+    const { ref } = props
+    this.iframeRef = ref || React.createRef()
   }
 
   componentDidMount () {
@@ -28,6 +29,10 @@ class AnvilEmbedFrame extends React.Component {
     window.removeEventListener('message', this.handleEvent)
   }
 
+  postMessage = (message) => {
+    this.iframeRef.current.contentWindow.postMessage(message, '*')
+  }
+
   /**
    * @param {Object} options
    * @param {String} options.origin
@@ -42,7 +47,7 @@ class AnvilEmbedFrame extends React.Component {
   }
 
   render () {
-    const { iframeURL, onEvent, anvilURL, scroll, ...others } = this.props
+    const { iframeURL, onEvent, anvilURL, scroll, style, ...others } = this.props
     return (
       <iframe
         id="anvil-embed-frame"
@@ -50,6 +55,7 @@ class AnvilEmbedFrame extends React.Component {
         {...others} // props above may be overriden
         src={iframeURL}
         ref={this.iframeRef}
+        style={style}
       >
         <p id="anvil-iframe-warning">Your browser does not support iframes.</p>
       </iframe>
@@ -68,6 +74,8 @@ AnvilEmbedFrame.propTypes = {
   onEvent: PropTypes.func,
   anvilURL: PropTypes.string,
   scroll: PropTypes.oneOf(['auto', 'smooth']),
+  ref: PropTypes.object,
+  style: PropTypes.object,
 }
 
 export default AnvilEmbedFrame

From 7210ebd0a419778e7e655debf261baa5bac0f906 Mon Sep 17 00:00:00 2001
From: patapat <patapat@gmail.com>
Date: Wed, 17 Apr 2024 14:33:13 -0700
Subject: [PATCH 2/2] Add postMessage test

---
 packages/anvil-embed-frame/package.json          |  3 ++-
 packages/anvil-embed-frame/src/index.js          |  5 ++---
 .../anvil-embed-frame/test/src/index.test.js     | 16 ++++++++++++++++
 packages/anvil-embed-frame/types/index.d.ts      |  4 +++-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/anvil-embed-frame/package.json b/packages/anvil-embed-frame/package.json
index a45e167..e9bcbf4 100644
--- a/packages/anvil-embed-frame/package.json
+++ b/packages/anvil-embed-frame/package.json
@@ -11,7 +11,8 @@
     "build:changelog": "yarn auto-changelog",
     "pack": "yarn pack",
     "version": "yarn build:changelog && git add CHANGELOG.md",
-    "test": "yarn mocha --config ./test/mocha.js"
+    "test": "yarn mocha --config ./test/mocha.js",
+    "watch": "nodemon --watch src --exec 'yarn build'"
   },
   "repository": {
     "type": "git",
diff --git a/packages/anvil-embed-frame/src/index.js b/packages/anvil-embed-frame/src/index.js
index 59f4182..278d811 100644
--- a/packages/anvil-embed-frame/src/index.js
+++ b/packages/anvil-embed-frame/src/index.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types'
  * @prop {Function} onEvent
  * @prop {String} anvilURL
  * @prop {String} scroll
+ * @prop {object} style
  */
 
 /**
@@ -15,8 +16,7 @@ import PropTypes from 'prop-types'
 class AnvilEmbedFrame extends React.Component {
   constructor (props) {
     super(props)
-    const { ref } = props
-    this.iframeRef = ref || React.createRef()
+    this.iframeRef = React.createRef()
   }
 
   componentDidMount () {
@@ -74,7 +74,6 @@ AnvilEmbedFrame.propTypes = {
   onEvent: PropTypes.func,
   anvilURL: PropTypes.string,
   scroll: PropTypes.oneOf(['auto', 'smooth']),
-  ref: PropTypes.object,
   style: PropTypes.object,
 }
 
diff --git a/packages/anvil-embed-frame/test/src/index.test.js b/packages/anvil-embed-frame/test/src/index.test.js
index e3a5a7e..e4cb090 100644
--- a/packages/anvil-embed-frame/test/src/index.test.js
+++ b/packages/anvil-embed-frame/test/src/index.test.js
@@ -44,4 +44,20 @@ describe('AnvilEmbedFrame', function () {
       expect($.handleEvent).to.have.been.calledWith(data)
     })
   })
+
+  it('calls postMessage successfully', () => {
+    const wrapper = $.render
+    const iframe = wrapper.find('iframe')
+    const postMessage = sinon.spy()
+    const iframeMock = {
+      contentWindow: {
+        postMessage,
+      },
+    }
+
+    iframe.getElement().ref.current = iframeMock
+
+    wrapper.instance().postMessage({ action: 'test' })
+    expect(postMessage.called).to.be.equal(true)
+  })
 })
diff --git a/packages/anvil-embed-frame/types/index.d.ts b/packages/anvil-embed-frame/types/index.d.ts
index 6da62f4..58b6f21 100644
--- a/packages/anvil-embed-frame/types/index.d.ts
+++ b/packages/anvil-embed-frame/types/index.d.ts
@@ -13,6 +13,7 @@ export type Props = {
  * @prop {String} anvilURL
  * @prop {boolean} enableDefaultStyles
  * @prop {String} scroll
+ * @prop {object} style
  */
 /**
  * @extends React.Component<Props>
@@ -48,8 +49,9 @@ declare namespace AnvilEmbedFrame {
     const enableDefaultStyles_1: PropTypes.Requireable<boolean>;
     export { enableDefaultStyles_1 as enableDefaultStyles };
     export const scroll: PropTypes.Requireable<string>;
+    export const style: PropTypes.Requireable<object>;
   }
 }
 import Reacat from "react";
 import PropTypes from "prop-types";
-//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
+//# sourceMappingURL=index.d.ts.map