docs: fix playgrounds on Stackblitz (#39)

* polyfill

* nextjs issues

* docs

apps/content/content/docs/playground.mdx

@@ -11,7 +11,7 @@ featuring pre-configured examples accessible instantly via StackBlitz or local s
 
 | Environment | StackBlitz | GitHub Source |
 |------------|------------|---------------|
-| Next.js Playground | [Local Only](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/nextjs?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/nextjs/src/app/page.tsx) |
+| Next.js Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/nextjs?file=src%2Fapp%2Fpage.tsx) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/nextjs/src/app/page.tsx) |
 | OpenAPI Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/openapi?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/openapi/src/router/index.ts) |
 | OpenAPI with Contract Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/contract-openapi?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/contract-openapi/src/router/index.ts) |
 | Express.js Playground | [Open in StackBlitz](https://stackblitz.com/github/unnoq/orpc/tree/main/playgrounds/expressjs?file=src%2Frouter%2Findex.ts) | [View Source](https://github.com/unnoq/orpc/tree/main/playgrounds/expressjs/src/router/index.ts) |

playgrounds/contract-openapi/package.json

@@ -2,8 +2,9 @@
   "name": "orpc-contract-openapi-playground",
   "type": "module",
   "version": "0.0.0",
+  "packageManager": "pnpm@8.15.6",
   "description": "oRPC Contract OpenAPI Playground",
-  "author": "",
+  "author": "unnoq",
   "license": "ISC",
   "keywords": ["orpc", "contract", "openapi", "playground", "unnoq"],
   "scripts": {

playgrounds/contract-openapi/src/main.ts

@@ -4,6 +4,7 @@ import { createFetchHandler } from '@orpc/server/fetch'
 import { createServerAdapter } from '@whatwg-node/server'
 import { contract } from './contract'
 import { router } from './router'
+import './polyfill'
 
 const orpcHandler = createFetchHandler({
   router,

playgrounds/contract-openapi/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from 'node:buffer'
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === 'undefined') {
+  globalThis.File = File as any
+}

playgrounds/expressjs/package.json

@@ -2,8 +2,9 @@
   "name": "orpc-expresjs-playground",
   "type": "module",
   "version": "0.0.0",
+  "packageManager": "pnpm@8.15.6",
   "description": "oRPC ExpressJS Playground",
-  "author": "",
+  "author": "unnoq",
   "license": "ISC",
   "keywords": ["orpc", "expressjs", "playground", "unnoq"],
   "scripts": {

playgrounds/expressjs/src/main.ts

@@ -3,6 +3,7 @@ import { createFetchHandler } from '@orpc/server/fetch'
 import { createServerAdapter } from '@whatwg-node/server'
 import express from 'express'
 import { router } from './router'
+import './polyfill'
 
 const app = express()
 

playgrounds/expressjs/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from 'node:buffer'
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === 'undefined') {
+  globalThis.File = File as any
+}

playgrounds/nextjs/package.json

@@ -2,7 +2,9 @@
   "name": "orpc-nextjs-playground",
   "version": "0.1.0",
   "private": true,
+  "packageManager": "pnpm@8.15.6",
   "description": "oRPC NextJS Playground",
+  "author": "unnoq",
   "keywords": [
     "orpc",
     "nextjs",

playgrounds/nextjs/src/app/api/[...rest]/route.ts

@@ -4,17 +4,15 @@ import { router } from './router'
 const handler = createFetchHandler({
   router,
   serverless: true,
+  // hooks(context, hooks) {
+  //   return hooks.next()
+  // },
 })
 
 function handleRequest(request: Request) {
-  const context = request.headers.get('Authorization')
-    ? { user: { id: 'test', name: 'John Doe', email: 'john@doe.com' } }
-    : {}
-
   return handler({
     request,
     prefix: '/api',
-    context,
   })
 }
 

playgrounds/nextjs/src/orpc.ts

@@ -1,39 +1,44 @@
 import type { z } from 'zod'
 import type { UserSchema } from './schemas/user'
 import { ORPCError, os } from '@orpc/server'
-import { cookies, headers } from 'next/headers'
+import './polyfill'
 
-const base = os.use(async (input, context, meta) => {
-  const headerList = await headers()
-  let user = headerList.get('Authorization')
-    ? { id: 'test', name: 'John Doe', email: 'john@doe.com' } satisfies z.infer<typeof UserSchema>
-    : undefined
+const base = os
+  .use(async (input, context, meta) => {
+    const start = Date.now()
 
-  if (!user) {
-    const cookieList = await cookies()
-    // do something with cookies
-    user = { id: 'test', name: 'John Doe', email: 'john@doe.com' }
-  }
-
-  return meta.next({
-    context: {
-      db: 'dummy:postgres',
-      user,
-    },
+    try {
+      return await meta.next({})
+    }
+    catch (e) {
+      console.error(e)
+      throw e
+    }
+    finally {
+      // eslint-disable-next-line no-console
+      console.log(`[${meta.path.join('/')}] ${Date.now() - start}ms`)
+    }
   })
-})
+  .use(async (input, context, meta) => {
+  // You can use headers or cookies here to create the user object:
+  // import { cookies, headers } from 'next/headers'
+  // const headerList = await headers();
+  // const cookieList = await cookies();
+  //
+  // These lines are commented out because Stackblitz has issues with Next.js headers and cookies.
+  // However, this works fine in a local environment.
 
-export const pub = base.use(async (input, context, meta) => {
-  const start = Date.now()
+    const user = { id: 'test', name: 'John Doe', email: 'john@doe.com' } satisfies z.infer<typeof UserSchema>
 
-  try {
-    return await meta.next({})
-  }
-  finally {
-    // eslint-disable-next-line no-console
-    console.log(`[${meta.path.join('/')}] ${Date.now() - start}ms`)
-  }
-})
+    return meta.next({
+      context: {
+        db: 'dummy:postgres',
+        user,
+      },
+    })
+  })
+
+export const pub = base
 
 export const authed = pub.use(async (input, context, meta) => {
   if (!context.user) {

playgrounds/nextjs/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from 'node:buffer'
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === 'undefined') {
+  globalThis.File = File as any
+}

playgrounds/openapi/package.json

@@ -2,8 +2,9 @@
   "name": "orpc-openapi-playground",
   "type": "module",
   "version": "0.0.0",
+  "packageManager": "pnpm@8.15.6",
   "description": "oRPC OpenAPI Playground",
-  "author": "",
+  "author": "unnoq",
   "license": "ISC",
   "keywords": ["orpc", "openapi", "playground", "unnoq"],
   "scripts": {

playgrounds/openapi/src/main.ts

@@ -3,6 +3,7 @@ import { generateOpenAPI } from '@orpc/openapi'
 import { createFetchHandler } from '@orpc/server/fetch'
 import { createServerAdapter } from '@whatwg-node/server'
 import { router } from './router'
+import './polyfill'
 
 const orpcHandler = createFetchHandler({
   router,

playgrounds/openapi/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from 'node:buffer'
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === 'undefined') {
+  globalThis.File = File as any
+}