@oyolincc/create 0.2.0 → 0.3.0

package/templates/hono-fullstack/apps/server/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@oyolincc/dev-config/tsconfig.bundler.json",
+  "compilerOptions": {
+    "types": ["node", "./worker-configuration.d.ts"],
+    "verbatimModuleSyntax": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx",
+    "outDir": "./dist",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@error-categories": ["./src/shared/errors/defs/index.ts"]
+    }
+  },
+  "files": [],
+  "include": ["src", "./*.ts", "./*.mts"],
+  "exclude": ["node_modules"]
+}

package/templates/hono-fullstack/apps/server/vite.config.ts

@@ -0,0 +1,87 @@
+import { defineConfig, type Plugin } from 'vite-plus'
+import { packConfig } from '@oyolincc/dev-config'
+import devServer from '@hono/vite-dev-server'
+import nodeAdapter from '@hono/vite-dev-server/node'
+import { loadEnvSync } from '@oyolincc/env-loader'
+import path from 'node:path'
+// import { builtinModules } from 'node:module'
+
+const __dirname = import.meta.dirname
+const isServe = !!process.env.VITE_PUBLIC_DEV_SERVE
+const workersDir = path.resolve(__dirname, 'dist/workers')
+
+function virtualWorkers(kind: 'dev' | 'pack'): Plugin {
+  const virtualId = 'virtual:workers'
+  const resolvedId = `\0${virtualId}`
+
+  return {
+    name: 'virtual-workers',
+    resolveId(id) {
+      if (id === virtualId) return resolvedId
+      return null
+    },
+    load(id) {
+      if (id !== resolvedId) return null
+      // vp dev / test: Piscina cannot follow Vite's module graph; pack --watch writes dist/workers.
+      if (kind === 'dev') {
+        return `export default ${JSON.stringify(workersDir)}`
+      }
+      // vp pack: inlined into the server entry, so import.meta.dirname is dist/.
+      return "import path from 'node:path'\nexport default path.join(import.meta.dirname, 'workers')"
+    },
+  }
+}
+
+export default defineConfig(() => {
+  return {
+    test: {
+      clearMocks: false,
+    },
+    plugins: [
+      virtualWorkers('dev'),
+      {
+        name: 'node-bootstrap',
+        async configureServer() {
+          loadEnvSync({
+            preset: 'server',
+          })
+        },
+      },
+      devServer({
+        entry: './src/adapters/nodejs/entry.ts',
+        adapter: nodeAdapter(),
+      }) as Plugin,
+    ],
+    pack: {
+      ...packConfig,
+      plugins: [virtualWorkers('pack')],
+      deps: {
+        neverBundle: ['cloudflare:workers'],
+      },
+      entry: {
+        ...(isServe
+          ? {}
+          : {
+              nodejsMain: './src/adapters/nodejs/bootstrap.ts',
+            }),
+        nodejsEntry: './src/adapters/nodejs/entry.ts',
+        cloudflareEntry: './src/adapters/cloudflare/entry.ts',
+        // Enable this entry together with PiscinaWorkRunner in the Node.js adapter.
+        // 'workers/example-worker': './src/infra/work-runner/example/worker-entry.ts',
+      },
+      // deps: {
+      //   neverBundle: [...builtinModules],
+      // },
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@error-categories': path.resolve(__dirname, './src/shared/errors/defs/index.ts'),
+      },
+    },
+    server: {
+      port: Number(process.env.NODE_PORT) || 6464,
+      host: true,
+    },
+  }
+})

package/templates/hono-fullstack/apps/server/wrangler.jsonc

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/wrangler/config-schema.json",
+  "name": "repo-server-dev",
+  "main": "./src/adapters/cloudflare/entry.ts",
+  "compatibility_date": "2026-09-23",
+  "compatibility_flags": ["nodejs_compat"],
+  "dev": {
+    "port": 6464,
+    "inspector_port": 19230,
+  },
+  "observability": {
+    "logs": {
+      "enabled": true,
+      "invocation_logs": true,
+    },
+    "traces": {
+      "enabled": false,
+    },
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "repo-db",
+      "database_id": "00000000-0000-0000-0000-000000000000",
+      "migrations_dir": "../../libs/db/migrations/sqlite-d1",
+      "migrations_pattern": "../../libs/db/migrations/sqlite-d1/*/migration.sql",
+    },
+  ],
+}

package/templates/hono-fullstack/apps/stack/backend/cloudflare.ts

@@ -0,0 +1,5 @@
+import app from '@repo/server/cloudflare'
+import { env } from 'cloudflare:workers'
+
+export const handleApiRequest = async (request: Request): Promise<Response> =>
+  app.fetch(request, env)

package/templates/hono-fullstack/apps/stack/backend/node.ts

