@pylonsync/react 0.4.15 → 0.4.17

package/dist/dynamic.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from "react";
+import React, { type ComponentType } from "react";
 export interface DynamicOptions {
     /** Rendered while the chunk loads (and, when `ssr` is false, on the server). */
     loading?: ComponentType<any> | null;
@@ -24,6 +24,14 @@ type Loader<P> = () => Promise<{
  * The returned component renders `loading` until the chunk arrives, then the
  * real one. Call it at MODULE level, not inside a render — a `dynamic()` call
  * per render creates a new component type each time and remounts the subtree.
+ *
+ * `ref` reaches the loaded component: React 19 treats it as an ordinary prop,
+ * so the spread carries it to a `forwardRef` target's imperative handle. That
+ * matters for the exact components people defer — an editor whose save path
+ * calls `ref.current.export()` would fail silently otherwise — so it's covered
+ * by a test rather than left to React's prop semantics staying put.
  */
-export declare function dynamic<P extends object>(loader: Loader<P>, options?: DynamicOptions): ComponentType<P>;
+export declare function dynamic<P extends object>(loader: Loader<P>, options?: DynamicOptions): ComponentType<P & {
+    ref?: React.Ref<any>;
+}>;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.15",
+  "version": "0.4.17",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -14,8 +14,8 @@
     "prepack": "bun run build"
   },
   "dependencies": {
-    "@pylonsync/sdk": "0.4.15",
-    "@pylonsync/sync": "0.4.15"
+    "@pylonsync/sdk": "0.4.17",
+    "@pylonsync/sync": "0.4.17"
   },
   "peerDependencies": {
     "react": ">=19.0.0"

package/src/dynamic.test.tsx

@@ -108,3 +108,24 @@ describe("dynamic() with ssr:true", () => {
     await waitFor(() => expect(screen.getByTestId("heavy")).toBeDefined());
   });
 });
+
+describe("dynamic() and refs", () => {
+  test("a ref reaches the loaded component's imperative handle", async () => {
+    // React 19 passes `ref` as an ordinary prop, so the spread carries it —
+    // but that's incidental enough to be worth pinning: a deferred editor
+    // whose save path calls ref.current.export() breaks silently otherwise.
+    const Editor = React.forwardRef<{ save: () => string }, { doc: string }>(
+      (props, ref) => {
+        React.useImperativeHandle(ref, () => ({ save: () => `saved:${props.doc}` }));
+        return <div data-testid="ed">{props.doc}</div>;
+      },
+    );
+    const D = dynamic<{ doc: string }>(async () => ({ default: Editor as any }), {
+      loading: Skeleton,
+    });
+    const ref = React.createRef<{ save: () => string }>();
+    render(<D doc="hello" ref={ref} />);
+    await waitFor(() => expect(screen.getByTestId("ed")).toBeDefined());
+    expect(ref.current?.save()).toBe("saved:hello");
+  });
+});

package/src/dynamic.tsx

@@ -59,11 +59,17 @@ function resolveComponent<P>(
  * The returned component renders `loading` until the chunk arrives, then the
  * real one. Call it at MODULE level, not inside a render — a `dynamic()` call
  * per render creates a new component type each time and remounts the subtree.
+ *
+ * `ref` reaches the loaded component: React 19 treats it as an ordinary prop,
+ * so the spread carries it to a `forwardRef` target's imperative handle. That
+ * matters for the exact components people defer — an editor whose save path
+ * calls `ref.current.export()` would fail silently otherwise — so it's covered
+ * by a test rather than left to React's prop semantics staying put.
  */
 export function dynamic<P extends object>(
   loader: Loader<P>,
   options: DynamicOptions = {},
-): ComponentType<P> {
+): ComponentType<P & { ref?: React.Ref<any> }> {
   const { loading: Loading = null, ssr = false } = options;
 
   if (ssr) {
@@ -81,7 +87,7 @@ export function dynamic<P extends object>(
       </Suspense>
     );
     WithSuspense.displayName = "DynamicSSR";
-    return WithSuspense as ComponentType<P>;
+    return WithSuspense as ComponentType<P & { ref?: React.Ref<any> }>;
   }
 
   // Client-only. The fallback renders on the server AND on the first client
@@ -117,5 +123,5 @@ export function dynamic<P extends object>(
     return <Loaded {...(props as any)} />;
   };
   ClientOnly.displayName = "Dynamic";
-  return ClientOnly as ComponentType<P>;
+  return ClientOnly as ComponentType<P & { ref?: React.Ref<any> }>;
 }