nuxt-procedures 0.1.5 → 0.1.6

package/README.md

@@ -27,9 +27,11 @@ Install and configure the module with a single command:
 ```bash
 npx nuxi module add nuxt-procedures
 ```
+
 This will add `nuxt-procedures` to your `package.json` and `nuxt.config.ts`.
 
 You also need to install its peer dependency, `zod`:
+
 ```bash
 npm install zod
 ```
@@ -46,46 +48,48 @@ npm install nuxt-procedures zod
 
 ```typescript
 export default defineNuxtConfig({
-  modules: ['nuxt-procedures'],
-})
+  modules: ["nuxt-procedures"],
+});
 ```
 
 ## Usage
 
 ### 1. Define Procedures
 
-Create `.ts` files in your `server/api` directory. The module will automatically create a corresponding client for each file.
+Create `.ts` files in your `server/procedures` directory. The module will automatically create a corresponding client for each file.
 
 #### Simple Example
 
 For a simple input and output, you can use Zod schemas directly.
 
-`server/api/hello.ts`:
+`server/procedures/hello.ts`:
+
 ```typescript
-import { z } from 'zod'
+import { z } from "zod";
 
 export default defineProcedure({
   input: z.string(),
   output: z.string(),
   handler: async ({ input }) => {
-    return `Hello, ${input}!`
+    return `Hello, ${input}!`;
   },
-})
+});
 ```
 
 #### Complex Example
 
 For more complex scenarios, `z.object` is the way to go. This is useful for things like form submissions or creating database entries.
 
-`server/api/users/create.ts`:
+`server/procedures/users/create.ts`:
+
 ```typescript
-import { z } from 'zod'
+import { z } from "zod";
 
 export default defineProcedure({
   input: z.object({
     name: z.string(),
     email: z.string().email(),
-    role: z.enum(['admin', 'user']).default('user'),
+    role: z.enum(["admin", "user"]).default("user"),
   }),
   output: z.object({
     id: z.string(),
@@ -95,33 +99,34 @@ export default defineProcedure({
   handler: async ({ input, event }) => {
     // The event param gives you access to the request context and Nuxt utilities
     // For example, you can access request headers
-    const headers = getRequestHeaders(event)
-    console.log(headers)
+    const headers = getRequestHeaders(event);
+    console.log(headers);
 
     // In a real app, you would create a user in your database
     // The following is just an example of how you could get a db client
-    const db = await useDB(event)
+    const db = await useDB(event);
     const newUser = await db.user.create({
       data: input,
-    })
-    
-    return newUser
+    });
+
+    return newUser;
   },
-})
+});
 ```
 
 ### 2. Use the `apiClient`
 
-The module automatically generates an `apiClient` that you can use in your components or pages. The structure of the `apiClient` mirrors your `server/api` directory.
+The module automatically generates an `apiClient` that you can use in your components or pages. The structure of the `apiClient` mirrors your `server/procedures` directory.
 
 #### `useCall`
 
 The `useCall` method is a wrapper around Nuxt's `useFetch` and is the recommended way to call procedures from your Vue components.
 
 Calling the simple `hello` procedure:
+
 ```vue
 <script setup lang="ts">
-const { data: greeting, pending } = await apiClient.hello.useCall('World')
+const { data: greeting, pending } = await apiClient.hello.useCall("World");
 </script>
 
 <template>
@@ -130,33 +135,21 @@ const { data: greeting, pending } = await apiClient.hello.useCall('World')
 </template>
 ```
 
-Calling the complex `users/create` procedure:
-```vue
-<script setup lang="ts">
-const { data: newUser, execute } = apiClient.users.create.useCall({ 
-  name: 'Andres',
-  email: 'andres@example.com',
-})
-
-// `execute` can be called later, e.g. in a form submission handler
-// const submitForm = () => execute()
-</script>
-```
-
 #### `call`
 
-The `call` method makes a direct API call and is useful for calling procedures from server-side code or when you don't need the features of `useFetch`.
+The `call` method makes a direct API call, without storing the result in the Nuxt payload as `useFetch` would.
+You would normally call procedures this way when you don't need to load data for the initial render of the component, but instead when triggering them in response to a form submission or some other event, same as when you would use `$fetch`.
 
 ```typescript
 // Calling the simple procedure
-const greeting = await apiClient.hello.call('World')
+const greeting = await apiClient.hello.call("World");
 // greeting is "Hello, World!"
 
 // Calling the complex procedure
 const newUser = await apiClient.users.create.call({
-  name: 'Andres',
-  email: 'andres@example.com',
-})
+  name: "Andres",
+  email: "andres@example.com",
+});
 // newUser is { id: '...', name: 'Andres', email: 'andres@example.com' }
 ```
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-procedures",
   "configKey": "procedures",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { join, parse, sep } from 'node:path';
