more

packages/nextra/src/client/components/auto-refresh.ts

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps -- dev code will be removed from production build */
 'use client'
 
 // Based on https://www.steveruiz.me/posts/nextjs-refresh-content
@@ -7,16 +8,14 @@ import type { FC, ReactNode } from 'react'
 import { useEffect } from 'react'
 
 export const AutoRefresh: FC<{ children: ReactNode }> = ({ children }) => {
- if (process.env.NODE_ENV === 'production') {
+ const port = process.env.NEXTRA_WS_PORT
+ console.log({ port })
+ if (process.env.NODE_ENV === 'production' || !port) {
  return children
  }
-
- // eslint-disable-next-line react-hooks/rules-of-hooks -- this code will be removed from production
  const router = useRouter()
-
- // eslint-disable-next-line react-hooks/rules-of-hooks -- this code will be removed from production
  useEffect(() => {
- const ws = new WebSocket(`ws://localhost:${process.env.NEXTRA_WS_PORT}`)
+ const ws = new WebSocket(`ws://localhost:${port}`)
  ws.onmessage = event => {
  if (event.data === 'refresh') {
  router.refresh()
@@ -25,7 +24,7 @@ export const AutoRefresh: FC<{ children: ReactNode }> = ({ children }) => {
  return () => {
  ws.close()
  }
- }, [router])
+ }, [])
 
  return children
 }

packages/nextra/src/server/index.ts

@@ -1,6 +1,6 @@
 /* eslint-env node */
 import path, { sep } from 'node:path'
-import { NextConfig } from 'next'
+import type { NextConfig } from 'next'
 import { fromZodError } from 'zod-validation-error'
 import type { Nextra } from '../types'
 import {

packages/nextra/src/server/watcher.ts

@@ -1,4 +1,4 @@
-import fs from 'node:fs'
+import fs from 'graceful-fs'
 import { WebSocketServer } from 'ws'
 import type { AddressInfo, WebSocket } from 'ws'
 import { logger } from './utils.js'
@@ -14,18 +14,22 @@ function withResolvers<T>() {
  return { promise, resolve: resolve!, reject: reject! }
 }
 
+// Based on https://www.steveruiz.me/posts/nextjs-refresh-content
+// and https://github.com/gaearon/overreacted.io/pull/797
 export async function createWsWatcherAndGetPort(
  folder: string
 ): Promise<number> {
  const { promise, resolve } = withResolvers<number>()
 
- const wss = new WebSocketServer({ port: 0 }, function (this: {
- address: () => AddressInfo
- }) {
- const { port } = this.address()
- logger.info(`ws server is listening on port: ${port}`)
- resolve(port)
- })
+ const wss = new WebSocketServer(
+ // to get random port
+ { port: 0 },
+ function (this: { address: () => AddressInfo }) {
+ const { port } = this.address()
+ logger.info(`ws server is listening on port: ${port}`)
+ resolve(port)
+ }
+ )
 
  const clients = new Set<WebSocket>()