feat: generate tRPC context with correct type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sidebase",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "The productive way to build fullstack Nuxt 3 applications, like create-t3-app but for Nuxt.",
   "scripts": {
     "dev": "vite-node src/",

src/steps/2.addModules/moduleConfigs.ts

@@ -108,8 +108,11 @@ const nuxtTrpcRootConfig = `/**
  */
 import { initTRPC } from '@trpc/server'
 import { Context } from '~/server/trpc/context'
+import superjson from 'superjson';
 
-const t = initTRPC.context<Context>().create()
+const t = initTRPC.context<Context>().create({
+  transformer: superjson,
+})
 
 /**
  * Unprotected procedure
@@ -132,6 +135,7 @@ export const appRouter = router({
     .query(({ input }) => {
       return {
         greeting: \`hello \${input?.text ?? "world"}\`,
+        time: new Date()
       }
     }),
 })
@@ -141,12 +145,24 @@ export type AppRouter = typeof appRouter
 `
 
 const nuxtTrpcContext = `import { inferAsyncReturnType } from '@trpc/server'
+import type { H3Event } from 'h3'
 
 /**
  * Creates context for an incoming request
  * @link https://trpc.io/docs/context
  */
-export const createContext = () => {}
+export async function createContext(event: H3Event) {
+  /**
+   * Add any trpc-request context here. E.g., you could add \`prisma\` like this if you've set it up:
+   * \`\`\`
+   * const prisma = usePrisma(event)
+   * return { prisma }
+   * \`\`\`
+   *
+   * You can import \`usePrisma\` like this: \`import { usePrisma } from '@sidebase/nuxt-prisma'\`
+   */
+  return {}
+}
 
 export type Context = inferAsyncReturnType<typeof createContext>;
 `
@@ -164,13 +180,15 @@ export default createNuxtApiHandler({
 
 const nuxtTrpcPlugin = `import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client"
 import type { AppRouter } from "~/server/trpc/routers"
+import superjson from 'superjson';
 
 export default defineNuxtPlugin(() => {
   /**
    * createTRPCNuxtClient adds a \`useQuery\` composable
    * built on top of \`useAsyncData\`.
    */
   const client = createTRPCNuxtClient<AppRouter>({
+    transformer: superjson,
     links: [
       httpBatchLink({
         url: "/api/trpc",
@@ -194,7 +212,8 @@ const hello = await $client.hello.useQuery({ text: 'client' })
 
 <template>
   <div>
-    <p>tRPC Data: {{ hello.data.value?.greeting }}</p>
+    <!-- As \`superjson\` is already pre-configured, we can use \`time\` as a \`Date\` object without further deserialization 🎉 -->
+    <p>tRPC Data: {{ hello.data.value?.greeting }} send at {{ hello.data.value?.time.toLocaleDateString() }}</p>
   </div>
 </template>
 `
@@ -223,17 +242,17 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     dependencies: [
       {
         name: "prisma",
-        version: "^4.7.1",
+        version: "^4.8.0",
         isDev: true
       },
       {
         name: "@prisma/client",
-        version: "^4.7.1",
+        version: "^4.8.0",
         isDev: false
       },
       {
         name: "@sidebase/nuxt-prisma",
-        version: "^0.1.0",
+        version: "^0.1.2",
         isDev: false
       }
     ],
@@ -297,6 +316,10 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
       name: "zod",
       version: "^3.20.2",
       isDev: false
+    }, {
+      name: "superjson",
+      version: "^1.12.1",
+      isDev: false
     }],
     nuxtConfig: {
       build: {

src/steps/6.addReadme.ts

@@ -50,7 +50,7 @@ This is a straight-forward setup with minimal templating and scaffolding. The op
 Some tasks you should probably do in the beginning are:
 - [ ] replace this generic README with a more specific one
 - [ ] install the Vue Volar extension
-- [ ] enable [Volar takeover mode](https://nuxt.com/docs/getting-started/installation#prerequisites)
+- [ ] enable [Volar takeover mode](https://nuxt.com/docs/getting-started/installation#prerequisites) to ensure a smooth editor setup
 ${tasksPostInstall.join("\n")}
 
 ### Setup