chore(release): v0.0.3

CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog
 
 
+## v0.0.3
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.2...v0.0.3)
+
+
+### 🚀 Enhancements
+
+  - Duplicate document ([f40c483](https://github.com/arashsheyda/nuxt-mongoose/commit/f40c483))
+  - Initial pagination ([3ac731c](https://github.com/arashsheyda/nuxt-mongoose/commit/3ac731c))
+
+### 🩹 Fixes
+
+  - Initial pagination ([ad0c5b2](https://github.com/arashsheyda/nuxt-mongoose/commit/ad0c5b2))
+  - Handle errors ([e9b764b](https://github.com/arashsheyda/nuxt-mongoose/commit/e9b764b))
+
+### 🏡 Chore
+
+  - Move readyState ([260eadd](https://github.com/arashsheyda/nuxt-mongoose/commit/260eadd))
+
+### ❤️  Contributors
+
+- Arashsheyda <sheidaeearash1999@gmail.com>
+
+## v0.0.2
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.1...v0.0.2)
+
+
+### 🚀 Enhancements
+
+  - Initial setup for nuxt devtools ([7df0af1](https://github.com/arashsheyda/nuxt-mongoose/commit/7df0af1))
+  - Client rpc ([49a0897](https://github.com/arashsheyda/nuxt-mongoose/commit/49a0897))
+  - Splitpanes ([85f1547](https://github.com/arashsheyda/nuxt-mongoose/commit/85f1547))
+  - Database server-rpc ([c8b8583](https://github.com/arashsheyda/nuxt-mongoose/commit/c8b8583))
+  - Initial database ui ([711d159](https://github.com/arashsheyda/nuxt-mongoose/commit/711d159))
+  - Global styles ([9044041](https://github.com/arashsheyda/nuxt-mongoose/commit/9044041))
+  - Create document ([ce9cad3](https://github.com/arashsheyda/nuxt-mongoose/commit/ce9cad3))
+  - Navbar component ([c2fc882](https://github.com/arashsheyda/nuxt-mongoose/commit/c2fc882))
+  - Default layout ([0e6efb4](https://github.com/arashsheyda/nuxt-mongoose/commit/0e6efb4))
+  - Experimental generate resource ([5de7715](https://github.com/arashsheyda/nuxt-mongoose/commit/5de7715))
+  - Mongodb readyState ([1509542](https://github.com/arashsheyda/nuxt-mongoose/commit/1509542))
+
+### 🩹 Fixes
+
+  - Type.d.ts ([366a07c](https://github.com/arashsheyda/nuxt-mongoose/commit/366a07c))
+  - Fix border line ([f8a073f](https://github.com/arashsheyda/nuxt-mongoose/commit/f8a073f))
+  - Fix mongoose import ([a95cb78](https://github.com/arashsheyda/nuxt-mongoose/commit/a95cb78))
+  - Fix mongoose connection ([01f2c14](https://github.com/arashsheyda/nuxt-mongoose/commit/01f2c14))
+  - Auto-import models ([d152597](https://github.com/arashsheyda/nuxt-mongoose/commit/d152597))
+  - Add useMongoose composable ([58ca500](https://github.com/arashsheyda/nuxt-mongoose/commit/58ca500))
+  - Styling ([cfc255c](https://github.com/arashsheyda/nuxt-mongoose/commit/cfc255c))
+
+### 🏡 Chore
+
+  - Ui ([2234826](https://github.com/arashsheyda/nuxt-mongoose/commit/2234826))
+  - Fix ui ([e43eecb](https://github.com/arashsheyda/nuxt-mongoose/commit/e43eecb))
+  - Refactor ([a2cf465](https://github.com/arashsheyda/nuxt-mongoose/commit/a2cf465))
+  - Styling ([798a324](https://github.com/arashsheyda/nuxt-mongoose/commit/798a324))
+  - Remove unused code ([e354318](https://github.com/arashsheyda/nuxt-mongoose/commit/e354318))
+
+### ❤️  Contributors
+
+- Arashsheyda <sheidaeearash1999@gmail.com>
+
 ## v0.0.1
 

README.md

@@ -83,6 +83,17 @@ export const User = defineMongooseModel({
 })
 ```
 
+### useMongoose
+
+This composable returns the Mongoose DB instance. Example usage:
+
+```vue
+<script lang="ts" setup>
+const mongoose = useMongoose()
+const user = await mongoose.db.collection('users').findOne()
+</script>
+```
+
 ## License
 
 [MIT License](./LICENSE)

build.config.ts

@@ -0,0 +1,24 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/module',
+    // Chunking
+    'src/types',
+  ],
+  externals: [
+    'nuxt',
+    'nuxt/schema',
+    'vite',
+    '@nuxt/kit',
+    '@nuxt/schema',
+    // Type only
+    'vue',
+    'vue-router',
+    'unstorage',
+    'nitropack',
+  ],
+  rollup: {
+    inlineDependencies: true,
+  },
+})

client/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

client/app.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import './styles/global.css'
+</script>
+
+<template>
+  <Html>
+    <Body h-screen>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </Body>
+  </Html>
+</template>
+
+<style>
+#__nuxt {
+  height: 100%;
+}
+</style>

client/components/Connection.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+defineProps({
+  connection: {
+    type: Number,
+    default: 0,
+  },
+})
+</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>
+    <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>
+    </div>
+  </NPanelGrids>
+</template>

client/components/CreateResource.vue

@@ -0,0 +1,261 @@
+<script lang="ts" setup>
+interface ColumnInterface {
+  name: string
+  type: string
+  required: boolean
+  unique: boolean
+  default: any
+}
+
+const emit = defineEmits(['refresh'])
+const router = useRouter()
+
+const schema = ref(true)
+const bread = reactive({
+  browse: {
+    active: true,
+    type: 'index',
+  },
+  read: {
+    active: true,
+    type: 'show',
+    by: '_id',
+  },
+  edit: {
+    active: true,
+    type: 'put',
+    by: '_id',
+  },
+  add: {
+    active: true,
+    type: 'create',
+  },
+  delete: {
+    active: true,
+    type: 'delete',
+    by: '_id',
+  },
+})
+
+const hasBread = computed({
+  get() {
+    return bread.browse.active || bread.read.active || bread.edit.active || bread.add.active || bread.delete.active
+  },
+  set(value: boolean) {
+    bread.browse.active = value
+    bread.read.active = value
+    bread.edit.active = value
+    bread.add.active = value
+    bread.delete.active = value
+  },
+})
+
+const collection = ref('')
+const fields = ref<ColumnInterface[]>([
+  {
+    name: 'name',
+    type: 'string',
+    required: true,
+    unique: false,
+    default: '',
+  },
+  {
+    name: 'slug',
+    type: 'string',
+    required: true,
+    unique: true,
+    default: '',
+  },
+])
+
+const allFields = computed(() => {
+  return [{ name: '_id', type: 'ObjectId', required: true, unique: true, default: '' }, ...fields.value]
+})
+
+const fieldsLabels = ['name', 'type', 'required', 'unique', 'default']
+const mongoTypes = [
+  'string',
+  'number',
+  'boolean',
+  'date',
+  'object',
+  'array',
+  'ObjectId',
+]
+
+function addField(index: number) {
+  fields.value.splice(index + 1, 0, {
+    name: '',
+    type: 'string',
+    required: false,
+    unique: false,
+    default: '',
+  })
+}
+
+function removeField(index: number) {
+  fields.value.splice(index, 1)
+}
+
+const convertedBread = computed(() => {
+  const breads: any = []
+  // add active breads
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  for (const [key, value] of Object.entries(bread) as any) {
+    if (value.active) {
+      breads.push({
+        type: value.type,
+        by: value?.by,
+      })
+    }
+  }
+  return breads
+})
+
+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
+        delete field[key]
+      }
+    }
+
+    return field
+  })
+})
+
+async function generate() {
+  await rpc.generateResource(
+    {
+      name: collection.value,
+      fields: schema.value ? formattedFields.value : undefined,
+    },
+    convertedBread.value,
+  ).then(() => {
+    emit('refresh')
+    router.push(`/?table=${collection.value}`)
+  })
+}
+
+// TODO: remove this
+const toggleSchema = computed({
+  get() {
+    if (hasBread.value)
+      return schema.value = true
+    return schema.value
+  },
+  set(value: boolean) {
+    schema.value = value
+    if (!schema.value)
+      return hasBread.value = false
+    hasBread.value = true
+  },
+})
+</script>
+
+<template>
+  <div relative h-full>
+    <div sticky top-0 px8 py4 glass-effect z-1>
+      <div mb2 flex items-center>
+        <span text-2xl font-bold mt1>
+          <NCheckbox v-model="hasBread" n="green">
+            BREAD
+            |
+          </NCheckbox>
+        </span>
+        <span flex gap4 mt2 ml2>
+          <NCheckbox v-model="bread.browse.active" n="blue">
+            Browse
+          </NCheckbox>
+          <div flex gap2>
+            <NCheckbox v-model="bread.read.active" n="cyan">
+              Read
+            </NCheckbox>
+            <NSelect v-if="bread.read.active" v-model="bread.read.by">
+              <option v-for="field in allFields" :key="field.name" :value="field.name">
+                {{ field.name }}
+              </option>
+            </NSelect>
+          </div>
+          <div flex gap2>
+            <NCheckbox v-model="bread.edit.active" n="purple">
+              Edit
+            </NCheckbox>
+            <NSelect v-if="bread.edit.active" v-model="bread.edit.by">
+              <option v-for="field in allFields" :key="field.name" :value="field.name">
+                {{ field.name }}
+              </option>
+            </NSelect>
+          </div>
+          <NCheckbox v-model="bread.add.active" n="green">
+            Add
+          </NCheckbox>
+          <div flex gap2>
+            <NCheckbox v-model="bread.delete.active" n="red">
+              Delete
+            </NCheckbox>
+            <NSelect v-if="bread.delete.active" v-model="bread.delete.by">
+              <option v-for="field in allFields" :key="field.name" :value="field.name">
+                {{ field.name }}
+              </option>
+            </NSelect>
+          </div>
+        </span>
+      </div>
+      <div flex gap4>
+        <NTextInput v-model="collection" flex-auto placeholder="Collection name" />
+        <NCheckbox v-model="toggleSchema" n="green">
+          Generate Schema
+        </NCheckbox>
+      </div>
+    </div>
+    <div v-if="schema" px8>
+      <div grid="~ cols-1" gap-2 my4>
+        <div grid="~ cols-6" text-center>
+          <div v-for="label in fieldsLabels" :key="label">
+            {{ label }}
+          </div>
+          <div>
+            Actions
+          </div>
+        </div>
+        <div v-for="(column, index) in fields" :key="index" grid="~ cols-6" items-center text-center gap4>
+          <div>
+            <NTextInput v-model="column.name" />
+          </div>
+          <div>
+            <NSelect v-model="column.type">
+              <option v-for="mongoType of mongoTypes" :key="mongoType" :value="mongoType">
+                {{ mongoType }}
+              </option>
+            </NSelect>
+          </div>
+          <div>
+            <NCheckbox v-model="column.required" n="green" />
+          </div>
+          <div>
+            <NCheckbox v-model="column.unique" n="cyan" />
+          </div>
+          <div>
+            <NTextInput v-if="column.type === 'string'" v-model="column.default" type="string" n="orange" />
+            <NTextInput v-else-if="column.type === 'number'" v-model="column.default" type="number" n="orange" />
+            <NCheckbox v-else-if="column.type === 'boolean'" v-model="column.default" n="orange" />
+            <NTextInput v-else-if="column.type === 'date'" v-model="column.default" type="date" n="orange" />
+            <NTextInput v-else-if="column.type === 'ObjectId'" placeholder="no-default" disabled n="orange" />
+            <NTextInput v-else v-model="column.default" n="orange" />
+          </div>
+          <div flex justify-center gap2>
+            <NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
+            <NIconButton icon="carbon-delete" n="red" @click="removeField(index)" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <NButton glass-effect fixed right-10 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
+      Create
+    </NButton>
+  </div>
+</template>
+
+<style></style>

client/components/DatabaseDetail.vue

@@ -0,0 +1,282 @@
+<script lang="ts" setup>
+const props = defineProps({
+  collection: {
+    type: String,
+    required: true,
+  },
+})
+
+// TODO: save in local storage
+const pagination = reactive({ limit: 20, page: 1 })
+
+const countDocuments = computedAsync(async () => {
+  return await rpc.countDocuments(props.collection)
+})
+
+const documents = computedAsync(async () => {
+  return await rpc.listDocuments(props.collection, pagination)
+})
+
+watch(pagination, async () => {
+  documents.value = await rpc.listDocuments(props.collection, pagination)
+})
+
+const schema = computedAsync<any>(async () => {
+  return await rpc.resourceSchema(props.collection)
+})
+
+const fields = computed(() => {
+  if (documents.value && documents.value.length > 0)
+    return Object.keys(documents.value[0])
+  if (schema.value)
+    return Object.keys(schema.value)
+  return []
+})
+
+const search = ref('')
+const editing = ref(false)
+const dbContainer = ref<HTMLElement>()
+const selectedDocument = ref()
+
+const filtered = computed(() => {
+  if (!search.value)
+    return documents.value
+  return documents.value.filter((document: any) => {
+    for (const field of fields.value) {
+      if (document[field].toString().toLowerCase().includes(search.value.toLowerCase()))
+        return true
+    }
+    return false
+  })
+})
+
+function addDocument() {
+  // TODO: validate & show errors
+  if (editing.value)
+    return
+  editing.value = true
+  selectedDocument.value = {}
+  if (schema.value) {
+    for (const field of Object.keys(schema.value))
+      selectedDocument.value[field] = ''
+  }
+  else {
+    for (const field of fields.value) {
+      if (field !== '_id')
+        selectedDocument.value[field] = ''
+    }
+  }
+
+  const parent = dbContainer.value?.parentElement
+  parent?.scrollTo(0, parent.scrollHeight)
+}
+
+function editDocument(document: any) {
+  if (editing.value)
+    return
+  editing.value = true
+  selectedDocument.value = { ...document }
+}
+
+async function saveDocument(document: any, create = true) {
+  const method = create ? rpc.createDocument : rpc.updateDocument
+  const newDocument = await method(props.collection, document)
+  if (newDocument?.error)
+    return alert(newDocument.error.message)
+
+  if (create) {
+    if (!documents.value.length) {
+      documents.value = await rpc.listDocuments(props.collection, pagination)
+      return discardEditing()
+    }
+    documents.value.push({ _id: newDocument.insertedId, ...document })
+  }
+  else {
+    const index = documents.value.findIndex((doc: any) => doc._id === newDocument.value._id)
+    documents.value[index] = document
+  }
+  discardEditing()
+}
+
+function discardEditing() {
+  editing.value = false
+  selectedDocument.value = null
+}
+
+async function deleteDocument(document: any) {
+  const newDocument = await rpc.deleteDocument(props.collection, document._id)
+  if (newDocument.deletedCount === 0)
+    return alert('Failed to delete document')
+
+  documents.value = documents.value.filter((doc: any) => doc._id !== document._id)
+}
+
+const copy = useCopy()
+</script>
+
+<template>
+  <div ref="dbContainer" :class="{ 'h-full': !documents?.length }">
+    <Navbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
+      <template #actions>
+        <NButton icon="carbon:add" n="green" @click="addDocument">
+          Add Document
+        </NButton>
+      </template>
+      <div v-if="countDocuments" flex items-center>
+        <div op50>
+          <span v-if="search">{{ filtered.length }} matched · </span>
+          <span>{{ documents?.length }} of {{ countDocuments }} documents in total</span>
+        </div>
+        <div flex-auto />
+        <div flex gap-2>
+          <NSelect v-if="pagination.limit !== 0" v-model="pagination.page">
+            <option v-for="i in Math.ceil(countDocuments / pagination.limit)" :key="i" :value="i">
+              page:
+              {{ i }}
+            </option>
+          </NSelect>
+          <NSelect v-model="pagination.limit">
+            <option v-for="i in [1, 2, 3, 4, 5]" :key="i" :value="i * 10">
+              show:
+              {{ i * 10 }}
+            </option>
+            <option :value="0">
+              show all
+            </option>
+          </NSelect>
+        </div>
+      </div>
+    </Navbar>
+    <table v-if="documents?.length || selectedDocument" w-full mb10 :class="{ 'editing-mode': editing }">
+      <thead>
+        <tr>
+          <th v-for="field of fields" :key="field" text-start>
+            {{ field }}
+          </th>
+          <th text-center>
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="document in filtered" :key="document._id" :class="{ isEditing: editing && selectedDocument._id === document._id }">
+          <td v-for="field of fields" :key="field" @dblclick="editDocument(document)">
+            <template v-if="editing && selectedDocument._id === document._id">
+              <input v-model="selectedDocument[field]" :disabled="field === '_id'">
+            </template>
+            <span v-else>
+              {{ document[field] }}
+            </span>
+          </td>
+          <td class="actions">
+            <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" />
+              </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))" />
+              </template>
+            </div>
+          </td>
+        </tr>
+        <tr v-if="editing && !selectedDocument?._id" :class="{ isEditing: editing && !selectedDocument?._id }">
+          <td v-for="field of fields" :key="field">
+            <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>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else flex justify-center items-center h-full text-2xl>
+      <NIcon icon="carbon-document" mr1 />
+      No documents found
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+// TODO:
+.actions .n-icon {
+  margin: 0;
+}
+
+table {
+  table-layout: fixed;
+  tr {
+    width: 100%;
+    td, th {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  input {
+    border: none;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.7);
+    width: 100%;
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+th {
+  border-right: 1px solid #272727;
+  border-left: 1px solid #272727;
+  border-top: 1px solid #272727;
+  padding: 5px 10px;
+}
+
+td {
+  border: 1px solid #272727;
+  &:last-child {
+    border-left: none;
+  }
+  padding: 5px 10px;
+  color: rgba(255, 255, 255, 0.7);
+  &:hover {
+    color: #fff;
+  }
+}
+
+.editing-mode {
+  tr {
+    &:not(.isEditing) {
+      opacity: 0.3;
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0.3;
+      }
+    }
+    &.isEditing {
+      opacity: 1;
+      color: #fff;
+      input {
+        &::placeholder {
+          color: #3ede80;
+        }
+      }
+    }
+  }
+}
+</style>

client/components/DrawerRight.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+  navbar?: HTMLElement
+  autoClose?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const el = ref<HTMLElement>()
+
+const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'border-box' })
+
+onClickOutside(el, () => {
+  if (props.modelValue && props.autoClose)
+    emit('close')
+}, {
+  ignore: ['#open-drawer-right'],
+})
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="duration-200 ease-in"
+    enter-from-class="transform translate-x-1/1"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-out"
+    leave-from-class="opacity-100"
+    leave-to-class="transform translate-x-1/1"
+  >
+    <div
+      v-if="modelValue"
+      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
+      :style="{ top: `${top}px` }"
+      v-bind="$attrs"
+    >
+      <NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
+      <div relative h-full w-full of-auto>
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>

client/components/Navbar.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps({
+  search: {
+    type: String,
+    default: undefined,
+  },
+  noPadding: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: 'Search...',
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:search', value: string): void
+}>()
+
+function update(event: any) {
+  emit('update:search', event.target.value)
+}
+</script>
+
+<template>
+  <div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
+    <div flex="~ gap4">
+      <slot name="search">
+        <NTextInput
+          :placeholder="placeholder"
+          icon="carbon-search"
+          n="primary" flex-auto
+          :class="{ 'px-5 py-2': !noPadding }"
+          :value="search"
+          @input="update"
+        />
+      </slot>
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>

client/components/PanelLeftRight.vue

@@ -0,0 +1,36 @@
+<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/composables/editor.ts

@@ -0,0 +1,10 @@
+import { useClipboard } from '@vueuse/core'
+
+export function useCopy() {
+  const clipboard = useClipboard()
+
+  return (text: string) => {
+    clipboard.copy(text)
+    // TODO: show toast
+  }
+}

client/composables/rpc.ts

@@ -0,0 +1,69 @@
+import { createBirpc } from 'birpc'
+import { parse, stringify } from 'flatted'
+import type { ClientFunctions, ServerFunctions } from '../../src/types'
+import { PATH_ENTRY } from '../../src/constants'
+
+const RECONNECT_INTERVAL = 2000
+
+export const wsConnecting = ref(true)
+export const wsError = ref<any>()
+
+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)
+  },
+})
+
+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/layouts/default.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const readyState = computedAsync(async () => await rpc.readyState())
+</script>
+
+<template>
+  <div h-full of-auto>
+    <slot v-if="readyState === 1" />
+    <Connection v-else :connection="readyState" />
+  </div>
+</template>

client/nuxt.config.ts

@@ -0,0 +1,27 @@
+import { resolve } from 'pathe'
+import { PATH_CLIENT } from '../src/constants'
+
+export default defineNuxtConfig({
+  ssr: false,
+  modules: [
+    '@nuxt/devtools-ui-kit',
+  ],
+  unocss: {
+    shortcuts: {
+      'bg-base': 'bg-white dark:bg-[#151515]',
+      'bg-active': 'bg-gray:5',
+      'bg-hover': 'bg-gray:3',
+      'border-base': 'border-gray/20',
+      'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90',
+      'navbar-glass': 'sticky z-10 top-0 glass-effect',
+    },
+  },
+  nitro: {
+    output: {
+      publicDir: resolve(__dirname, '../dist/client'),
+    },
+  },
+  app: {
+    baseURL: PATH_CLIENT,
+  },
+})

client/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "nuxt-mongoose-client",
+  "private": true
+}

client/pages/index.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+const route = useRoute()
+const router = useRouter()
+
+const selectedCollection = ref()
+const drawer = ref(false)
+const search = ref('')
+
+const collections = computedAsync(async () => {
+  return await rpc.listCollections()
+})
+
+const filtered = computed(() => {
+  if (!search.value)
+    return collections.value
+  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()
+  if (selectedCollection.value === table.name) {
+    selectedCollection.value = undefined
+    router.push({ name: 'index' })
+  }
+}
+
+async function refresh() {
+  collections.value = await rpc.listCollections()
+  drawer.value = false
+}
+</script>
+
+<template>
+  <PanelLeftRight :min-left="13" :max-left="20">
+    <template #left>
+      <div px4>
+        <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
+          <div flex items-center gap2>
+            <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
+            <NIconButton w-full mb1.5 icon="carbon-data-base" title="Default" text-green-5 />
+            <NIconButton id="open-drawer-right" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
+          </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">
+            <span>
+              <NIcon icon="carbon-db2-database" />
+              {{ table.name }}
+            </span>
+            <div flex gap2>
+              <NIconButton block n="red" icon="carbon-delete" @click="dropCollection(table)" />
+              <!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </template>
+    <template #right>
+      <DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" />
+      <div v-else class="n-panel-grids-center">
+        <div class="n-card n-card-base" px6 py2>
+          <span op75 flex items-center>
+            <NIcon icon="carbon:db2-buffer-pool" mr2 />
+            Select a collection to start
+          </span>
+        </div>
+      </div>
+    </template>
+  </PanelLeftRight>
+  <DrawerRight v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
+    <CreateResource @refresh="refresh" />
+  </DrawerRight>
+</template>

client/splitpanes.d.ts

@@ -0,0 +1,21 @@
+// TODO install @types/splitpanes once updated
+declare module 'splitpanes' {
+  import { Component } from 'vue'
+
+  export interface SplitpaneProps {
+    horizontal: boolean
+    pushOtherPanes: boolean
+    dblClickSplitter: boolean
+    firstSplitter: boolean
+  }
+
+  export interface PaneProps {
+    size: number | string
+    minSize: number | string
+    maxSize: number | string
+  }
+
+  export type Pane = Component<PaneProps>
+  export const Pane: Pane
+  export const Splitpanes: Component<SplitpaneProps>
+}

client/styles/global.css

@@ -0,0 +1,35 @@
+/* Splitpanes */
+.splitpanes__splitter {
+  position: relative;
+}
+.splitpanes__splitter:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: .2s ease;
+  content: '';
+  transition: opacity 0.4s;
+  z-index: 1;
+}
+.splitpanes__splitter:hover:before {
+  background: #8881;
+  opacity: 1;
+}
+.splitpanes--vertical>.splitpanes__splitter {
+  min-width: 0 !important;
+  width: 0 !important;
+}
+.splitpanes--horizontal>.splitpanes__splitter {
+  min-height: 0 !important;
+  height: 0 !important;
+}
+.splitpanes--vertical>.splitpanes__splitter:before {
+  left: -5px;
+  right: -4px;
+  height: 100%;
+}
+.splitpanes--horizontal>.splitpanes__splitter:before {
+  top: -5px;
+  bottom: -4px;
+  width: 100%;
+}

module.cjs

@@ -0,0 +1,15 @@
+/* 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,7 +1,7 @@
 {
   "name": "nuxt-mongoose",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Nuxt 3 module for MongoDB with Mongoose",
   "license": "MIT",
   "repository": {
@@ -11,21 +11,28 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
-      "require": "./dist/module.cjs",
+      "require": "./module.cjs",
       "import": "./dist/module.mjs"
-    }
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs"
+    },
+    "./*": "./*"
   },
-  "main": "./dist/module.cjs",
+  "main": "./module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build",
+    "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
+    "build:client": "nuxi generate client",
+    "build:module": "nuxt-build-module",
     "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "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"
@@ -35,18 +42,34 @@
     "nuxt": "^3.4.1"
   },
   "dependencies": {
+    "@nuxt/devtools-kit": "^0.4.1",
     "@nuxt/kit": "^3.4.1",
+    "@types/fs-extra": "^11.0.1",
+    "birpc": "^0.2.11",
     "defu": "^6.1.2",
-    "mongoose": "^7.0.3"
+    "flatted": "^3.2.7",
+    "fs-extra": "^11.1.1",
+    "pluralize": "^8.0.0",
+    "sirv": "^2.0.2",
+    "tinyws": "^0.1.0",
+    "ws": "^8.13.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.4",
+    "@nuxt/devtools": "^0.4.1",
+    "@nuxt/devtools-ui-kit": "^0.4.1",
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/schema": "^3.4.1",
     "@nuxt/test-utils": "^3.4.1",
+    "@types/pluralize": "^0.0.29",
+    "@types/ws": "^8.5.4",
     "changelogen": "^0.5.3",
     "eslint": "^8.38.0",
+    "mongoose": "^7.0.4",
     "nuxt": "^3.4.1",
+    "sass": "^1.62.0",
+    "sass-loader": "^13.2.2",
+    "splitpanes": "^3.1.5",
     "vitest": "^0.30.1"
   }
 }

playground/nuxt.config.ts

@@ -1,7 +1,6 @@
 export default defineNuxtConfig({
-  modules: ['../src/module'],
-
-  mongoose: {
-    uri: 'mongodb://127.0.0.1/nuxt-mongoose',
-  },
+  modules: [
+    '@nuxt/devtools',
+    '../src/module',
+  ],
 })

playground/server/api/users.get.ts

@@ -1,5 +0,0 @@
-import { User } from '~/server/models/user.schema'
-
-export default defineEventHandler(() => {
-  return User.find()
-})

playground/server/models/user.schema.ts

@@ -1,18 +0,0 @@
-import { defineMongooseModel } from '#nuxt/mongoose'
-
-export const User = defineMongooseModel({
-  name: 'User',
-  schema: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-})
-
-// export const User = defineMongooseModel('User', {
-//   name: {
-//     type: String,
-//     required: true,
-//   },
-// })

src/constants/index.ts

@@ -0,0 +1,3 @@
+export const PATH = '/__nuxt_mongoose__'
+export const PATH_ENTRY = `${PATH}/entry`
+export const PATH_CLIENT = `${PATH}/client`

src/module.ts

@@ -1,11 +1,13 @@
-import { addServerPlugin, addTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addImportsDir, addServerPlugin, addTemplate, createResolver, defineNuxtModule, logger } from '@nuxt/kit'
+import { pathExists } from 'fs-extra'
+import { tinyws } from 'tinyws'
 import { defu } from 'defu'
-import type { ConnectOptions } from 'mongoose'
+import sirv from 'sirv'
 
-export interface ModuleOptions {
-  uri?: string
-  options?: ConnectOptions
-}
+import { PATH_CLIENT, PATH_ENTRY } from './constants'
+import type { ModuleOptions } from './types'
+
+import { setupRPC } from './server-rpc'
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -14,11 +16,14 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     uri: process.env.MONGODB_URI as string,
+    devtools: true,
     options: {},
   },
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
+    addImportsDir(resolve('./runtime/composables'))
+
     if (!options.uri)
       console.warn('Missing `MONGODB_URI` in `.env`')
 
@@ -26,6 +31,39 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.runtimeConfig.public.mongoose = defu(nuxt.options.runtimeConfig.public.mongoose || {}, {
       uri: options.uri,
       options: options.options,
+      devtools: options.devtools,
+    })
+
+    // 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,
+        },
+      })
     })
 
     // virtual imports
@@ -55,5 +93,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Add server-plugin for database connection
     addServerPlugin(resolve('./runtime/server/plugins/mongoose.db'))
+
+    logger.success('`nuxt-mongoose` is ready!')
   },
 })

src/runtime/composables/useMongoose.ts

@@ -0,0 +1,8 @@
+import type { mongo } from 'mongoose'
+import { connection } from 'mongoose'
+
+export function useMongoose(): { db: mongo.Db } {
+  return {
+    db: connection?.db,
+  }
+}

src/runtime/server/services/mongoose.ts

@@ -1,5 +1,5 @@
 import type { ConnectOptions, Model, SchemaDefinition, SchemaOptions } from 'mongoose'
-import { Schema, connect, model } from 'mongoose'
+import mongoose from 'mongoose'
 import { logger } from '@nuxt/kit'
 
 import { useRuntimeConfig } from '#imports'
@@ -10,7 +10,7 @@ export async function defineMongooseConnection({ uri, options }: { uri?: string;
   const mongooseOptions = options || config.options
 
   try {
-    await connect(mongooseUri, { ...mongooseOptions })
+    await mongoose.connect(mongooseUri, { ...mongooseOptions })
     logger.info('Connected to database')
   }
   catch (err) {
@@ -29,8 +29,8 @@ export function defineMongooseModel(nameOrOptions: string | { name: string; sche
     options = nameOrOptions.options
   }
 
-  const newSchema = new Schema({
+  const newSchema = new mongoose.Schema({
     ...schema,
   }, { ...options })
-  return model(name, newSchema)
+  return mongoose.model(name, newSchema)
 }

src/server-rpc/database.ts

@@ -0,0 +1,103 @@
+import mongoose from 'mongoose'
+import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+
+export function setupDatabaseRPC({ options }: NuxtDevtoolsServerContext): any {
+  mongoose.connect(options.uri, options.options)
+
+  return {
+    async readyState() {
+      return mongoose.connection.readyState
+    },
+    async createCollection(name: string) {
+      try {
+        return await mongoose.connection.db.createCollection(name)
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+    async listCollections() {
+      try {
+        return await mongoose.connection.db.listCollections().toArray()
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+    async getCollection(name: string) {
+      try {
+        return await mongoose.connection.db.collection(name).findOne()
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+    async dropCollection(name: string) {
+      try {
+        return await mongoose.connection.db.dropCollection(name)
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+
+    async createDocument(collection: string, data: any) {
+      const { _id, ...rest } = data
+      try {
+        return await mongoose.connection.db.collection(collection).insertOne(rest)
+      }
+      catch (error: any) {
+        return ErrorIT(error)
+      }
+    },
+    async countDocuments(collection: string) {
+      try {
+        return await mongoose.connection.db.collection(collection).countDocuments()
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+    async listDocuments(collection: string, options: { page: number; limit: number } = { page: 1, limit: 10 }) {
+      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()
+    },
+    async getDocument(collection: string, document: any) {
+      try {
+        return await mongoose.connection.db.collection(collection).findOne({ document })
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+    async updateDocument(collection: string, data: any) {
+      const { _id, ...rest } = data
+      try {
+        return await mongoose.connection.db.collection(collection).findOneAndUpdate({ _id: new mongoose.Types.ObjectId(_id) }, { $set: rest })
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+    async deleteDocument(collection: string, id: string) {
+      try {
+        return await mongoose.connection.db.collection(collection).deleteOne({ _id: new mongoose.Types.ObjectId(id) })
+      }
+      catch (error) {
+        return ErrorIT(error)
+      }
+    },
+  } satisfies Partial<ServerFunctions>
+}
+
+function ErrorIT(error: any) {
+  return {
+    error: {
+      message: error?.message,
+      code: error?.code,
+    },
+  }
+}

src/server-rpc/index.ts

@@ -0,0 +1,103 @@
+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/server-rpc/resource.ts

@@ -0,0 +1,66 @@
+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'
+
+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`)
+        if (!fs.existsSync(schemaPath)) {
+          fs.ensureDirSync(resolve(nuxt.options.serverDir, 'utils/models'))
+          fs.writeFileSync(schemaPath, generateSchemaFile(dbName, collection.fields))
+        }
+
+        const model = { name: dbName, path: `${singular}.schema` }
+
+        // create resources
+        const routeTypes = {
+          index: 'index.get.ts',
+          create: 'create.post.ts',
+          show: (by: string) => `${by}.get.ts`,
+          put: (by: string) => `${by}.put.ts`,
+          delete: (by: string) => `${by}.delete.ts`,
+        }
+        resources.forEach((route: Resource) => {
+          const fileName = typeof routeTypes[route.type] === 'function'
+            ? (routeTypes[route.type] as any)(route.by)
+            : routeTypes[route.type]
+
+          const filePath = resolve(nuxt.options.serverDir, 'api', plural, fileName)
+          if (!fs.existsSync(filePath)) {
+            fs.ensureDirSync(resolve(nuxt.options.serverDir, `api/${plural}`))
+            const content = generateApiRoute(route.type, { model, by: route.by })
+            fs.writeFileSync(filePath, content)
+          }
+        })
+      }
+
+      // create collection if not exists
+      const collections = await rpc.functions.listCollections()
+      if (!collections.find((c: any) => c.name === plural))
+        await rpc.functions.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`)
+      if (fs.existsSync(schemaPath)) {
+        const content = fs.readFileSync(schemaPath, 'utf-8').match(/schema: \{(.|\n)*\}/g)
+        if (content) {
+          const schemaString = content[0].replace('schema: ', '').slice(0, -3)
+          // eslint-disable-next-line no-eval
+          const schema = eval(`(${schemaString})`)
+          return schema
+        }
+      }
+    },
+  } satisfies Partial<ServerFunctions>
+}

src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './rpc'
+export * from './server-ctx'
+export * from './module-options'

src/types/module-options.ts

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

src/types/rpc.ts

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,22 @@
+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/schematics.ts

@@ -0,0 +1,48 @@
+import { capitalize } from './formatting'
+
+export function generateSchemaFile(name: string, fields: any) {
+  name = capitalize(name)
+  // TODO: fix spacing
+  const outputObject = JSON.stringify(
+    fields.reduce((acc: any, curr: any) => {
+      const { name, ...rest } = curr
+      acc[name] = rest
+      return acc
+    }, {}),
+    null, 2)
+    .replace(/"([^"]+)":/g, '$1:')
+    .replace(/"(\w+)":/g, '$1:')
+    .replace(/\s*"\w+":/g, match => match.trim())
+    .replace(/"string"/g, '\'string\'')
+
+  return `import { defineMongooseModel } from '#nuxt/mongoose'
+
+export const ${name}Schema = defineMongooseModel({
+  name: '${name}',
+  schema: ${outputObject},
+})
+`
+}
+
+export function generateApiRoute(action: string, { model, by }: { model: { name: string; path: string }; by?: string }) {
+  const modelName = capitalize(model.name)
+  const operation = {
+    index: `return await ${modelName}Schema.find({})`,
+    create: `return await new ${modelName}Schema(body).save()`,
+    show: `return await ${modelName}Schema.findOne({ ${by}: event.context.params?.${by} })`,
+    put: `return await ${modelName}Schema.findOneAndUpdate({ ${by}: event.context.params?.${by} }, body, { new: true })`,
+    delete: `return await ${modelName}Schema.findOneAndDelete({ ${by}: event.context.params?.${by} })`,
+  }[action]
+
+  const main = `try {
+    ${operation}
+  }
+  catch (error) {
+    return error
+  }`
+
+  return `export default defineEventHandler(async (event) => {
+  ${(action === 'create' || action === 'put') ? `const body = await readBody(event)\n  ${main}` : main}
+})
+`
+}

tsconfig.json

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

types.d.ts

@@ -0,0 +1 @@
+export * from './dist/types'