@icebreakers/monorepo-templates 0.0.0

package/templates/client/src/main.ts

@@ -0,0 +1,16 @@
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { i18n } from './stores/i18n'
+import './style.css'
+
+const pinia = createPinia()
+const app = createApp(App)
+app.use(router)
+app.use(pinia)
+app.use(i18n)
+app.use(VueQueryPlugin)
+
+app.mount('#app')

package/templates/client/src/pages/index.vue

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { helloKeys } from '@/query-keys'
+import { client } from '@/trpc'
+
+type HelloResponse = Awaited<ReturnType<typeof client.hello.query>>
+
+const { t, locale } = useI18n()
+function changeLocale(lang: 'en' | 'zh') {
+  locale.value = lang
+}
+
+function toggleLocale() {
+  changeLocale(locale.value === 'en' ? 'zh' : 'en')
+}
+
+function formatTime(timestamp?: number) {
+  if (!timestamp) {
+    return '-'
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(new Date(timestamp))
+}
+
+const queryClient = useQueryClient()
+const helloName = 'icebreakers' as const
+
+const helloQuery = useQuery<HelloResponse>({
+  queryKey: helloKeys.detail(helloName),
+  queryFn: () => client.hello.query(helloName),
+  staleTime: 30_000,
+  gcTime: 5 * 60_000,
+})
+
+const liveData = computed(() => ({
+  message: helloQuery.data.value?.message ?? '-',
+  time: helloQuery.data.value?.time ?? null,
+  formattedTime: formatTime(helloQuery.data.value?.time),
+}))
+
+const cachedHello = computed<HelloResponse | undefined>(() => {
+  const cached = queryClient.getQueryData<HelloResponse>(
+    helloKeys.detail(helloName),
+  )
+  return helloQuery.data.value ?? cached
+})
+
+const queryMeta = computed(() => ({
+  status: helloQuery.status.value,
+  fetchStatus: helloQuery.fetchStatus.value,
+  isFetching: helloQuery.isFetching.value,
+  isStale: helloQuery.isStale.value,
+  dataUpdatedAt: helloQuery.dataUpdatedAt.value,
+}))
+
+const helloErrorMessage = computed(() => {
+  const error = helloQuery.error.value
+  if (!error) {
+    return ''
+  }
+  if (error instanceof Error) {
+    return error.message
+  }
+  return String(error)
+})
+</script>
+
+<template>
+  <div class="min-h-screen bg-slate-950 text-slate-50">
+    <div class="mx-auto flex min-h-screen max-w-5xl flex-col gap-6 px-6 py-8">
+      <header
+        class="
+          rounded-2xl bg-linear-to-br from-slate-800 to-slate-900 p-6 shadow-xl
+          ring-1 ring-white/5
+        "
+      >
+        <div class="flex flex-wrap items-center justify-between gap-4">
+          <div class="space-y-2">
+            <p class="text-xs tracking-[0.2em] text-slate-400 uppercase">
+              TanStack Query + i18n
+            </p>
+            <h1 class="text-3xl/tight font-semibold">
+              {{ t('hello') }}
+            </h1>
+            <p class="text-sm text-slate-400">
+              Minimal data-fetch demo. Everything stays on screen for quick checks.
+            </p>
+          </div>
+          <div class="flex flex-wrap items-center gap-3">
+            <button
+              class="
+                rounded-full bg-white/15 px-4 py-2 text-sm font-medium
+                text-slate-50 shadow-sm transition
+                hover:scale-[1.02] hover:bg-white/25
+              "
+              @click="toggleLocale"
+            >
+              {{ t('toggleLocale') }}
+            </button>
+            <button
+              class="
+                rounded-full bg-emerald-500/90 px-4 py-2 text-sm font-semibold
+                text-emerald-950 shadow-sm transition
+                hover:scale-[1.02] hover:bg-emerald-400
+                disabled:opacity-60
+              "
+              :disabled="helloQuery.isFetching.value"
+              @click="helloQuery.refetch()"
+            >
+              {{ helloQuery.isFetching ? 'Refreshing…' : 'Refetch now' }}
+            </button>
+          </div>
+        </div>
+        <div
+          class="mt-4 flex flex-wrap items-center gap-3 text-xs text-slate-300"
+        >
+          <span
+            class="
+              inline-flex items-center gap-2 rounded-full bg-emerald-500/15 px-3
+              py-1 font-semibold text-emerald-200 ring-1 ring-emerald-500/30
+            "
+          >
+            <span class="size-2 rounded-full bg-emerald-400" />
+            Live data connected
+          </span>
+          <span
+            class="
+              rounded-full bg-white/5 px-3 py-1 font-semibold text-white/80
+              ring-1 ring-white/10
+            "
+          >
+            Status: {{ helloQuery.status }}
+          </span>
+          <span
+            v-if="helloQuery.isFetching"
+            class="
+              rounded-full bg-amber-500/15 px-3 py-1 font-semibold
+              text-amber-200 ring-1 ring-amber-500/30
+            "
+          >
+            Fetching…
+          </span>
+        </div>
+      </header>
+
+      <div
+        class="
+          grid gap-4
+          md:grid-cols-2
+        "
+      >
+        <section
+          class="rounded-2xl bg-slate-900/70 p-5 shadow-lg ring-1 ring-white/5"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-lg font-semibold">
+                Live data
+              </h2>
+              <p class="text-xs text-slate-400">
+                Latest response from the server
+              </p>
+            </div>
+            <span
+              class="
+                rounded-full bg-white/10 px-3 py-1 text-xs font-semibold
+                text-white/90 ring-1 ring-white/10
+              "
+            >
+              {{ helloQuery.fetchStatus }}
+            </span>
+          </div>
+          <dl
+            class="
+              mt-4 grid gap-3
+              sm:grid-cols-2
+            "
+          >
+            <div
+              class="
+                rounded-lg bg-white/5 px-3 py-2 text-sm text-slate-100 ring-1
+                ring-white/10
+              "
+            >
+              <dt class="text-xs tracking-wide text-slate-400 uppercase">
+                Message
+              </dt>
+              <dd class="mt-1 font-semibold">
+                {{ liveData.message }}
+              </dd>
+            </div>
+            <div
+              class="
+                rounded-lg bg-white/5 px-3 py-2 text-sm text-slate-100 ring-1
+                ring-white/10
+              "
+            >
+              <dt class="text-xs tracking-wide text-slate-400 uppercase">
+                Server time
+              </dt>
+              <dd class="mt-1 font-semibold">
+                {{ liveData.formattedTime }}
+              </dd>
+            </div>
+          </dl>
+          <pre
+            class="
+              mt-4 max-h-48 overflow-auto rounded-lg bg-black/40 p-3 text-left
+              text-xs/relaxed text-slate-100 ring-1 ring-white/10
+            "
+          >{{ JSON.stringify(liveData, null, 2) }}</pre>
+          <p v-if="helloErrorMessage" class="mt-3 text-sm text-rose-200">
+            {{ helloErrorMessage }}
+          </p>
+        </section>
+
+        <section
+          class="rounded-2xl bg-slate-900/70 p-5 shadow-lg ring-1 ring-white/5"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-lg font-semibold">
+                Cache snapshot
+              </h2>
+              <p class="text-xs text-slate-400">
+                Result from getQueryData
+              </p>
+            </div>
+            <span
+              class="
+                rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-semibold
+                text-emerald-100 ring-1 ring-emerald-500/30
+              "
+            >
+              {{ cachedHello ? 'Cached' : 'Empty' }}
+            </span>
+          </div>
+          <div
+            class="
+              mt-3 rounded-lg bg-white/5 px-3 py-2 text-sm text-slate-100 ring-1
+              ring-white/10
+            "
+          >
+            <p class="text-xs tracking-wide text-slate-400 uppercase">
+              Time
+            </p>
+            <p class="mt-1 font-semibold">
+              {{ formatTime(cachedHello?.time) }}
+            </p>
+          </div>
+          <pre
+            class="
+              mt-4 max-h-48 overflow-auto rounded-lg bg-black/40 p-3 text-left
+              text-xs/relaxed text-slate-100 ring-1 ring-white/10
+            "
+          >{{ JSON.stringify(cachedHello ?? '-', null, 2) }}</pre>
+        </section>
+
+        <section
+          class="
+            rounded-2xl bg-slate-900/70 p-5 shadow-lg ring-1 ring-white/5
+            md:col-span-2
+          "
+        >
+          <div class="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <h2 class="text-lg font-semibold">
+                Query meta
+              </h2>
+              <p class="text-xs text-slate-400">
+                What TanStack Query is tracking
+              </p>
+            </div>
+            <span
+              class="
+                rounded-full bg-white/10 px-3 py-1 text-xs font-semibold
+                text-white/80 ring-1 ring-white/10
+              "
+            >
+              Updated: {{ formatTime(queryMeta.dataUpdatedAt) }}
+            </span>
+          </div>
+          <div
+            class="
+              mt-4 grid gap-3
+              sm:grid-cols-4
+            "
+          >
+            <div
+              class="
+                rounded-lg bg-white/5 px-3 py-2 text-xs text-slate-100 ring-1
+                ring-white/10
+              "
+            >
+              <p class="text-slate-400">
+                Status
+              </p>
+              <p class="mt-1 font-semibold">
+                {{ queryMeta.status }}
+              </p>
+            </div>
+            <div
+              class="
+                rounded-lg bg-white/5 px-3 py-2 text-xs text-slate-100 ring-1
+                ring-white/10
+              "
+            >
+              <p class="text-slate-400">
+                Fetch
+              </p>
+              <p class="mt-1 font-semibold">
+                {{ queryMeta.fetchStatus }}
+              </p>
+            </div>
+            <div
+              class="
+                rounded-lg bg-white/5 px-3 py-2 text-xs text-slate-100 ring-1
+                ring-white/10
+              "
+            >
+              <p class="text-slate-400">
+                Fetching?
+              </p>
+              <p class="mt-1 font-semibold">
+                {{ queryMeta.isFetching ? 'Yes' : 'No' }}
+              </p>
+            </div>
+            <div
+              class="
+                rounded-lg bg-white/5 px-3 py-2 text-xs text-slate-100 ring-1
+                ring-white/10
+              "
+            >
+              <p class="text-slate-400">
+                Stale?
+              </p>
+              <p class="mt-1 font-semibold">
+                {{ queryMeta.isStale ? 'Yes' : 'No' }}
+              </p>
+            </div>
+          </div>
+          <pre
+            class="
+              mt-4 max-h-48 overflow-auto rounded-lg bg-black/40 p-3 text-left
+              text-xs/relaxed text-slate-100 ring-1 ring-white/10
+            "
+          >{{ JSON.stringify(queryMeta, null, 2) }}</pre>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>

package/templates/client/src/query-keys.ts

@@ -0,0 +1,4 @@
+export const helloKeys = {
+  all: ['hello'] as const,
+  detail: (name: string) => [...helloKeys.all, { name }] as const,
+}

package/templates/client/src/router/index.ts

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { handleHotUpdate, routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+if (import.meta.hot) {
+  handleHotUpdate(router)
+}
+
+export default router

package/templates/client/src/stores/i18n.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+
+import { createI18n } from 'vue-i18n'
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      hello: 'Hello World',
+      toggleLocale: 'toggle locale',
+    },
+    zh: {
+      hello: '你好世界',
+      toggleLocale: '切换语言',
+    },
+  },
+})
+
+export const useI18nStore = defineStore('i18n', {
+  state: () => ({
+    i18n,
+  }),
+})

