Add React 19 support

.changeset/hungry-kids-study.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/react': minor
+---
+
+Add React 19 compatibility and update ref handling for cross-version support.

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @remote-dom/react
 
+## Unreleased
+
+### Patch Changes
+
+- Add React 19 compatibility and update ref handling for cross-version support.
+
 ## 1.2.2
 
 ### Patch Changes

packages/react/package.json

@@ -69,11 +69,11 @@
   },
   "dependencies": {
     "@remote-dom/core": "workspace:^1.7.0",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
     "htm": "^3.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -82,9 +82,9 @@
   },
   "devDependencies": {
     "@quilted/react-testing": "^0.6.11",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "browserslist": [
     "defaults and not dead"

packages/react/source/component.tsx

@@ -122,8 +122,10 @@ export function createRemoteComponent<
       InstanceType<ElementConstructor>,
       RemoteComponentPropsFromElementConstructor<ElementConstructor>
     >(function RemoteComponent(props, ref) {
-      const internalRef = useRef<any>();
-      const lastRemotePropertiesRef = useRef<Record<string, any>>();
+      const internalRef = useRef<any>(undefined);
+      const lastRemotePropertiesRef = useRef<Record<string, any> | undefined>(
+        undefined,
+      );
 
       const remoteProperties: Record<string, any> = {};
       const children = toChildren(props.children);
@@ -195,7 +197,7 @@ export function createRemoteComponent<
         {
           ref: (refValue: any) => {
             internalRef.current = refValue;
-            if (typeof ref === 'function') ref(refValue);
+            if (typeof ref === 'function') return ref(refValue);
             else if (ref != null) ref.current = refValue;
           },
         },

packages/react/source/host/component.tsx

@@ -1,11 +1,12 @@
 import type {RemoteReceiverElement} from '@remote-dom/core/receivers';
-import {
-  memo,
-  useRef,
-  useEffect,
-  type MutableRefObject,
-  type ComponentType,
-} from 'react';
+import {memo, useRef, useEffect, type ComponentType} from 'react';
+
+// Compat type: mutable ref object that works across @types/react 17, 18, and 19.
+// Matches runtime shape used by React refs in all supported versions.
+// TODO: When React < 19 support is dropped, replace with `import { type RefObject } from 'react'`.
+interface MutableRef<T> {
+  current: T;
+}
 
 import {useRemoteReceived} from './hooks/remote-received.ts';
 import {
@@ -65,7 +66,7 @@ export interface RemoteComponentRendererOptions<Props = {}>
 
 interface Internals extends Pick<RemoteComponentRendererProps, 'receiver'> {
   id: string;
-  instanceRef: MutableRefObject<unknown>;
+  instanceRef: MutableRef<unknown>;
 }
 
 /**
@@ -85,7 +86,7 @@ export function createRemoteComponentRenderer<
     receiver,
     components,
   }: RemoteComponentRendererProps) {
-    const internalsRef = useRef<Internals>();
+    const internalsRef = useRef<Internals | undefined>(undefined);
 
     const attachedElement = useRemoteReceived(element, receiver);
     const resolvedElement = attachedElement ?? element;
@@ -140,7 +141,7 @@ export function createRemoteComponentRenderer<
 
 function createImplementationRef(
   internals: Pick<Internals, 'id' | 'receiver'>,
-): MutableRefObject<unknown> {
+): MutableRef<unknown> {
   let current: unknown = null;
 
   return {