@@ -0,0 +1,3 @@
+import app from '@repo/server/nodejs'
+
+export const handleApiRequest = async (request: Request): Promise<Response> => app.fetch(request)

package/templates/hono-fullstack/apps/stack/frontend/components/general/ErrorMessage.tsx

@@ -0,0 +1,4 @@
+export function ErrorMessage({ error }: { error: unknown }) {
+  if (!error) return null
+  return <p className="text-red-400">{String(error)}</p>
+}

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/AppLayout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import { Header } from './Header'
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+      <Header />
+      {children}
+    </div>
+  )
+}

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/Header.tsx

@@ -0,0 +1,7 @@
+export function Header() {
+  return (
+    <header className="border-b border-zinc-800 px-8 py-4">
+      <strong>Hono fullstack</strong>
+    </header>
+  )
+}

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/Page.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function Page({ children }: { children: ReactNode }) {
+  return <section className="flex flex-col gap-6">{children}</section>
+}

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/PageContainer.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function PageContainer({ children }: { children: ReactNode }) {
+  return <main className="mx-auto max-w-2xl p-8">{children}</main>
+}

package/templates/hono-fullstack/apps/stack/frontend/modules/example/api.ts

@@ -0,0 +1,13 @@
+import type {
+  CreateExampleInput,
+  Example,
+  ProcessExampleInput,
+  ProcessExampleOutput,
+} from '@repo/definition/frontend'
+import { request } from '#/shared/network/client'
+
+export const listExamples = () => request<Example[]>('examples')
+export const createExample = (input: CreateExampleInput) =>
+  request<Example>('examples', { method: 'post', json: input })
+export const processExample = (input: ProcessExampleInput) =>
+  request<ProcessExampleOutput>('examples/process', { method: 'post', json: input })

package/templates/hono-fullstack/apps/stack/frontend/modules/example/components/ExampleForm.tsx

@@ -0,0 +1,45 @@
+import type { FormEvent } from 'react'
+
+interface ExampleFormProps {
+  message: string
+  saving: boolean
+  processing: boolean
+  onMessageChange: (message: string) => void
+  onSave: () => Promise<void>
+  onProcess: () => void
+}
+
+export function ExampleForm({
+  message,
+  saving,
+  processing,
+  onMessageChange,
+  onSave,
+  onProcess,
+}: ExampleFormProps) {
+  const submit = async (event: FormEvent) => {
+    event.preventDefault()
+    await onSave()
+  }
+
+  return (
+    <form className="flex gap-2" onSubmit={submit}>
+      <input
+        className="min-w-0 flex-1 rounded border border-zinc-700 bg-zinc-900 px-3 py-2"
+        value={message}
+        onChange={(event) => onMessageChange(event.target.value)}
+        placeholder="Message"
+      />
+      <button className="rounded bg-blue-600 px-4 py-2" disabled={!message.trim() || saving}>
+        Save
+      </button>
+      <button
+        className="rounded bg-emerald-600 px-4 py-2"
+        type="button"
+        disabled={!message.trim() || processing}
+        onClick={onProcess}>
+        Process
+      </button>
+    </form>
+  )
+}

package/templates/hono-fullstack/apps/stack/frontend/modules/example/components/ExampleList.tsx

@@ -0,0 +1,13 @@
+import type { Example } from '@repo/definition/frontend'
+
+export function ExampleList({ examples }: { examples?: Example[] }) {
+  return (
+    <ul className="grid gap-2">
+      {examples?.map((example) => (
+        <li className="rounded border border-zinc-800 p-3" key={example.id}>
+          {example.message}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/templates/hono-fullstack/apps/stack/frontend/modules/example/hooks/api-hooks.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { createExample, listExamples, processExample } from '../api'
+
+export const exampleQueryKey = ['examples'] as const
+
+export const useExamples = () => useQuery({ queryKey: exampleQueryKey, queryFn: listExamples })
+export function useCreateExample() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: createExample,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: exampleQueryKey }),
+  })
+}
+export const useProcessExample = () => useMutation({ mutationFn: processExample })

package/templates/hono-fullstack/apps/stack/frontend/modules/example/stores/index.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const exampleMessageAtom = atom('')

package/templates/hono-fullstack/apps/stack/frontend/routeTree.gen.ts