package/templates/client/src/stores/index.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: state => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++
+    },
+  },
+})

package/templates/client/src/style.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/templates/client/src/trpc/index.ts

@@ -0,0 +1,10 @@
+import type { AppRouter } from '~/worker/trpc-router'
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
+
+export const client = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: '/api/trpc',
+    }),
+  ],
+})

package/templates/client/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

package/templates/client/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "~/*": [
+        "./*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "./worker-configuration.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}

package/templates/client/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.worker.json" }
+  ],
+  "files": []
+}

package/templates/client/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "moduleDetection": "force",
+    "module": "ESNext",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/client/tsconfig.worker.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.node.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
+    "types": [
+      "./worker-configuration.d.ts",
+      "vite/client"
+    ]
+  },
+  "include": ["worker"]
+}

package/templates/client/vite.config.ts

@@ -0,0 +1,57 @@
+import type { PluginOption } from 'vite'
+import path from 'node:path'
+import { cloudflare } from '@cloudflare/vite-plugin'
+import Tailwindcss from '@tailwindcss/vite'
+import Vue from '@vitejs/plugin-vue'
+import VueJsx from '@vitejs/plugin-vue-jsx'
+import VueRouter from 'unplugin-vue-router/vite'
+import { defineConfig } from 'vite'
+import VueDevTools from 'vite-plugin-vue-devtools'
+
+const ensureVitePlugin = <T>(plugin: T) => plugin as unknown as PluginOption
+// https://vite.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(import.meta.dirname, 'src'),
+      '~': import.meta.dirname,
+    },
+  },
+  plugins: [
+    ensureVitePlugin(
+      VueRouter(
+        {
+          dts: path.resolve(import.meta.dirname, 'src/types/typed-router.d.ts'),
+        },
+      ),
+    ),
+    ensureVitePlugin(Vue()),
+    ensureVitePlugin(VueJsx()),
+    ensureVitePlugin(Tailwindcss()),
+    ensureVitePlugin(cloudflare()),
+    ensureVitePlugin(VueDevTools()),
+  ],
+  build: {
+    target: 'esnext',
+    minify: 'esbuild',
+    chunkSizeWarningLimit: 1000,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vue-vendor': ['vue', 'vue-router', 'pinia'],
+          'query-vendor': ['@tanstack/vue-query'],
+          'trpc-vendor': ['@trpc/client'],
+        },
+      },
+    },
+  },
+  server: {
+    // proxy: {
+    //   '/api': {
+    //     target: `http://localhost:8787`,
+    //     changeOrigin: true,
+    //     // rewrite: path => path.replace(/^/api/, ''),
+    //   },
+    // },
+  },
+})

