feat: docs/** content hot reload

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==