remote-components 0.0.38 → 0.0.39

package/dist/next/host/client/index.d.ts

@@ -35,6 +35,19 @@ interface RemoteComponentProps {
     additionalHeaders?: Headers | Record<string, string>;
     /** The children to use as a loading fallback until the remote component is loaded. */
     children?: React.ReactNode;
+    /** Called right before a new remote component load starts. */
+    onBeforeLoad?: (src: string | URL) => void;
+    /** Called when the remote component has been successfully loaded and mounted. */
+    onLoad?: (src: string | URL) => void;
+    /** Called when an error occurs while loading or mounting the remote component. */
+    onError?: (error: unknown) => void;
+    /** Called when a different remote component is loaded into the same wrapper. */
+    onChange?: (info: {
+        previousSrc: string | URL | null;
+        nextSrc: string | URL | null;
+        previousName: string | undefined;
+        nextName: string | undefined;
+    }) => void;
 }
 
 /**

package/dist/next/host/client/index.js

@@ -1356,7 +1356,11 @@ function RemoteComponent({
   name: nameProp = "__vercel_remote_component",
   shared = {},
   additionalHeaders,
-  children
+  children,
+  onBeforeLoad,
+  onLoad,
+  onError,
+  onChange
 }) {
   const name = useMemo(() => {
     if (typeof src === "string") {
@@ -1412,6 +1416,7 @@ function RemoteComponent({
   const prevUrlRef = useRef(null);
   const prevRemoteComponentContainerRef = useRef(null);
   const unmountRef = useRef(null);
+  const prevNameRef = useRef(void 0);
   useLayoutEffect(() => {
     if (childrenRef.current.length > 0 && remoteComponent) {
       childrenRef.current.forEach((el) => {
@@ -1467,7 +1472,10 @@ function RemoteComponent({
   }, [shadowRoot, remoteComponent, name]);
   useEffect(() => {
     if (src && src !== prevSrcRef.current) {
+      const previousSrc = prevSrcRef.current;
+      const previousName = prevNameRef.current;
       prevSrcRef.current = src;
+      onBeforeLoad?.(src);
       startTransition(async () => {
         try {
           let html = getRemoteComponentHtml(
@@ -1565,6 +1573,7 @@ function RemoteComponent({
           }
           prevIsRemoteComponentRef.current = isRemoteComponent;
           prevUrlRef.current = url;
+          prevNameRef.current = remoteName;
           applyOriginToNodes(doc, url);
           const links = Array.from(
             doc.querySelectorAll("link[href]")
@@ -1670,6 +1679,14 @@ function RemoteComponent({
             );
           }
           if (isRemoteComponent) {
+            if (previousSrc !== null) {
+              onChange?.({
+                previousSrc,
+                nextSrc: src,
+                previousName,
+                nextName: remoteName
+              });
+            }
             setData(newData);
             if (shadowRoot) {
               let shadowRootHtml = component.innerHTML;
@@ -1686,6 +1703,7 @@ function RemoteComponent({
               await Promise.all(
                 Array.from(mount).map((mountFn) => mountFn(shadowRoot))
               );
+              onLoad?.(src);
             } else if (isolate === false) {
               setRemoteComponent(
                 // TODO: remove wrapper div by converting HTML to RSC or React tree
@@ -1707,6 +1725,7 @@ function RemoteComponent({
                   (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
                 )
               );
+              onLoad?.(src);
             }
           } else {
             const result = await loadRemoteComponent({
@@ -1747,14 +1766,25 @@ function RemoteComponent({
               rsc.remove();
             }
             setData(newData);
+            if (previousSrc !== null) {
+              onChange?.({
+                previousSrc,
+                nextSrc: src,
+                previousName,
+                nextName: remoteName
+              });
+            }
             if (result.error) {
               setRemoteComponent(result.error);
+              onError?.(result.error);
             } else {
               setRemoteComponent(result.component);
+              onLoad?.(src);
             }
           }
         } catch (error) {
           setRemoteComponent(error);
+          onError?.(error);
         }
       });
     }
@@ -1768,7 +1798,11 @@ function RemoteComponent({
     shadowRoot,
     additionalHeaders,
     reset,
-    id
+    id,
+    onBeforeLoad,
+    onLoad,
+    onError,
+    onChange
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -1804,6 +1838,10 @@ function RemoteComponent({
         return Promise.all(
           Array.from(mount).map((mountFn) => mountFn(shadowRoot))
         );
+      }).then(() => {
+        if (src) {
+          onLoad?.(src);
+        }
       }).catch((e) => {
         const error = new RemoteComponentsError(
           `Error mounting remote component from "${url.href}"`,
@@ -1812,6 +1850,7 @@ function RemoteComponent({
           }
         );
         setRemoteComponent(error);
+        onError?.(error);
       });
     }
   }