@kevinmarrec/create-app 0.7.0 → 0.9.0

package/README.md

@@ -12,8 +12,10 @@ CLI that scaffolds an opinionated [Bun](https://bun.sh) & [Vue](https://vuejs.or
 
 ## Usage
 
-> Requires [Bun](https://bun.sh) v1.2 _or later_.
+> Requires [Bun](https://bun.sh) v1.3 _or later_.
 
 ```sh
 bun create @kevinmarrec/app
+# OR
+bunx @kevinmarrec/create-app
 ```

package/dist/index.js

@@ -8,7 +8,7 @@ import { x } from "tinyexec";
 import fs from "node:fs/promises";
 
 //#region package.json
-var version = "0.7.0";
+var version = "0.9.0";
 
 //#endregion
 //#region src/utils/fs.ts
@@ -35,8 +35,6 @@ var fs_default = {
 async function scaffold(root) {
 	await fs_default.exists(root) ? await fs_default.empty(root) : await fs_default.mkdir(root);
 	await fs_default.cp(join(import.meta.dirname, "../template"), root, { recursive: true });
-	await fs_default.rename(join(root, "gitignore"), join(root, ".gitignore"));
-	await fs_default.rename(join(root, "npmrc"), join(root, ".npmrc"));
 }
 
 //#endregion

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@kevinmarrec/create-app",
   "type": "module",
-  "version": "0.7.0",
-  "packageManager": "bun@1.3.1",
+  "version": "0.9.0",
+  "packageManager": "bun@1.3.2",
   "description": "CLI that scaffolds an opinionated Bun & Vue fullstack application.",
   "author": "Kevin Marrec <kevin@marrec.io>",
   "license": "MIT",
@@ -18,26 +18,28 @@
   ],
   "workspaces": [
     "template",
-    "template/backend",
-    "template/frontend"
+    "template/api",
+    "template/app"
   ],
   "bin": {
     "create-app": "dist/index.js"
   },
   "files": [
     "dist",
-    "template"
+    "template",
+    "template/.gitignore",
+    "template/.npmrc"
   ],
   "scripts": {
-    "build": "tsdown",
-    "check": "bun run check:unused && bun run check:eslint && bun run check:stylelint && bun run check:types",
+    "build": "tsdown --no-fixed-extension",
+    "check": "bun run check:eslint && bun run check:stylelint && bun run check:unused && bun run check:types",
     "check:eslint": "eslint . --cache",
     "check:stylelint": "stylelint '**/*.{css,scss,vue}' --ignorePath .gitignore --cache",
     "check:types": "vue-tsc --noEmit",
     "check:unused": "knip -n",
     "lint": "bun run check:eslint && bun run check:stylelint",
     "lint:inspect": "bunx @eslint/config-inspector",
-    "playground": "bun --cwd template dev",
+    "playground": "bun run scripts/transform-compose.ts | docker compose -f -",
     "release": "bumpp",
     "update": "bunx taze -I -rwi",
     "test": "vitest",
@@ -47,22 +49,22 @@
     "@clack/prompts": "^0.11.0",
     "ansis": "^4.2.0",
     "pathe": "^2.0.3",
-    "tinyexec": "^1.0.1"
+    "tinyexec": "^1.0.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.1.0",
-    "@kevinmarrec/eslint-config": "^1.5.3",
-    "@kevinmarrec/stylelint-config": "^1.2.2",
-    "@kevinmarrec/tsconfig": "^1.1.0",
-    "@types/bun": "^1.3.0",
-    "@vitest/coverage-v8": "^4.0.1",
+    "@kevinmarrec/eslint-config": "^1.5.6",
+    "@kevinmarrec/stylelint-config": "^1.5.6",
+    "@kevinmarrec/tsconfig": "^1.5.6",
+    "@types/bun": "^1.3.2",
+    "@vitest/coverage-v8": "^4.0.9",
     "bumpp": "^10.3.1",
-    "eslint": "^9.38.0",
-    "knip": "^5.66.0",
+    "eslint": "^9.39.1",
+    "knip": "^5.69.1",
     "stylelint": "^16.25.0",
-    "tsdown": "^0.15.7",
+    "tsdown": "^0.16.4",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.1",
-    "vue-tsc": "^3.1.1"
+    "vitest": "^4.0.9",
+    "vue-tsc": "^3.1.3"
   }
 }

package/template/.docker/traefik/dynamic/tls.yml

@@ -0,0 +1,4 @@
+tls:
+  certificates:
+    - certFile: /certs/dev.localhost.crt
+      keyFile: /certs/dev.localhost.key

package/template/.github/scripts/build-stats.md.ts

@@ -0,0 +1,71 @@
+import * as fs from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { parseArgs } from 'node:util'
+
+import { filesize } from 'filesize'
+import { x } from 'tinyexec'
+import { glob } from 'tinyglobby'
+
+interface FileStats {
+  file: string
+  size: number
+}
+
+async function getFileStats(directory: string) {
+  const fileStats: FileStats[] = []
+
+  for (const file of await glob(['**/*'], { cwd: directory })) {
+    const size = fs.statSync(path.join(directory, file)).size
+    fileStats.push({
+      file,
+      size,
+    })
+  }
+
+  fileStats.sort((a, b) => {
+    // Sort so that files starting with 'assets/' come first
+    if (a.file.startsWith('assets/') && !b.file.startsWith('assets/')) return -1
+    if (!a.file.startsWith('assets/') && b.file.startsWith('assets/')) return 1
+
+    // Within that, files ending with '.js' come first
+    if (a.file.endsWith('.js') && !b.file.endsWith('.js')) return -1
+    if (!a.file.endsWith('.js') && b.file.endsWith('.js')) return 1
+
+    // Otherwise sort alphabetically
+    return a.file.localeCompare(b.file)
+  })
+
+  return fileStats
+}
+
+async function generateFileStatsMarkdown(directory: string) {
+  const fileStats = await getFileStats(directory)
+  return [
+    '| File | Size |',
+    '| :--- | ---: |',
+    ...fileStats.map(file => `| ${file.file} | ${filesize(file.size)} |`),
+  ].join('\n')
+}
+
+async function main() {
+  const { positionals: [directory] } = parseArgs({
+    args: process.argv.slice(2),
+    allowPositionals: true,
+  })
+
+  if (!directory) {
+    process.stdout.write('Usage: analyze <directory>\n')
+    process.exit(1)
+  }
+
+  await x('bun', ['run', 'build'], { nodeOptions: { cwd: directory } })
+
+  const markdownTable = await generateFileStatsMarkdown(path.join(directory, 'dist'))
+  process.stdout.write(`${markdownTable}\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

package/template/.github/workflows/ci.yml

@@ -16,11 +16,27 @@ jobs:
       - name: Setup Bun
         uses: kevinmarrec/workflows/setup-bun@v1
 
+      - name: Lint
+        run: bun run lint
+
       - name: Check unused files, dependencies, and exports
         run: bun run check:unused
 
-      - name: Lint
-        run: bun run check:eslint && bun run check:stylelint
-
       - name: Type check
         run: bun run check:types
+  project-size:
+    name: Analyze project build size
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup Bun
+        uses: kevinmarrec/workflows/setup-bun@v1
+
+      - name: Check api build size
+        run: |
+          echo "## API" >> $GITHUB_STEP_SUMMARY
+          bun run .github/scripts/build-stats.md.ts api >> $GITHUB_STEP_SUMMARY
+
+      - name: Check app build size
+        run: |
+          echo "## App" >> $GITHUB_STEP_SUMMARY
+          bun run .github/scripts/build-stats.md.ts app >> $GITHUB_STEP_SUMMARY

package/template/{gitignore → .gitignore}

@@ -1,4 +1,6 @@
+*.crt
 *.db*
+*.key
 *.local
 *.log
 *.sqlite

package/template/{npmrc → .npmrc}

@@ -1,4 +1,3 @@
 public-hoist-pattern[]=@types*
 public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*stylelint*
-public-hoist-pattern[]=pino-pretty

package/template/.vscode/settings.json

@@ -67,6 +67,6 @@
   "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": [
-    "frontend/src/locales"
+    "app/src/locales"
   ]
 }

package/template/api/.env.development

@@ -0,0 +1,4 @@
+ALLOWED_ORIGINS=https://app.dev.localhost
+AUTH_SECRET=foo
+DATABASE_URL=.db
+NODE_ENV=development

package/template/{backend → api}/package.json

@@ -1,24 +1,24 @@
 {
-  "name": "backend",
+  "name": "api",
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "bun --watch --no-clear-screen src/main.ts",
-    "build": "bun build src/main.ts --compile --minify --sourcemap --outfile dist/server",
+    "dev": "bun --watch --no-clear-screen src/main.ts | pino-pretty",
+    "build": "bun build src/main.ts --compile --minify --sourcemap --outfile dist/api",
     "db:generate": "bun --bun run drizzle-kit generate --config src/database/drizzle/config.ts",
     "db:migrate": "bun --bun run drizzle-kit migrate --config src/database/drizzle/config.ts"
   },
   "dependencies": {
-    "@orpc/server": "^1.9.4",
-    "better-auth": "^1.3.27",
-    "drizzle-orm": "^0.44.6",
+    "@orpc/server": "^1.11.2",
+    "better-auth": "^1.3.34",
+    "drizzle-orm": "^0.44.7",
     "pino": "^10.1.0",
     "valibot": "^1.1.0"
   },
   "devDependencies": {
-    "@electric-sql/pglite": "^0.3.11",
-    "@types/bun": "^1.3.0",
-    "drizzle-kit": "^0.31.5",
+    "@electric-sql/pglite": "^0.3.14",
+    "@types/bun": "^1.3.2",
+    "drizzle-kit": "^0.31.7",
     "pino-pretty": "^13.1.2"
   }
 }

package/template/{backend → api}/src/auth/index.ts

@@ -4,6 +4,8 @@ import type { BaseLogger } from 'pino'
 
 export function createBetterAuth({ db, logger }: { db: DB, logger: BaseLogger }) {
   return betterAuth({
+    basePath: '/auth',
+    trustedOrigins: import.meta.env.ALLOWED_ORIGINS.split(','),
     database: drizzleAdapter(db, {
       provider: 'pg',
       usePlural: true,

package/template/{backend → api}/src/database/index.ts

@@ -1,7 +1,7 @@
-import { logger } from '@backend/utils/logger'
 import { PGlite } from '@electric-sql/pglite'
 import { drizzle } from 'drizzle-orm/pglite'
 
+import { logger } from '../utils/logger'
 import * as schema from './schema'
 
 export const db = drizzle({

package/template/{backend → api}/src/env.d.ts

@@ -1,6 +1,6 @@
 interface ImportMetaEnv {
-  readonly BETTER_AUTH_SECRET: string
-  readonly BETTER_AUTH_URL: string
+  readonly ALLOWED_ORIGINS: string
+  readonly AUTH_SECRET: string
   readonly DATABASE_URL: string
   readonly LOG_LEVEL: string
   readonly NODE_ENV: string

package/template/{backend → api}/src/main.ts

@@ -1,31 +1,21 @@
 import process from 'node:process'
 
-import { createBetterAuth } from '@backend/auth'
-import { db } from '@backend/database'
-import { createRpcHandler } from '@backend/orpc'
-import { router } from '@backend/orpc/router'
-import { logger } from '@backend/utils/logger'
+import { createBetterAuth } from './auth'
+import { db } from './database'
+import { createRpc } from './orpc'
+import { router } from './orpc/router'
+import { cors } from './utils/cors'
+import { logger } from './utils/logger'
 
 const auth = createBetterAuth({ db, logger })
-const rpcHandler = createRpcHandler(router)
+const rpc = createRpc({ auth, db, logger }, router)
 
 const server = Bun.serve({
   hostname: import.meta.env.HOST ?? '0.0.0.0',
   port: import.meta.env.PORT ?? 4000,
-  async fetch(request) {
-    const { matched, response } = await rpcHandler.handle(request, {
-      prefix: '/rpc',
-      context: {
-        auth,
-        db,
-        logger,
-      },
-    })
-
-    if (matched)
-      return response
-
-    return new Response('Not found', { status: 404 })
+  routes: {
+    '/auth/*': cors(auth.handler),
+    '/rpc/*': cors(rpc.handler),
   },
   error(error) {
     logger.error(error)

package/template/api/src/orpc/context.ts

@@ -0,0 +1,11 @@
+import type { RequestHeadersPluginContext, ResponseHeadersPluginContext } from '@orpc/server/plugins'
+
+import type { Auth } from '../auth'
+import type { Database } from '../database'
+import type { Logger } from '../utils/logger'
+
+export interface Context extends RequestHeadersPluginContext, ResponseHeadersPluginContext {
+  auth: Auth
+  db: Database
+  logger: Logger
+}

package/template/api/src/orpc/index.ts

@@ -0,0 +1,27 @@
+import type { Router } from '@orpc/server'
+import { RPCHandler } from '@orpc/server/fetch'
+import { RequestHeadersPlugin, ResponseHeadersPlugin } from '@orpc/server/plugins'
+
+import type { Context } from './context'
+import { ErrorPlugin } from './plugins/error'
+
+export function createRpc<T extends Context>(context: T, router: Router<any, T>) {
+  const handler = new RPCHandler<T>(router, {
+    plugins: [
+      new ErrorPlugin(),
+      new RequestHeadersPlugin(),
+      new ResponseHeadersPlugin(),
+    ],
+  })
+
+  return {
+    handler: async (req: Request) => {
+      const { matched, response } = await handler.handle(req, {
+        prefix: '/rpc',
+        context,
+      })
+
+      return matched ? response : new Response('Not found', { status: 404 })
+    },
+  }
+}

package/template/api/src/orpc/middlewares/auth.ts

@@ -0,0 +1,24 @@
+import { ORPCError, os } from '@orpc/server'
+
+import type { Context } from '../context'
+
+export const authMiddleware = os
+  .$context<Context>()
+  .middleware(async ({ context, next }) => {
+    const { response: session, headers } = await context.auth.api.getSession({
+      headers: context.reqHeaders,
+      returnHeaders: true,
+    })
+
+    headers.forEach((v, k) => context.resHeaders?.append(k, v))
+
+    if (!session) {
+      throw new ORPCError('UNAUTHORIZED')
+    }
+
+    return next({
+      context: {
+        user: session.user,
+      },
+    })
+  })

package/template/api/src/orpc/plugins/error.ts

@@ -0,0 +1,17 @@
+import { onError, ORPCError } from '@orpc/server'
+import type { StandardHandlerOptions, StandardHandlerPlugin } from '@orpc/server/standard'
+
+import type { Context } from '../context'
+
+export class ErrorPlugin<T extends Context> implements StandardHandlerPlugin<T> {
+  init(options: StandardHandlerOptions<T>): void {
+    options.clientInterceptors ??= []
+    options.clientInterceptors.unshift(onError((error, { context }) => {
+      if (error instanceof ORPCError) {
+        throw error
+      }
+
+      context.logger.error(error)
+    }))
+  }
+}

package/template/api/src/orpc/router/index.ts

@@ -0,0 +1,31 @@
+import { os } from '@orpc/server'
+import * as v from 'valibot'
+
+import type { Context } from '../context'
+import { authMiddleware } from '../middlewares/auth'
+
+export type { RouterClient } from '@orpc/server'
+
+const pub = os
+  .$context<Context>()
+  .errors({
+    UNAUTHORIZED: { status: 401 },
+  })
+
+const authed = pub
+  .use(authMiddleware)
+
+export const router = {
+  public: pub
+    .input(v.any())
+    .handler(async () => {
+      return 'public'
+    }),
+  private: authed
+    .input(v.any())
+    .handler(async () => {
+      return 'private'
+    }),
+}
+
+export type Router = typeof router

package/template/api/src/utils/cors.ts

@@ -0,0 +1,26 @@
+export function cors(handler: (req: Request) => Promise<Response>) {
+  const allowedOrigins = import.meta.env.ALLOWED_ORIGINS.split(',')
+
+  return async (req: Request) => {
+    const origin = req.headers.get('origin') ?? ''
+
+    if (!origin || !allowedOrigins.includes(origin)) {
+      return new Response('Origin not allowed', { status: 403 })
+    }
+
+    const response = req.method === 'OPTIONS'
+      ? new Response(undefined, { status: 204 })
+      : await handler(req)
+
+    if (req.method === 'OPTIONS') {
+      response.headers.append('Access-Control-Allow-Headers', 'Content-Type')
+      response.headers.append('Access-Control-Allow-Methods', 'GET, HEAD, PUT, POST, DELETE, PATCH')
+      response.headers.append('Access-Control-Max-Age', '7200') // 2 hours https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Max-Age
+    }
+
+    response.headers.append('Access-Control-Allow-Credentials', 'true')
+    response.headers.append('Access-Control-Allow-Origin', origin)
+
+    return response
+  }
+}

package/template/app/.env

@@ -0,0 +1 @@
+VITE_API_URL=https://api.dev.localhost

package/template/{frontend → app}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "app",
   "type": "module",
   "private": true,
   "scripts": {
@@ -9,27 +9,28 @@
     "preview": "vite preview --open"
   },
   "dependencies": {
-    "@kevinmarrec/vue-i18n": "^1.1.2",
-    "@orpc/client": "^1.9.4",
-    "@orpc/tanstack-query": "1.9.4",
-    "@tanstack/query-core": "^5.90.5",
-    "@tanstack/vue-query": "^5.90.5",
+    "@kevinmarrec/vue-i18n": "^1.1.3",
+    "@orpc/client": "^1.11.2",
+    "@orpc/tanstack-query": "1.11.2",
+    "@tanstack/query-core": "^5.90.9",
+    "@tanstack/vue-query": "^5.91.1",
     "@unhead/vue": "^2.0.19",
-    "unocss": "^66.5.4",
-    "vue": "^3.5.22"
+    "@vueuse/core": "^14.0.0",
+    "better-auth": "^1.3.34",
+    "unocss": "^66.5.6",
+    "vue": "^3.5.24"
   },
   "devDependencies": {
-    "@kevinmarrec/unocss-config": "^1.3.3",
+    "@kevinmarrec/unocss-config": "^1.5.6",
     "@kevinmarrec/vite-plugin-dark-mode": "^1.1.2",
     "@modyfi/vite-plugin-yaml": "^1.1.1",
     "@unhead/addons": "^2.0.19",
-    "@unocss/vite": "^66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "beasties": "^0.3.5",
     "rollup-plugin-visualizer": "^6.0.5",
-    "vite": "^7.1.10",
+    "vite": "^7.2.2",
     "vite-plugin-vue-devtools": "^8.0.3",
-    "vite-ssg": "^28.2.1",
+    "vite-ssg": "^28.2.2",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

package/template/{frontend → app}/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useAuth, useHead, useI18n } from '@frontend/composables'
 import { ref } from 'vue'
 
+import { useAuth, useContent, useHead, useI18n } from '~/app/composables'
+
 const { t } = useI18n()
 useHead({
   title: () => t('title'),
@@ -12,7 +13,8 @@ useHead({
   }],
 })
 
-const { user, signUp, signIn, signOut } = useAuth()
+const { user, signIn, signUp, signOut } = useAuth()
+const { publicContent, privateContent } = useContent()
 
 const email = ref('')
 const password = ref('')
@@ -99,6 +101,12 @@ const password = ref('')
             <p class="text-gray-600 mt-2 dark:text-gray-400">
               {{ user.email }}
             </p>
+            <p class="text-gray-600 mt-2 dark:text-gray-400">
+              {{ publicContent }}
+            </p>
+            <p class="text-gray-600 mt-2 dark:text-gray-400">
+              {{ privateContent }}
+            </p>
           </div>
 
           <button

package/template/app/src/composables/auth.ts

@@ -0,0 +1,39 @@
+import { useMutation } from '@tanstack/vue-query'
+import { createAuthClient } from 'better-auth/vue'
+import { computed } from 'vue'
+
+const authClient = createAuthClient({
+  baseURL: `${import.meta.env.VITE_API_URL}/auth`,
+  fetchOptions: {
+    credentials: 'include',
+  },
+})
+
+const session = authClient.useSession()
+
+function createAuthMutation<T extends (...args: any[]) => any>(fn: T) {
+  return useMutation({
+    mutationFn: async (input: Parameters<T>[0]) => {
+      return fn(input, {
+        onError: ({ error }: any) => {
+          throw error
+        },
+      })
+    },
+  })
+}
+
+export function useAuth() {
+  const signIn = createAuthMutation(authClient.signIn.email)
+  const signUp = createAuthMutation(authClient.signUp.email)
+  const signOut = createAuthMutation(authClient.signOut)
+
+  const user = computed(() => session.value.data?.user)
+
+  return {
+    signIn,
+    signUp,
+    signOut,
+    user,
+  }
+}

package/template/app/src/composables/content.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/vue-query'
+
+import { orpc } from '~/app/lib/orpc'
+
+export function useContent() {
+  const publicContent = useQuery(orpc.public.queryOptions({})).data
+  const privateContent = useQuery(orpc.private.queryOptions({})).data
+
+  return {
+    publicContent,
+    privateContent,
+  }
+}

package/template/{frontend → app}/src/composables/index.ts

@@ -1,3 +1,4 @@
 export { useAuth } from './auth'
+export { useContent } from './content'
 export { useI18n } from '@kevinmarrec/vue-i18n'
 export { useHead } from '@unhead/vue'

package/template/{frontend → app}/src/lib/orpc.ts

@@ -1,10 +1,11 @@
-import type { Router, RouterClient } from '@backend/orpc/router'
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
 
+import type { Router, RouterClient } from '~/api/orpc/router'
+
 const link = new RPCLink({
-  url: import.meta.env.VITE_API_URL,
+  url: `${import.meta.env.VITE_API_URL}/rpc`,
   fetch: (request, init) =>
     globalThis.fetch(request, {
       ...init,