Migrate codebase to TypeScript with React 19 support

.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

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,

index.d.ts

@@ -2,19 +2,61 @@ declare module 'react-frame-component' {
   import * as React from 'react';
 
   export interface FrameComponentProps
-    extends React.IframeHTMLAttributes<HTMLIFrameElement>,
-      React.RefAttributes<HTMLIFrameElement> {
+    extends
+      Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, 'children'>,
+      Omit<React.RefAttributes<HTMLIFrameElement>, 'children'> {
     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;
-    children: React.ReactNode;
+    /**
+     * 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;
+    nodeRef?: React.RefObject<HTMLIFrameElement | null>;
   }
 
-  const FrameComponent: React.ForwardRefExoticComponent<FrameComponentProps>;
+  const FrameComponent: React.ForwardRefExoticComponent<
+    FrameComponentProps & React.RefAttributes<HTMLIFrameElement | null>
+  >;
   export default FrameComponent;
 
+  export function Frame(props: FrameComponentProps): React.ReactElement | null;
+
+  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 function Content(props: ContentProps): React.ReactElement | null;
+
   export interface FrameContextProps {
     document?: Document;
     window?: Window;