diff --git a/example/react/package-lock.json b/example/react/package-lock.json index c64198e28..3011be480 100644 --- a/example/react/package-lock.json +++ b/example/react/package-lock.json @@ -8,9 +8,8 @@ "name": "react", "version": "0.0.1", "dependencies": { - "@iframe-resizer/child": "^5.2.3", - "@iframe-resizer/core": "^5.2.3", - "@iframe-resizer/react": "^5.2.3", + "@iframe-resizer/child": "^5.3.0-beta.1", + "@iframe-resizer/react": "^5.3.0-beta.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -344,9 +343,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.25.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz", - "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==", + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", + "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" @@ -913,9 +912,9 @@ "license": "BSD-3-Clause" }, "node_modules/@iframe-resizer/child": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/@iframe-resizer/child/-/child-5.2.3.tgz", - "integrity": "sha512-YzwCZkbFMPn7OPmkb9om3/SoEn+BBrPUFfpwWqkuPR5IagWdcRARWBaBhazcTNNIdXDbkCdzA5Y38S4dqnSIiw==", + "version": "5.3.0-beta.1", + "resolved": "https://registry.npmjs.org/@iframe-resizer/child/-/child-5.3.0-beta.1.tgz", + "integrity": "sha512-PlUuAWV5JGrWKhspX15+fKjwhJSEdDwM/sfY9qwqyvRC1DTmOJjFrBchV4/3KQw6OmGWthhglFbFp3USXGMIUw==", "license": "GPL-3.0", "funding": { "type": "individual", @@ -923,9 +922,9 @@ } }, "node_modules/@iframe-resizer/core": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/@iframe-resizer/core/-/core-5.2.3.tgz", - "integrity": "sha512-xvE+d0gQatCqKEayPgvPVqXHqpNuqdjsgvnAxPP9mmgxEfmvGK0VVMvSnt4QtixK5Hxhl6129p+BkyPotXietQ==", + "version": "5.3.0-beta.1", + "resolved": "https://registry.npmjs.org/@iframe-resizer/core/-/core-5.3.0-beta.1.tgz", + "integrity": "sha512-N54WO2lPA8DsxwmMBjvLPa3dTpkwGt97NIHbbn3W2ZbPn3DI+uhsoEcv8iZMllhC1qH6VA3sS1D2PrFFcDioSg==", "license": "GPL-3.0", "funding": { "type": "individual", @@ -933,14 +932,13 @@ } }, "node_modules/@iframe-resizer/react": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/@iframe-resizer/react/-/react-5.2.3.tgz", - "integrity": "sha512-0tuWMvMsFUQWmTTrVs9tICO1yPegpQVIt7iW99rpie6e9JtOe6EddiPZeNzmo9R/kZey2jpsdrrZuabirmCgjw==", + "version": "5.3.0-beta.1", + "resolved": "https://registry.npmjs.org/@iframe-resizer/react/-/react-5.3.0-beta.1.tgz", + "integrity": "sha512-2DIqI3K6MzpWne0nPAsma0Qk6ewQTTMymCJFL5AfmfFB616pNtEQPLIOT6pizzReFC1LByL92DocioF9Uv+6sg==", "license": "GPL-3.0", "dependencies": { - "@babel/runtime": "^7.25.0", - "@iframe-resizer/core": "5.2.3", - "warning": "^4.0.3" + "@babel/runtime": "^7.25.6", + "@iframe-resizer/core": "5.3.0-beta.1" }, "funding": { "type": "individual", @@ -4525,15 +4523,6 @@ } } }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/example/react/package.json b/example/react/package.json index b31402327..dac66c40b 100644 --- a/example/react/package.json +++ b/example/react/package.json @@ -4,15 +4,14 @@ "version": "0.0.1", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --force", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { - "@iframe-resizer/child": "^5.2.3", - "@iframe-resizer/core": "^5.2.3", - "@iframe-resizer/react": "^5.2.3", + "@iframe-resizer/child": "^5.3.0-beta.1", + "@iframe-resizer/react": "^5.3.0-beta.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -26,4 +25,4 @@ "eslint-plugin-react-refresh": "^0.4.9", "vite": "^5.3.5" } -} +} \ No newline at end of file diff --git a/example/react/src/App.jsx b/example/react/src/App.jsx index 5eb368c02..77ebf2eb5 100644 --- a/example/react/src/App.jsx +++ b/example/react/src/App.jsx @@ -8,6 +8,7 @@ import './App.css' function App() { const iframeRef = useRef(null) const [messageData, setMessageData] = useState() + const [show, setShow] = useState(true) const onResized = (data) => setMessageData(data) @@ -20,17 +21,23 @@ function App() { return ( <>

@iframe-resizer/react example

- - + + {show && + <> + + + + + } ) } diff --git a/packages/core/index.js b/packages/core/index.js index 28e4ce15a..89d2f65c1 100644 --- a/packages/core/index.js +++ b/packages/core/index.js @@ -689,8 +689,9 @@ function chkEvent(iframeId, funcName, val) { } function removeIframeListeners(iframe) { - const iframeId = iframe.id - delete settings[iframeId] + const { id } = iframe + delete settings[id] + log(id, 'Disconnected from iframe') } function closeIFrame(iframe) { diff --git a/packages/react/index.jsx b/packages/react/index.jsx index 90e591c09..4afeea198 100644 --- a/packages/react/index.jsx +++ b/packages/react/index.jsx @@ -1,21 +1,21 @@ import connectResizer from '@iframe-resizer/core' import React, { useEffect, useImperativeHandle, useRef } from 'react' -import warning from 'warning' import filterIframeAttribs from '../common/filter-iframe-attribs' +// TODO: Add support for React.forwardRef() in next major version (Breaking change) function IframeResizer(props) { // eslint-disable-next-line react/prop-types - const { title, forwardRef, ...rest } = props + const { forwardRef, ...rest } = props const filteredProps = filterIframeAttribs(rest) const iframeRef = useRef(null) const onClose = () => { - warning( - !iframeRef.current, + console.warn( `[iframe-resizer/react][${iframeRef?.current?.id}] Close event ignored, to remove the iframe update your React component.`, ) - return !iframeRef.current // Allow React to close this + + return false } // This hook is only run once, as once iframe-resizer is bound, it will @@ -37,7 +37,8 @@ function IframeResizer(props) { }, })) - return