Add playground

Author: wobsoriano

.gitignore

@@ -54,3 +54,5 @@ coverage
 Network Trash Folder
 Temporary Items
 .apdisk
+
+*.db

playground/app.vue

@@ -1,8 +1,5 @@
 <template>
   <div>
-    Nuxt module playground!
+    <NuxtPage />
   </div>
 </template>
-
-<script setup>
-</script>

playground/lib/prisma.ts

@@ -0,0 +1,7 @@
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+export {
+  prisma
+}

playground/lib/todo.server.ts

@@ -0,0 +1,15 @@
+import { prisma } from './prisma'
+
+export async function getTodos () {
+  const todos = await prisma.todo.findMany()
+  return todos
+}
+
+export async function getTodo (id: number) {
+  const todo = await prisma.todo.findFirstOrThrow({
+    where: {
+      id
+    }
+  })
+  return todo
+}

playground/nuxt.config.ts

@@ -4,8 +4,5 @@ import MyModule from '..'
 export default defineNuxtConfig({
   modules: [
     MyModule
-  ],
-  myModule: {
-    addPlugin: true
-  }
+  ]
 })

playground/package.json

@@ -1,4 +1,14 @@
 {
-  "private": true,
-  "name": "my-module-playground"
+  "name": "playground",
+  "devDependencies": {
+    "esno": "^0.16.3",
+    "prisma": "^4.6.1"
+  },
+  "prisma": {
+    "seed": "esno prisma/seed.ts",
+    "schema": "./prisma/schema.prisma"
+  },
+  "dependencies": {
+    "@prisma/client": "^4.6.1"
+  }
 }

playground/pages/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { getTodos } from '~~/lib/todo.server'
+
+const todos = await getTodos()
+</script>
+
+<template>
+  <div>
+    <ul>
+      <li>
+        <NuxtLink v-for="todo in todos" :key="todo.id" :to="`/todos/${todo.id}`">
+          {{ todo.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>

playground/pages/todos/[id].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { getTodo } from '~~/lib/todo.server'
+import { useRoute } from '#imports'
+
+const route = useRoute()
+const todo = await getTodo(Number(route.params.id))
+</script>
+
+<template>
+  <div>
+    Todo: {{ todo }}
+  </div>
+</template>

playground/prisma/migrations/20221129012352_init/migration.sql

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "Todo" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "title" TEXT NOT NULL,
+    "completed" BOOLEAN NOT NULL,
+    "content" TEXT
+);

playground/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

playground/prisma/schema.prisma

@@ -0,0 +1,20 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model Todo {
+  id        Int      @id @default(autoincrement())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  title     String
+  completed Boolean
+  content   String?
+}

playground/prisma/seed.ts

@@ -0,0 +1,29 @@
+// @ts-ignore
+import { PrismaClient, Prisma } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+const todoData: Prisma.TodoCreateInput[] = [
+  { title: 'Milk', content: 'Buy milk', completed: false },
+  { title: 'Bananas', content: 'Buy bananas', completed: false }
+]
+
+async function main() {
+  console.log(`Start seeding ...`)
+  for (const t of todoData) {
+    const todo = await prisma.todo.create({
+      data: t
+    })
+    console.log(`Created todo with id: ${todo.id}`)
+  }
+  console.log(`Seeding finished.`)
+}
+
+main()
+  .catch((e) => {
+    console.error(e)
+    process.exit(1)
+  })
+  .finally(async () => {
+    await prisma.$disconnect()
+  })

pnpm-lock.yaml

@@ -0,0 +1,2 @@
+packages:
+  - playground

pnpm-workspace.yaml

@@ -1,5 +1,5 @@
-import { addImports, addImportsDir, addServerHandler, addTemplate, addVitePlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 import { fileURLToPath } from 'url'
+import { addImportsDir, addServerHandler, addTemplate, addVitePlugin, defineNuxtModule } from '@nuxt/kit'
 import fg from 'fast-glob'
 import { join } from 'pathe'
 import { transformRemoteFunctions } from '../dist/runtime/plugin'
@@ -10,8 +10,6 @@ export default defineNuxtModule({
     configKey: 'remote'
   },
   async setup (options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-
     const extGlob = '**/*.server.{ts,js}'
 
     const files: string[] = []
@@ -20,7 +18,7 @@ export default defineNuxtModule({
 
     // Transpile runtime
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-    nuxt.options.build.transpile.push(runtimeDir)
+    nuxt.options.build.transpile.push(runtimeDir, join(runtimeDir, 'composables'))
 
     addServerHandler({
       route: '/api/__server_fn__',

src/module.ts

@@ -28,11 +28,17 @@ async function transformExports (src: string) {
 
   const [, exports] = parse(src)
 
-  return exports.map((e) => {
+  const exportList = exports.map((e) => {
     if (e.n === 'default') {
       throw new Error('Default exports are not allowed!')
     }
 
-    return `export const ${e.n} = (...args) => useServerFunctions().${e.n}(...args)`
-  }).join('\n')
+    return `export const ${e.n} = (...args) => serverFn.${e.n}(...args)`
+  })
+
+  return `
+    import { useServerFunctions } from '#imports'
+    const serverFn = useServerFunctions()
+    ${exportList.join('\n')}
+  `
 }