package/templates/client/worker/app.ts

@@ -0,0 +1,24 @@
+import { trpcServer } from '@hono/trpc-server'
+import { Hono } from 'hono'
+import { appRouter } from './trpc-router'
+
+const app = new Hono()
+
+app.get('/api', (c) => {
+  return c.json({
+    message: 'Hello World',
+  })
+})
+
+app.use(
+  '/api/trpc/*',
+  trpcServer({
+    endpoint: '/api/trpc',
+    router: appRouter,
+  }),
+)
+
+export {
+  app,
+
+}

package/templates/client/worker/config.ts

@@ -0,0 +1 @@
+export const port = 8787

package/templates/client/worker/fetch-entry.ts

@@ -0,0 +1,5 @@
+import { app } from './app'
+
+export default {
+  fetch: app.fetch,
+} satisfies ExportedHandler<Env>

package/templates/client/worker/node-entry.ts

@@ -0,0 +1,13 @@
+import { serve } from '@hono/node-server'
+import { consola } from 'consola'
+import { logger } from 'hono/logger'
+import { app } from './app'
+import { port } from './config'
+
+app.use(logger())
+serve({
+  fetch: app.fetch,
+  port,
+})
+
+consola.success(`Server listening on http://localhost:${port}`)

package/templates/client/worker/trpc-router.ts

