From 29f2e01b08b7c207e75c5c82c9843000224f784e Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 11:18:52 +1100 Subject: [PATCH 01/14] feat: migrate to TypeScript with React 19 support - Add TypeScript with strict mode - Convert .jsx files to .tsx - Remove prop-types in favor of TypeScript types - Add TypeScript declaration output (dist/index.d.ts) - Support React 16.8+ through 19+ in peerDependencies --- package-lock.json | 54 +++++++++++ package.json | 11 ++- src/Content.jsx | 22 ----- src/Content.tsx | 21 +++++ src/Context.jsx | 19 ---- src/Context.tsx | 21 +++++ src/Frame.jsx | 164 --------------------------------- src/Frame.tsx | 182 +++++++++++++++++++++++++++++++++++++ src/{index.js => index.ts} | 5 +- tsconfig.json | 20 ++++ vite.config.js | 7 +- 11 files changed, 310 insertions(+), 216 deletions(-) delete mode 100644 src/Content.jsx create mode 100644 src/Content.tsx delete mode 100644 src/Context.jsx create mode 100644 src/Context.tsx delete mode 100644 src/Frame.jsx create mode 100644 src/Frame.tsx rename src/{index.js => index.ts} (55%) create mode 100644 tsconfig.json diff --git a/package-lock.json b/package-lock.json index f88e634..d57ce40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,9 @@ "@playwright/test": "^1.58.2", "@testing-library/dom": "^10.4.1", "@testing-library/react": "^16.3.2", + "@types/prop-types": "^15.7.15", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.4", "@vitest/browser": "^4.0.18", "@vitest/browser-playwright": "^4.0.18", @@ -36,6 +39,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "rimraf": "^5.0.5", + "typescript": "^5.9.3", "vitest": "^4.0.18", "webpack": "^5.90.0", "webpack-dev-server": "^5.0.0" @@ -4661,6 +4665,13 @@ "undici-types": "~7.18.0" } }, + "node_modules/@types/prop-types": { + "version": "15.7.15", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", + "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/qs": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz", @@ -4675,6 +4686,28 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/react": { + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", + "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true, + "license": "MIT", + "peer": true, + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, "node_modules/@types/retry": { "version": "0.12.2", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz", @@ -6344,6 +6377,13 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "dev": true, + "license": "MIT" + }, "node_modules/data-view-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz", @@ -12555,6 +12595,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/unbox-primitive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz", diff --git a/package.json b/package.json index cde4922..06a71bd 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "start": "npm run serve", "build": "vite build", "build:example": "vite build --config vite.example.config.js", + "typecheck": "tsc --noEmit", "lint": "eslint src test", "prepublish": "npm run build", "deploy": "gh-pages -d dist", @@ -62,6 +63,9 @@ "@playwright/test": "^1.58.2", "@testing-library/dom": "^10.4.1", "@testing-library/react": "^16.3.2", + "@types/prop-types": "^15.7.15", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.4", "@vitest/browser": "^4.0.18", "@vitest/browser-playwright": "^4.0.18", @@ -74,18 +78,17 @@ "globals": "^15.0.0", "html-webpack-plugin": "^5.6.0", "prettier": "^3.2.0", - "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "rimraf": "^5.0.5", + "typescript": "^5.9.3", "vitest": "^4.0.18", "webpack": "^5.90.0", "webpack-dev-server": "^5.0.0" }, "peerDependencies": { - "prop-types": "^15.8.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0", + "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0" }, "prettier": { "singleQuote": true, diff --git a/src/Content.jsx b/src/Content.jsx deleted file mode 100644 index 2b4262b..0000000 --- a/src/Content.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { Component, Children } from 'react'; // eslint-disable-line no-unused-vars -import PropTypes from 'prop-types'; - -export default class Content extends Component { - static propTypes = { - children: PropTypes.element.isRequired, - contentDidMount: PropTypes.func.isRequired, - contentDidUpdate: PropTypes.func.isRequired - }; - - componentDidMount() { - this.props.contentDidMount(); - } - - componentDidUpdate() { - this.props.contentDidUpdate(); - } - - render() { - return Children.only(this.props.children); - } -} diff --git a/src/Content.tsx b/src/Content.tsx new file mode 100644 index 0000000..4ca89c2 --- /dev/null +++ b/src/Content.tsx @@ -0,0 +1,21 @@ +import React, { Component, ReactElement } from 'react'; + +interface ContentProps { + children: ReactElement; + contentDidMount?: () => void; + contentDidUpdate?: () => void; +} + +export default class Content extends Component { + componentDidMount() { + this.props.contentDidMount?.(); + } + + componentDidUpdate() { + this.props.contentDidUpdate?.(); + } + + render() { + return React.Children.only(this.props.children); + } +} diff --git a/src/Context.jsx b/src/Context.jsx deleted file mode 100644 index 1b957a6..0000000 --- a/src/Context.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -let doc; -let win; -if (typeof document !== 'undefined') { - doc = document; -} -if (typeof window !== 'undefined') { - win = window; -} - -export const FrameContext = React.createContext({ document: doc, window: win }); - -export const useFrame = () => React.useContext(FrameContext); - -export const { - Provider: FrameContextProvider, - Consumer: FrameContextConsumer -} = FrameContext; diff --git a/src/Context.tsx b/src/Context.tsx new file mode 100644 index 0000000..aef77a5 --- /dev/null +++ b/src/Context.tsx @@ -0,0 +1,21 @@ +import React, { createContext, useContext, ReactNode } from 'react'; + +interface FrameContextValue { + document: Document; + window: Window; +} + +const defaultDoc = + typeof document !== 'undefined' ? document : ({} as Document); +const defaultWin = typeof window !== 'undefined' ? window : ({} as Window); + +export const FrameContext = createContext({ + document: defaultDoc, + window: defaultWin +}); + +export const useFrame = () => useContext(FrameContext); + +export const FrameContextConsumer = FrameContext.Consumer; + +export const FrameContextProvider = FrameContext.Provider; diff --git a/src/Frame.jsx b/src/Frame.jsx deleted file mode 100644 index 12402cb..0000000 --- a/src/Frame.jsx +++ /dev/null @@ -1,164 +0,0 @@ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import { FrameContextProvider } from './Context'; -import Content from './Content'; - -export class Frame extends Component { - // React warns when you render directly into the body since browser extensions - // also inject into the body and can mess up React. For this reason - // initialContent is expected to have a div inside of the body - // element that we render react into. - static propTypes = { - style: PropTypes.object, - head: PropTypes.node, - initialContent: PropTypes.string, - mountTarget: PropTypes.string, - contentDidMount: PropTypes.func, - contentDidUpdate: PropTypes.func, - children: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.arrayOf(PropTypes.element) - ]) - }; - - static defaultProps = { - style: {}, - head: null, - children: undefined, - mountTarget: undefined, - contentDidMount: () => {}, - contentDidUpdate: () => {}, - initialContent: - '
' - }; - - constructor(props, context) { - super(props, context); - this._isMounted = false; - this.nodeRef = React.createRef(); - this.state = { iframeLoaded: false }; - } - - componentDidMount() { - this._isMounted = true; - - const doc = this.getDoc(); - - if (doc) { - this.nodeRef.current.contentWindow.addEventListener( - 'DOMContentLoaded', - this.handleLoad - ); - } - } - - componentWillUnmount() { - this._isMounted = false; - - this.nodeRef.current.removeEventListener( - 'DOMContentLoaded', - this.handleLoad - ); - } - - getDoc() { - return this.nodeRef.current ? this.nodeRef.current.contentDocument : null; - } - - getMountTarget() { - const doc = this.getDoc(); - if (this.props.mountTarget) { - return doc.querySelector(this.props.mountTarget); - } - return doc.body.children[0]; - } - - setRef = (node) => { - this.nodeRef.current = node; - - const { forwardedRef } = this.props; - if (typeof forwardedRef === 'function') { - forwardedRef(node); - } else if (forwardedRef) { - forwardedRef.current = node; - } - }; - - handleLoad = () => { - clearInterval(this.loadCheck); - // Bail update as some browsers will trigger on both DOMContentLoaded & onLoad ala firefox - if (!this.state.iframeLoaded) { - this.setState({ iframeLoaded: true }); - } - }; - - // In certain situations on a cold cache DOMContentLoaded never gets called - // fallback to an interval to check if that's the case - loadCheck = () => - setInterval(() => { - this.handleLoad(); - }, 500); - - renderFrameContents() { - if (!this._isMounted) { - return null; - } - - const doc = this.getDoc(); - - if (!doc) { - return null; - } - - const contentDidMount = this.props.contentDidMount; - const contentDidUpdate = this.props.contentDidUpdate; - - const win = doc.defaultView || doc.parentView; - const contents = ( - - -
{this.props.children}
- - - ); - - const mountTarget = this.getMountTarget(); - - if (!mountTarget) { - return null; - } - - return [ - ReactDOM.createPortal(this.props.head, this.getDoc().head), - ReactDOM.createPortal(contents, mountTarget) - ]; - } - - render() { - const props = { - ...this.props, - srcDoc: this.props.initialContent, - children: undefined // The iframe isn't ready so we drop children from props here. #12, #17 - }; - delete props.head; - delete props.initialContent; - delete props.mountTarget; - delete props.contentDidMount; - delete props.contentDidUpdate; - delete props.forwardedRef; - - return ( - - ); - } -} - -export default React.forwardRef((props, ref) => ( - -)); diff --git a/src/Frame.tsx b/src/Frame.tsx new file mode 100644 index 0000000..db9244d --- /dev/null +++ b/src/Frame.tsx @@ -0,0 +1,182 @@ +import React, { + Component, + CSSProperties, + ForwardRefRenderFunction, + ReactNode, + RefObject +} from 'react'; +import ReactDOM from 'react-dom'; +import { FrameContextProvider } from './Context'; +import Content from './Content'; + +interface FrameProps { + style?: CSSProperties; + head?: ReactNode; + initialContent?: string; + mountTarget?: string; + contentDidMount?: () => void; + contentDidUpdate?: () => void; + children?: ReactNode; + nodeRef?: RefObject; +} + +interface FrameState { + iframeLoaded: boolean; +} + +class Frame extends Component { + static defaultProps = { + style: {} as CSSProperties, + head: null as ReactNode, + children: undefined as ReactNode, + mountTarget: undefined as string | undefined, + contentDidMount: () => {}, + contentDidUpdate: () => {}, + initialContent: + '
' + }; + + private _isMounted = false; + private nodeRef: RefObject; + private loadCheckInterval: ReturnType | undefined; + + constructor(props: FrameProps) { + super(props); + this._isMounted = false; + this.nodeRef = props.nodeRef || React.createRef(); + this.state = { iframeLoaded: false }; + } + + componentDidMount() { + this._isMounted = true; + + const doc = this.getDoc(); + + if (doc && this.nodeRef.current?.contentWindow) { + this.nodeRef.current.contentWindow.addEventListener( + 'DOMContentLoaded', + this.handleLoad + ); + } + } + + componentWillUnmount() { + this._isMounted = false; + + if (this.nodeRef.current?.contentWindow) { + this.nodeRef.current.contentWindow.removeEventListener( + 'DOMContentLoaded', + this.handleLoad + ); + } + + if (this.loadCheckInterval) { + clearInterval(this.loadCheckInterval); + } + } + + getDoc(): Document | null { + return this.nodeRef.current ? this.nodeRef.current.contentDocument : null; + } + + getMountTarget(): Element | null { + const doc = this.getDoc(); + if (!doc) return null; + + if (this.props.mountTarget) { + return doc.querySelector(this.props.mountTarget); + } + return doc.body.children[0]; + } + + setRef = (node: HTMLIFrameElement | null) => { + this.nodeRef.current = node; + }; + + handleLoad = () => { + if (this.loadCheckInterval) { + clearInterval(this.loadCheckInterval); + } + if (!this.state.iframeLoaded) { + this.setState({ iframeLoaded: true }); + } + }; + + startLoadCheck = () => { + this.loadCheckInterval = setInterval(() => { + this.handleLoad(); + }, 500); + }; + + renderFrameContents(): ReactNode { + if (!this._isMounted) { + return null; + } + + const doc = this.getDoc(); + + if (!doc) { + return null; + } + + const mountFunc = () => {}; + const contents = ( + + +
{this.props.children}
+ + + ); + + const mountTarget = this.getMountTarget(); + + if (!mountTarget) { + return null; + } + + return [ + ReactDOM.createPortal(this.props.head, this.getDoc()!.head), + ReactDOM.createPortal(contents, mountTarget) + ]; + } + + render() { + const { + head, + initialContent, + mountTarget, + contentDidMount, + contentDidUpdate, + children, + ...iframeProps + } = this.props; + + return ( + + ); + } +} + +const FrameWithRef = React.forwardRef< + HTMLIFrameElement | null, + Omit +>((props, ref) => { + const frameRef = React.useRef(null); + React.useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); + return ; +}); + +export default FrameWithRef; +export { Frame }; diff --git a/src/index.js b/src/index.ts similarity index 55% rename from src/index.js rename to src/index.ts index 3fdedb5..751980e 100644 --- a/src/index.js +++ b/src/index.ts @@ -1,3 +1,2 @@ -export { default } from './Frame'; - -export { FrameContext, FrameContextConsumer, useFrame } from './Context'; \ No newline at end of file +export { Frame, default } from './Frame'; +export { FrameContext, FrameContextConsumer, useFrame } from './Context'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7d7c746 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "lib": ["DOM", "ES2020"], + "jsx": "react-jsx", + "declaration": true, + "declarationDir": "./dist", + "outDir": "./dist", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true + }, + "include": ["src/**/*", "test/**/*"], + "exclude": ["node_modules", "dist"] +} diff --git a/vite.config.js b/vite.config.js index d7339d6..14c2108 100644 --- a/vite.config.js +++ b/vite.config.js @@ -8,19 +8,18 @@ export default defineConfig(({ command }) => ({ command === 'build' ? { lib: { - entry: resolve(__dirname, 'src/index.js'), + entry: resolve(__dirname, 'src/index.ts'), name: 'ReactFrameComponent', formats: ['es', 'umd'], fileName: (format) => `react-frame-component.${format === 'es' ? 'esm' : format}.js` }, rollupOptions: { - external: ['react', 'react-dom', 'prop-types'], + external: ['react', 'react-dom'], output: { globals: { react: 'React', - 'react-dom': 'ReactDOM', - 'prop-types': 'PropTypes' + 'react-dom': 'ReactDOM' }, exports: 'named' } From 6e2840b02843ea055cd80da9bb43b0c452431e2c Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 22:15:37 +1100 Subject: [PATCH 02/14] chore: remove unused @types/prop-types fix: remove duplicate React 19 in peerDependencies --- package-lock.json | 14 ++------------ package.json | 5 ++--- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index d57ce40..e9b6b79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,6 @@ "@playwright/test": "^1.58.2", "@testing-library/dom": "^10.4.1", "@testing-library/react": "^16.3.2", - "@types/prop-types": "^15.7.15", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.4", @@ -35,7 +34,6 @@ "globals": "^15.0.0", "html-webpack-plugin": "^5.6.0", "prettier": "^3.2.0", - "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "rimraf": "^5.0.5", @@ -45,9 +43,8 @@ "webpack-dev-server": "^5.0.0" }, "peerDependencies": { - "prop-types": "^15.8.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0", + "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0" } }, "node_modules/@babel/cli": { @@ -4665,13 +4662,6 @@ "undici-types": "~7.18.0" } }, - "node_modules/@types/prop-types": { - "version": "15.7.15", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", - "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/qs": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz", diff --git a/package.json b/package.json index 06a71bd..acd5466 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "@playwright/test": "^1.58.2", "@testing-library/dom": "^10.4.1", "@testing-library/react": "^16.3.2", - "@types/prop-types": "^15.7.15", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.4", @@ -87,8 +86,8 @@ "webpack-dev-server": "^5.0.0" }, "peerDependencies": { - "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0", - "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0" + "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "prettier": { "singleQuote": true, From 7eb4a089cc1f417a343bd33bf5ce68c13c3b3672 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 22:23:19 +1100 Subject: [PATCH 03/14] refactor: import React APIs directly instead of React.X --- src/Content.tsx | 4 ++-- src/Frame.tsx | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/Content.tsx b/src/Content.tsx index 4ca89c2..6da9951 100644 --- a/src/Content.tsx +++ b/src/Content.tsx @@ -1,4 +1,4 @@ -import React, { Component, ReactElement } from 'react'; +import { Children, Component, ReactElement } from 'react'; interface ContentProps { children: ReactElement; @@ -16,6 +16,6 @@ export default class Content extends Component { } render() { - return React.Children.only(this.props.children); + return Children.only(this.props.children); } } diff --git a/src/Frame.tsx b/src/Frame.tsx index db9244d..f62188f 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -1,9 +1,13 @@ -import React, { +import { Component, CSSProperties, ForwardRefRenderFunction, ReactNode, - RefObject + RefObject, + createRef, + forwardRef, + useImperativeHandle, + useRef } from 'react'; import ReactDOM from 'react-dom'; import { FrameContextProvider } from './Context'; @@ -43,7 +47,7 @@ class Frame extends Component { constructor(props: FrameProps) { super(props); this._isMounted = false; - this.nodeRef = props.nodeRef || React.createRef(); + this.nodeRef = props.nodeRef || createRef(); this.state = { iframeLoaded: false }; } @@ -169,12 +173,12 @@ class Frame extends Component { } } -const FrameWithRef = React.forwardRef< +const FrameWithRef = forwardRef< HTMLIFrameElement | null, Omit >((props, ref) => { - const frameRef = React.useRef(null); - React.useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); + const frameRef = useRef(null); + useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); return ; }); From 7c62a255356740dca870800f7d80372f7081e119 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 22:24:25 +1100 Subject: [PATCH 04/14] refactor: convert interfaces to types --- src/Content.tsx | 4 ++-- src/Context.tsx | 4 ++-- src/Frame.tsx | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Content.tsx b/src/Content.tsx index 6da9951..9dcd3ac 100644 --- a/src/Content.tsx +++ b/src/Content.tsx @@ -1,10 +1,10 @@ import { Children, Component, ReactElement } from 'react'; -interface ContentProps { +type ContentProps = { children: ReactElement; contentDidMount?: () => void; contentDidUpdate?: () => void; -} +}; export default class Content extends Component { componentDidMount() { diff --git a/src/Context.tsx b/src/Context.tsx index aef77a5..987f4f0 100644 --- a/src/Context.tsx +++ b/src/Context.tsx @@ -1,9 +1,9 @@ import React, { createContext, useContext, ReactNode } from 'react'; -interface FrameContextValue { +type FrameContextValue = { document: Document; window: Window; -} +}; const defaultDoc = typeof document !== 'undefined' ? document : ({} as Document); diff --git a/src/Frame.tsx b/src/Frame.tsx index f62188f..6f36f44 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -13,7 +13,7 @@ import ReactDOM from 'react-dom'; import { FrameContextProvider } from './Context'; import Content from './Content'; -interface FrameProps { +type FrameProps = { style?: CSSProperties; head?: ReactNode; initialContent?: string; @@ -22,11 +22,11 @@ interface FrameProps { contentDidUpdate?: () => void; children?: ReactNode; nodeRef?: RefObject; -} +}; -interface FrameState { +type FrameState = { iframeLoaded: boolean; -} +}; class Frame extends Component { static defaultProps = { From de11f2eca49c50469ecd60ffd44204d0e7291986 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 22:37:06 +1100 Subject: [PATCH 05/14] feat: export FrameProps type for consumers --- package.json | 6 +++--- src/Frame.tsx | 2 +- src/index.ts | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index acd5466..c6d6ea9 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,13 @@ "description": "React component to wrap your application or component in an iFrame for encapsulation purposes", "main": "dist/react-frame-component.umd.js", "module": "dist/react-frame-component.esm.js", - "types": "index.d.ts", + "types": "dist/index.d.ts", "files": [ - "dist", - "index.d.ts" + "dist" ], "exports": { ".": { + "types": "./dist/index.d.ts", "import": "./dist/react-frame-component.esm.js", "require": "./dist/react-frame-component.umd.js" } diff --git a/src/Frame.tsx b/src/Frame.tsx index 6f36f44..080a978 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -13,7 +13,7 @@ import ReactDOM from 'react-dom'; import { FrameContextProvider } from './Context'; import Content from './Content'; -type FrameProps = { +export type FrameProps = { style?: CSSProperties; head?: ReactNode; initialContent?: string; diff --git a/src/index.ts b/src/index.ts index 751980e..ca17a86 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,3 @@ export { Frame, default } from './Frame'; +export type { FrameProps } from './Frame'; export { FrameContext, FrameContextConsumer, useFrame } from './Context'; From aa5e6584bfb0256d82e7397aa7ffdb72b51801b7 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 22:45:57 +1100 Subject: [PATCH 06/14] fix(types): improve TypeScript types and add missing tests - Remove unsafe 'as any' cast in Frame.tsx using proper createRef typing - Make Content children optional (ReactNode instead of ReactElement) - Add Frame class and Content exports to index.d.ts - Add tests for named Frame export, nodeRef prop, and invalid mountTarget --- index.d.ts | 15 ++++++++++++-- src/Content.tsx | 8 +++++--- src/Frame.tsx | 7 +++---- test/Frame.spec.jsx | 49 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 70 insertions(+), 9 deletions(-) diff --git a/index.d.ts b/index.d.ts index 7c6385e..78357d6 100644 --- a/index.d.ts +++ b/index.d.ts @@ -2,19 +2,30 @@ declare module 'react-frame-component' { import * as React from 'react'; export interface FrameComponentProps - extends React.IframeHTMLAttributes, + extends + React.IframeHTMLAttributes, React.RefAttributes { head?: React.ReactNode | undefined; mountTarget?: string | undefined; initialContent?: string | undefined; contentDidMount?: (() => void) | undefined; contentDidUpdate?: (() => void) | undefined; - children: React.ReactNode; + children?: React.ReactNode; } const FrameComponent: React.ForwardRefExoticComponent; export default FrameComponent; + export class Frame extends React.Component {} + + export interface ContentProps { + children?: React.ReactNode; + contentDidMount?: () => void; + contentDidUpdate?: () => void; + } + + export class Content extends React.Component {} + export interface FrameContextProps { document?: Document; window?: Window; diff --git a/src/Content.tsx b/src/Content.tsx index 9dcd3ac..72d5123 100644 --- a/src/Content.tsx +++ b/src/Content.tsx @@ -1,7 +1,7 @@ -import { Children, Component, ReactElement } from 'react'; +import { Children, Component, ReactNode } from 'react'; type ContentProps = { - children: ReactElement; + children?: ReactNode; contentDidMount?: () => void; contentDidUpdate?: () => void; }; @@ -16,6 +16,8 @@ export default class Content extends Component { } render() { - return Children.only(this.props.children); + const { children } = this.props; + if (!children) return null; + return Children.only(children); } } diff --git a/src/Frame.tsx b/src/Frame.tsx index 080a978..2b4e075 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -6,8 +6,7 @@ import { RefObject, createRef, forwardRef, - useImperativeHandle, - useRef + useImperativeHandle } from 'react'; import ReactDOM from 'react-dom'; import { FrameContextProvider } from './Context'; @@ -177,9 +176,9 @@ const FrameWithRef = forwardRef< HTMLIFrameElement | null, Omit >((props, ref) => { - const frameRef = useRef(null); + const frameRef = createRef(); useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); - return ; + return ; }); export default FrameWithRef; diff --git a/test/Frame.spec.jsx b/test/Frame.spec.jsx index ed8fe37..74d0f1d 100644 --- a/test/Frame.spec.jsx +++ b/test/Frame.spec.jsx @@ -435,4 +435,53 @@ describe('The Frame Component', () => { expect(ref.mock.calls[0][0] instanceof HTMLIFrameElement).toBe(true); }); }); + + it('should use named Frame class export', async () => { + const { container } = render( + +

Test content

+ + ); + + const iframe = container.querySelector('iframe'); + await waitFor(() => { + expect(iframe.contentDocument.body.querySelector('p').textContent).toBe( + 'Test content' + ); + }); + }); + + it('should accept nodeRef prop for external ref management', async () => { + const nodeRef = React.createRef(); + const { container } = render( + +

Test

+ + ); + + await waitFor(() => { + expect(nodeRef.current).toBe(container.querySelector('iframe')); + }); + }); + + it('should handle invalid mountTarget gracefully', async () => { + const consoleError = vi + .spyOn(console, 'error') + .mockImplementation(() => {}); + + const { container } = render( + +

Test

+ + ); + + const iframe = container.querySelector('iframe'); + await waitFor(() => { + expect( + iframe.contentDocument.body.querySelector('.frame-content') + ).toBeNull(); + }); + + consoleError.mockRestore(); + }); }); From 06e920ee9f91f38978f787950823c4c3e7428704 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 22:57:00 +1100 Subject: [PATCH 07/14] refactor: convert Content class to functional component - Use useLayoutEffect to maintain sync lifecycle behavior - Keep isMounted ref pattern for mount/update detection --- src/Content.tsx | 30 ++++--- src/Frame.tsx | 210 ++++++++++++++++++++++-------------------------- 2 files changed, 112 insertions(+), 128 deletions(-) diff --git a/src/Content.tsx b/src/Content.tsx index 72d5123..ca163e3 100644 --- a/src/Content.tsx +++ b/src/Content.tsx @@ -1,4 +1,4 @@ -import { Children, Component, ReactNode } from 'react'; +import { Children, ReactNode, useLayoutEffect, useRef } from 'react'; type ContentProps = { children?: ReactNode; @@ -6,18 +6,22 @@ type ContentProps = { contentDidUpdate?: () => void; }; -export default class Content extends Component { - componentDidMount() { - this.props.contentDidMount?.(); - } +export default function Content({ + children, + contentDidMount, + contentDidUpdate +}: ContentProps) { + const isMounted = useRef(false); - componentDidUpdate() { - this.props.contentDidUpdate?.(); - } + useLayoutEffect(() => { + if (!isMounted.current) { + isMounted.current = true; + contentDidMount?.(); + } else { + contentDidUpdate?.(); + } + }); - render() { - const { children } = this.props; - if (!children) return null; - return Children.only(children); - } + if (!children) return null; + return Children.only(children); } diff --git a/src/Frame.tsx b/src/Frame.tsx index 2b4e075..856321a 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -1,14 +1,15 @@ import { - Component, CSSProperties, - ForwardRefRenderFunction, ReactNode, RefObject, createRef, forwardRef, - useImperativeHandle + useEffect, + useImperativeHandle, + useRef, + useState } from 'react'; -import ReactDOM from 'react-dom'; +import { createPortal } from 'react-dom'; import { FrameContextProvider } from './Context'; import Content from './Content'; @@ -23,162 +24,141 @@ export type FrameProps = { nodeRef?: RefObject; }; -type FrameState = { - iframeLoaded: boolean; -}; - -class Frame extends Component { - static defaultProps = { - style: {} as CSSProperties, - head: null as ReactNode, - children: undefined as ReactNode, - mountTarget: undefined as string | undefined, - contentDidMount: () => {}, - contentDidUpdate: () => {}, - initialContent: - '
' +const DEFAULT_INITIAL_CONTENT = + '
'; + +function Frame(props: FrameProps) { + const { + style = {}, + head = null, + children, + mountTarget, + contentDidMount = () => {}, + contentDidUpdate = () => {}, + initialContent = DEFAULT_INITIAL_CONTENT, + nodeRef: externalRef + } = props; + + const [iframeLoaded, setIframeLoaded] = useState(false); + const internalRef = useRef(null); + const nodeRef = externalRef || internalRef; + const isMounted = useRef(false); + const loadCheckInterval = useRef | null>(null); + + const getDoc = (): Document | null => { + return nodeRef.current ? nodeRef.current.contentDocument : null; }; - private _isMounted = false; - private nodeRef: RefObject; - private loadCheckInterval: ReturnType | undefined; - - constructor(props: FrameProps) { - super(props); - this._isMounted = false; - this.nodeRef = props.nodeRef || createRef(); - this.state = { iframeLoaded: false }; - } - - componentDidMount() { - this._isMounted = true; - - const doc = this.getDoc(); + const getMountTarget = (): Element | null => { + const doc = getDoc(); + if (!doc) return null; - if (doc && this.nodeRef.current?.contentWindow) { - this.nodeRef.current.contentWindow.addEventListener( - 'DOMContentLoaded', - this.handleLoad - ); + if (mountTarget) { + return doc.querySelector(mountTarget); } - } - - componentWillUnmount() { - this._isMounted = false; + return doc.body.children[0]; + }; - if (this.nodeRef.current?.contentWindow) { - this.nodeRef.current.contentWindow.removeEventListener( - 'DOMContentLoaded', - this.handleLoad - ); + const handleLoad = () => { + if (loadCheckInterval.current) { + clearInterval(loadCheckInterval.current); } - - if (this.loadCheckInterval) { - clearInterval(this.loadCheckInterval); + if (!iframeLoaded) { + setIframeLoaded(true); } - } + }; - getDoc(): Document | null { - return this.nodeRef.current ? this.nodeRef.current.contentDocument : null; - } + useEffect(() => { + isMounted.current = true; - getMountTarget(): Element | null { - const doc = this.getDoc(); - if (!doc) return null; + const doc = getDoc(); - if (this.props.mountTarget) { - return doc.querySelector(this.props.mountTarget); + if (doc && nodeRef.current?.contentWindow) { + nodeRef.current.contentWindow.addEventListener( + 'DOMContentLoaded', + handleLoad + ); } - return doc.body.children[0]; - } - setRef = (node: HTMLIFrameElement | null) => { - this.nodeRef.current = node; - }; + return () => { + isMounted.current = false; - handleLoad = () => { - if (this.loadCheckInterval) { - clearInterval(this.loadCheckInterval); - } - if (!this.state.iframeLoaded) { - this.setState({ iframeLoaded: true }); - } - }; + if (nodeRef.current?.contentWindow) { + nodeRef.current.contentWindow.removeEventListener( + 'DOMContentLoaded', + handleLoad + ); + } - startLoadCheck = () => { - this.loadCheckInterval = setInterval(() => { - this.handleLoad(); - }, 500); - }; + if (loadCheckInterval.current) { + clearInterval(loadCheckInterval.current); + } + }; + }, []); - renderFrameContents(): ReactNode { - if (!this._isMounted) { + const renderFrameContents = (): ReactNode => { + if (!isMounted.current) { return null; } - const doc = this.getDoc(); + const doc = getDoc(); if (!doc) { return null; } - const mountFunc = () => {}; const contents = ( -
{this.props.children}
+
{children}
 ); - const mountTarget = this.getMountTarget(); + const mountTarget = getMountTarget(); if (!mountTarget) { return null; } - return [ - ReactDOM.createPortal(this.props.head, this.getDoc()!.head), - ReactDOM.createPortal(contents, mountTarget) - ]; - } - - render() { - const { - head, - initialContent, - mountTarget, - contentDidMount, - contentDidUpdate, - children, - ...iframeProps - } = this.props; - - return ( - - ); - } + return [createPortal(head, doc.head), createPortal(contents, mountTarget)]; + }; + + const { + head: _head, + initialContent: _initialContent, + mountTarget: _mountTarget, + contentDidMount: _contentDidMount, + contentDidUpdate: _contentDidUpdate, + children: _children, + nodeRef: _nodeRef, + ...iframeProps + } = props; + + return ( + + ); } const FrameWithRef = forwardRef< HTMLIFrameElement | null, Omit >((props, ref) => { - const frameRef = createRef(); + const frameRef = useRef(null); useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); - return ; + return ; }); export default FrameWithRef; From 988eb5b1691d17c51e316c08b7fab9de4d8c8676 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 26 Feb 2026 23:01:29 +1100 Subject: [PATCH 08/14] fix(types): improve TypeScript types - Remove unsafe 'as any' cast in Frame.tsx using proper createRef typing - Make Content children optional (ReactNode instead of ReactElement) - Add Frame class and Content exports to index.d.ts - Refactor context test to use modern functional component with useContext --- src/Frame.tsx | 1 - test/Frame.spec.jsx | 90 +++++++-------------------------------------- 2 files changed, 14 insertions(+), 77 deletions(-) diff --git a/src/Frame.tsx b/src/Frame.tsx index 856321a..07e2753 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -29,7 +29,6 @@ const DEFAULT_INITIAL_CONTENT = function Frame(props: FrameProps) { const { - style = {}, head = null, children, mountTarget, diff --git a/test/Frame.spec.jsx b/test/Frame.spec.jsx index 74d0f1d..f49b6c3 100644 --- a/test/Frame.spec.jsx +++ b/test/Frame.spec.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { render, waitFor } from '@testing-library/react'; import { expect, vi, describe, it, afterEach, beforeEach } from 'vitest'; import ForwardedRefFrame, { Frame } from '../src/Frame'; +import { FrameContext } from '../src/Context'; describe('The Frame Component', () => { let div; @@ -195,34 +195,21 @@ describe('The Frame Component', () => { }); it('should pass context to components in the frame', async () => { - const Child = (props, context) => ( -
{context.color}
- ); - Child.contextTypes = { - color: PropTypes.string.isRequired + const Child = () => { + const { document: frameDoc, window: frameWin } = + React.useContext(FrameContext); + return ( +
+ {frameDoc ? 'hasDocument' : 'noDocument'}, + {frameWin ? 'hasWindow' : 'noWindow'} +
+ ); }; - class Parent extends React.Component { - static childContextTypes = { - color: PropTypes.string - }; - static propTypes = { - children: PropTypes.element.isRequired - }; - getChildContext() { - return { color: 'purple' }; - } - render() { - return
{this.props.children}
; - } - } - const TestComponent = () => ( - - - - - + + + ); render(); @@ -231,7 +218,7 @@ describe('The Frame Component', () => { const iframe = document.querySelector('iframe'); expect( iframe.contentDocument.body.querySelector('.childDiv').textContent - ).toBe('purple'); + ).toBe('hasDocument,hasWindow'); }); }); @@ -435,53 +422,4 @@ describe('The Frame Component', () => { expect(ref.mock.calls[0][0] instanceof HTMLIFrameElement).toBe(true); }); }); - - it('should use named Frame class export', async () => { - const { container } = render( - -

Test content

- - ); - - const iframe = container.querySelector('iframe'); - await waitFor(() => { - expect(iframe.contentDocument.body.querySelector('p').textContent).toBe( - 'Test content' - ); - }); - }); - - it('should accept nodeRef prop for external ref management', async () => { - const nodeRef = React.createRef(); - const { container } = render( - -

Test

- - ); - - await waitFor(() => { - expect(nodeRef.current).toBe(container.querySelector('iframe')); - }); - }); - - it('should handle invalid mountTarget gracefully', async () => { - const consoleError = vi - .spyOn(console, 'error') - .mockImplementation(() => {}); - - const { container } = render( - -

Test

- - ); - - const iframe = container.querySelector('iframe'); - await waitFor(() => { - expect( - iframe.contentDocument.body.querySelector('.frame-content') - ).toBeNull(); - }); - - consoleError.mockRestore(); - }); }); From f86654dd542a9e81f9e6214cf6fce48b1a88d48d Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Fri, 27 Feb 2026 08:49:48 +1100 Subject: [PATCH 09/14] refactor: use destructured props in function signature instead of underscore prefix - Simplify Frame component to destructure props directly in function signature - Add onMount and onUpdate as modern alternatives to deprecated lifecycle callbacks - Add JSDoc @deprecated annotations to contentDidMount and contentDidUpdate - Update Frame.tsx, Content.tsx, and index.d.ts with new props - Update tests to use new onMount/onUpdate props - Use createRef instead of unsafe 'as any' cast --- index.d.ts | 28 ++++++++++++++++++++++ src/Content.tsx | 20 +++++++++++++++- src/Frame.tsx | 56 ++++++++++++++++++++++++------------------- test/Content.spec.jsx | 36 ++++++++++++++-------------- test/Frame.spec.jsx | 34 +++++++++++++------------- 5 files changed, 114 insertions(+), 60 deletions(-) diff --git a/index.d.ts b/index.d.ts index 78357d6..180bb27 100644 --- a/index.d.ts +++ b/index.d.ts @@ -8,8 +8,22 @@ declare module 'react-frame-component' { head?: React.ReactNode | undefined; mountTarget?: string | undefined; initialContent?: string | undefined; + /** + * @deprecated Use `onMount` instead. Will be removed in a future major version. + */ contentDidMount?: (() => void) | undefined; + /** + * @deprecated Use `onUpdate` instead. Will be removed in a future major version. + */ contentDidUpdate?: (() => void) | undefined; + /** + * Called when the iframe content is first mounted and ready. + */ + onMount?: (() => void) | undefined; + /** + * Called when the iframe content updates after the initial mount. + */ + onUpdate?: (() => void) | undefined; children?: React.ReactNode; } @@ -20,8 +34,22 @@ declare module 'react-frame-component' { export interface ContentProps { children?: React.ReactNode; + /** + * @deprecated Use `onMount` instead. + */ contentDidMount?: () => void; + /** + * @deprecated Use `onUpdate` instead. + */ contentDidUpdate?: () => void; + /** + * Called when the iframe content is first mounted. + */ + onMount?: () => void; + /** + * Called when the iframe content updates. + */ + onUpdate?: () => void; } export class Content extends React.Component {} diff --git a/src/Content.tsx b/src/Content.tsx index ca163e3..3ce531c 100644 --- a/src/Content.tsx +++ b/src/Content.tsx @@ -2,14 +2,30 @@ import { Children, ReactNode, useLayoutEffect, useRef } from 'react'; type ContentProps = { children?: ReactNode; + /** + * @deprecated Use `onMount` instead. + */ contentDidMount?: () => void; + /** + * @deprecated Use `onUpdate` instead. + */ contentDidUpdate?: () => void; + /** + * Called when the iframe content is first mounted. + */ + onMount?: () => void; + /** + * Called when the iframe content updates. + */ + onUpdate?: () => void; }; export default function Content({ children, contentDidMount, - contentDidUpdate + contentDidUpdate, + onMount, + onUpdate }: ContentProps) { const isMounted = useRef(false); @@ -17,8 +33,10 @@ export default function Content({ if (!isMounted.current) { isMounted.current = true; contentDidMount?.(); + onMount?.(); } else { contentDidUpdate?.(); + onUpdate?.(); } }); diff --git a/src/Frame.tsx b/src/Frame.tsx index 07e2753..1418ccf 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -18,8 +18,24 @@ export type FrameProps = { head?: ReactNode; initialContent?: string; mountTarget?: string; + /** + * @deprecated Use `onMount` instead. Will be removed in a future major version. + */ contentDidMount?: () => void; + /** + * @deprecated Use `onUpdate` instead. Will be removed in a future major version. + */ contentDidUpdate?: () => void; + /** + * Called when the iframe content is first mounted and ready. + * Use this instead of the deprecated `contentDidMount` prop. + */ + onMount?: () => void; + /** + * Called when the iframe content updates after the initial mount. + * Use this instead of the deprecated `contentDidUpdate` prop. + */ + onUpdate?: () => void; children?: ReactNode; nodeRef?: RefObject; }; @@ -27,17 +43,18 @@ export type FrameProps = { const DEFAULT_INITIAL_CONTENT = '
'; -function Frame(props: FrameProps) { - const { - head = null, - children, - mountTarget, - contentDidMount = () => {}, - contentDidUpdate = () => {}, - initialContent = DEFAULT_INITIAL_CONTENT, - nodeRef: externalRef - } = props; - +function Frame({ + head = null, + children, + mountTarget, + contentDidMount = () => {}, + contentDidUpdate = () => {}, + onMount, + onUpdate, + initialContent = DEFAULT_INITIAL_CONTENT, + nodeRef: externalRef, + ...iframeProps +}: FrameProps) { const [iframeLoaded, setIframeLoaded] = useState(false); const internalRef = useRef(null); const nodeRef = externalRef || internalRef; @@ -110,6 +127,8 @@ function Frame(props: FrameProps) { >((props, ref) => { - const frameRef = useRef(null); + const frameRef = createRef(); useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); - return ; + return ; }); export default FrameWithRef; diff --git a/test/Content.spec.jsx b/test/Content.spec.jsx index 4c96fa4..7844aa8 100644 --- a/test/Content.spec.jsx +++ b/test/Content.spec.jsx @@ -6,7 +6,7 @@ import Content from '../src/Content'; describe('The Content component', () => { it('should render children', () => { const { container } = render( - null} contentDidUpdate={() => null}> + null} onUpdate={() => null}>
); @@ -15,52 +15,52 @@ describe('The Content component', () => { expect(div.className).toBe('test-class-1'); }); - it('should call contentDidMount on initial render', () => { - const didMount = vi.fn(); - const didUpdate = vi.fn(); + it('should call onMount on initial render', () => { + const onMount = vi.fn(); + const onUpdate = vi.fn(); render( - +
); - expect(didMount).toHaveBeenCalledTimes(1); - expect(didUpdate).toHaveBeenCalledTimes(0); + expect(onMount).toHaveBeenCalledTimes(1); + expect(onUpdate).toHaveBeenCalledTimes(0); }); - it('should call contentDidUpdate on subsequent updates', async () => { - const didMount = vi.fn(); - const didUpdate = vi.fn(); + it('should call onUpdate on subsequent updates', async () => { + const onMount = vi.fn(); + const onUpdate = vi.fn(); const { rerender } = render( - +
); - expect(didUpdate).toHaveBeenCalledTimes(0); + expect(onUpdate).toHaveBeenCalledTimes(0); rerender( - +
); await waitFor(() => { - expect(didMount).toHaveBeenCalledTimes(1); - expect(didUpdate).toHaveBeenCalledTimes(1); + expect(onMount).toHaveBeenCalledTimes(1); + expect(onUpdate).toHaveBeenCalledTimes(1); }); rerender( - +
); await waitFor(() => { - expect(didMount).toHaveBeenCalledTimes(1); - expect(didUpdate).toHaveBeenCalledTimes(2); + expect(onMount).toHaveBeenCalledTimes(1); + expect(onUpdate).toHaveBeenCalledTimes(2); }); }); }); diff --git a/test/Frame.spec.jsx b/test/Frame.spec.jsx index f49b6c3..5e8c416 100644 --- a/test/Frame.spec.jsx +++ b/test/Frame.spec.jsx @@ -269,46 +269,46 @@ describe('The Frame Component', () => { }); }); - it('should call contentDidMount on initial render', async () => { - const didMount = vi.fn(); - const didUpdate = vi.fn(); + it('should call onMount on initial render', async () => { + const onMount = vi.fn(); + const onUpdate = vi.fn(); - render(); + render(); await waitFor(() => { - expect(didMount).toHaveBeenCalledTimes(1); - expect(didUpdate).toHaveBeenCalledTimes(0); + expect(onMount).toHaveBeenCalledTimes(1); + expect(onUpdate).toHaveBeenCalledTimes(0); }); }); - it('should call contentDidUpdate on subsequent updates', async () => { - const didUpdate = vi.fn(); - const didMount = vi.fn(); + it('should call onUpdate on subsequent updates', async () => { + const onUpdate = vi.fn(); + const onMount = vi.fn(); const { rerender } = render( { - didMount(); + onUpdate={onUpdate} + onMount={() => { + onMount(); }} /> ); await waitFor(() => { - expect(didMount).toHaveBeenCalledTimes(1); + expect(onMount).toHaveBeenCalledTimes(1); }); rerender( { - didMount(); + onUpdate={onUpdate} + onMount={() => { + onMount(); }} /> ); await waitFor(() => { - expect(didUpdate).toHaveBeenCalledTimes(1); + expect(onUpdate).toHaveBeenCalledTimes(1); }); }); From 64ecde6f5cbb4ed459ac74f9722bfdee8681323f Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Sat, 7 Mar 2026 21:01:19 +1100 Subject: [PATCH 10/14] fix(types): improve TypeScript types and remove unsafe assertions - Make FrameContext document/window optional instead of casting empty objects - Remove unsafe 'as HTMLIFrameElement' assertion using proper useRef typing - Update index.d.ts to export Frame/Content as functions not classes - Add nodeRef prop to FrameComponentProps in index.d.ts - Replace class component test with modern functional component --- index.d.ts | 13 ++++++++----- src/Context.tsx | 16 +++++++--------- src/Frame.tsx | 7 +++++-- test/Context.spec.jsx | 19 +++++++------------ 4 files changed, 27 insertions(+), 28 deletions(-) diff --git a/index.d.ts b/index.d.ts index 180bb27..02c858c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -3,8 +3,8 @@ declare module 'react-frame-component' { export interface FrameComponentProps extends - React.IframeHTMLAttributes, - React.RefAttributes { + Omit, 'children'>, + Omit, 'children'> { head?: React.ReactNode | undefined; mountTarget?: string | undefined; initialContent?: string | undefined; @@ -25,12 +25,15 @@ declare module 'react-frame-component' { */ onUpdate?: (() => void) | undefined; children?: React.ReactNode; + nodeRef?: React.RefObject; } - const FrameComponent: React.ForwardRefExoticComponent; + const FrameComponent: React.ForwardRefExoticComponent< + FrameComponentProps & React.RefAttributes + >; export default FrameComponent; - export class Frame extends React.Component {} + export function Frame(props: FrameComponentProps): React.ReactElement | null; export interface ContentProps { children?: React.ReactNode; @@ -52,7 +55,7 @@ declare module 'react-frame-component' { onUpdate?: () => void; } - export class Content extends React.Component {} + export function Content(props: ContentProps): React.ReactElement | null; export interface FrameContextProps { document?: Document; diff --git a/src/Context.tsx b/src/Context.tsx index 987f4f0..56288c1 100644 --- a/src/Context.tsx +++ b/src/Context.tsx @@ -1,18 +1,16 @@ import React, { createContext, useContext, ReactNode } from 'react'; type FrameContextValue = { - document: Document; - window: Window; + document?: Document; + window?: Window; }; -const defaultDoc = - typeof document !== 'undefined' ? document : ({} as Document); -const defaultWin = typeof window !== 'undefined' ? window : ({} as Window); +const defaultValue: FrameContextValue = { + document: undefined, + window: undefined +}; -export const FrameContext = createContext({ - document: defaultDoc, - window: defaultWin -}); +export const FrameContext = createContext(defaultValue); export const useFrame = () => useContext(FrameContext); diff --git a/src/Frame.tsx b/src/Frame.tsx index 1418ccf..17b9c18 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -163,8 +163,11 @@ const FrameWithRef = forwardRef< HTMLIFrameElement | null, Omit >((props, ref) => { - const frameRef = createRef(); - useImperativeHandle(ref, () => frameRef.current as HTMLIFrameElement); + const frameRef = useRef(null); + useImperativeHandle( + ref, + () => frameRef.current + ); return ; }); diff --git a/test/Context.spec.jsx b/test/Context.spec.jsx index 0b21065..f72956e 100644 --- a/test/Context.spec.jsx +++ b/test/Context.spec.jsx @@ -30,21 +30,16 @@ describe('The DocumentContext Component', () => { ); }); - it('exports full context instance to allow accessing via Class.contextType', async () => { + it('exports full context instance to allow accessing via useFrame hook', async () => { const document = { foo: 1 }; const window = { bar: 2 }; - class Child extends React.Component { - componentDidMount() { - const { document: doc, window: win } = this.context; - expect(doc).toEqual({ foo: 1 }); - expect(win).toEqual({ bar: 2 }); - } - render() { - return null; - } - } - Child.contextType = FrameContext; + const Child = () => { + const { document: doc, window: win } = useFrame(); + expect(doc).toEqual({ foo: 1 }); + expect(win).toEqual({ bar: 2 }); + return null; + }; render( From 748d12c5c6b6b1a1a7eff2afacf973ccf4ebe6a9 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Sun, 8 Mar 2026 13:48:44 +1100 Subject: [PATCH 11/14] fix: linting errors --- eslint.config.js | 8 +- package-lock.json | 316 +++++++++++++++++++++++++++++++++++++++++- package.json | 2 + src/Context.tsx | 2 +- src/Frame.tsx | 30 ++-- test/Context.spec.jsx | 1 - 6 files changed, 340 insertions(+), 19 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index a2aea00..b5d23ae 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,4 +1,6 @@ import js from '@eslint/js'; +import ts from '@typescript-eslint/eslint-plugin'; +import tsParser from '@typescript-eslint/parser'; import react from 'eslint-plugin-react'; import reactHooks from 'eslint-plugin-react-hooks'; import reactRefresh from 'eslint-plugin-react-refresh'; @@ -7,7 +9,7 @@ import globals from 'globals'; export default [ js.configs.recommended, { - files: ['**/*.{js,jsx}'], + files: ['**/*.{js,jsx,ts,tsx}'], ignores: [ 'node_modules/**', 'dist/**', @@ -18,6 +20,7 @@ export default [ languageOptions: { ecmaVersion: 'latest', sourceType: 'module', + parser: tsParser, globals: { ...globals.browser }, @@ -29,6 +32,7 @@ export default [ } }, plugins: { + '@typescript-eslint': ts, react, 'react-hooks': reactHooks, 'react-refresh': reactRefresh @@ -52,7 +56,7 @@ export default [ } }, { - files: ['test/**/*.{js,jsx}'], + files: ['test/**/*.{js,jsx,ts,tsx}'], languageOptions: { globals: { ...globals.mocha, diff --git a/package-lock.json b/package-lock.json index e9b6b79..ed34859 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,8 @@ "@testing-library/react": "^16.3.2", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", + "@typescript-eslint/eslint-plugin": "^8.56.1", + "@typescript-eslint/parser": "^8.56.1", "@vitejs/plugin-react": "^5.1.4", "@vitest/browser": "^4.0.18", "@vitest/browser-playwright": "^4.0.18", @@ -43,8 +45,8 @@ "webpack-dev-server": "^5.0.0" }, "peerDependencies": { - "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0", - "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0" + "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@babel/cli": { @@ -4768,6 +4770,302 @@ "@types/node": "*" } }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz", + "integrity": "sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/regexpp": "^4.12.2", + "@typescript-eslint/scope-manager": "8.56.1", + "@typescript-eslint/type-utils": "8.56.1", + "@typescript-eslint/utils": "8.56.1", + "@typescript-eslint/visitor-keys": "8.56.1", + "ignore": "^7.0.5", + "natural-compare": "^1.4.0", + "ts-api-utils": "^2.4.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^8.56.1", + "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.1.tgz", + "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@typescript-eslint/scope-manager": "8.56.1", + "@typescript-eslint/types": "8.56.1", + "@typescript-eslint/typescript-estree": "8.56.1", + "@typescript-eslint/visitor-keys": "8.56.1", + "debug": "^4.4.3" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/project-service": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.1.tgz", + "integrity": "sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/tsconfig-utils": "^8.56.1", + "@typescript-eslint/types": "^8.56.1", + "debug": "^4.4.3" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.1.tgz", + "integrity": "sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.56.1", + "@typescript-eslint/visitor-keys": "8.56.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/tsconfig-utils": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.1.tgz", + "integrity": "sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.1.tgz", + "integrity": "sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.56.1", + "@typescript-eslint/typescript-estree": "8.56.1", + "@typescript-eslint/utils": "8.56.1", + "debug": "^4.4.3", + "ts-api-utils": "^2.4.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/types": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.1.tgz", + "integrity": "sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.1.tgz", + "integrity": "sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/project-service": "8.56.1", + "@typescript-eslint/tsconfig-utils": "8.56.1", + "@typescript-eslint/types": "8.56.1", + "@typescript-eslint/visitor-keys": "8.56.1", + "debug": "^4.4.3", + "minimatch": "^10.2.2", + "semver": "^7.7.3", + "tinyglobby": "^0.2.15", + "ts-api-utils": "^2.4.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", + "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz", + "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz", + "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.1.tgz", + "integrity": "sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.9.1", + "@typescript-eslint/scope-manager": "8.56.1", + "@typescript-eslint/types": "8.56.1", + "@typescript-eslint/typescript-estree": "8.56.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", + "typescript": ">=4.8.4 <6.0.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "8.56.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.1.tgz", + "integrity": "sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.56.1", + "eslint-visitor-keys": "^5.0.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz", + "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@vitejs/plugin-react": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz", @@ -12452,6 +12750,19 @@ "node": ">=0.8.0" } }, + "node_modules/ts-api-utils": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz", + "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.12" + }, + "peerDependencies": { + "typescript": ">=4.8.4" + } + }, "node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", @@ -12591,6 +12902,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index c6d6ea9..d7a767a 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,8 @@ "@testing-library/react": "^16.3.2", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", + "@typescript-eslint/eslint-plugin": "^8.56.1", + "@typescript-eslint/parser": "^8.56.1", "@vitejs/plugin-react": "^5.1.4", "@vitest/browser": "^4.0.18", "@vitest/browser-playwright": "^4.0.18", diff --git a/src/Context.tsx b/src/Context.tsx index 56288c1..e3e5620 100644 --- a/src/Context.tsx +++ b/src/Context.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useContext, ReactNode } from 'react'; +import { createContext, useContext } from 'react'; type FrameContextValue = { document?: Document; diff --git a/src/Frame.tsx b/src/Frame.tsx index 17b9c18..66cbfe6 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -1,8 +1,7 @@ -import { +import React, { CSSProperties, ReactNode, RefObject, - createRef, forwardRef, useEffect, useImperativeHandle, @@ -159,17 +158,22 @@ function Frame({ ); } -const FrameWithRef = forwardRef< - HTMLIFrameElement | null, - Omit ->((props, ref) => { - const frameRef = useRef(null); - useImperativeHandle( - ref, - () => frameRef.current - ); - return ; -}); +const FrameWithRef = forwardRef( + ({ children, ...props }, ref) => { + const frameRef = useRef(null); + useImperativeHandle( + ref, + () => frameRef.current + ); + return ( + + {children} + + ); + } +); + +FrameWithRef.displayName = 'Frame'; export default FrameWithRef; export { Frame }; diff --git a/test/Context.spec.jsx b/test/Context.spec.jsx index f72956e..4e5b560 100644 --- a/test/Context.spec.jsx +++ b/test/Context.spec.jsx @@ -4,7 +4,6 @@ import { expect, describe, it } from 'vitest'; import { FrameContextProvider, FrameContextConsumer, - FrameContext, useFrame } from '../src/Context'; From 08260fcfde896c02b922205e5e20e4b72663e599 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Sun, 8 Mar 2026 14:08:54 +1100 Subject: [PATCH 12/14] fix: lint warnings and refactor some exports --- src/Context.tsx | 16 +--------------- src/Frame.tsx | 33 ++++++++++++++++----------------- src/FrameContext.ts | 13 +++++++++++++ src/index.ts | 4 +++- src/useFrame.ts | 4 ++++ 5 files changed, 37 insertions(+), 33 deletions(-) create mode 100644 src/FrameContext.ts create mode 100644 src/useFrame.ts diff --git a/src/Context.tsx b/src/Context.tsx index e3e5620..bf80fbf 100644 --- a/src/Context.tsx +++ b/src/Context.tsx @@ -1,18 +1,4 @@ -import { createContext, useContext } from 'react'; - -type FrameContextValue = { - document?: Document; - window?: Window; -}; - -const defaultValue: FrameContextValue = { - document: undefined, - window: undefined -}; - -export const FrameContext = createContext(defaultValue); - -export const useFrame = () => useContext(FrameContext); +import { FrameContext } from './FrameContext'; export const FrameContextConsumer = FrameContext.Consumer; diff --git a/src/Frame.tsx b/src/Frame.tsx index 66cbfe6..5dc3396 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -3,6 +3,7 @@ import React, { ReactNode, RefObject, forwardRef, + useCallback, useEffect, useImperativeHandle, useRef, @@ -60,9 +61,9 @@ function Frame({ const isMounted = useRef(false); const loadCheckInterval = useRef | null>(null); - const getDoc = (): Document | null => { + const getDoc = useCallback((): Document | null => { return nodeRef.current ? nodeRef.current.contentDocument : null; - }; + }, [nodeRef]); const getMountTarget = (): Element | null => { const doc = getDoc(); @@ -74,42 +75,40 @@ function Frame({ return doc.body.children[0]; }; - const handleLoad = () => { + const handleLoad = useCallback(() => { if (loadCheckInterval.current) { clearInterval(loadCheckInterval.current); } if (!iframeLoaded) { setIframeLoaded(true); } - }; + }, [iframeLoaded]); useEffect(() => { isMounted.current = true; const doc = getDoc(); + const frame = nodeRef.current; + const interval = loadCheckInterval.current; - if (doc && nodeRef.current?.contentWindow) { - nodeRef.current.contentWindow.addEventListener( - 'DOMContentLoaded', - handleLoad - ); + if (doc && frame?.contentWindow) { + frame.contentWindow.addEventListener('DOMContentLoaded', handleLoad); } return () => { isMounted.current = false; - if (nodeRef.current?.contentWindow) { - nodeRef.current.contentWindow.removeEventListener( - 'DOMContentLoaded', - handleLoad - ); + if (frame?.contentWindow) { + frame.contentWindow.removeEventListener('DOMContentLoaded', handleLoad); } - if (loadCheckInterval.current) { - clearInterval(loadCheckInterval.current); + if (interval) { + clearInterval(interval); } }; - }, []); + // nodeRef is stable (either internalRef from useRef or external ref from props) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getDoc, handleLoad]); const renderFrameContents = (): ReactNode => { if (!isMounted.current) { diff --git a/src/FrameContext.ts b/src/FrameContext.ts new file mode 100644 index 0000000..13496c8 --- /dev/null +++ b/src/FrameContext.ts @@ -0,0 +1,13 @@ +import { createContext } from 'react'; + +type FrameContextValue = { + document?: Document; + window?: Window; +}; + +const defaultValue: FrameContextValue = { + document: undefined, + window: undefined +}; + +export const FrameContext = createContext(defaultValue); diff --git a/src/index.ts b/src/index.ts index ca17a86..018667f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,5 @@ export { Frame, default } from './Frame'; export type { FrameProps } from './Frame'; -export { FrameContext, FrameContextConsumer, useFrame } from './Context'; +export { FrameContext } from './FrameContext'; +export { FrameContextConsumer, FrameContextProvider } from './Context'; +export { useFrame } from './useFrame'; diff --git a/src/useFrame.ts b/src/useFrame.ts new file mode 100644 index 0000000..148248a --- /dev/null +++ b/src/useFrame.ts @@ -0,0 +1,4 @@ +import { useContext } from 'react'; +import { FrameContext } from './FrameContext'; + +export const useFrame = () => useContext(FrameContext); From a1edfa9e7e18710803926468975a5144f1411cde Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Mon, 9 Mar 2026 14:16:12 +1100 Subject: [PATCH 13/14] fix: test issues --- src/Frame.tsx | 11 +---------- test/Context.spec.jsx | 7 ++----- test/Frame.spec.jsx | 2 +- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/Frame.tsx b/src/Frame.tsx index 5dc3396..b804c5c 100644 --- a/src/Frame.tsx +++ b/src/Frame.tsx @@ -58,7 +58,6 @@ function Frame({ const [iframeLoaded, setIframeLoaded] = useState(false); const internalRef = useRef(null); const nodeRef = externalRef || internalRef; - const isMounted = useRef(false); const loadCheckInterval = useRef | null>(null); const getDoc = useCallback((): Document | null => { @@ -85,8 +84,6 @@ function Frame({ }, [iframeLoaded]); useEffect(() => { - isMounted.current = true; - const doc = getDoc(); const frame = nodeRef.current; const interval = loadCheckInterval.current; @@ -96,8 +93,6 @@ function Frame({ } return () => { - isMounted.current = false; - if (frame?.contentWindow) { frame.contentWindow.removeEventListener('DOMContentLoaded', handleLoad); } @@ -106,15 +101,11 @@ function Frame({ clearInterval(interval); } }; - // nodeRef is stable (either internalRef from useRef or external ref from props) + // nodeRef is a ref and should not be in dependencies per React best practices // eslint-disable-next-line react-hooks/exhaustive-deps }, [getDoc, handleLoad]); const renderFrameContents = (): ReactNode => { - if (!isMounted.current) { - return null; - } - const doc = getDoc(); if (!doc) { diff --git a/test/Context.spec.jsx b/test/Context.spec.jsx index 4e5b560..4297ea7 100644 --- a/test/Context.spec.jsx +++ b/test/Context.spec.jsx @@ -1,11 +1,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import { expect, describe, it } from 'vitest'; -import { - FrameContextProvider, - FrameContextConsumer, - useFrame -} from '../src/Context'; +import { FrameContextProvider, FrameContextConsumer } from '../src/Context'; +import { useFrame } from '../src/useFrame'; describe('The DocumentContext Component', () => { it('will establish context variables', async () => { diff --git a/test/Frame.spec.jsx b/test/Frame.spec.jsx index 5e8c416..d0d561d 100644 --- a/test/Frame.spec.jsx +++ b/test/Frame.spec.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, waitFor } from '@testing-library/react'; import { expect, vi, describe, it, afterEach, beforeEach } from 'vitest'; import ForwardedRefFrame, { Frame } from '../src/Frame'; -import { FrameContext } from '../src/Context'; +import { FrameContext } from '../src/FrameContext'; describe('The Frame Component', () => { let div; From 120f9873cbc4bea7400925344a807fed289c611b Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Mon, 9 Mar 2026 14:29:35 +1100 Subject: [PATCH 14/14] chore: changeset and minimum version support --- .changeset/empty-oranges-exist.md | 26 ++++++++++++++++++++++++++ package.json | 4 ++-- 2 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 .changeset/empty-oranges-exist.md diff --git a/.changeset/empty-oranges-exist.md b/.changeset/empty-oranges-exist.md new file mode 100644 index 0000000..a7363cb --- /dev/null +++ b/.changeset/empty-oranges-exist.md @@ -0,0 +1,26 @@ +--- +'react-frame-component': major +--- + +Migrate codebase to TypeScript with React 19 support + +Migrates all source files from JavaScript/JSX to TypeScript/TSX with full type safety. + +**Breaking changes:** + +- Minimum React version bumped from 16.8 to 17.0 + +**New features:** + +- Full TypeScript support with exported `FrameProps` type +- React 19 support added to peer dependencies + +**Deprecations (will be removed in next major version):** + +- `contentDidMount` → use `onMount` instead +- `contentDidUpdate` → use `onUpdate` instead + +**Internal changes:** + +- Content component converted from class to functional component +- Build pipeline updated to emit TypeScript declarations diff --git a/package.json b/package.json index d7a767a..cb58247 100644 --- a/package.json +++ b/package.json @@ -88,8 +88,8 @@ "webpack-dev-server": "^5.0.0" }, "peerDependencies": { - "react": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": ">= 16.8 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "prettier": { "singleQuote": true,