feat: docs/** content hot reload (#9842)

* feat: docs/** content hot reload

Author: a-hariti

app/[[...path]]/layout.tsx

@@ -2,10 +2,17 @@ import 'prism-sentry/index.css';
 
 import type {Metadata} from 'next';
 
+import {HotReload} from 'sentry-docs/components/hotReload';
+
 export const metadata: Metadata = {
   title: {template: '%s | Sentry Documentation', default: 'Home'},
 };
 
 export default function DocsLayout({children}: {children: React.ReactNode}) {
-  return <div>{children}</div>;
+  return (
+    <div>
+      {children}
+      <HotReload />
+    </div>
+  );
 }

package.json

@@ -11,7 +11,7 @@
     "url": "https://github.com/getsentry/sentry-docs/issues"
   },
   "scripts": {
-    "dev": "concurrently \"yarn sidecar\" \"next dev\"",
+    "dev": "concurrently \"yarn sidecar\" \"node ./src/hotReloadWatcher.mjs\" \"next dev\"",
     "build": "prisma generate && next build",
     "start": "next start",
     "migrate:dev": "dotenv -e .env.development -- yarn prisma migrate reset",
@@ -101,6 +101,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/ws": "^8.5.10",
     "autoprefixer": "^10.4.17",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^7.4.1",
@@ -115,7 +116,8 @@
     "prisma": "^5.8.1",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "ws": "^8.16.0"
   },
   "volta": {
     "node": "20.11.0",

src/components/hotReload.tsx

@@ -0,0 +1,45 @@
+'use client';
+import {useEffect} from 'react';
+import {useRouter} from 'next/navigation';
+
+function HotReload_() {
+  const router = useRouter();
+  let ws: WebSocket;
+  const connect = () => {
+    if (ws) {
+      return;
+    }
+    ws = new WebSocket('ws://localhost:8080');
+    ws.onopen = function open() {
+      // do nothing
+    };
+    ws.onmessage = function incoming(msg) {
+      if (msg.data === 'reload') {
+        // eslint-disable-next-line no-console
+        console.info('[REFRESHING]');
+        router.refresh();
+      }
+    };
+    ws.onerror = function error(...err) {
+      // eslint-disable-next-line no-console
+      console.error('Hot reload ws error', err);
+    };
+    ws.onclose = function close() {};
+  };
+
+  useEffect(
+    () => {
+      connect();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return null;
+}
+const noop = () => null;
+
+/**
+ * Hot reloads the page when notified by the server of a change under /docs/*
+ */
+export const HotReload = process.env.NODE_ENV === 'development' ? HotReload_ : noop;

src/hotReloadWatcher.mjs

@@ -0,0 +1,53 @@
+import path from 'path';
+import {watch} from 'node:fs/promises';
+import {WebSocketServer} from 'ws';
+
+const watchedContent = new Set(['.mdx', '.md', '.png', '.jpg', '.jpeg', '.gif', '.svg']);
+
+export const throttle = (fn, delay) => {
+  let last = 0;
+  return (...args) => {
+    const now = Date.now();
+    if (now - last < delay) {
+      return;
+    }
+    last = now;
+    return fn(...args);
+  };
+};
+
+const wss = new WebSocketServer({port: 8080});
+console.info('⚡️ Hot reload watcher listening on ws://localhost:8080');
+
+wss.on('connection', async function onConnect(ws) {
+  ws.on('error', err => {
+    console.log('ws error', err);
+  });
+  ws.on('message', function incoming(_msg) {
+    // no reason for the client to send messages for now
+  });
+
+  const ac = new AbortController();
+  const {signal} = ac;
+  ws.on('close', () => ac.abort());
+
+  // avoid fileystem chatter when you save a file
+  const sendReload = throttle(() => ws.send('reload'), 10);
+
+  try {
+    const watcher = watch(path.join(import.meta.dirname, '..', 'docs'), {
+      signal,
+      recursive: true,
+    });
+    for await (const event of watcher) {
+      if (watchedContent.has(path.extname(event.filename))) {
+        sendReload();
+      }
+    }
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      return;
+    }
+    throw err;
+  }
+});

yarn.lock

@@ -3295,6 +3295,13 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.10.tgz#04ffa7f406ab628f7f7e97ca23e290cd8ab15efc"
   integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
 
+"@types/ws@^8.5.10":
+  version "8.5.10"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787"
+  integrity sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "21.0.3"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
@@ -11447,7 +11454,7 @@ ws@^7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
-ws@^8.11.0:
+ws@^8.11.0, ws@^8.16.0:
   version "8.16.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
   integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==