Pl/anvil embed frame updates

packages/anvil-embed-frame/anvil-embed-frame

@@ -0,0 +1 @@
+/Users/patricklo/work/react-ui/packages/anvil-embed-frame

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",

packages/anvil-embed-frame/src/index.js

@@ -1,72 +1,55 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
-/**
- * @typedef Props
- * @prop {String} iframeURL
- * @prop {Function} onEvent
- * @prop {String} anvilURL
- * @prop {String} scroll
- */
-
-/**
- * @extends React.Component<Props>
- */
-class AnvilEmbedFrame extends React.Component {
-  constructor (props) {
-    super(props)
-    this.iframeRef = React.createRef()
-  }
-
-  componentDidMount () {
-    const { scroll } = this.props
-    if (scroll) this.iframeRef.current.scrollIntoView({ behavior: scroll })
-    window.addEventListener('message', this.handleEvent)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('message', this.handleEvent)
-  }
-
-  /**
-   * @param {Object} options
-   * @param {String} options.origin
-   * @param {Object} options.data
-   */
-  handleEvent = ({ origin, data }) => {
-    const { anvilURL, onEvent } = this.props
-    if (anvilURL !== origin) return
-    if (typeof data === 'object') {
-      onEvent(data)
+const AnvilEmbedFrame = ( props ) => {
+const {
+  iframeURL,
+  onEvent = () => {},
+  anvilURL = 'https://app.useanvil.com',
+  scroll,
+  style,
+  iframeRef,
+  ...others
+} = props
+const ref = iframeRef || useRef(null)
+
+  useEffect(() => {
+    const handleEvent = ({ origin, data }) => {
+      if (anvilURL !== origin) return
+      if (typeof data === 'object') {
+        onEvent(data)
+      }
     }
-  }
 
-  render () {
-    const { iframeURL, onEvent, anvilURL, scroll, ...others } = this.props
-    return (
-      <iframe
-        id="anvil-embed-frame"
-        name="AnvilEmbedFrame"
-        {...others} // props above may be overriden
-        src={iframeURL}
-        ref={this.iframeRef}
-      >
-        <p id="anvil-iframe-warning">Your browser does not support iframes.</p>
-      </iframe>
-    )
-  }
-}
+    if (scroll) ref.current?.scrollIntoView({ behavior: scroll })
+    window.addEventListener('message', handleEvent)
 
-AnvilEmbedFrame.defaultProps = {
-  onEvent: () => {},
-  anvilURL: 'https://app.useanvil.com',
+    return () => {
+      window.removeEventListener('message', handleEvent)
+    }
+  }, [ anvilURL, onEvent, ref, scroll])
+
+  return (
+    <iframe
+      id="anvil-embed-frame"
+      name="AnvilEmbedFrame"
+      {...others} // props above may be overridden
+      src={iframeURL}
+      ref={ref}
+      style={style}
+    >
+      <p id="anvil-iframe-warning">Your browser does not support iframes.</p>
+    </iframe>
+  )
 }
 
 AnvilEmbedFrame.propTypes = {
   iframeURL: PropTypes.string.isRequired,
+  iframeRef: PropTypes.object,
   onLoad: PropTypes.func,
   onEvent: PropTypes.func,
   anvilURL: PropTypes.string,
+  style: PropTypes.object,
   scroll: PropTypes.oneOf(['auto', 'smooth']),
 }
 

packages/anvil-embed-frame/test/src/index.test.js

@@ -1,47 +1,75 @@
 import React from 'react'
 import AnvilEmbedFrame from '../../src/index'
+import { expect } from 'chai' // Assuming you're using Chai for assertions
 
 describe('AnvilEmbedFrame', function () {
-  def('handleEvent', () => sinon.spy())
-  def('anvilURL', 'https://app.useanvil.com')
+  let handleEvent
+  const anvilURL = 'https://app.useanvil.com'
+  const event = new window.Event('message', { bubbles: true })
 
-  def('render', () => shallow(
-    <AnvilEmbedFrame
-      iframeURL="http://localhost"
-      onEvent={$.handleEvent}
-      anvilURL={$.anvilURL}
-    />,
-  ))
+  beforeEach(() => {
+    handleEvent = sinon.spy()
+  })
 
-  it('renders', async function () {
-    const wrapper = $.render
-    expect(wrapper).to.exist
-    expect(wrapper.find('iframe')).to.exist
+  it('renders', function () {
+    const wrapper = shallow(
+      <AnvilEmbedFrame
+        iframeURL="http://localhost"
+        onEvent={handleEvent}
+        anvilURL={anvilURL}
+      />
+    )
+    expect(wrapper.exists()).to.be.true
+    expect(wrapper.find('iframe').exists()).to.be.true
   })
 
-  describe('onEvent', function () {
-    it('does not call onEvent when non-anvil url passed in', async function () {
+  describe('handleEvent', function () {
+    it('does not call onEvent when non-anvil url passed in', function () {
       const origin = 'https://chess.com'
       const data = { action: 'forgeComplete' }
-      const wrapper = $.render
-      wrapper.instance().handleEvent({ origin, data })
-      expect($.handleEvent).to.not.have.been.called
+      mount(
+        <AnvilEmbedFrame
+          iframeURL="http://localhost"
+          onEvent={handleEvent}
+          anvilURL={anvilURL}
+        />
+      )
+      event.data = data
+      event.origin = origin
+      window.dispatchEvent(event)
+      expect(handleEvent.called).to.be.false
     })
 
-    it('does not call onEvent when non-object data passed in', async function () {
-      const origin = $.anvilURL
+    it('does not call onEvent when non-object data passed in', function () {
+      const origin = anvilURL
       const data = 'signerComplete'
-      const wrapper = $.render
-      wrapper.instance().handleEvent({ origin, data })
-      expect($.handleEvent).to.not.have.been.called
+      mount(
+        <AnvilEmbedFrame
+          iframeURL="http://localhost"
+          onEvent={handleEvent}
+          anvilURL={anvilURL}
+        />
+      )
+      event.data = data
+      event.origin = origin
+      window.dispatchEvent(event)
+      expect(handleEvent.called).to.be.false
     })
 
-    it('calls onEvent successfully', async function () {
-      const origin = $.anvilURL
+    it('calls onEvent successfully', function () {
+      const origin = anvilURL
       const data = { action: 'castEdit' }
-      const wrapper = $.render
-      wrapper.instance().handleEvent({ origin, data })
-      expect($.handleEvent).to.have.been.calledWith(data)
+      mount(
+        <AnvilEmbedFrame
+          iframeURL="http://localhost"
+          onEvent={handleEvent}
+          anvilURL={anvilURL}
+        />
+      )
+      event.data = data
+      event.origin = origin
+      window.dispatchEvent(event)
+      expect(handleEvent.calledWith(data)).to.be.true
     })
   })
 })

packages/anvil-embed-frame/types/index.d.ts

@@ -1,55 +1,32 @@
+import PropTypes from 'prop-types';
+
 export default AnvilEmbedFrame;
 export type Props = {
   iframeURL: string;
-  onEvent: Function;
+  onEvent: (event: any) => void;
   anvilURL: string;
+  iframeRef: React.RefObject<any>;
   enableDefaultStyles: boolean;
+  style: any;
   scroll: string;
 };
-/**
- * @typedef Props
- * @prop {String} iframeURL
- * @prop {Function} onEvent
- * @prop {String} anvilURL
- * @prop {boolean} enableDefaultStyles
- * @prop {String} scroll
- */
-/**
- * @extends React.Component<Props>
- */
-declare class AnvilEmbedFrame extends React.Component<Props, any, any> {
-  constructor(props: any);
-  iframeRef: React.RefObject<any>;
-  componentDidMount(): void;
-  componentWillUnmount(): void;
-  /**
-   * @param {Object} options
-   * @param {String} options.origin
-   * @param {Object} options.data
-   */
-   handleEvent: ({ origin, data }: {
-    origin: string;
-    data: object;
-   }) => void;
-   render() : JSX.Element;
-}
+
+declare function AnvilEmbedFrame(props: Props): JSX.Element;
+
 declare namespace AnvilEmbedFrame {
   namespace defaultProps {
     function onEvent(): void;
     const anvilURL: string;
     const enableDefaultStyles: boolean;
   }
+
   namespace propTypes {
-    export const iframeURL: PropTypes.Requireable<string>;
-    const onEvent_1: PropTypes.Validator<(...args: any[]) => any>;
-    export { onEvent_1 as onEvent };
-    const anvilURL_1: PropTypes.Requireable<string>;
-    export { anvilURL_1 as anvilURL };
-    const enableDefaultStyles_1: PropTypes.Requireable<boolean>;
-    export { enableDefaultStyles_1 as enableDefaultStyles };
-    export const scroll: PropTypes.Requireable<string>;
+    const iframeURL: PropTypes.Requireable<string>;
+    const onEvent: PropTypes.Requireable<(...args: any[]) => any>;
+    const anvilURL: PropTypes.Requireable<string>;
+    const iframeRef: PropTypes.Requireable<any>;
+    const style: PropTypes.Requireable<any>;
+    const enableDefaultStyles: PropTypes.Requireable<boolean>;
+    const scroll: PropTypes.Requireable<string>;
   }
 }
-import Reacat from "react";
-import PropTypes from "prop-types";
-//# sourceMappingURL=index.d.ts.map