Add watcher (#797)

gaearon · Nov 6, 2023 · 3b02986 · 3b02986
1 parent 8f651cc
commit 3b02986
Show file tree

Hide file tree

Showing 6 changed files with 454 additions and 110 deletions.
diff --git a/app/AutoRefresh.js b/app/AutoRefresh.js
@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+function AutoRefresh({ children }) {
+  return children;
+}
+
+if (process.env.NODE_ENV === "development") {
+  AutoRefresh = function AutoRefresh({ children }) {
+    const router = useRouter();
+    useEffect(() => {
+      const ws = new WebSocket("ws://localhost:3001");
+      ws.onmessage = (event) => {
+        if (event.data === "refresh") {
+          router.refresh();
+        }
+      };
+      return () => {
+        ws.close();
+      };
+    }, [router]);
+    return children;
+  };
+}
+
+export default AutoRefresh;
diff --git a/app/layout.js b/app/layout.js
@@ -1,27 +1,30 @@
 import Link from "./Link";
 import HomeLink from "./HomeLink";
+import AutoRefresh from "./AutoRefresh";
 import { serif } from "./fonts";
 import "./global.css";
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className={serif.className}>
-      <body className="mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]">
-        <header className="mb-14 flex flex-row place-content-between">
-          <HomeLink />
-          <span className="relative top-[4px] italic">
-            by{" "}
-            <Link href="https://danabra.mov" target="_blank">
-              <img
-                alt="Dan Abramov"
-                src="https://pbs.twimg.com/profile_images/1545194945161707520/rqkwPViA_400x400.jpg"
-                className="relative -top-1 mx-1 inline h-8 w-8 rounded-full"
-              />
-            </Link>
-          </span>
-        </header>
-        <main>{children}</main>
-      </body>
-    </html>
+    <AutoRefresh>
+      <html lang="en" className={serif.className}>
+        <body className="mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]">
+          <header className="mb-14 flex flex-row place-content-between">
+            <HomeLink />
+            <span className="relative top-[4px] italic">
+              by{" "}
+              <Link href="https://danabra.mov" target="_blank">
+                <img
+                  alt="Dan Abramov"
+                  src="https://pbs.twimg.com/profile_images/1545194945161707520/rqkwPViA_400x400.jpg"
+                  className="relative -top-1 mx-1 inline h-8 w-8 rounded-full"
+                />
+              </Link>
+            </span>
+          </header>
+          <main>{children}</main>
+        </body>
+      </html>
+    </AutoRefresh>
   );
 }