@@ -0,0 +1,24 @@
+import { initTRPC } from '@trpc/server'
+import { z } from 'zod'
+
+const t = initTRPC.create()
+
+const publicProcedure = t.procedure
+const router = t.router
+
+export const appRouter = router({
+  hello: publicProcedure.input(z.string().nullish()).query(({ input }) => {
+    return {
+      message: `hello ${input || 'world'}`,
+      time: Date.now(),
+    }
+  }),
+  sayHello: publicProcedure
+    .input(z.object({ name: z.string() }))
+    .output(z.object({ greeting: z.string() }))
+    .query(({ input }) => {
+      return { greeting: `Hello ${input.name}!` }
+    }),
+})
+
+export type AppRouter = typeof appRouter

package/templates/client/wrangler.jsonc

@@ -0,0 +1,24 @@
+{
+  "$schema": "./node_modules/wrangler/config-schema.json",
+  "name": "monorepo-client",
+  "compatibility_date": "2025-10-16",
+  "main": "./worker/fetch-entry.ts",
+  "assets": {
+    "not_found_handling": "single-page-application",
+    "run_worker_first": [
+      "/api/*"
+    ]
+  },
+  "dev": {
+    "port": 8787
+  },
+  "routes": [
+    {
+      "custom_domain": true,
+      "pattern": "client.monorepo.icebreaker.top"
+    }
+  ],
+  "observability": {
+    "enabled": true
+  }
+}