-import { defineNuxtModule, createResolver, addServerImports, addTemplate, updateTemplates, addImports, resolveFiles } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerImports, addTemplate, addServerHandler, updateTemplates, addImports, resolveFiles } from '@nuxt/kit';
 import { camelCase } from 'scule';
 
 const toCode = Symbol("toCode");
@@ -48,15 +48,25 @@ const module = defineNuxtModule({
       }
     ]);
     const createCallerPath = resolve("./runtime/create-caller.ts");
+    const handlerPath = resolve("./runtime/handler.ts");
     const generatedClient = addTemplate({
       filename: "nuxt-procedures/api-client.ts",
       getContents: () => generateClientCode(nuxt, createCallerPath),
       write: true
     });
+    const generatedHandler = addTemplate({
+      filename: "nuxt-procedures/server-handler.ts",
+      getContents: () => generateHandlerCode(nuxt, handlerPath),
+      write: true
+    });
+    addServerHandler({
+      route: "/procedures/**",
+      handler: generatedHandler.dst
+    });
     nuxt.hook("builder:watch", async (event, path) => {
-      if (path.includes("api")) {
+      if (path.includes("procedures")) {
         updateTemplates({
-          filter: (t) => t.filename === generatedClient.filename
+          filter: (t) => t.filename === generatedClient.filename || t.filename === generatedHandler.filename
         });
       }
     });
@@ -66,10 +76,7 @@ const module = defineNuxtModule({
 });
 async function buildRouterStructure(nuxt) {
   const procedureDirs = nuxt.options._layers.map(
-    (l) => (
-      // join(l.config.serverDir ?? "server", "procedures")
-      join(l.config.serverDir ?? "server", "api")
-    )
+    (l) => join(l.config.serverDir ?? "server", "procedures")
   );
   const router = new Router();
   for (const procDir of procedureDirs) {
@@ -103,11 +110,24 @@ async function generateClientCode(nuxt, createCallerPath) {
   const procedures = router[toList]();
   return `
     import { createCaller } from "${withoutExtension(createCallerPath)}";
-    
+
     ${procedures.map((p) => `import type ${p.id} from "${withoutExtension(p.file)}";`).join("\n")}
-    
+
     export const apiClient = ${router[toCode]()};
   `;
 }
+async function generateHandlerCode(nuxt, handlerPath) {
+  const router = await buildRouterStructure(nuxt);
+  const procedures = router[toList]();
+  return `
+    import { createProceduresHandler } from "${withoutExtension(handlerPath)}";
+
+    ${procedures.map((p) => `import ${p.id} from "${withoutExtension(p.file)}";`).join("\n")}
+
+    export default createProceduresHandler({
+      ${procedures.map((p) => `"${p.url.slice(1)}": ${p.id}`).join(",\n      ")}
+    });
+  `;
+}
 
 export { module as default };

package/dist/runtime/create-caller.js

@@ -3,7 +3,7 @@ import { useFetch, useRequestHeaders } from "#imports";
 export function createCaller(url) {
   return {
     call: (input) => {
-      return $fetch("/api" + url, {
+      return $fetch("/procedures" + url, {
         method: "POST",
         body: superjson.serialize(input),
         parseResponse: superjson.parse,
@@ -11,7 +11,7 @@ export function createCaller(url) {
       });
     },
     useCall: (input) => {
-      return useFetch("/api" + url, {
+      return useFetch("/procedures" + url, {
         key: `${url}: ${JSON.stringify(input)}`,
         method: "POST",
         body: superjson.serialize(input),

package/dist/runtime/handler.d.ts

@@ -0,0 +1,2 @@
+import type { EventHandler } from 'h3';
+export declare function createProceduresHandler(procedures: Record<string, EventHandler>): EventHandler;

package/dist/runtime/handler.js

@@ -0,0 +1,8 @@
+import { createRouter, useBase } from "h3";
+export function createProceduresHandler(procedures) {
+  const router = createRouter();
+  for (const [path, handler] of Object.entries(procedures)) {
+    router.post(`/${path}`, handler);
+  }
+  return useBase("/procedures", router.handler);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-procedures",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Nuxt module to define and easily consume your backend API in a validated and type-safe way using procedures and Zod schemas.",
   "keywords": [
     "nuxt",