feat(server)!: rename .func() to .handler() (#60)

* refactor(server): Renamed .func() to .handler() * feat(docs): Redesigned docs
unnoq · Dec 30, 2024 · 5d3da98 · 5d3da98
1 parent c29cb6d
commit 5d3da98
Show file tree

Hide file tree

Showing 85 changed files with 317 additions and 311 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <image align="center" src="./logo.png" width=400 />
+  <image align="center" src="./logo.webp" width=280 />
 </div>
 
 <h1></h1>

diff --git a/apps/content/app/(home)/page.tsx b/apps/content/app/(home)/page.tsx
@@ -4,6 +4,7 @@ import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui'
 import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock'
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 import { DocsBody } from 'fumadocs-ui/page'
+import Image from 'next/image'
 import Link from 'next/link'
 
 const mdxComponents = {
@@ -39,48 +40,37 @@ export default function HomePage() {
       <div className="mx-auto lg:col-span-6 lg:flex lg:items-center justify-center text-center">
         <div className="relative z-10 lg:h-auto pt-[90px] lg:pt-[90px] lg:min-h-[300px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
           <div className="flex flex-col items-center">
-            <h1 className="max-w-5xl text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-6xl">
-              <span className="block text-foreground">
-                End-to-End Typesafe API Builder for Developers
-              </span>
-              {/* <span className="block md:ml-0">Developer-first simplicity</span> */}
+            <Image src="/logo.webp" alt="oRPC" width={500} height={100} unoptimized />
+            <h1 className="max-w-4xl mt-5 text-#b4befe font-semibold text-4xl sm:text-5xl sm:leading-none lg:text-5xl">
+              Typesafe API's Made Simple 🪄
             </h1>
             <p className="max-w-2xl pt-2 text-foreground my-3 text-xs sm:mt-5 lg:mb-0 sm:text-sm lg:text-base">
-              <strong className="font-semibold">oRPC</strong>
-              {' '}
-              is an open-source toolkit that helps developers build robust TypeScript functions
-              and expose them to the internet using typesafe clients, OpenAPI standards, or even server actions.
-              Our focus is on
+              End-to-End Typesafe API's made easy in a toolkit that helps developers build robust TypeScript API's with a focus on
               {' '}
               <strong className="font-semibold">developer experience</strong>
               ,
               {' '}
-              <strong className="font-semibold">performance</strong>
-              , and
-              {' '}
               <strong className="font-semibold">reliability</strong>
               .
-              {/* <br className="hidden md:block" /> */}
             </p>
           </div>
-          <div className="flex items-center gap-2">
-            <a
-              data-size="medium"
+          <div className="flex items-center gap-5">
+            <Link
               type="button"
-              className="relative justify-center cursor-pointer inline-flex items-center space-x-2 text-center font-regular ease-out duration-200 rounded-md outline-none transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 border bg-brand-400 dark:bg-brand-500 hover:bg-brand/80 dark:hover:bg-brand/50 text-foreground border-brand-500/75 dark:border-brand/30 hover:border-brand-600 dark:hover:border-brand focus-visible:outline-brand-600 data-[state=open]:bg-brand-400/80 dark:data-[state=open]:bg-brand-500/80 data-[state=open]:outline-brand-600 text-sm px-4 py-2 h-[38px]"
-              href="https://github.com/unnoq/orpc"
-              rel="noreferrer noopener"
-              target="_blank"
+              className="bg-fd-primary/80 flex py-3 px-8 rounded-full cursor-pointer"
+              href="/docs"
+
             >
-              <span className="truncate">View on GitHub</span>
-            </a>
+              <span className="font-medium text-white/80">Quick start</span>
+            </Link>
             <Link
-              data-size="medium"
               type="button"
-              className="relative justify-center cursor-pointer inline-flex items-center space-x-2 text-center font-regular ease-out duration-200 rounded-md outline-none transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 border text-foreground bg-alternative dark:bg-muted hover:bg-selection border-strong hover:border-stronger focus-visible:outline-brand-600 data-[state=open]:bg-selection data-[state=open]:outline-brand-600 data-[state=open]:border-button-hover text-sm px-4 py-2 h-[38px]"
-              href="/docs"
+              className="bg-fd-primary/20 bg-opacity-20 flex py-3 px-8 rounded-full cursor-pointer"
+              href="https://github.com/unnoq/orpc"
+              rel="noreferrer noopener"
+              target="_blank"
             >
-              <span className="truncate">Quick start</span>
+              <span className="text-fd-primary font-medium">View on GitHub</span>
             </Link>
           </div>
         </div>

diff --git a/apps/content/app/layout.config.tsx b/apps/content/app/layout.config.tsx
@@ -1,5 +1,6 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
 import { Bluesky, Discord, Twitter } from '@/components/icons'
+import NavbarLogo from '@/components/ui/NavbarLogo'
 
 /**
  * Shared layout configurations
@@ -11,7 +12,7 @@ import { Bluesky, Discord, Twitter } from '@/components/icons'
 export const baseOptions: BaseLayoutProps = {
   githubUrl: 'https://github.com/unnoq/orpc',
   nav: {
-    title: 'oRPC',
+    title: <NavbarLogo />,
   },
   links: [
     {

diff --git a/apps/content/app/layout.tsx b/apps/content/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
-import { RootProvider } from 'fumadocs-ui/provider'
+import { Banner } from 'fumadocs-ui/components/banner'
 
+import { RootProvider } from 'fumadocs-ui/provider'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import './global.css'
@@ -24,6 +25,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       suppressHydrationWarning
     >
       <body className="flex flex-col min-h-screen">
+        <Banner>
+          oRPC is currently pre-stable, please report any issues on our
+          {' '}
+          {' '}
+          Discord or GitHub 🚧
+        </Banner>
         <RootProvider
           search={{
             options: {

diff --git a/apps/content/components/icons.tsx b/apps/content/components/icons.tsx
@@ -19,7 +19,7 @@ export function Discord(props: React.ComponentProps<'svg'>) {
     >
       <path
         d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
-        fill="#5865F2"
+        fill="currentColor"
       />
     </svg>
   )
@@ -36,7 +36,7 @@ export function Bluesky(props: React.ComponentProps<'svg'>) {
       {...props}
     >
       <path
-        fill="#1185FE"
+        fill="currentColor"
         d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"
       />
     </svg>

diff --git a/apps/content/components/ui/NavbarLogo.tsx b/apps/content/components/ui/NavbarLogo.tsx
@@ -0,0 +1,7 @@
+import Image from 'next/image'
+
+export default function NavbarLogo() {
+  return (
+    <Image src="/logo.webp" alt="oRPC" width={60} height={100} unoptimized />
+  )
+}
diff --git a/apps/content/content/docs/client/react-query.mdx b/apps/content/content/docs/client/react-query.mdx
@@ -145,7 +145,7 @@ const router = {
   user: {
     list: os
       .input(z.object({ cursor: z.number(), limit: z.number() }))
-      .func((input) => ({
+      .handler((input) => ({
         nextCursor: input.cursor + input.limit,
         users: [], // Fetch your actual data here
       })),

diff --git a/apps/content/content/docs/client/react.mdx b/apps/content/content/docs/client/react.mdx
@@ -92,7 +92,7 @@ const router = {
     user: {
         list: os
         .input(z.object({ cursor: z.number(), limit: z.number() }))
-        .func((input) => {
+        .handler((input) => {
             return {
                 nextCursor: input.cursor + input.limit,
                 users: []

diff --git a/apps/content/content/docs/client/vue-query.mdx b/apps/content/content/docs/client/vue-query.mdx
@@ -85,7 +85,7 @@ const router = {
   user: {
     list: os
       .input(z.object({ cursor: z.number(), limit: z.number() }))
-      .func((input) => ({
+      .handler((input) => ({
         nextCursor: input.cursor + input.limit,
         users: [], // Fetch your actual data here
       })),

diff --git a/apps/content/content/docs/contract-first.mdx b/apps/content/content/docs/contract-first.mdx
@@ -95,23 +95,23 @@ export const authed /** require authed */ = os
   .contract(contract)
 
 export const router = pub.router({
-  getting: pub.getting.func((input, context, meta) => {
+  getting: pub.getting.handler((input, context, meta) => {
     return {
       message: `Hello, ${input.name}!`,
     }
   }),
 
   post: {
     find: pub.post.find
-      .func((input, context, meta) => {
+      .handler((input, context, meta) => {
         return {
           id: 'example',
           title: 'example',
           description: 'example',
         }
       }),
 
-    create: authed.post.create.func((input, context, meta) => {
+    create: authed.post.create.handler((input, context, meta) => {
       return {
         id: 'example',
         title: input.title,

diff --git a/apps/content/content/docs/index.mdx b/apps/content/content/docs/index.mdx
@@ -68,7 +68,7 @@ export const router = pub.router({
         name: z.string(),
       }),
     )
-    .func(async (input, context, meta) => {
+    .handler(async (input, context, meta) => {
       return {
         message: `Hello, ${input.name}!`,
       }
@@ -105,7 +105,7 @@ export const router = pub.router({
 
         return result
       })
-      .func((input, context, meta) => {
+      .handler((input, context, meta) => {
         return {
           id: 'example',
           title: 'example',
@@ -121,7 +121,7 @@ export const router = pub.router({
           thumb: oz.file().type('image/*'),
         }),
       )
-      .func(async (input, context, meta) => {
+      .handler(async (input, context, meta) => {
         input.thumb // file upload out of the box
 
         return {

diff --git a/apps/content/content/docs/openapi/generator.mdx b/apps/content/content/docs/openapi/generator.mdx
@@ -29,7 +29,7 @@ export const router = pub.router({
         name: z.string(),
       }),
     )
-    .func(async (input, context, meta) => {
+    .handler(async (input, context, meta) => {
       return {
         message: `Hello, ${input.name}!`,
       }
@@ -53,7 +53,7 @@ export const router = pub.router({
           description: z.string(),
         }),
       )
-      .func((input, context, meta) => {
+      .handler((input, context, meta) => {
         return {
           id: 'example',
           title: 'example',
@@ -69,7 +69,7 @@ export const router = pub.router({
           thumb: oz.file().type('image/*'),
         }),
       )
-      .func(async (input, context, meta) => {
+      .handler(async (input, context, meta) => {
         input.thumb // file upload out of the box
 
         return {

diff --git a/apps/content/content/docs/server/client.mdx b/apps/content/content/docs/server/client.mdx
@@ -13,16 +13,16 @@ import { os, createProcedureClient } from '@orpc/server'
 import { z } from 'zod'
 
 // ❌ Cannot call this procedure directly because undefined is not assignable to 'Context'
-const e1 = os.context<{ auth: boolean }>().func(() => 'pong')
+const e1 = os.context<{ auth: boolean }>().handler(() => 'pong')
 // @errors: 2349
 e1() // Error: Procedure 'e1' cannot be called directly
 
 // ✅ Can call this procedure directly because undefined is assignable to 'Context'
-const e2 = os.context<{ auth: boolean } | undefined>().func(() => 'pong')
+const e2 = os.context<{ auth: boolean } | undefined>().handler(() => 'pong')
 const o2 = await e2() // Ok, output is 'pong'
 
 // ✅ Can call this procedure directly because undefined is assignable to 'Context'
-const getting = os.input(z.object({ name: z.string() })).func(({ name }) => `Hello, ${name}!`)
+const getting = os.input(z.object({ name: z.string() })).handler(({ name }) => `Hello, ${name}!`)
 
 const router = os.router({
     getting
@@ -44,7 +44,7 @@ import { os, createProcedureClient } from '@orpc/server'
 
 type Context = { user?: { id: string } }
 
-const getting = os.context<Context>().func(() => 'pong')
+const getting = os.context<Context>().handler(() => 'pong')
 
 const gettingClient = createProcedureClient({
     procedure: getting,
@@ -68,7 +68,7 @@ To call multiple procedures with shared context, use a `Router Client`.
 import { os, createRouterClient } from '@orpc/server'
 
 const router = os.router({
-    ping: os.func(() => 'pong')
+    ping: os.handler(() => 'pong')
 })
 
 const client = createRouterClient({

diff --git a/apps/content/content/docs/server/context.mdx b/apps/content/content/docs/server/context.mdx
@@ -32,7 +32,7 @@ const pub = os.context<ORPCContext>().use(async (input, context, meta) => {
 })
 
 export const router = pub.router({
-    getting: pub.func((input, context, meta) => {
+    getting: pub.handler((input, context, meta) => {
         // ^ context is combined from `initial context` and `middleware context`
     }),
 })
@@ -74,7 +74,7 @@ const authMid = base.middleware(async (input, context, meta) => {
 export const router = base.router({
     getting: base
         .use(authMid)
-        .func((input, context, meta) => {
+        .handler((input, context, meta) => {
             // ^ context is fully typed
         }),
 })
@@ -123,7 +123,7 @@ const authMid = base.middleware((input, context, meta) => {
 export const router = base.router({
     getting: base
         .use(authMid)
-        .func((input, context, meta) => {
+        .handler((input, context, meta) => {
             // ^ context is fully typed
         }),
 })

diff --git a/apps/content/content/docs/server/contract.mdx b/apps/content/content/docs/server/contract.mdx
@@ -88,23 +88,23 @@ export const authed /** require authed */ = base
   .contract(contract)
 
 export const router = pub.router({
-  getting: pub.getting.func((input, context, meta) => {
+  getting: pub.getting.handler((input, context, meta) => {
     return {
       message: `Hello, ${input.name}!`,
     }
   }),
 
   post: {
     find: pub.post.find
-      .func((input, context, meta) => {
+      .handler((input, context, meta) => {
         return {
           id: 'example',
           title: 'example',
           description: 'example',
         }
       }),
 
-    create: authed.post.create.func((input, context, meta) => {
+    create: authed.post.create.handler((input, context, meta) => {
       return {
         id: 'example',
         title: input.title,

diff --git a/apps/content/content/docs/server/error-handling.mdx b/apps/content/content/docs/server/error-handling.mdx
@@ -19,7 +19,7 @@ const ping = os
             // do something on finish
         }
     })
-    .func((input, context, meta) => {
+    .handler((input, context, meta) => {
         throw new ORPCError({
             code: 'NOT_FOUND',
             message: 'Not found',

diff --git a/apps/content/content/docs/server/file-upload.mdx b/apps/content/content/docs/server/file-upload.mdx
@@ -20,7 +20,7 @@ import { z } from 'zod'
 
 export const uploadFile = os.input(
     z.object({ file: z.instanceof(File) })
-).func(async (input) => {
+).handler(async (input) => {
     const file: File = input.file
     // Handle the file as needed, e.g., save to storage, process, etc.
 })
@@ -45,7 +45,7 @@ import { z } from 'zod'
 
 export const uploadFile = os.input(
     z.object({ file: oz.file().type('image/*') })
-).func(async (input) => {
+).handler(async (input) => {
     const image: File = input.file 
     // Process the image file as needed
 })

diff --git a/apps/content/content/docs/server/middleware.mdx b/apps/content/content/docs/server/middleware.mdx
@@ -114,7 +114,7 @@ export const authed = pub
             }
         })
     })
-    .func(async (input, context, meta) => {
+    .handler(async (input, context, meta) => {
 
         const _expect1: NonNullable<typeof context['user']> = context.user
         const _expect2: string = context.say

diff --git a/apps/content/content/docs/server/procedure.mdx b/apps/content/content/docs/server/procedure.mdx
@@ -52,7 +52,7 @@ const findUser = pub
     })
 
     // Define handler with business logic
-    .func(async (input, context, meta) => {
+    .handler(async (input, context, meta) => {
         // Implement your business logic here
 
         return {

diff --git a/apps/content/content/docs/server/router.mdx b/apps/content/content/docs/server/router.mdx
@@ -10,7 +10,7 @@ A router is a collection of procedures with utilities that help reduce code dupl
 ```ts twoslash
 import { os } from '@orpc/server'
 
-const findUser = os.route({path: '/'}).func(() => {})
+const findUser = os.route({path: '/'}).handler(() => {})
 
 export const appRouter = os.router({
     user: {