feat(config): allow ws config (#1249)

* feat(config): allow ws config

* feat(ws): allow ws configuration from `watch` key

* chore(playground): prune playground content

Author: Tahul

docs/content/4.api/3.configuration.md

@@ -16,7 +16,6 @@ export default defineNuxtConfig({
 })
 ```
 
-
 ## `base`
 
 - Type: `String`{lang=ts}
@@ -34,18 +33,44 @@ export default defineNuxtConfig({
 
 ## `watch`
 
-- Type: `Boolean`{lang=ts}
-- Default: `true`{lang=ts}
+- Type: `Object | false`{lang=ts}
+- Default: `{ port: 4000, showUrl: true }`{lang=ts}
 
-Disable content watcher and hot content reload. Watcher is a development feature and will not includes in the production.
+Disable content watcher and hot content reload.
 
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  content: {
-    watch: true
-  }
-})
-```
+The watcher is a development feature and will not be included in production.
+
+::code-group
+
+  ```ts [Enabled]
+  export default defineNuxtConfig({
+    content: {
+      watch: {
+        ws: {
+          port: 4000,
+          showUrl: true
+        }
+      }
+    }
+  })
+  ```
+
+  ```ts [Disabled]
+  export default defineNuxtConfig({
+    content: {
+      watch: false
+    }
+  })
+  ```
+
+::
+
+### `ws` options
+
+| Option | Default | Description |
+| ----------------- | :--------: | :-------- |
+| `port`     | `4000` | Select the port used for the WebSocket server. |
+| `showUrl`     | `false` | Toggle URL display in dev server boot message. |
 
 ## `sources`
 
@@ -179,7 +204,7 @@ Nuxt Content uses [Shiki](https://github.com/shikijs/shiki) to provide syntax hi
 
 ### `highlight` options
 
-| Option | Default | Description |
+| Option | Type | Description |
 | ----------------- | :--------: | :-------- |
 | `theme`     | `ShikiTheme` | The [color theme](https://github.com/shikijs/shiki/blob/main/docs/themes.md) to use |
 | `preload`     | `ShikiLang[]` | The [preloaded languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md) available for highlighting. |

playground/pages/sandbox.vue

@@ -22,7 +22,5 @@
         </div>
       </template>
     </ContentDoc>
-
-    <ContentList />
   </div>
 </template>

src/module.ts

@@ -10,6 +10,7 @@ import {
   useLogger,
   addTemplate
 } from '@nuxt/kit'
+import type { ListenOptions } from 'listhen'
 // eslint-disable-next-line import/no-named-as-default
 import defu from 'defu'
 import { hash } from 'ohash'
@@ -48,7 +49,9 @@ export interface ModuleOptions {
    *
    * @default true
    */
-  watch: boolean
+  watch: false | {
+    ws: Partial<ListenOptions>
+  }
   /**
    * Contents can located in multiple places, in multiple directories or even in remote git repositories.
    * Using sources option you can tell Content module where to look for contents.
@@ -180,7 +183,12 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     base: '_content',
-    watch: true,
+    watch: {
+      ws: {
+        port: 4000,
+        showURL: false
+      }
+    },
     sources: ['content'],
     ignores: ['\\.', '-'],
     locales: [],
@@ -403,11 +411,11 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     // Setup content dev module
-    if (!nuxt.options.dev || !options.watch) {
-      return
-    }
+    if (!nuxt.options.dev) { return }
 
     nuxt.hook('nitro:init', async (nitro) => {
+      if (!options.watch || !options.watch.ws) { return }
+
       const ws = createWebSocket()
 
       // Dispose storage on nuxt close
@@ -416,7 +424,8 @@ export default defineNuxtModule<ModuleOptions>({
       })
 
       // Listen dev server
-      const { server, url } = await listen(() => 'Nuxt Content', { port: 4000, showURL: false })
+      const { server, url } = await listen(() => 'Nuxt Content', options.watch.ws)
+
       server.on('upgrade', ws.serve)
 
       // Register ws url