@@ -0,0 +1,73 @@
+/* eslint-disable */
+// @ts-nocheck
+// This file was automatically generated by TanStack Router.
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiSplatRouteImport } from './routes/api/$'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSplatRoute = ApiSplatRouteImport.update({
+  id: '/api/$',
+  path: '/api/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/api/$': typeof ApiSplatRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/api/$': typeof ApiSplatRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/api/$': typeof ApiSplatRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/api/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/api/$'
+  id: '__root__' | '/' | '/api/$'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ApiSplatRoute: typeof ApiSplatRoute
+}
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/$': {
+      id: '/api/$'
+      path: '/api/$'
+      fullPath: '/api/$'
+      preLoaderRoute: typeof ApiSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+const rootRouteChildren: RootRouteChildren = { IndexRoute, ApiSplatRoute }
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/templates/hono-fullstack/apps/stack/frontend/router.tsx

@@ -0,0 +1,22 @@
+import { QueryClient } from '@tanstack/react-query'
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { createStore } from 'jotai'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const queryClient = new QueryClient()
+  const store = createStore()
+  return createTanStackRouter({
+    routeTree,
+    context: { queryClient, store },
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  })
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/templates/hono-fullstack/apps/stack/frontend/routes/__root.tsx

@@ -0,0 +1,61 @@
+import type { QueryClient } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import {
+  HeadContent,
+  Navigate,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Provider as JotaiProvider, type createStore } from 'jotai'
+import appCss from '../styles.css?url'
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient
+  store: ReturnType<typeof createStore>
+}>()({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: 'Hono fullstack' },
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: RootComponent,
+  notFoundComponent: () => <Navigate to="/" />,
+  shellComponent: RootDocument,
+})
+
+function RootComponent() {
+  const { queryClient, store } = Route.useRouteContext()
+  return (
+    <QueryClientProvider client={queryClient}>
+      <JotaiProvider store={store}>
+        <Outlet />
+      </JotaiProvider>
+      {import.meta.env.DEV && (
+        <>
+          <ReactQueryDevtools buttonPosition="bottom-left" />
+          <TanStackRouterDevtools position="bottom-right" />
+        </>
+      )}
+    </QueryClientProvider>
+  )
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/templates/hono-fullstack/apps/stack/frontend/routes/api/$.ts

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { handleApiRequest } from '#server-runtime'
+
+const serve = async ({ request }: { request: Request }) => handleApiRequest(request)
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      GET: serve,
+      POST: serve,
+      PUT: serve,
+      PATCH: serve,
+      DELETE: serve,
+      OPTIONS: serve,
+      HEAD: serve,
+    },
+  },
+})

package/templates/hono-fullstack/apps/stack/frontend/routes/index.tsx

@@ -0,0 +1,50 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useAtom } from 'jotai'
+import { ErrorMessage } from '#/components/general/ErrorMessage'
+import { AppLayout } from '#/components/layouts/AppLayout'
+import { Page } from '#/components/layouts/Page'
+import { PageContainer } from '#/components/layouts/PageContainer'
+import { ExampleForm } from '#/modules/example/components/ExampleForm'
+import { ExampleList } from '#/modules/example/components/ExampleList'
+import { useCreateExample, useExamples, useProcessExample } from '#/modules/example/hooks/api-hooks'
+import { exampleMessageAtom } from '#/modules/example/stores'
+
+export const Route = createFileRoute('/')({ component: Home })
+
+function Home() {
+  const [message, setMessage] = useAtom(exampleMessageAtom)
+  const examples = useExamples()
+  const create = useCreateExample()
+  const process = useProcessExample()
+
+  const save = async () => {
+    await create.mutateAsync({ message })
+    setMessage('')
+  }
+
+  return (
+    <AppLayout>
+      <PageContainer>
+        <Page>
+          <header>
+            <h1 className="text-3xl font-bold">Example workspace</h1>
+            <p className="text-zinc-400">Nitro mounts the independent Hono server under /api.</p>
+          </header>
+          <ExampleForm
+            message={message}
+            saving={create.isPending}
+            processing={process.isPending}
+            onMessageChange={setMessage}
+            onSave={save}
+            onProcess={() => process.mutate({ message })}
+          />
+          {process.data && (
+            <pre className="rounded bg-zinc-900 p-4">{JSON.stringify(process.data, null, 2)}</pre>
+          )}
+          <ErrorMessage error={create.error || process.error || examples.error} />
+          <ExampleList examples={examples.data} />
+        </Page>
+      </PageContainer>
+    </AppLayout>
+  )
+}

package/templates/hono-fullstack/apps/stack/frontend/shared/network/client.ts

@@ -0,0 +1,19 @@
+import ky, { HTTPError, type Options } from 'ky'
+import { NetworkDefaults } from './constants'
+import { parseApiError } from './errors'
+
+const client = ky.create({
+  prefix: NetworkDefaults.API_PREFIX,
+  timeout: NetworkDefaults.TIMEOUT,
+  retry: 0,
+})
+
+export async function request<T>(path: string, options?: Options) {
+  try {
+    const response = await client(path, options).json<{ data: T }>()
+    return response.data
+  } catch (error) {
+    if (error instanceof HTTPError) throw await parseApiError(error)
+    throw error
+  }
+}

