feat: use the builder$ api from prpc

Author: OrJDev

.changeset/thick-tables-dress.md

@@ -0,0 +1,5 @@
+---
+"create-jd-app": minor
+---
+
+feat: use the builder$ api from prpc

src/helpers/config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       external: ["@prisma/client"],
     },`
         : ""
-    }${usePRPC ? `\n    plugins: [prpcVite()],` : ""}
+    }${usePRPC ? `${usePrisma ? "\n" : ""}   plugins: [prpcVite()],` : ""}
   },`
       : ""
   }${
@@ -34,7 +34,11 @@ export default defineConfig({
 };
 
 export const modifyConfigIfNeeded = async (ctx: ICtx) => {
-  if (ctx.vercel || ctx.installers.includes("Prisma")) {
+  if (
+    ctx.vercel ||
+    ctx.installers.includes("pRPC") ||
+    ctx.installers.includes("Prisma")
+  ) {
     await fs.writeFile(
       path.join(ctx.userDir, "app.config.ts"),
       getAppConfig(ctx)

src/helpers/packages.ts

@@ -12,8 +12,8 @@ const packages = {
     "@prisma/client": "^5.10.2",
     // prpc
     "@tanstack/solid-query": "^5.28.6",
-    "@solid-mediakit/prpc": "^1.0.4",
-    "@solid-mediakit/prpc-plugin": "^1.0.2",
+    "@solid-mediakit/prpc": "^1.2.1",
+    "@solid-mediakit/prpc-plugin": "^1.2.1",
     // next auth
     "@solid-mediakit/auth": "^2.0.7",
     "@auth/core": "^0.28.0",

src/installers/pRPC/files/authMw.txt

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import { helloBuilder } from "../prpc";
+
+export const helloQuery = helloBuilder
+  .input(
+    z.object({
+      hello: z.string(),
+    })
+  )
+  .query$(({ payload, ctx$ }) => {
+    if (payload.hello === "hello") {
+      return ctx$.hello;
+    }
+    return ctx$.world;
+  }, "myNewQuery");

src/installers/pRPC/files/hello.txt

@@ -0,0 +1,12 @@
+import { z } from "zod";
+import { userBuilder } from "../prpc";
+
+export const protectedQuery = userBuilder
+  .input(
+    z.object({
+      hello: z.string(),
+    })
+  )
+  .query$(({ payload, ctx$ }) => {
+    return `this is top secret: ${payload.hello} ${ctx$.user?.name}`;
+  }, "myProtectedQuery");

src/installers/pRPC/files/user.txt

@@ -13,14 +13,18 @@ const config: IInstaller = (ctx) => {
     }),
     files: [
       {
-        path: `${__dirname}/utils/getQueries`,
-        to: `${ctx.userDir}/src/server/queries.ts`,
+        path: `${__dirname}/files/hello.txt`,
+        to: `${ctx.userDir}/src/server/hello/hello.queries.ts`,
+      },
+      {
+        path: `${__dirname}/utils/getBuilder`,
+        to: `${ctx.userDir}/src/server/prpc.ts`,
         type: "exec",
       },
       useAuth
         ? {
-            path: `${__dirname}/files/authMw.txt`,
-            to: `${ctx.userDir}/src/server/middleware.ts`,
+            path: `${__dirname}/files/user.txt`,
+            to: `${ctx.userDir}/src/server/user/user.queries.ts`,
           }
         : undefined,
     ],

src/installers/pRPC/index.ts

@@ -0,0 +1,40 @@
+import { IUtil } from "~types";
+
+const getBuilder: IUtil = (ctx) => {
+  const useAuth = ctx.installers.includes("AuthJS");
+  return `import { builder$${
+    useAuth ? ", error$" : ""
+  } } from "@solid-mediakit/prpc";${
+    useAuth
+      ? `\nimport { authOptions } from "./auth";\nimport { getSession } from "@solid-mediakit/auth";`
+      : ""
+  }
+
+export const helloBuilder = builder$()
+  .middleware$(() => {
+    return {
+      hello: 1,
+    };
+  })
+  .middleware$((ctx) => {
+    return {
+      ...ctx,
+      world: 2,
+    };
+  });${
+    useAuth
+      ? `\n\nexport const userBuilder = builder$().middleware$(async ({ event$ }) => {
+  const session = await getSession(event$.request, authOptions);
+  if (!session) {
+    return error$("Unauthorized", {
+      status: 401,
+    });
+  }
+  return session;
+});`
+      : ""
+  }
+`;
+};
+
+export default getBuilder;

src/installers/pRPC/utils/getBuilder.ts

@@ -1,10 +1,10 @@
 import { type VoidComponent, Suspense, Show } from "solid-js";
 import { A } from "@solidjs/router";
 import { createSession, signOut, signIn } from "@solid-mediakit/auth/client";
-import { testQuery } from "~/server/queries";
+import { helloQuery } from "~/server/hello/hello.queries";
 
 const Home: VoidComponent = () => {
-  const hello = testQuery(() => ({ hello: "from pRPC" }));
+  const hello = helloQuery(() => ({ hello: "from pRPC" }));
   return (
     <main class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#026d56] to-[#152a2c]">
       <div class="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">

src/installers/pRPC/utils/getQueries.ts

@@ -2,10 +2,10 @@ import styles from "./index.module.css";
 import { type VoidComponent, Suspense, Show } from "solid-js";
 import { A } from "@solidjs/router";
 import { createSession, signOut, signIn } from "@solid-mediakit/auth/client";
-import { testQuery } from "~/server/queries";
+import { helloQuery } from "~/server/hello/hello.queries";
 
 const Home: VoidComponent = () => {
-  const hello = testQuery(() => ({ hello: "from pRPC" }));
+  const hello = helloQuery(() => ({ hello: "from pRPC" }));
   return (
     <main>
       <div class={styles.container}>

template/index/with-auth-prpc-tw.tsx

@@ -1,11 +1,9 @@
 import { type VoidComponent } from "solid-js";
 import { A } from "@solidjs/router";
-import { testQuery } from "~/server/queries";
+import { helloQuery } from "~/server/hello/hello.queries";
 
 const Home: VoidComponent = () => {
-  const hello = testQuery(() => ({
-    hello: "from pRPC",
-  }));
+  const hello = helloQuery(() => ({ hello: "from pRPC" }));
   return (
     <main class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#026d56] to-[#152a2c]">
       <div class="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">

template/index/with-auth-prpc.tsx

@@ -1,12 +1,10 @@
 import { type VoidComponent } from "solid-js";
 import { A } from "@solidjs/router";
 import styles from "./index.module.css";
-import { testQuery } from "~/server/queries";
+import { helloQuery } from "~/server/hello/hello.queries";
 
 const Home: VoidComponent = () => {
-  const hello = testQuery(() => ({
-    hello: "from pRPC",
-  }));
+  const hello = helloQuery(() => ({ hello: "from pRPC" }));
   return (
     <main>
       <div class={styles.container}>