chore(release): v1.0.0

This reverts commit 470f272183.

.eslintignore

@@ -1,2 +1,5 @@
 dist
 node_modules
+docs
+.github
+.vscode

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [arashsheyda]

.github/workflows/studio.yml

@@ -0,0 +1,82 @@
+
+name: studio-nuxt-build
+run-name: studio nuxt build
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Add write workflow permissions
+permissions:
+  contents: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build-and-deploy:
+    if: startsWith(github.event.head_commit.message, 'docs:')
+    runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        working-directory: docs
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [18]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Identify package manager
+        id: pkgman
+        run: |
+          cache=`[ -f "docs/pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "docs/package-lock.json" ] && echo "npm" || ([ -f "docs/yarn.lock" ] && echo "yarn" || echo ""))`
+          package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"`
+          echo "cache=$cache" >> $GITHUB_OUTPUT
+          echo "package_manager=$package_manager" >> $GITHUB_OUTPUT
+
+      - uses: pnpm/action-setup@v2.2.4
+        if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }}
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+
+      - uses: actions/setup-node@v3
+        with:
+          version: ${{ matrix.node }}
+          cache: ${{ steps.pkgman.outputs.cache }}
+
+      - name: Install dependencies
+        run: ${{ steps.pkgman.outputs.package_manager }} install
+
+      - name: Install @nuxthq/studio
+        run: ${{ steps.pkgman.outputs.package_manager }} add -D @nuxthq/studio
+
+      - name: Create .nuxtrc
+        run: echo 'modules[]=@nuxthq/studio' > .nuxtrc
+
+      - name: Generate
+        run: ${{ steps.pkgman.outputs.package_manager }} nuxi generate
+        env:
+          NUXT_PUBLIC_STUDIO_API_URL: https://api.nuxt.studio
+          NUXT_PUBLIC_STUDIO_TOKENS: 6222c5e49391ad99e20e3c1b1a475c656436e8b0877c32021147d8727205c440
+
+      - name: Add .nojekyll file
+        run: touch .output/public/.nojekyll
+
+        # Deployment job
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: docs/.output/public

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "editor.tabSize": 2,
-}

CHANGELOG.md

@@ -1,6 +1,94 @@
 # Changelog
 
 