package/templates/hono-fullstack/apps/stack/frontend/shared/network/constants.ts

@@ -0,0 +1 @@
+export const NetworkDefaults = Object.freeze({ API_PREFIX: '/api', TIMEOUT: 15_000 })

package/templates/hono-fullstack/apps/stack/frontend/shared/network/errors.ts

@@ -0,0 +1,33 @@
+import type { HTTPError } from 'ky'
+
+export type ProblemDetails = {
+  type?: string
+  title?: string
+  status?: number
+  detail?: string
+  message?: string
+  extensions?: Record<string, unknown>
+  [key: string]: unknown
+}
+
+export class ApiError extends Error {
+  constructor(
+    public readonly problem: ProblemDetails,
+    options?: ErrorOptions,
+  ) {
+    super(problem.detail || problem.message || problem.title || 'Request failed', options)
+    this.name = 'ApiError'
+  }
+  get status() {
+    return this.problem.status
+  }
+}
+
+export const isApiError = (error: unknown, status?: number): error is ApiError =>
+  error instanceof ApiError && (status === undefined || error.status === status)
+
+export async function parseApiError(error: HTTPError) {
+  const fallback = { title: error.response.statusText }
+  const problem = await error.response.json<ProblemDetails>().catch(() => fallback)
+  return new ApiError({ ...problem, status: error.response.status }, { cause: error })
+}

package/templates/hono-fullstack/apps/stack/frontend/styles.css

@@ -0,0 +1,23 @@
+@import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
+
+html,
+body {
+  min-height: 100%;
+  margin: 0;
+}
+html.dark {
+  color-scheme: dark;
+}
+body {
+  background: #18181b;
+  color: #e4e4e7;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+button {
+  cursor: pointer;
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/templates/hono-fullstack/apps/stack/frontend/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="@tanstack/react-start" />
+
+declare module '#server-runtime' {
+  export const handleApiRequest: (request: Request) => Promise<Response>
+}

package/templates/hono-fullstack/apps/stack/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@repo/stack",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm dev:node",
+    "build": "pnpm build:node",
+    "preview": "pnpm preview:node",
+    "dev:node-chain": "turbo watch dev:node --filter=@repo/stack",
+    "dev:node": "DEPLOY_TARGET=node SERVER_BASE_PATH=/api oyo env server -- vp dev",
+    "build:node-chain": "turbo build:node --filter=@repo/stack",
+    "build:node": "DEPLOY_TARGET=node SERVER_BASE_PATH=/api oyo env server -- vp build",
+    "preview:node": "DEPLOY_TARGET=node SERVER_BASE_PATH=/api oyo env server -- vp preview",
+    "dev:cloudflare-chain": "turbo watch dev:cloudflare --filter=@repo/stack",
+    "dev:cloudflare": "DEPLOY_TARGET=cloudflare vp dev",
+    "build:cloudflare-chain": "turbo build:cloudflare --filter=@repo/stack",
+    "build:cloudflare": "DEPLOY_TARGET=cloudflare vp build",
+    "preview:cloudflare": "DEPLOY_TARGET=cloudflare vp preview",
+    "deploy:cloudflare": "pnpm build:cloudflare-chain && wrangler deploy",
+    "db:migrate:cloudflare:local": "wrangler d1 migrations apply DB --local --config wrangler.jsonc --persist-to ../../.wrangler/state",
+    "cf:typegen": "wrangler types",
+    "cf:typecheck": "wrangler types --check",
+    "generate-routes": "tsr generate",
+    "test": "vp test",
+    "check": "vp check"
+  },
+  "dependencies": {
+    "@repo/definition": "workspace:*",
+    "@repo/server": "workspace:*",
+    "@tanstack/react-query": "catalog:frontend",
+    "@tanstack/react-router": "catalog:frontend",
+    "@tanstack/react-start": "catalog:frontend",
+    "jotai": "catalog:frontend",
+    "ky": "catalog:shared",
+    "nitro": "catalog:",
+    "react": "catalog:frontend",
+    "react-dom": "catalog:frontend"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "catalog:",
+    "@oyolincc/cli": "catalog:",
+    "@oyolincc/dev-config": "catalog:",
+    "@rollup/pluginutils": "catalog:",
+    "@tailwindcss/vite": "catalog:frontend",
+    "@tanstack/react-query-devtools": "catalog:frontend",
+    "@tanstack/react-router-devtools": "catalog:frontend",
+    "@tanstack/router-cli": "catalog:frontend",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:frontend",
+    "@types/react-dom": "catalog:frontend",
+    "@vitejs/plugin-react": "catalog:",
+    "fast-glob": "catalog:",
+    "tailwindcss": "catalog:frontend",
+    "typescript": "catalog:",
+    "vite-plus": "catalog:",
+    "wrangler": "catalog:"
+  }
+}