Project created from basic template
This commit is contained in:
44
.gitignore
vendored
Normal file
44
.gitignore
vendored
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Turbo
|
||||||
|
.turbo
|
||||||
|
|
||||||
|
# Storage
|
||||||
|
*.local
|
||||||
|
.storage/
|
||||||
|
|
||||||
|
# Quests
|
||||||
|
.quests/
|
||||||
|
|
||||||
|
# SQLite
|
||||||
|
*.db-journal
|
||||||
|
*.db-wal
|
||||||
|
*.db-shm
|
||||||
|
etilqs_*
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
63
AGENTS.md
Normal file
63
AGENTS.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
# Agent Guidelines for Basic Template
|
||||||
|
|
||||||
|
This is a foundational template for building React applications. Follow these guidelines to help users build apps effectively without breaking the established architecture.
|
||||||
|
|
||||||
|
## Template Architecture Overview
|
||||||
|
|
||||||
|
This template uses a client-server architecture with:
|
||||||
|
|
||||||
|
- Primary language: TypeScript
|
||||||
|
- Frontend: React 19 + Vite + Tailwind CSS 4
|
||||||
|
- Backend: Hono server with oRPC for type-safe APIs
|
||||||
|
- Full-stack type safety between client and server
|
||||||
|
|
||||||
|
## Critical Dependencies - DO NOT MODIFY
|
||||||
|
|
||||||
|
These dependencies are carefully configured and should NOT be changed:
|
||||||
|
|
||||||
|
- Tailwind CSS v4 - Uses the new Vite plugin (`@tailwindcss/vite`)
|
||||||
|
- React 19 - Latest version with new features
|
||||||
|
- oRPC - Provides type-safe client-server communication
|
||||||
|
- Hono - Server framework
|
||||||
|
- Vite 7 - Build tool with specific plugins configured
|
||||||
|
- Zod - Schema validation
|
||||||
|
|
||||||
|
## Important Reminders
|
||||||
|
|
||||||
|
- Main React entry point: `./src/client/app.tsx`
|
||||||
|
- File naming: Use lowercase, dash-case (kebab-case) for filenames (e.g. `component-name.tsx`)
|
||||||
|
- Flexbox layouts: Avoid centering containers that constrain component width in `app.tsx`
|
||||||
|
- Persistent Storage: The `.storage/` directory is ignored by git and can be used for persistent data.
|
||||||
|
|
||||||
|
## Demo Files - Reference Implementations
|
||||||
|
|
||||||
|
These files provide working examples for common functionality. Use them as templates or reference when implementing similar features:
|
||||||
|
|
||||||
|
> [!IMPORTANT] ALWAYS read these demo files first - Do not guess implementation based on file names.
|
||||||
|
|
||||||
|
### Client Patterns
|
||||||
|
|
||||||
|
- `src/client/components/demo/rpc.tsx` - RPC demo that uses uses `server/rpc/demo/storage.ts`
|
||||||
|
- `src/client/components/demo/ai.tsx` - AI mutations using response data directly (no manual state)
|
||||||
|
|
||||||
|
### Server Patterns
|
||||||
|
|
||||||
|
- `src/server/rpc/demo/storage.ts` - key-value storage with live subscriptions
|
||||||
|
- `src/server/rpc/demo/ai.ts` - AI chat completion and structured generation
|
||||||
|
- `src/server/lib/create-kv.ts` - Simple storage setup for oRPC handlers
|
||||||
|
|
||||||
|
## Adding New Features
|
||||||
|
|
||||||
|
- **Do NOT create new files in demo folders** - Demo files are reference implementations only
|
||||||
|
|
||||||
|
### UI Components
|
||||||
|
|
||||||
|
1. Create in `src/client/components/` (organize by feature)
|
||||||
|
2. Use Tailwind CSS
|
||||||
|
3. Reference `demo/rpc.tsx` for RPC integration
|
||||||
|
|
||||||
|
### Server Functions
|
||||||
|
|
||||||
|
1. Add to `src/server/rpc/index.ts` router
|
||||||
|
2. Reference `demo/*` for patterns
|
||||||
|
3. Use `create-kv.ts` for simple storage
|
11
README.md
Normal file
11
README.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
# Quests Base Template
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
- [TypeScript](https://www.typescriptlang.org/)
|
||||||
|
- [React](https://react.dev/)
|
||||||
|
- [Vite](https://vite.dev/)
|
||||||
|
- [Tailwind CSS V4](https://tailwindcss.com/)
|
||||||
|
- [oRPC](https://orpc.unnoq.com/)
|
||||||
|
- [Hono](https://hono.dev/)
|
||||||
|
- [Zod](https://zod.dev/)
|
42
eslint.config.js
Normal file
42
eslint.config.js
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import js from "@eslint/js";
|
||||||
|
import globals from "globals";
|
||||||
|
import reactHooks from "eslint-plugin-react-hooks";
|
||||||
|
import reactRefresh from "eslint-plugin-react-refresh";
|
||||||
|
import tseslint from "typescript-eslint";
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ["dist"] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ["**/*.{ts,tsx}"],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
"react-hooks": reactHooks,
|
||||||
|
"react-refresh": reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
"react-refresh/only-export-components": [
|
||||||
|
"warn",
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
args: "all",
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
caughtErrors: "all",
|
||||||
|
caughtErrorsIgnorePattern: "^_",
|
||||||
|
destructuredArrayIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_",
|
||||||
|
ignoreRestSiblings: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"no-console": "warn",
|
||||||
|
"no-warning-comments": ["warn", { terms: ["fixme"] }],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
45
package.json
Normal file
45
package.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "quests-template-basic",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"check:types": "tsc --noEmit",
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"lint:fix": "eslint . --fix",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@orpc/client": "^1.8.8",
|
||||||
|
"@orpc/server": "^1.8.8",
|
||||||
|
"@orpc/tanstack-query": "^1.8.8",
|
||||||
|
"@tailwindcss/vite": "^4.1.12",
|
||||||
|
"@tanstack/react-query": "^5.85.5",
|
||||||
|
"hono": "^4.9.4",
|
||||||
|
"jsonrepair": "^3.13.0",
|
||||||
|
"openai": "^5.17.0",
|
||||||
|
"react": "^19.1.1",
|
||||||
|
"react-dom": "^19.1.1",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"unstorage": "^1.16.1",
|
||||||
|
"zod": "^4.0.17"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^10.0.0",
|
||||||
|
"@hono/vite-dev-server": "^0.20.1",
|
||||||
|
"@types/node": "^22",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"@vitejs/plugin-react": "^5.0.1",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-plugin-react-hooks": "^6.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
|
"globals": "^16.3.0",
|
||||||
|
"typescript": "^5",
|
||||||
|
"typescript-eslint": "^8.40.0",
|
||||||
|
"vite": "^7.1.3",
|
||||||
|
"vite-tsconfig-paths": "^5.1.4"
|
||||||
|
}
|
||||||
|
}
|
3105
pnpm-lock.yaml
generated
Normal file
3105
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
3
pnpm-workspace.yaml
Normal file
3
pnpm-workspace.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
ignoredBuiltDependencies:
|
||||||
|
- "@tailwindcss/oxide"
|
||||||
|
- esbuild
|
8
quests.json
Normal file
8
quests.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"name": "New Project",
|
||||||
|
"description": "",
|
||||||
|
"icon": {
|
||||||
|
"lucide": "square-dashed",
|
||||||
|
"background": "conic-gradient(from 42deg at 50% 50%, #18181b, #27272a)"
|
||||||
|
}
|
||||||
|
}
|
14
src/client/app.tsx
Normal file
14
src/client/app.tsx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full max-w-4xl mx-auto p-4">
|
||||||
|
{/* Replace this placeholder content with your app components */}
|
||||||
|
<div className="text-center mt-72">
|
||||||
|
<h1 className="text-2xl mb-4 opacity-50">
|
||||||
|
Building your new project...
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
117
src/client/components/demo/ai.tsx
Normal file
117
src/client/components/demo/ai.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { queryClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
|
export function AIDemo() {
|
||||||
|
const [message, setMessage] = useState("");
|
||||||
|
const [systemPrompt, setSystemPrompt] = useState("");
|
||||||
|
const [personPrompt, setPersonPrompt] = useState("");
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: completionData,
|
||||||
|
mutate: complete,
|
||||||
|
isPending: isCompleting,
|
||||||
|
} = useMutation(queryClient.demo.ai.complete.mutationOptions());
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: personData,
|
||||||
|
mutate: generatePerson,
|
||||||
|
isPending: isGenerating,
|
||||||
|
} = useMutation(queryClient.demo.ai.generate.mutationOptions());
|
||||||
|
|
||||||
|
// When using this demo, remove any UI below that is not relevant for the user
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto p-6 space-y-8">
|
||||||
|
<h2 className="text-2xl font-bold">AI Demo</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-xl font-semibold">Chat Completion</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<input
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-md"
|
||||||
|
placeholder="System prompt (optional)"
|
||||||
|
value={systemPrompt}
|
||||||
|
onChange={(e) => setSystemPrompt(e.target.value)}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-md"
|
||||||
|
placeholder="Your message"
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="px-6 py-3 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||||
|
onClick={() => {
|
||||||
|
if (message) {
|
||||||
|
complete({
|
||||||
|
message,
|
||||||
|
systemPrompt: systemPrompt || undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={isCompleting || !message}
|
||||||
|
>
|
||||||
|
{isCompleting ? "Generating..." : "Send Message"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{completionData && (
|
||||||
|
<div className="p-4 border border-gray-200 rounded-md">
|
||||||
|
<h4 className="font-medium mb-2">Response:</h4>
|
||||||
|
<p className="leading-relaxed">{completionData.response}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-xl font-semibold">Generate Person</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<input
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-md"
|
||||||
|
placeholder="Describe the person you want to generate"
|
||||||
|
value={personPrompt}
|
||||||
|
onChange={(e) => setPersonPrompt(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="px-6 py-3 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||||
|
onClick={() => {
|
||||||
|
if (personPrompt) {
|
||||||
|
generatePerson({ prompt: personPrompt });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={isGenerating || !personPrompt}
|
||||||
|
>
|
||||||
|
{isGenerating ? "Generating..." : "Generate Person"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{personData && (
|
||||||
|
<div className="p-4 border border-gray-200 rounded-md">
|
||||||
|
<h4 className="font-medium mb-3">Generated Person:</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p>
|
||||||
|
<strong>Name:</strong> {personData.person.name}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Age:</strong> {personData.person.age}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Occupation:</strong> {personData.person.occupation}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Bio:</strong> {personData.person.bio}
|
||||||
|
</p>
|
||||||
|
{personData.person.nickname && (
|
||||||
|
<p>
|
||||||
|
<strong>Nickname:</strong> {personData.person.nickname}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
63
src/client/components/demo/rpc.tsx
Normal file
63
src/client/components/demo/rpc.tsx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
|
import { queryClient, rpcClient } from "@/client/rpc-client";
|
||||||
|
|
||||||
|
export function RPCDemo() {
|
||||||
|
const [value, setValue] = useState("");
|
||||||
|
|
||||||
|
// Live data query - automatically updates when server data changes
|
||||||
|
// Use .experimental_liveOptions() for real-time subscriptions
|
||||||
|
// Use .queryOptions() for static data that doesn't need live updates
|
||||||
|
const { data: items } = useQuery(
|
||||||
|
queryClient.demo.storage.live.list.experimental_liveOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Mutations handle data changes with loading states
|
||||||
|
// Automatically invalidates related queries on success
|
||||||
|
const { mutate: createItem, isPending: isCreatingItem } = useMutation(
|
||||||
|
queryClient.demo.storage.create.mutationOptions()
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Storage Demo</h2>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
placeholder="Value"
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => setValue(e.target.value)}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (value) {
|
||||||
|
createItem({ value });
|
||||||
|
setValue("");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={isCreatingItem}
|
||||||
|
>
|
||||||
|
{isCreatingItem ? "Adding..." : "Add Item"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3>Items:</h3>
|
||||||
|
{items?.map((item) => (
|
||||||
|
<div key={item.id}>
|
||||||
|
{item.id}: {item.value}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
// Direct RPC calls bypass React Query caching/mutations
|
||||||
|
// Use for one-off operations or when you need immediate execution
|
||||||
|
return rpcClient.demo.storage.remove(item.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
15
src/client/main.tsx
Normal file
15
src/client/main.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import "./styles/globals.css";
|
||||||
|
import App from "./app.tsx";
|
||||||
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<App />
|
||||||
|
</QueryClientProvider>
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
12
src/client/rpc-client.ts
Normal file
12
src/client/rpc-client.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import type { RouterClient } from "@orpc/server";
|
||||||
|
import { createORPCClient } from "@orpc/client";
|
||||||
|
import { RPCLink } from "@orpc/client/fetch";
|
||||||
|
import { createTanstackQueryUtils } from "@orpc/tanstack-query";
|
||||||
|
|
||||||
|
import type { router } from "@/server/rpc";
|
||||||
|
|
||||||
|
const link = new RPCLink({ url: `${window.location.origin}/rpc` });
|
||||||
|
|
||||||
|
export const rpcClient: RouterClient<typeof router> = createORPCClient(link);
|
||||||
|
|
||||||
|
export const queryClient = createTanstackQueryUtils(rpcClient);
|
1
src/client/styles/globals.css
Normal file
1
src/client/styles/globals.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import "tailwindcss";
|
1
src/client/vite-env.d.ts
vendored
Normal file
1
src/client/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
11
src/server/index.ts
Normal file
11
src/server/index.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { Hono } from "hono";
|
||||||
|
|
||||||
|
import { rpcApp } from "./routes/rpc";
|
||||||
|
import { clientEntry } from "./routes/client-entry";
|
||||||
|
|
||||||
|
const app = new Hono();
|
||||||
|
|
||||||
|
app.route("/rpc", rpcApp);
|
||||||
|
app.get("/*", clientEntry);
|
||||||
|
|
||||||
|
export default app;
|
41
src/server/lib/create-kv.ts
Normal file
41
src/server/lib/create-kv.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { createStorage, StorageValue, WatchEvent } from "unstorage";
|
||||||
|
import fsDriver from "unstorage/drivers/fs";
|
||||||
|
|
||||||
|
const STORAGE_PATH = "./.storage"; // It is .gitignored
|
||||||
|
|
||||||
|
export function createKV<T extends StorageValue>(name: string) {
|
||||||
|
const storage = createStorage<T>({
|
||||||
|
driver: fsDriver({ base: `${STORAGE_PATH}/${name}` }),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Async generator to play work well with oRPC live queries
|
||||||
|
async function* subscribe() {
|
||||||
|
let resolve: (value: { event: WatchEvent; key: string }) => void;
|
||||||
|
let promise = new Promise<{ event: WatchEvent; key: string }>(
|
||||||
|
(r) => (resolve = r)
|
||||||
|
);
|
||||||
|
|
||||||
|
const unwatch = await storage.watch((event, key) => {
|
||||||
|
resolve({ event, key });
|
||||||
|
promise = new Promise<{ event: WatchEvent; key: string }>(
|
||||||
|
(r) => (resolve = r)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
while (true) yield await promise;
|
||||||
|
} finally {
|
||||||
|
await unwatch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...storage,
|
||||||
|
getAllItems: async () => {
|
||||||
|
const keys = await storage.getKeys();
|
||||||
|
const values = await storage.getItems(keys);
|
||||||
|
return values.map(({ value }) => value);
|
||||||
|
},
|
||||||
|
subscribe,
|
||||||
|
};
|
||||||
|
}
|
28
src/server/lib/openai.ts
Normal file
28
src/server/lib/openai.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { jsonrepair } from "jsonrepair";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { makeParseableResponseFormat } from "openai/lib/parser";
|
||||||
|
|
||||||
|
import type { AutoParseableResponseFormat } from "openai/lib/parser";
|
||||||
|
import type { ResponseFormatJSONSchema } from "openai/resources";
|
||||||
|
|
||||||
|
export function zodResponseFormat<ZodInput extends z.ZodType>(
|
||||||
|
zodObject: ZodInput,
|
||||||
|
name: string,
|
||||||
|
props?: Omit<
|
||||||
|
ResponseFormatJSONSchema.JSONSchema,
|
||||||
|
"schema" | "strict" | "name"
|
||||||
|
>
|
||||||
|
): AutoParseableResponseFormat<z.infer<ZodInput>> {
|
||||||
|
return makeParseableResponseFormat(
|
||||||
|
{
|
||||||
|
type: "json_schema",
|
||||||
|
json_schema: {
|
||||||
|
...props,
|
||||||
|
name,
|
||||||
|
strict: true,
|
||||||
|
schema: z.toJSONSchema(zodObject, { target: "draft-7" }),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
(content) => zodObject.parse(JSON.parse(jsonrepair(content)))
|
||||||
|
);
|
||||||
|
}
|
33
src/server/routes/client-entry.tsx
Normal file
33
src/server/routes/client-entry.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
/** @jsxImportSource hono/jsx */
|
||||||
|
import type { Context } from "hono";
|
||||||
|
import viteReact from "@vitejs/plugin-react";
|
||||||
|
|
||||||
|
import type { BlankEnv } from "hono/types";
|
||||||
|
|
||||||
|
export function clientEntry(c: Context<BlankEnv>) {
|
||||||
|
return c.html(
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||||
|
<title>New Quest</title>
|
||||||
|
{import.meta.env.PROD ? (
|
||||||
|
<script src="/static/main.js" type="module" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<script
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: viteReact.preambleCode.replace("__BASE__", "/"),
|
||||||
|
}}
|
||||||
|
type="module"
|
||||||
|
/>
|
||||||
|
<script src="/src/client/main.tsx" type="module" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" />
|
||||||
|
</body>
|
||||||
|
</html>,
|
||||||
|
);
|
||||||
|
}
|
21
src/server/routes/rpc.ts
Normal file
21
src/server/routes/rpc.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { RPCHandler } from "@orpc/server/fetch";
|
||||||
|
|
||||||
|
import { router } from "@/server/rpc";
|
||||||
|
import { Hono } from "hono";
|
||||||
|
|
||||||
|
export const rpcApp = new Hono();
|
||||||
|
|
||||||
|
const handler = new RPCHandler(router);
|
||||||
|
|
||||||
|
rpcApp.use("/*", async (c, next) => {
|
||||||
|
const { matched, response } = await handler.handle(c.req.raw, {
|
||||||
|
prefix: "/rpc",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (matched) {
|
||||||
|
return c.newResponse(response.body, response);
|
||||||
|
}
|
||||||
|
|
||||||
|
await next();
|
||||||
|
return;
|
||||||
|
});
|
95
src/server/rpc/demo/ai.ts
Normal file
95
src/server/rpc/demo/ai.ts
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import OpenAI from "openai";
|
||||||
|
import { os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { zodResponseFormat } from "@/server/lib/openai";
|
||||||
|
|
||||||
|
if (!process.env.OPENAI_BASE_URL) {
|
||||||
|
throw new Error("OPENAI_BASE_URL is not set");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!process.env.OPENAI_API_KEY) {
|
||||||
|
throw new Error("OPENAI_API_KEY is not set");
|
||||||
|
}
|
||||||
|
|
||||||
|
const openai = new OpenAI({
|
||||||
|
baseURL: process.env.OPENAI_BASE_URL,
|
||||||
|
apiKey: process.env.OPENAI_API_KEY,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!process.env.OPENAI_DEFAULT_MODEL) {
|
||||||
|
throw new Error("OPENAI_DEFAULT_MODEL is not set");
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_MODEL = process.env.OPENAI_DEFAULT_MODEL;
|
||||||
|
|
||||||
|
const ChatCompletionInputSchema = z.object({
|
||||||
|
message: z.string(),
|
||||||
|
systemPrompt: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const GeneratePersonInputSchema = z.object({
|
||||||
|
prompt: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const complete = os
|
||||||
|
.input(ChatCompletionInputSchema)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const { message, systemPrompt } = input;
|
||||||
|
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: DEFAULT_MODEL,
|
||||||
|
messages: [
|
||||||
|
...(systemPrompt
|
||||||
|
? [{ role: "system" as const, content: systemPrompt }]
|
||||||
|
: []),
|
||||||
|
{ role: "user" as const, content: message },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
response: completion.choices[0]?.message?.content || "",
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Object generation schemas only support nullability, not optionality.
|
||||||
|
// Use .nullable() instead of .optional() for fields that may not have values.
|
||||||
|
const DemoSchema = z.object({
|
||||||
|
name: z.string().describe("The name of the person"),
|
||||||
|
age: z.number().describe("The age of the person"),
|
||||||
|
occupation: z.string().describe("The occupation of the person"),
|
||||||
|
bio: z.string().describe("The bio of the person"),
|
||||||
|
nickname: z
|
||||||
|
.string()
|
||||||
|
.nullable()
|
||||||
|
.describe("The person's nickname, if they have one"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const generate = os
|
||||||
|
.input(GeneratePersonInputSchema)
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const completion = await openai.chat.completions.parse({
|
||||||
|
model: DEFAULT_MODEL,
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: "user",
|
||||||
|
content: `Generate a person based on this prompt: ${input.prompt}`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
response_format: zodResponseFormat(DemoSchema, "person"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const person = completion.choices[0]?.message?.parsed;
|
||||||
|
if (!person) {
|
||||||
|
throw new Error("No parsed data received from OpenAI");
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
person,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
export const router = {
|
||||||
|
complete,
|
||||||
|
generate,
|
||||||
|
};
|
7
src/server/rpc/demo/index.ts
Normal file
7
src/server/rpc/demo/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { router as storageRouter } from "./storage";
|
||||||
|
import { router as aiRouter } from "./ai";
|
||||||
|
|
||||||
|
export const demo = {
|
||||||
|
storage: storageRouter,
|
||||||
|
ai: aiRouter,
|
||||||
|
};
|
51
src/server/rpc/demo/storage.ts
Normal file
51
src/server/rpc/demo/storage.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import { call, os } from "@orpc/server";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { randomUUID } from "crypto";
|
||||||
|
import { createKV } from "@/server/lib/create-kv";
|
||||||
|
|
||||||
|
const DemoSchema = z.object({
|
||||||
|
id: z.string(),
|
||||||
|
value: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type Demo = z.output<typeof DemoSchema>;
|
||||||
|
|
||||||
|
// createKV provides simple key-value storage with publisher/subscriber support
|
||||||
|
// perfect for live queries and small amounts of data
|
||||||
|
const kv = createKV<Demo>("demo");
|
||||||
|
|
||||||
|
// Handler with input validation using .input() and schema
|
||||||
|
const create = os
|
||||||
|
.input(DemoSchema.omit({ id: true }))
|
||||||
|
.handler(async ({ input }) => {
|
||||||
|
const id = randomUUID();
|
||||||
|
const item = { id, value: input.value };
|
||||||
|
await kv.setItem(id, item);
|
||||||
|
});
|
||||||
|
|
||||||
|
const remove = os.input(z.string()).handler(async ({ input }) => {
|
||||||
|
await kv.removeItem(input);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handler without input - returns all items
|
||||||
|
const list = os.handler(async () => {
|
||||||
|
return kv.getAllItems();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Live data stream using generator function
|
||||||
|
// Yields initial data, then subscribes to changes for real-time updates
|
||||||
|
const live = {
|
||||||
|
list: os.handler(async function* ({ signal }) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
for await (const _ of kv.subscribe()) {
|
||||||
|
yield call(list, {}, { signal });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const router = {
|
||||||
|
create,
|
||||||
|
remove,
|
||||||
|
list,
|
||||||
|
live,
|
||||||
|
};
|
5
src/server/rpc/index.ts
Normal file
5
src/server/rpc/index.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { demo } from "./demo";
|
||||||
|
|
||||||
|
export const router = {
|
||||||
|
demo,
|
||||||
|
};
|
24
tsconfig.json
Normal file
24
tsconfig.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"noEmit": true,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"target": "ES2022"
|
||||||
|
},
|
||||||
|
"include": ["**/*.ts", "src"]
|
||||||
|
}
|
27
vite.config.ts
Normal file
27
vite.config.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import devServer, { defaultOptions } from "@hono/vite-dev-server";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
import { defineConfig, loadEnv } from "vite";
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
if (process.env.QUESTS_INSIDE_STUDIO !== "true") {
|
||||||
|
// When app is run outside Quests, this ensure .env* files are loaded
|
||||||
|
// Removes need for VITE_ prefix in .env files for the server as well
|
||||||
|
const env = loadEnv(mode, process.cwd(), "");
|
||||||
|
process.env = env;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
plugins: [
|
||||||
|
tsconfigPaths(),
|
||||||
|
react(),
|
||||||
|
tailwindcss(),
|
||||||
|
devServer({
|
||||||
|
// Exclude client folder from server because we only client render and
|
||||||
|
// it interferes with image imports.
|
||||||
|
exclude: [/src\/client\/.*/, ...defaultOptions.exclude],
|
||||||
|
entry: "./src/server/index.ts",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
});
|
Reference in New Issue
Block a user