+## v1.0.0
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.9...v1.0.0)
+
+### 🚀 Enhancements
+
+- Version 1.0.0 ([#21](https://github.com/arashsheyda/nuxt-mongoose/pull/21))
+
+### 📖 Documentation
+
+- Update docus ([0db6bdd](https://github.com/arashsheyda/nuxt-mongoose/commit/0db6bdd))
+
+### ❤️ Contributors
+
+- Arashsheyda <sheidaeearash1999@gmail.com>
+
+## v0.0.9
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.8...v0.0.9)
+
+### 🚀 Enhancements
+
+- Add possibility to type mongoose model ([#8](https://github.com/arashsheyda/nuxt-mongoose/pull/8))
+- Mongoose schema hooks ([d92a58b](https://github.com/arashsheyda/nuxt-mongoose/commit/d92a58b))
+
+### 🩹 Fixes
+
+- Update connection message in logger ([#10](https://github.com/arashsheyda/nuxt-mongoose/pull/10))
+
+### 📖 Documentation
+
+- **utils:** Add hooks and improve documentation ([647d26d](https://github.com/arashsheyda/nuxt-mongoose/commit/647d26d))
+- **utils:** Fix model options type ([3ff9756](https://github.com/arashsheyda/nuxt-mongoose/commit/3ff9756))
+- Add types link ([9c0e0ba](https://github.com/arashsheyda/nuxt-mongoose/commit/9c0e0ba))
+
+### 🏡 Chore
+
+- Fix defineNitroPlugin patch ([#9](https://github.com/arashsheyda/nuxt-mongoose/pull/9))
+- Example env ([40b8ca9](https://github.com/arashsheyda/nuxt-mongoose/commit/40b8ca9))
+- Fix defineNitroPlugin patch " ([#9](https://github.com/arashsheyda/nuxt-mongoose/pull/9))
+- Update dependencies ([925d382](https://github.com/arashsheyda/nuxt-mongoose/commit/925d382))
+- Lint ([0cdba0d](https://github.com/arashsheyda/nuxt-mongoose/commit/0cdba0d))
+- Fix tsconfig for build time ([e6b8b7d](https://github.com/arashsheyda/nuxt-mongoose/commit/e6b8b7d))
+
+### ❤️  Contributors
+
+- Arash Sheyda <sheidaeearash1999@gmail.com>
+- Amir-al-mohamad111 
+- Oumar Barry ([@oumarbarry](http://github.com/oumarbarry))
+
+## v0.0.8
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.7...v0.0.8)
+
+
+### 🚀 Enhancements
+
+  - Documentation ([6ca94dc](https://github.com/arashsheyda/nuxt-mongoose/commit/6ca94dc))
+
+### 🩹 Fixes
+
+  - Module options type ([182b760](https://github.com/arashsheyda/nuxt-mongoose/commit/182b760))
+  - Run studio action only for docs ([33bb3cc](https://github.com/arashsheyda/nuxt-mongoose/commit/33bb3cc))
+  - Resource generator modelsDir output ([1c36087](https://github.com/arashsheyda/nuxt-mongoose/commit/1c36087))
+
+### 💅 Refactors
+
+  - Reuse vite's websocket ([aaef56c](https://github.com/arashsheyda/nuxt-mongoose/commit/aaef56c))
+
+### 📖 Documentation
+
+  - Remove devtools ([6c057d4](https://github.com/arashsheyda/nuxt-mongoose/commit/6c057d4))
+  - **devtools:** Demo video ([2ba8bda](https://github.com/arashsheyda/nuxt-mongoose/commit/2ba8bda))
+  - Style ([23ec198](https://github.com/arashsheyda/nuxt-mongoose/commit/23ec198))
+  - Favicon ([9e867fc](https://github.com/arashsheyda/nuxt-mongoose/commit/9e867fc))
+
+### 🏡 Chore
+
+  - Playground example ([3356ffd](https://github.com/arashsheyda/nuxt-mongoose/commit/3356ffd))
+  - **deployment:** Add workflow file ([00259fc](https://github.com/arashsheyda/nuxt-mongoose/commit/00259fc))
+  - Update cover ([487cca5](https://github.com/arashsheyda/nuxt-mongoose/commit/487cca5))
+
+### ❤️  Contributors
+
+- Arash 
+- Arash Sheyda <sheidaeearash1999@gmail.com>
+- Arashsheyda <sheidaeearash1999@gmail.com>
+
 ## v0.0.7
 
 [compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.6...v0.0.7)

README.md

@@ -1,4 +1,4 @@
-![nuxt-mongoose](https://raw.githubusercontent.com/arashsheyda/nuxt-mongoose/c967d0bb162dddc27fa510ba3b49e4f9b6b2db61/docs/public/nuxt-mongoose.svg)
+![nuxt-mongoose](https://nuxt-mongoose.nuxt.space/cover.jpg)
 
 <div align="center">
   <h1>Nuxt Mongoose</h1>

client/app.vue

@@ -5,6 +5,7 @@ import './styles/global.css'
 <template>
   <Html>
     <Body h-screen>
+      <Notification />
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>

client/components/Connection.vue

@@ -1,33 +1,53 @@
 <script lang="ts" setup>
-defineProps({
-  connection: {
+import { computed } from 'vue'
+
+const props = defineProps({
+  code: {
     type: Number,
     default: 0,
   },
 })
+
+const connections = [
+  {
+    color: 'text-red-5',
+    border: 'border-red-5',
+    status: 'Not Connected',
+    description: 'Please Check Your Connection!',
+  },
+  {
+    color: 'text-green-5',
+    border: 'border-green-5',
+    status: 'Connected',
+    description: 'Everything is Working Perfectly!',
+  },
+  {
+    color: 'text-yellow-5',
+    border: 'border-yellow-5',
+    status: 'Connecting',
+    description: 'Just a Moment, We"re Getting There!',
+  },
+  {
+    color: 'text-orange-5',
+    border: 'border-orange-5',
+    status: 'Disconnecting',
+    description: 'Preparing to Safely Disconnect!',
+  },
+]
+
+const connection = computed(() => connections[props.code])
 </script>
 
 <template>
   <NPanelGrids>
-    <div flex="~ gap-2" animate-pulse items-center text-yellow>
-      <NIcon icon="carbon-flow-connection" />
-      Please check your mongodb connection
-    </div>
-    <div flex="~ gap-2" items-center text-light>
-      Your current connection is: {{ connection }}
+    <div flex="~ gap-2" animate-pulse items-center text-lg font-bold :class="connection.color">
+      ({{ code }}):
+      {{ connection.status }},
+      {{ connection.description }}
     </div>
     <div absolute bottom-10 left-10 right-10 flex justify-around>
-      <NCard p2 text-red-5>
-        0: Not connected
-      </NCard>
-      <NCard p2 text-green-5>
-        1: Connected
-      </NCard>
-      <NCard p2 text-yellow-5>
-        2: Connecting
-      </NCard>
-      <NCard p2 text-orange-5>
-        3: Disconnecting
+      <NCard v-for="item, index of connections" :key="index" p2 :class="[item.color, item.status === connection.status ? item.border : '']">
+        ({{ index }}): {{ item.status }}
       </NCard>
     </div>
   </NPanelGrids>

client/components/CreateResource.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { useRouter } from 'nuxt/app'
+import { computed, reactive, ref } from 'vue'
+import { rpc } from '../composables/rpc'
+
 interface ColumnInterface {
   name: string
   type: string
@@ -115,18 +119,16 @@ const convertedBread = computed(() => {
 const formattedFields = computed(() => {
   return fields.value.map((field) => {
     for (const [key, value] of Object.entries(field)) {
-      if (!value) {
-        // @ts-expect-error - no need for type checking
+      if (!value)
         delete field[key]
     }
-    }
 
     return field
   })
 })
 
 async function generate() {
-  await rpc.generateResource(
+  await rpc.value?.generateResource(
     {
       name: collection.value,
       fields: schema.value ? formattedFields.value : undefined,
@@ -142,6 +144,7 @@ async function generate() {
 const toggleSchema = computed({
   get() {
     if (hasBread.value)
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       return schema.value = true
     return schema.value
   },
@@ -247,7 +250,7 @@ const toggleSchema = computed({
           </div>
           <div flex justify-center gap2>
             <NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
-            <NIconButton icon="carbon-delete" n="red" @click="removeField(index)" />
+            <NIconButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
           </div>
         </div>
       </div>
@@ -257,5 +260,3 @@ const toggleSchema = computed({
     </NButton>
   </div>
 </template>
-
-<style></style>

client/components/DatabaseDetail.vue

@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import { computed, reactive, ref, watch } from 'vue'
+import { computedAsync } from '@vueuse/core'
+import { rpc } from '../composables/rpc'
+import { useCopy } from '../composables/editor'
+
 const props = defineProps({
   collection: {
     type: String,
@@ -10,19 +15,19 @@ const props = defineProps({
 const pagination = reactive({ limit: 20, page: 1 })
 
 const countDocuments = computedAsync(async () => {
-  return await rpc.countDocuments(props.collection)
+  return await rpc.value?.countDocuments(props.collection)
 })
 
 const documents = computedAsync(async () => {
-  return await rpc.listDocuments(props.collection, pagination)
+  return await rpc.value?.listDocuments(props.collection, pagination)
 })
 
 watch(pagination, async () => {
-  documents.value = await rpc.listDocuments(props.collection, pagination)
+  documents.value = await rpc.value?.listDocuments(props.collection, pagination)
 })
 
 const schema = computedAsync<any>(async () => {
-  return await rpc.resourceSchema(props.collection)
+  return await rpc.value?.resourceSchema(props.collection)
 })
 
 const fields = computed(() => {
@@ -79,14 +84,17 @@ function editDocument(document: any) {
 }
 
 async function saveDocument(document: any, create = true) {
-  const method = create ? rpc.createDocument : rpc.updateDocument
+  const method = create ? rpc.value?.createDocument : rpc.value?.updateDocument
+  if (!method)
+    return
   const newDocument = await method(props.collection, document)
+  // TODO: show toast
   if (newDocument?.error)
-    return alert(newDocument.error.message)
+    return
 
   if (create) {
     if (!documents.value.length) {
-      documents.value = await rpc.listDocuments(props.collection, pagination)
+      documents.value = await rpc.value?.listDocuments(props.collection, pagination)
       return discardEditing()
     }
     documents.value.push({ _id: newDocument.insertedId, ...document })
@@ -104,9 +112,10 @@ function discardEditing() {
 }
 
 async function deleteDocument(document: any) {
-  const newDocument = await rpc.deleteDocument(props.collection, document._id)
+  const newDocument = await rpc.value?.deleteDocument(props.collection, document._id)
+  // TODO: show toast
   if (newDocument.deletedCount === 0)
-    return alert('Failed to delete document')
+    return
 
   documents.value = documents.value.filter((doc: any) => doc._id !== document._id)
 }
@@ -168,17 +177,17 @@ const copy = useCopy()
               {{ document[field] }}
             </span>
           </td>
-          <td class="actions">
+          <td>
             <div flex justify-center gap2 class="group">
               <template v-if="editing && selectedDocument._id === document._id">
-                <NIconButton icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
-                <NIconButton icon="carbon-close" @click="discardEditing" />
+                <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
+                <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
               </template>
               <template v-else>
-                <NIconButton icon="carbon-edit" @click="editDocument(document)" />
-                <NIconButton icon="carbon-delete" @click="deleteDocument(document)" />
-                <NIconButton icon="carbon-document-multiple-02" @click="saveDocument(document)" />
-                <NIconButton absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
+                <NIconButton title="Edit" icon="carbon-edit" @click="editDocument(document)" />
+                <NIconButton title="Delete" icon="carbon-trash-can" @click="deleteDocument(document)" />
+                <NIconButton title="Duplicate" icon="carbon-document-multiple-02" @click="saveDocument(document)" />
+                <NIconButton title="Copy" n="xs" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
               </template>
             </div>
           </td>
@@ -188,14 +197,14 @@ const copy = useCopy()
             <input v-if="field !== '_id'" v-model="selectedDocument[field]" :placeholder="field">
             <input v-else placeholder="ObjectId(_id)" disabled>
           </td>
-          <td flex justify-center gap2 class="actions">
-            <NIconButton icon="carbon-save" @click="saveDocument(selectedDocument)" />
-            <NIconButton icon="carbon-close" @click="discardEditing" />
+          <td flex="~ justify-center gap2">
+            <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument)" />
+            <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
           </td>
         </tr>
       </tbody>
     </table>
-    <div v-else flex justify-center items-center h-full text-2xl>
+    <div v-else flex="~ justify-center items-center" h-full text-2xl>
       <NIcon icon="carbon-document" mr1 />
       No documents found
     </div>
@@ -203,11 +212,6 @@ const copy = useCopy()
 </template>
 
 <style lang="scss">
-// TODO:
-.actions .n-icon {
-  margin: 0;
-}
-
 table {
   table-layout: fixed;
   tr {

client/components/Drawer.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside, useElementSize } from '@vueuse/core'
+
 const props = defineProps<{
   modelValue?: boolean
   navbar?: HTMLElement
@@ -17,7 +20,7 @@ onClickOutside(el, () => {
   if (props.modelValue && props.autoClose)
     emit('close')
 }, {
-  ignore: ['#open-drawer-right'],
+  ignore: ['a', 'button', 'summary', '[role="dialog"]'],
 })
 </script>
 
@@ -41,7 +44,7 @@ export default {
       ref="el"
       border="l base"
       flex="~ col gap-1"
-      fixed bottom-0 right-0 z-10 z-20 of-auto text-sm backdrop-blur-lg
+      absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
       :style="{ top: `${top}px` }"
       v-bind="$attrs"
     >

client/components/Notification.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+const show = ref(false)
+const icon = ref<string | undefined>()
+const text = ref<string | undefined>()
+const classes = ref<string | undefined>()
+
+provideNotificationFn((data) => {
+  text.value = data.message
+  icon.value = data.icon
+  classes.value = data.classes ?? 'text-green'
+  show.value = true
+  setTimeout(() => {
+    show.value = false
+  }, data.duration ?? 1500)
+})
+</script>
+
+<template>
+  <div
+    fixed left-0 right-0 top-0 z-999 text-center
+    :class="show ? '' : 'pointer-events-none overflow-hidden'"
+  >
+    <div
+      border="~ base"
+      flex="~ inline gap2"
+      m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
+      :style="show ? {} : { transform: 'translateY(-300%)' }"
+      :class="[show ? 'shadow' : 'shadow-none', classes]"
+    >
+      <div v-if="icon" :class="icon" />
+      <div>{{ text }}</div>
+    </div>
+  </div>
+</template>

client/components/PanelLeftRight.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import { Pane, Splitpanes } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-
-const props = defineProps({
-  minLeft: {
-    type: Number,
-    default: 10,
-  },
-  minRight: {
-    type: Number,
-    default: 10,
-  },
-  maxLeft: {
-    type: Number,
-    default: 90,
-  },
-  maxRight: {
-    type: Number,
-    default: 90,
-  },
-})
-
-const size = ref(props.maxLeft)
-</script>
-
-<template>
-  <Splitpanes h-full of-hidden @resize="size = $event[0].size">
-    <Pane border="r base" h-full class="of-auto!" :size="size" :min-size="minLeft" :max-size="maxLeft">
-      <slot name="left" />
-    </Pane>
-    <Pane relative h-full class="of-auto!" :min-size="minRight">
-      <slot name="right" />
-    </Pane>
-  </Splitpanes>
-</template>

client/components/SplitPanel.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { Pane, Splitpanes } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+
+const props = defineProps<{
+  storageKey?: string
+  leftSize?: number
+  minSize?: number
+}>()
+
+const DEFAULT = 30
+
+const state = ref()
+const key = props.storageKey
+const size = key
+  ? computed({
+    get: () => state.value[key] || props.leftSize || DEFAULT,
+    set: (v) => { state.value[key] = v },
+  })
+  : ref(props.leftSize || DEFAULT)
+</script>
+
+<template>
+  <Splitpanes h-full of-hidden @resize="size = $event[0].size">
+    <Pane border="r base" h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
+      <slot name="left" />
+    </Pane>
+    <Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
+      <slot name="right" />
+    </Pane>
+  </Splitpanes>
+</template>

client/composables/dialog.ts

@@ -0,0 +1,14 @@
+let _showNotification: typeof showNotification
+
+export function showNotification(data: {
+  message: string
+  icon?: string
+  classes?: string
+  duration?: number
+}) {
+  _showNotification?.(data)
+}
+
+export function provideNotificationFn(fn: typeof showNotification) {
+  _showNotification = fn
+}

client/composables/editor.ts

@@ -1,10 +1,14 @@
 import { useClipboard } from '@vueuse/core'
+import { showNotification } from './dialog'
 
 export function useCopy() {
   const clipboard = useClipboard()
 
   return (text: string) => {
     clipboard.copy(text)
-    // TODO: show toast
+    showNotification({
+      message: 'Copied to clipboard',
+      icon: 'carbon-copy',
+    })
   }
 }

client/composables/rpc.ts

@@ -1,69 +1,18 @@
-import { createBirpc } from 'birpc'
-import { parse, stringify } from 'flatted'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import type { BirpcReturn } from 'birpc'
+import { ref } from 'vue'
+import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/dist/types'
 import type { ClientFunctions, ServerFunctions } from '../../src/types'
-import { PATH_ENTRY } from '../../src/constants'
+import { RPC_NAMESPACE } from '../../src/constants'
 
-const RECONNECT_INTERVAL = 2000
+export const devtools = ref<NuxtDevtoolsClient>()
+export const devtoolsRpc = ref<NuxtDevtoolsClient['rpc']>()
+export const rpc = ref<BirpcReturn<ServerFunctions, ClientFunctions>>()
 
-export const wsConnecting = ref(true)
-export const wsError = ref<any>()
+onDevtoolsClientConnected(async (client) => {
+  devtoolsRpc.value = client.devtools.rpc
+  devtools.value = client.devtools
 
-let connectPromise = connectWS()
-let onMessage: Function = () => {}
-
-export const clientFunctions = {
-  // will be added in app.vue
-} as ClientFunctions
-
-export const extendedRpcMap = new Map<string, any>()
-
-export const rpc = createBirpc<ServerFunctions>(clientFunctions, {
-  post: async (d) => {
-    (await connectPromise).send(d)
-  },
-  on: (fn) => { onMessage = fn },
-  serialize: stringify,
-  deserialize: parse,
-  resolver(name, fn) {
-    if (fn)
-      return fn
-    if (!name.includes(':'))
-      return
-    const [namespace, fnName] = name.split(':')
-    return extendedRpcMap.get(namespace)?.[fnName]
-  },
-  onError(error, name) {
-    console.error(`[nuxt-devtools] RPC error on executing "${name}":`, error)
-  },
+  rpc.value = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>(RPC_NAMESPACE, {
+  })
 })
-
-async function connectWS() {
-  const wsUrl = new URL(`ws://host${PATH_ENTRY}`)
-  wsUrl.protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
-  wsUrl.host = 'localhost:3000'
-
-  const ws = new WebSocket(wsUrl.toString())
-  ws.addEventListener('message', e => onMessage(String(e.data)))
-  ws.addEventListener('error', (e) => {
-    console.error(e)
-    wsError.value = e
-  })
-  ws.addEventListener('close', () => {
-    // eslint-disable-next-line no-console
-    console.log('[nuxt-devtools] WebSocket closed, reconnecting...')
-    wsConnecting.value = true
-    setTimeout(async () => {
-      connectPromise = connectWS()
-    }, RECONNECT_INTERVAL)
-  })
-  wsConnecting.value = true
-  if (ws.readyState !== WebSocket.OPEN)
-    await new Promise(resolve => ws.addEventListener('open', resolve))
-
-  // eslint-disable-next-line no-console
-  console.log('[nuxt-devtools] WebSocket connected.')
-  wsConnecting.value = false
-  wsError.value = null
-
-  return ws
-}

client/composables/state.ts

@@ -0,0 +1 @@
+export const selectedCollection = useState('mongo:collection', () => '')

client/layouts/default.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-const readyState = computedAsync(async () => await rpc.readyState())
+import { computedAsync } from '@vueuse/core'
+import { rpc } from '../composables/rpc'
+
+const readyState = computedAsync(async () => await rpc.value?.readyState())
 </script>
 
 <template>
   <div h-full of-auto>
     <slot v-if="readyState === 1" />
-    <Connection v-else :connection="readyState" />
+    <Connection v-else :code="readyState" />
   </div>
 </template>

client/nuxt.config.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { PATH_CLIENT } from '../src/constants'
+import { CLIENT_PATH } from '../src/constants'
 
 export default defineNuxtConfig({
   ssr: false,
@@ -22,6 +22,6 @@ export default defineNuxtConfig({
     },
   },
   app: {
-    baseURL: PATH_CLIENT,
+    baseURL: CLIENT_PATH,
   },
 })

client/pages/index.vue

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-const route = useRoute()
+import { computed, ref } from 'vue'
+import { computedAsync } from '@vueuse/core'
+import { useRouter } from 'nuxt/app'
+import { rpc } from '../composables/rpc'
+import { selectedCollection } from '../composables/state'
+
 const router = useRouter()
 
-const selectedCollection = ref()
 const drawer = ref(false)
 const search = ref('')
 
 const collections = computedAsync(async () => {
-  return await rpc.listCollections()
+  return await rpc.value?.listCollections()
 })
 
 const filtered = computed(() => {
@@ -16,28 +20,23 @@ const filtered = computed(() => {
   return collections.value.filter((c: any) => c.name.toLowerCase().includes(search.value.toLowerCase()))
 })
 
-onMounted(() => {
-  if (route.query.table)
-    selectedCollection.value = route.query.table
-})
-
 async function dropCollection(table: any) {
-  await rpc.dropCollection(table.name)
-  collections.value = await rpc.listCollections()
+  await rpc.value?.dropCollection(table.name)
+  collections.value = await rpc.value?.listCollections()
   if (selectedCollection.value === table.name) {
-    selectedCollection.value = undefined
+    selectedCollection.value = ''
     router.push({ name: 'index' })
   }
 }
 
 async function refresh() {
-  collections.value = await rpc.listCollections()
+  collections.value = await rpc.value?.listCollections()
   drawer.value = false
 }
 </script>
 
 <template>
-  <PanelLeftRight :min-left="13" :max-left="20">
+  <SplitPanel :min-left="13" :max-left="20">
     <template #left>
       <div px4>
         <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
@@ -48,13 +47,20 @@ async function refresh() {
           </div>
         </Navbar>
         <div grid gird-cols-1 my2 mx1>
-          <NuxtLink v-for="table in filtered" :key="table.name" :to="{ name: 'index', query: { table: table.name } }" flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }" @click="selectedCollection = table.name">
+          <NuxtLink
+            v-for="table in filtered"
+            :key="table.name"
+            :to="{ name: 'index', query: { table: table.name } }"
+            flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
+            :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }"
+            @click="selectedCollection = table.name"
+          >
             <span>
               <NIcon icon="carbon-db2-database" />
               {{ table.name }}
             </span>
             <div flex gap2>
-              <NIconButton block n="red" icon="carbon-delete" @click="dropCollection(table)" />
+              <NIconButton block n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
               <!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
             </div>
           </NuxtLink>
@@ -72,8 +78,8 @@ async function refresh() {
         </div>
       </div>
     </template>
-  </PanelLeftRight>
-  <DrawerRight v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
+  </SplitPanel>
+  <Drawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
     <CreateResource @refresh="refresh" />
-  </DrawerRight>
+  </Drawer>
 </template>

docs/app.config.ts

@@ -2,8 +2,9 @@ export default defineAppConfig({
   docus: {
     title: 'Nuxt Mongoose',
     description: 'A Nuxt module for simplifying the use of Mongoose in your project.',
-    image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+    image: '/cover.jpg',
     socials: {
+      twitter: 'arash_sheyda',
       github: 'arashsheyda/nuxt-mongoose',
     },
     github: {

docs/components/content/Logo.vue

@@ -1,12 +1,18 @@
 <template>
-  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.5 33.2">
+  <svg id="NuxtMongooseLogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.5 33.2">
     <rect width="32" height="32" rx="7.5" style="fill:#023430" />
     <path d="M21.4,13.4C20.1,7.6,17.3,6.1,16.6,5a10.1,10.1,0,0,1-.7-1.5,1.6,1.6,0,0,1-.6,1.2,14.1,14.1,0,0,0-4.9,10.5c-.3,6.1,4.5,9.9,5.1,10.3a1.4,1.4,0,0,0,1.4-.2,12.1,12.1,0,0,0,4.5-11.9" style="fill:#10aa50" />
     <path d="M16.1,22.2a17.8,17.8,0,0,1-.5,3.3s.2,1.5.3,3h.5a30.6,30.6,0,0,1,.5-3.2C16.3,25,16.1,23.6,16.1,22.2Z" style="fill:#b8c4c2" />
     <path d="M16.9,25.3c-.6-.3-.8-1.7-.8-3.1s.2-4.3.1-6.5,0-10.7-.3-12.1L16.6,5c.7,1.1,3.5,2.6,4.8,8.4A12,12,0,0,1,16.9,25.3Z" style="fill:#12924f" />
-    <text transform="translate(32.8 25.6)" style="font-size:25.818214416503906px;font-family:OpenSans-Bold, Open Sans;font-weight:700">
+    <text transform="translate(32.8 25.6)" style="font-size:25.818214416503906px;font-family:var(--font-sans);font-weight:700">
       <tspan fill="currentColor" x="4" y="0">Nuxt</tspan>
-      <tspan x="70.8" y="0" style="fill:#10aa50">Mongoose</tspan>
+      <tspan x="67.8" y="0" style="fill:#10aa50">Mongoose</tspan>
     </text>
   </svg>
 </template>
+
+<style>
+.NuxtMongooseLogo {
+  font-family: serif;
+}
+</style>

docs/content/0.index.md

@@ -19,7 +19,7 @@ secondary:
 ---
 
 #title
-Nuxt Mongoose
+Nuxt [Mongoose]{style="color: var(--color-primary-500)"}
 
 #description
 A Nuxt module for simplifying the use of [Mongoose](https://mongoosejs.com/) in your project.

docs/content/1.getting-started/1.setup.md

@@ -49,3 +49,8 @@ export default defineNuxtConfig({
   },
 })
 ```
+If you want to configure only the `uri` just add `MONGODB_URI` in your `.env` file.
+
+```env
+MONGODB_URI=YOUR_MONGO_URI
+```

docs/content/2.api/1.utils.md

@@ -12,13 +12,17 @@ This function creates a new Mongoose model with schema. Example usage:
   export const User = defineMongooseModel({
     name: 'User',
     schema: {
-      name: {
-        type: String,
+      email: {
+        type: 'string',
         required: true,
+        unique: true,
       },
     },
     options: {
       
+    },
+    hooks(schema) {
+
     },
   })
   ```
@@ -27,18 +31,31 @@ This function creates a new Mongoose model with schema. Example usage:
   import { defineMongooseModel } from '#nuxt/mongoose'
 
   export const User = defineMongooseModel('User', {
-    name: {
-      type: String,
+    email: {
+      type: 'string',
       required: true,
+      unique: true,
     },
   }, {
     
+  }, (schema) => {
+
   })
   ```
 
 ::
 
 
+| **Key**                      | **Type**   | **Require** |  **Description**  |
+| ---------------------------- | ----------- | ----------- | ----- |
+| `name` | `string` | true | Name of Model |
+| `schema` | [`SchemaDefinition`](https://mongoosejs.com/docs/schematypes.html) | true | Schema Definition of Model |
+| `options` | [`SchemaOptions`](https://mongoosejs.com/docs/guide.html#options) | false | Schema Options for Model |
+| `hooks` | [`(schema: Schema<T>) => void`](https://mongoosejs.com/docs/middleware.html) | false | Schema Hooks Function to customize Model |
+
+
+
+
 ## `defineMongooseConnection`
 This function creates a new Mongoose connection.
 - `nuxt-mongoose` provides a default connection for you, it auto-register a plugin in nitro, so you don't need to use this function unless you want to create a new connection. more info [here](https://github.com/arashsheyda/nuxt-mongoose/blob/main/src/runtime/server/plugins/mongoose.db.ts).

docs/content/2.api/2.devtools.md

@@ -1,3 +1,8 @@
 # Devtools (beta)
 
 `nuxt-mongoose` comes with a [Nuxt Devtools](https://github.com/nuxt/devtools) module that allows you to manage your collections and generate api-endpoints & schemas...
+
+Here is a demo video:
+
+:video-player{src="https://www.youtube.com/watch?v=hK0npSfr_Vs"}
+

docs/nuxt.config.ts

@@ -1,8 +1,19 @@
 export default defineNuxtConfig({
   extends: '@nuxt-themes/docus',
 
+  app: {
+    head: {
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/x-icon',
+          href: '/mongoose-icon.svg',
+        },
+      ],
+    },
+  },
+
   modules: [
     '@nuxthq/studio',
-    '@nuxt/devtools',
   ],
 })

docs/package.json

@@ -10,8 +10,8 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.12.0",
-    "@nuxthq/studio": "^0.13.2",
-    "nuxt": "^3.5.0"
+    "@nuxt-themes/docus": "^1.14.3",
+    "@nuxthq/studio": "^0.13.4",
+    "nuxt": "^3.6.3"
   }
 }

module.cjs

@@ -1,15 +0,0 @@
-/* eslint-disable eslint-comments/no-unlimited-disable */
-/* eslint-disable */
-module.exports = function (...args) {
-  const nuxt = this.nuxt || args[1]
-  let _a
-  let version = (nuxt == null ? void 0 : nuxt._version) || (nuxt == null ? void 0 : nuxt.version) || ((_a = nuxt == null ? void 0 : nuxt.constructor) == null ? void 0 : _a.version) || ''
-  version = version.replace(/^v/g, '')
-  // Nuxt DevTools is not compatible with Nuxt 2, disabled
-  if (version.startsWith('2.')) {
-    return
-  }
-  return import('./dist/module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./dist/module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package.json

@@ -1,72 +1,76 @@
 {
   "name": "nuxt-mongoose",
   "type": "module",
-  "version": "0.0.7",
+  "version": "1.1.0",
+  "private": false,
+  "packageManager": "pnpm@8.7.4",
   "description": "Nuxt 3 module for MongoDB with Mongoose",
   "license": "MIT",
+  "funding": "https://github.com/sponsors/arashsheyda",
+  "homepage": "https://nuxt-mongoose.nuxt.space",
   "repository": {
     "type": "git",
     "url": "https://github.com/arashsheyda/nuxt-mongoose"
   },
+  "bugs": {
+    "url": "https://github.com/arashsheyda/nuxt-mongoose/issues"
+  },
+  "keywords": [
+    "nuxt",
+    "mongoose",
+    "mongodb",
+    "devtools"
+  ],
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
-      "require": "./module.cjs",
-      "import": "./dist/module.mjs"
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
   },
-    "./types": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/types.mjs"
+  "build": {
+    "externals": [
+      "ofetch"
+    ]
   },
-    "./*": "./*"
-  },
-  "main": "./module.cjs",
+  "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
+    "prepare": "nuxt-module-build --stub && nuxi prepare client",
+    "build": "nuxt-module-build && npm run build:client",
     "build:client": "nuxi generate client",
-    "build:module": "nuxt-build-module",
     "dev": "nuxi dev playground",
-    "dev:prepare": "nuxi prepare client",
-    "dev:prod": "npm run build && pnpm dev",
-    "release": "npm run lint && npm run build && changelogen --release && npm publish && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch"
+    "dev:client": "nuxi dev client --port 3300",
+    "dev:prod": "npm run build && npm run dev",
+    "release": "npm run lint && npm run build && changelogen --release && npm publish",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^0.5.5",
-    "@nuxt/kit": "^3.5.2",
-    "@types/fs-extra": "^11.0.1",
-    "birpc": "^0.2.11",
+    "@nuxt/devtools-kit": "^0.8.2",
+    "@nuxt/devtools-ui-kit": "^0.8.2",
+    "@nuxt/kit": "^3.7.1",
+    "@vueuse/core": "^10.4.1",
     "defu": "^6.1.2",
-    "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
-    "mongoose": "^7.2.2",
-    "pathe": "^1.1.0",
+    "mongoose": "^7.5.2",
+    "ofetch": "^1.3.3",
+    "pathe": "^1.1.1",
     "pluralize": "^8.0.0",
-    "sirv": "^2.0.3",
-    "tinyws": "^0.1.0",
-    "ws": "^8.13.0"
+    "sirv": "^2.0.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.5",
-    "@nuxt/devtools": "^0.5.5",
-    "@nuxt/devtools-ui-kit": "^0.5.5",
-    "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.5.2",
-    "@nuxt/test-utils": "^3.5.2",
-    "@types/pluralize": "^0.0.29",
-    "@types/ws": "^8.5.4",
-    "changelogen": "^0.5.3",
-    "eslint": "^8.39.0",
-    "nuxt": "^3.5.2",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.3.1",
-    "splitpanes": "^3.1.5",
-    "vitest": "^0.31.2"
+    "@antfu/eslint-config": "^0.41.0",
+    "@nuxt/module-builder": "^0.5.1",
+    "@types/fs-extra": "^11.0.2",
+    "@types/pluralize": "^0.0.30",
+    "changelogen": "^0.5.5",
+    "eslint": "8.48.0",
+    "nuxt": "^3.7.1",
+    "sass": "^1.67.0",
+    "sass-loader": "^13.3.2",
+    "splitpanes": "^3.1.5"
   }
 }

playground/.env.example

@@ -0,0 +1 @@
+MONGODB_URI="mongodb://localhost:27017/nuxt-mongoose"

playground/nuxt.config.ts

@@ -1,6 +1,33 @@
+import { resolve } from 'node:path'
+import { defineNuxtConfig } from 'nuxt/config'
+import { defineNuxtModule } from '@nuxt/kit'
+import { startSubprocess } from '@nuxt/devtools-kit'
+import { CLIENT_PORT } from '../src/constants'
+
 export default defineNuxtConfig({
+  devtools: {
+    enabled: true,
+  },
+
   modules: [
-    '@nuxt/devtools',
     '../src/module',
+    defineNuxtModule({
+      setup(_, nuxt) {
+        if (!nuxt.options.dev)
+          return
+
+        startSubprocess(
+          {
+            command: 'npx',
+            args: ['nuxi', 'dev', '--port', CLIENT_PORT.toString()],
+            cwd: resolve(__dirname, '../client'),
+          },
+          {
+            id: 'nuxt-mongoose:client',
+            name: 'Nuxt Mongoose Client Dev',
+          },
+        )
+      },
+    }),
   ],
 })

playground/server/api/hi.get.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(async () => {
+  return {
+    message: 'hi',
+  }
+})

playground/server/models/user.schema.ts

@@ -7,10 +7,20 @@ export const UserSchema = defineMongooseModel({
       type: 'string',
       required: true,
     },
-    slug: {
+    email: {
       type: 'string',
       required: true,
-      unique: true,
+      unique: false,
     },
+    password: {
+      type: 'string',
+      required: true,
+    },
+  },
+  hooks(schema) {
+    schema.pre('save', function (this, next) {
+      this.password = `hash.${this.password}.${Math.random()}`
+      next()
+    })
   },
 })

playground/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

src/constants/index.ts

@@ -1,3 +1,3 @@
-export const PATH = '/__nuxt_mongoose__'
-export const PATH_ENTRY = `${PATH}/entry`
-export const PATH_CLIENT = `${PATH}/client`
+export const CLIENT_PATH = '/__nuxt-mongoose'
+export const CLIENT_PORT = 3300
+export const RPC_NAMESPACE = 'nuxt-mongoose-rpc'

src/devtools.ts

@@ -0,0 +1,56 @@
+import { existsSync } from 'node:fs'
+import type { Nuxt } from 'nuxt/schema'
+import type { Resolver } from '@nuxt/kit'
+import { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'
+import type { ClientFunctions, ServerFunctions } from './types'
+import type { ModuleOptions } from './module'
+import { useViteWebSocket } from './utils'
+
+import { setupRPC } from './rpc'
+import { CLIENT_PATH, CLIENT_PORT, RPC_NAMESPACE } from './constants'
+
+export function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resolve'], nuxt: Nuxt) {
+  const clientPath = resolve('./client')
+  const isProductionBuild = existsSync(clientPath)
+
+  if (isProductionBuild) {
+    nuxt.hook('vite:serverCreated', async (server) => {
+      const sirv = await import('sirv').then(r => r.default || r)
+      server.middlewares.use(
+        CLIENT_PATH,
+        sirv(clientPath, { dev: true, single: true }),
+      )
+    })
+  }
+  else {
+    nuxt.hook('vite:extendConfig', (config) => {
+      config.server = config.server || {}
+      config.server.proxy = config.server.proxy || {}
+      config.server.proxy[CLIENT_PATH] = {
+        target: `http://localhost:${CLIENT_PORT}${CLIENT_PATH}`,
+        changeOrigin: true,
+        followRedirects: true,
+        rewrite: path => path.replace(CLIENT_PATH, ''),
+      }
+    })
+  }
+
+  nuxt.hook('devtools:customTabs', (tabs) => {
+    tabs.push({
+      name: 'nuxt-mongoose',
+      title: 'Mongoose',
+      icon: 'skill-icons:mongodb',
+      view: {
+        type: 'iframe',
+        src: CLIENT_PATH,
+      },
+    })
+  })
+
+  const wsServer = useViteWebSocket(nuxt)
+  onDevToolsInitialized(async () => {
+    const rpcFunctions = setupRPC({ options, wsServer, nuxt })
+
+    extendServerRpc<ClientFunctions, ServerFunctions>(RPC_NAMESPACE, rpcFunctions)
+  })
+}

src/module.ts

@@ -1,23 +1,46 @@
 import {
-  addImportsDir,
   addServerPlugin,
   addTemplate,
   createResolver,
   defineNuxtModule,
   logger,
 } from '@nuxt/kit'
-import { pathExists } from 'fs-extra'
-import { tinyws } from 'tinyws'
+import type { ConnectOptions } from 'mongoose'
+import defu from 'defu'
 import { join } from 'pathe'
-import { defu } from 'defu'
-import sirv from 'sirv'
+import { $fetch } from 'ofetch'
+import { version } from '../package.json'
+import { setupDevToolsUI } from './devtools'
 
-import { PATH_CLIENT, PATH_ENTRY } from './constants'
-import type { ModuleOptions } from './types'
-
-import { setupRPC } from './server-rpc'
-
-export type { ModuleOptions }
+export interface ModuleOptions {
+  /**
+   *  The MongoDB URI connection
+   *
+   * @default process.env.MONGODB_URI
+   *
+  */
+  uri: string | undefined
+  /**
+   *  Nuxt DevTools
+   *
+   * @default true
+   *
+  */
+  devtools: boolean
+  /**
+   *  Mongoose Connections
+   *
+   * @default {}
+  */
+  options?: ConnectOptions
+  /**
+   *  Models Directory for auto-import
+   *
+   * @default 'models'
+   *
+  */
+  modelsDir?: string
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -25,71 +48,49 @@ export default defineNuxtModule<ModuleOptions>({
     configKey: 'mongoose',
   },
   defaults: {
+    // eslint-disable-next-line n/prefer-global/process
     uri: process.env.MONGODB_URI as string,
     devtools: true,
     options: {},
     modelsDir: 'models',
   },
-  setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-    const runtimeConfig = nuxt.options.runtimeConfig
-
-    addImportsDir(resolve('./runtime/composables'))
+  async setup(options, nuxt) {
+    if (nuxt.options.dev) {
+      $fetch('https://registry.npmjs.org/nuxt-mongoose/latest').then((release) => {
+        if (release.version > version)
+          logger.info(`A new version of Nuxt Mongoose (v${release.version}) is available: https://github.com/arashsheyda/nuxt-mongoose/releases/latest`)
+      }).catch(() => {})
+    }
 
     if (!options.uri) {
-      logger.warn('Missing `MONGODB_URI` in `.env`')
+      logger.warn('Missing MongoDB URI. You can set it in your `nuxt.config` or in your `.env` as `MONGODB_URI`')
       return
     }
 
-    // Runtime Config
-    runtimeConfig.mongoose = defu(runtimeConfig.mongoose || {}, {
+    const { resolve } = createResolver(import.meta.url)
+    const config = nuxt.options.runtimeConfig as any
+
+    config.mongoose = defu(config.mongoose || {}, {
       uri: options.uri,
       options: options.options,
       devtools: options.devtools,
-      modelsDir: options.modelsDir,
-    })
-
-    // Setup devtools UI
-    const distResolve = (p: string) => {
-      const cwd = resolve('.')
-      if (cwd.endsWith('/dist'))
-        return resolve(p)
-      return resolve(`../dist/${p}`)
-    }
-
-    const clientPath = distResolve('./client')
-    const { middleware: rpcMiddleware } = setupRPC(nuxt, options)
-
-    nuxt.hook('vite:serverCreated', async (server) => {
-      server.middlewares.use(PATH_ENTRY, tinyws() as any)
-      server.middlewares.use(PATH_ENTRY, rpcMiddleware as any)
-      if (await pathExists(clientPath))
-        server.middlewares.use(PATH_CLIENT, sirv(clientPath, { dev: true, single: true }))
-    })
-
-    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
-    // @ts-ignore runtime type
-    nuxt.hook('devtools:customTabs', (iframeTabs) => {
-      iframeTabs.push({
-        name: 'mongoose',
-        title: 'Mongoose',
-        icon: 'skill-icons:mongodb',
-        view: {
-          type: 'iframe',
-          src: PATH_CLIENT,
-        },
-      })
+      modelsDir: join(nuxt.options.serverDir, options.modelsDir!),
     })
 
     // virtual imports
-    nuxt.hook('nitro:config', (nitroConfig) => {
-      nitroConfig.alias = nitroConfig.alias || {}
+    nuxt.hook('nitro:config', (_config) => {
+      _config.alias = _config.alias || {}
 
       // Inline module runtime in Nitro bundle
-      nitroConfig.externals = defu(typeof nitroConfig.externals === 'object' ? nitroConfig.externals : {}, {
+      _config.externals = defu(typeof _config.externals === 'object' ? _config.externals : {}, {
         inline: [resolve('./runtime')],
       })
-      nitroConfig.alias['#nuxt/mongoose'] = resolve('./runtime/server/services')
+      _config.alias['#nuxt/mongoose'] = resolve('./runtime/server/services')
+
+      if (_config.imports) {
+        _config.imports.dirs = _config.imports.dirs || []
+        _config.imports.dirs?.push(config.mongoose.modelsDir)
+      }
     })
 
     addTemplate({
@@ -106,15 +107,9 @@ export default defineNuxtModule<ModuleOptions>({
       options.references.push({ path: resolve(nuxt.options.buildDir, 'types/nuxt-mongoose.d.ts') })
     })
 
-    // Nitro auto imports
-    nuxt.hook('nitro:config', (_nitroConfig) => {
-      if (_nitroConfig.imports) {
-        _nitroConfig.imports.dirs = _nitroConfig.imports.dirs || []
-        _nitroConfig.imports.dirs?.push(
-          join(nuxt.options.serverDir, runtimeConfig.mongoose.modelsDir),
-        )
-      }
-    })
+    const isDevToolsEnabled = typeof nuxt.options.devtools === 'boolean' ? nuxt.options.devtools : nuxt.options.devtools.enabled
+    if (nuxt.options.dev && isDevToolsEnabled)
+      setupDevToolsUI(options, resolve, nuxt)
 
     // Add server-plugin for database connection
     addServerPlugin(resolve('./runtime/server/plugins/mongoose.db'))

src/rpc/database.ts

@@ -1,9 +1,8 @@
 import mongoose from 'mongoose'
-import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
-
-export function setupDatabaseRPC({ options }: NuxtDevtoolsServerContext): any {
-  mongoose.connect(options.uri, options.options)
+import type { DevtoolsServerContext, ServerFunctions } from '../types'
 
+// eslint-disable-next-line no-empty-pattern
+export function setupDatabaseRPC({}: DevtoolsServerContext) {
   return {
     async readyState() {
       return mongoose.connection.readyState
@@ -62,8 +61,8 @@ export function setupDatabaseRPC({ options }: NuxtDevtoolsServerContext): any {
       const skip = (options.page - 1) * options.limit
       const cursor = mongoose.connection.db.collection(collection).find().skip(skip)
       if (options.limit !== 0)
-        cursor.limit(options.limit)
-      return await cursor.toArray()
+        cursor?.limit(options.limit)
+      return await cursor?.toArray()
     },
     async getDocument(collection: string, document: any) {
       try {

src/rpc/index.ts

@@ -0,0 +1,23 @@
+import mongoose from 'mongoose'
+import type { DevtoolsServerContext, ServerFunctions } from '../types'
+
+import { setupDatabaseRPC } from './database'
+import { setupResourceRPC } from './resource'
+
+export function setupRPC(ctx: DevtoolsServerContext): ServerFunctions {
+  mongoose.connect(ctx.options.uri, ctx.options.options)
+
+  return {
+    getOptions() {
+      return ctx.options
+    },
+
+    ...setupDatabaseRPC(ctx),
+    ...setupResourceRPC(ctx),
+
+    async reset() {
+      const ws = await ctx.wsServer
+      ws.send('nuxt-mongoose:reset')
+    },
+  }
+}

src/rpc/resource.ts

@@ -1,21 +1,22 @@
 import fs from 'fs-extra'
-import { resolve } from 'pathe'
-import type { Collection, NuxtDevtoolsServerContext, Resource, ServerFunctions } from '../types'
-import { generateApiRoute, generateSchemaFile } from '../utils/schematics'
-import { capitalize, pluralize, singularize } from '../utils/formatting'
+import { join } from 'pathe'
+import mongoose from 'mongoose'
+import type { Collection, DevtoolsServerContext, Resource, ServerFunctions } from '../types'
+import { capitalize, generateApiRoute, generateSchemaFile, pluralize, singularize } from '../utils'
+
+export function setupResourceRPC({ nuxt }: DevtoolsServerContext): any {
+  const config = nuxt.options.runtimeConfig.mongoose
 
-export function setupResourceRPC({ nuxt, rpc }: NuxtDevtoolsServerContext): any {
   return {
-    // TODO: maybe separate functions
     async generateResource(collection: Collection, resources: Resource[]) {
       const singular = singularize(collection.name).toLowerCase()
       const plural = pluralize(collection.name).toLowerCase()
       const dbName = capitalize(singular)
 
       if (collection.fields) {
-        const schemaPath = resolve(nuxt.options.serverDir, 'utils/models', `${singular}.schema.ts`)
+        const schemaPath = join(config.modelsDir, `${singular}.schema.ts`)
         if (!fs.existsSync(schemaPath)) {
-          fs.ensureDirSync(resolve(nuxt.options.serverDir, 'utils/models'))
+          fs.ensureDirSync(config.modelsDir)
           fs.writeFileSync(schemaPath, generateSchemaFile(dbName, collection.fields))
         }
 
@@ -34,9 +35,9 @@ export function setupResourceRPC({ nuxt, rpc }: NuxtDevtoolsServerContext): any
             ? (routeTypes[route.type] as any)(route.by)
             : routeTypes[route.type]
 
-          const filePath = resolve(nuxt.options.serverDir, 'api', plural, fileName)
+          const filePath = join(nuxt.options.serverDir, 'api', plural, fileName)
           if (!fs.existsSync(filePath)) {
-            fs.ensureDirSync(resolve(nuxt.options.serverDir, `api/${plural}`))
+            fs.ensureDirSync(join(nuxt.options.serverDir, `api/${plural}`))
             const content = generateApiRoute(route.type, { model, by: route.by })
             fs.writeFileSync(filePath, content)
           }
@@ -44,14 +45,13 @@ export function setupResourceRPC({ nuxt, rpc }: NuxtDevtoolsServerContext): any
       }
 
       // create collection if not exists
-      const collections = await rpc.functions.listCollections()
+      const collections = await mongoose.connection.db.listCollections().toArray()
       if (!collections.find((c: any) => c.name === plural))
-        await rpc.functions.createCollection(plural)
+        return await mongoose.connection.db.createCollection(plural)
     },
     async resourceSchema(collection: string) {
-      // TODO: use magicast
       const singular = singularize(collection).toLowerCase()
-      const schemaPath = resolve(nuxt.options.serverDir, 'utils/models', `${singular}.schema.ts`)
+      const schemaPath = join(config.modelsDir, `${singular}.schema.ts`)
       if (fs.existsSync(schemaPath)) {
         const content = fs.readFileSync(schemaPath, 'utf-8').match(/schema: \{(.|\n)*\}/g)
         if (content) {

src/runtime/server/plugins/mongoose.db.ts

@@ -1,8 +1,8 @@
 /**
  * Due to an upstream bug in Nuxt 3 we need to stub the plugin here, track:https://github.com/nuxt/nuxt/issues/18556
- * */
+ */
 import type { NitroApp } from 'nitropack'
-import { defineMongooseConnection } from '../services/mongoose'
+import { defineMongooseConnection } from '../services'
 
 type NitroAppPlugin = (nitro: NitroApp) => void
 

src/runtime/server/services/index.ts

@@ -1 +1,50 @@
-export { defineMongooseConnection, defineMongooseModel } from './mongoose'
+import { logger } from '@nuxt/kit'
+import mongoose from 'mongoose'
+import type { ConnectOptions, Model, SchemaDefinition, SchemaOptions } from 'mongoose'
+
+import { useRuntimeConfig } from '#imports'
+
+export async function defineMongooseConnection({ uri, options }: { uri?: string; options?: ConnectOptions } = {}): Promise<void> {
+  // TODO: types
+  const config = useRuntimeConfig().mongoose
+  const mongooseUri = uri || config.uri
+  const mongooseOptions = options || config.options
+
+  try {
+    await mongoose.connect(mongooseUri, { ...mongooseOptions })
+    logger.success('Connected to `MongoDB`')
+  }
+  catch (err) {
+    logger.error('Error connecting to `MongoDB`', err)
+  }
+}
+
+export function defineMongooseModel<T>(
+  nameOrOptions: string | {
+    name: string
+    schema: SchemaDefinition
+    options?: SchemaOptions
+    hooks?: (schema: mongoose.Schema<T>) => void
+  },
+  schema?: SchemaDefinition,
+  options?: SchemaOptions,
+  hooks?: (schema: mongoose.Schema<T>) => void,
+): Model<T> {
+  let name: string
+  if (typeof nameOrOptions === 'string') {
+    name = nameOrOptions
+  }
+  else {
+    name = nameOrOptions.name
+    schema = nameOrOptions.schema
+    options = nameOrOptions.options
+    hooks = nameOrOptions.hooks
+  }
+
+  const newSchema = new mongoose.Schema<T>(schema, options as any)
+
+  if (hooks)
+    hooks(newSchema)
+
+  return mongoose.model<T>(name, newSchema)
+}

src/runtime/server/services/mongoose.ts

@@ -1,36 +0,0 @@
-import type { ConnectOptions, Model, SchemaDefinition, SchemaOptions } from 'mongoose'
-import mongoose from 'mongoose'
-import { logger } from '@nuxt/kit'
-
-import { useRuntimeConfig } from '#imports'
-
-export async function defineMongooseConnection({ uri, options }: { uri?: string; options?: ConnectOptions } = {}): Promise<void> {
-  const config = useRuntimeConfig().mongoose
-  const mongooseUri = uri || config.uri
-  const mongooseOptions = options || config.options
-
-  try {
-    await mongoose.connect(mongooseUri, { ...mongooseOptions })
-    logger.info('Connected to mongoose database')
-  }
-  catch (err) {
-    logger.error('Error connecting to database', err)
-  }
-}
-
-export function defineMongooseModel(nameOrOptions: string | { name: string; schema: SchemaDefinition; options?: SchemaOptions }, schema?: SchemaDefinition, options?: SchemaOptions): Model<any> {
-  let name: string
-  if (typeof nameOrOptions === 'string') {
-    name = nameOrOptions
-  }
-  else {
-    name = nameOrOptions.name
-    schema = nameOrOptions.schema
-    options = nameOrOptions.options
-  }
-
-  const newSchema = new mongoose.Schema({
-    ...schema,
-  }, { ...options })
-  return mongoose.model(name, newSchema)
-}

src/server-rpc/index.ts

@@ -1,103 +0,0 @@
-import type { TinyWSRequest } from 'tinyws'
-import type { NodeIncomingMessage, NodeServerResponse } from 'h3'
-import type { WebSocket } from 'ws'
-import { createBirpcGroup } from 'birpc'
-import type { ChannelOptions } from 'birpc'
-
-import { parse, stringify } from 'flatted'
-import type { Nuxt } from 'nuxt/schema'
-import type { ClientFunctions, ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
-import { setupDatabaseRPC } from './database'
-import { setupResourceRPC } from './resource'
-
-export function setupRPC(nuxt: Nuxt, options: ModuleOptions): any {
-  const serverFunctions = {} as ServerFunctions
-  const extendedRpcMap = new Map<string, any>()
-  const rpc = createBirpcGroup<ClientFunctions, ServerFunctions>(
-    serverFunctions,
-    [],
-    {
-      resolver: (name, fn) => {
-        if (fn)
-          return fn
-
-        if (!name.includes(':'))
-          return
-
-        const [namespace, fnName] = name.split(':')
-        return extendedRpcMap.get(namespace)?.[fnName]
-      },
-      onError(error, name) {
-        console.error(`[nuxt-devtools] RPC error on executing "${name}":`, error)
-      },
-    },
-  )
-
-  function refresh(event: keyof ServerFunctions) {
-    rpc.broadcast.refresh.asEvent(event)
-  }
-
-  function extendServerRpc(namespace: string, functions: any): any {
-    extendedRpcMap.set(namespace, functions)
-
-    return {
-      broadcast: new Proxy({}, {
-        get: (_, key) => {
-          if (typeof key !== 'string')
-            return
-          return (rpc.broadcast as any)[`${namespace}:${key}`]
-        },
-      }),
-    }
-  }
-
-  const ctx: NuxtDevtoolsServerContext = {
-    nuxt,
-    options,
-    rpc,
-    refresh,
-    extendServerRpc,
-  }
-
-  // @ts-expect-error untyped
-  nuxt.devtools = ctx
-
-  Object.assign(serverFunctions, {
-    ...setupDatabaseRPC(ctx),
-    ...setupResourceRPC(ctx),
-  } satisfies Partial<ServerFunctions>)
-
-  const wsClients = new Set<WebSocket>()
-  const middleware = async (req: NodeIncomingMessage & TinyWSRequest, _res: NodeServerResponse, next: Function) => {
-    // Handle WebSocket
-    if (req.ws) {
-      const ws = await req.ws()
-      wsClients.add(ws)
-      const channel: ChannelOptions = {
-        post: d => ws.send(d),
-        on: fn => ws.on('message', fn),
-        serialize: stringify,
-        deserialize: parse,
-      }
-      rpc.updateChannels((c) => {
-        c.push(channel)
-      })
-      ws.on('close', () => {
-        wsClients.delete(ws)
-        rpc.updateChannels((c) => {
-          const index = c.indexOf(channel)
-          if (index >= 0)
-            c.splice(index, 1)
-        })
-      })
-    }
-    else {
-      next()
-    }
-  }
-
-  return {
-    middleware,
-    ...ctx,
-  }
-}

src/types/index.ts

@@ -1,3 +1,47 @@
-export * from './rpc'
-export * from './server-ctx'
-export * from './module-options'
+import type { Nuxt } from 'nuxt/schema'
+import type { WebSocketServer } from 'vite'
+import type { ModuleOptions } from '../module'
+
+export interface ServerFunctions {
+  getOptions(): ModuleOptions
+
+  // Database - collections
+  readyState(): Promise<any>
+  createCollection(name: string): Promise<any>
+  listCollections(): Promise<any>
+  getCollection(name: string): Promise<any>
+  dropCollection(name: string): Promise<any>
+
+  // Database - documents
+  createDocument(collection: string, data: any): Promise<any>
+  countDocuments(collection: string): Promise<any>
+  listDocuments(collection: string, options: any): Promise<any>
+  getDocument(collection: string, id: string): Promise<any>
+  updateDocument(collection: string, data: any): Promise<any>
+  deleteDocument(collection: string, id: string): Promise<any>
+
+  // Resource - api-routes & models
+  generateResource(collection: Collection, resources: Resource[]): Promise<any>
+  resourceSchema(collection: string): Promise<any>
+
+  reset(): void
+}
+
+export interface ClientFunctions {
+}
+
+export interface DevtoolsServerContext {
+  nuxt: Nuxt
+  options: ModuleOptions
+  wsServer: Promise<WebSocketServer>
+}
+
+export interface Collection {
+  name: string
+  fields?: object[]
+}
+
+export interface Resource {
+  type: 'index' | 'create' | 'show' | 'put' | 'delete'
+  by?: string
+}

src/types/module-options.ts

@@ -1,8 +0,0 @@
-import type { ConnectOptions } from 'mongoose'
-
-export interface ModuleOptions {
-  uri: string
-  devtools: boolean
-  options?: ConnectOptions
-  modelsDir?: string
-}

src/types/rpc.ts

@@ -1,34 +0,0 @@
-export interface ServerFunctions {
-  // Database - collections
-  readyState(): Promise<any>
-  createCollection(name: string): Promise<any>
-  listCollections(): Promise<any>
-  getCollection(name: string): Promise<any>
-  dropCollection(name: string): Promise<any>
-
-  // Database - documents
-  createDocument(collection: string, data: any): Promise<any>
-  countDocuments(collection: string): Promise<any>
-  listDocuments(collection: string, options: any): Promise<any>
-  getDocument(collection: string, id: string): Promise<any>
-  updateDocument(collection: string, data: any): Promise<any>
-  deleteDocument(collection: string, id: string): Promise<any>
-
-  // Resource - api-routes & models
-  generateResource(collection: Collection, resources: Resource[]): Promise<any>
-  resourceSchema(collection: string): Promise<any>
-}
-
-export interface ClientFunctions {
-  refresh(type: string): void
-}
-
-export interface Collection {
-  name: string
-  fields?: {}[]
-}
-
-export interface Resource {
-  type: 'index' | 'create' | 'show' | 'put' | 'delete'
-  by?: string
-}

src/types/server-ctx.ts

@@ -1,15 +0,0 @@
-import type { BirpcGroup } from 'birpc'
-import type { Nuxt } from 'nuxt/schema'
-import type { ClientFunctions, ServerFunctions } from './rpc'
-import type { ModuleOptions } from './module-options'
-
-export interface NuxtDevtoolsServerContext {
-  nuxt: Nuxt
-  options: ModuleOptions
-
-  rpc: BirpcGroup<ClientFunctions, ServerFunctions>
-
-  refresh: (event: keyof ServerFunctions) => void
-
-  extendServerRpc: <ClientFunctions = {}, ServerFunctions = {}>(name: string, functions: ServerFunctions) => BirpcGroup<ClientFunctions, ServerFunctions>
-}

src/utils/formatting.ts

@@ -1,22 +0,0 @@
-import plrz from 'pluralize'
-
-export function normalizeToKebabOrSnakeCase(str: string) {
-  const STRING_DASHERIZE_REGEXP = /\s/g
-  const STRING_DECAMELIZE_REGEXP = /([a-z\d])([A-Z])/g
-  return str
-    .replace(STRING_DECAMELIZE_REGEXP, '$1-$2')
-    .toLowerCase()
-    .replace(STRING_DASHERIZE_REGEXP, '-')
-}
-
-export function pluralize(str: string) {
-  return plrz.plural(str)
-}
-
-export function singularize(str: string) {
-  return plrz.singular(str)
-}
-
-export function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}

src/utils/index.ts

@@ -1,4 +1,35 @@
-import { capitalize } from './formatting'
+import type { WebSocketServer } from 'vite'
+import type { Nuxt } from 'nuxt/schema'
+import plrz from 'pluralize'
+
+export function useViteWebSocket(nuxt: Nuxt) {
+  return new Promise<WebSocketServer>((_resolve) => {
+    nuxt.hooks.hook('vite:serverCreated', (viteServer) => {
+      _resolve(viteServer.ws)
+    })
+  })
+}
+
+export function normalizeToKebabOrSnakeCase(str: string) {
+  const STRING_DASHERIZE_REGEXP = /\s/g
+  const STRING_DECAMELIZE_REGEXP = /([a-z\d])([A-Z])/g
+  return str
+    .replace(STRING_DECAMELIZE_REGEXP, '$1-$2')
+    .toLowerCase()
+    .replace(STRING_DASHERIZE_REGEXP, '-')
+}
+
+export function pluralize(str: string) {
+  return plrz.plural(str)
+}
+
+export function singularize(str: string) {
+  return plrz.singular(str)
+}
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
 
 export function generateSchemaFile(name: string, fields: any) {
   name = capitalize(name)

tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "./client/.nuxt/tsconfig.json"
+  "extends": "./playground/.nuxt/tsconfig.json"
 }