feat(refresh-on): fix refresh-on-navigate to refresh-on added hot reload feature

Author: refirst11

src/core/component/refresh-on-navigate.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+
+export const RefreshOn = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const targetAnchor = target.closest('a');
+      if (pathname && targetAnchor instanceof HTMLAnchorElement && targetAnchor.origin === window.location.origin) router.refresh();
+    };
+
+    const observeStyleSheets = () => {
+      const styleObserver = new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+          if (mutation.type === 'childList') {
+            const addedNodes = Array.from(mutation.addedNodes);
+            if (addedNodes.some(node => node instanceof HTMLStyleElement || node instanceof HTMLLinkElement)) {
+              requestAnimationFrame(() => {
+                router.refresh();
+              });
+              break;
+            }
+          }
+        }
+      });
+
+      styleObserver.observe(document.head, {
+        childList: true,
+        subtree: false,
+      });
+
+      return styleObserver;
+    };
+
+    document.addEventListener('click', handleClick);
+    const cssObserver = observeStyleSheets();
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+      cssObserver.disconnect();
+    };
+  }, [router, pathname]);
+
+  return null;
+};

src/core/component/refresh-on.tsx

@@ -1,6 +1,6 @@
 import { getServerCSS } from '../../_internal/utils/inject-server-css';
 import { isDevServer } from '../../_internal/utils/helper';
-import { RefreshOnNavigate } from './refresh-on-navigate';
+import { RefreshOn } from './refresh-on';
 
 export const ServerStylePreview = (): JSX.Element | null => {
   if (!isDevServer) return null;
@@ -9,7 +9,7 @@ export const ServerStylePreview = (): JSX.Element | null => {
 
   return (
     <>
-      <RefreshOnNavigate />
+      <RefreshOn />
       <style dangerouslySetInnerHTML={{ __html: serverCSS }} />
     </>
   );