프로젝트 셋업

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2

.envrc

@@ -0,0 +1 @@
+dotenv_if_exists .env.local

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+
+node_modules/
+.turbo/
+
+.env.local

.husky/pre-commit

@@ -0,0 +1 @@
+bun run lint-staged

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "github.copilot",
+    "rohit-gohri.format-code-action",
+    "streetsidesoftware.code-spell-checker",
+    "svelte.svelte-vscode",
+    "EditorConfig.EditorConfig"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Node",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "bun",
+      "runtimeArgs": ["run", "dev"],
+      "outputCapture": "std"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.formatDocument": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false,
+  "eslint.enable": true,
+  "eslint.format.enable": true,
+  "eslint.useFlatConfig": true,
+  "eslint.validate": ["javascript", "typescript", "svelte"],
+  "prettier.documentSelectors": ["**/*"],
+  "svelte.enable-ts-plugin": true,
+  "svelte.plugin.svelte.defaultScriptLanguage": "ts",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/api/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@readable/api",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./trpc": "./src/router.ts"
+  },
+  "scripts": {
+    "dev": "bun run --hot src/main.ts"
+  },
+  "dependencies": {
+    "@hono/trpc-server": "^0.3.2",
+    "@trpc/server": "^11.0.0-rc.466",
+    "hono": "^4.5.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@readable/lintconfig": "workspace:*",
+    "@readable/tsconfig": "workspace:*",
+    "@types/bun": "^1.1.6",
+    "typescript": "^5.5.3"
+  }
+}

apps/api/src/context.ts

@@ -0,0 +1,8 @@
+import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
+
+export function createContext({ req, resHeaders }: FetchCreateContextFnOptions) {
+  const user = { name: req.headers.get('username') ?? 'anonymous' };
+  return { req, resHeaders, user };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

apps/api/src/main.ts

@@ -0,0 +1,20 @@
+import { trpcServer } from '@hono/trpc-server';
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import { createContext } from './context';
+import { appRouter } from './router';
+
+const app = new Hono();
+
+app.use('*', cors());
+
+app.use(
+  '/trpc/*',
+  trpcServer({
+    router: appRouter,
+    createContext,
+  }),
+);
+
+// eslint-disable-next-line import/no-default-export
+export default app;

apps/api/src/router.ts

@@ -0,0 +1,36 @@
+import { initTRPC } from '@trpc/server';
+import { z } from 'zod';
+import type { Context } from './context';
+
+type User = {
+  id: string;
+  name: string;
+  bio?: string;
+};
+
+const users: Record<string, User> = {};
+
+export const t = initTRPC.context<Context>().create();
+
+export const appRouter = t.router({
+  getUserById: t.procedure.input(z.string()).query((opts) => {
+    return opts.input; // input type is string
+  }),
+  createUser: t.procedure
+    // validate input with Zod
+    .input(
+      z.object({
+        name: z.string().min(3),
+        bio: z.string().max(142).optional(),
+      }),
+    )
+    .mutation((opts) => {
+      const id = Date.now().toString();
+      const user: User = { id, ...opts.input };
+      users[user.id] = user;
+      return user;
+    }),
+});
+
+// export type definition of API
+export type AppRouter = typeof appRouter;

apps/api/src/trpc.ts

@@ -0,0 +1,14 @@
+import { initTRPC } from '@trpc/server';
+
+/**
+ * Initialization of tRPC backend
+ * Should be done only once per backend!
+ */
+const t = initTRPC.create();
+
+/**
+ * Export reusable router and procedure helpers
+ * that can be used throughout the router
+ */
+export const router = t.router;
+export const publicProcedure = t.procedure;

apps/api/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@readable/tsconfig"]
+}

apps/dashboard/.gitignore

@@ -0,0 +1,9 @@
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/dashboard/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@readable/dashboard",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@trpc/client": "^11.0.0-rc.466",
+    "@trpc/server": "^11.0.0-rc.466"
+  },
+  "devDependencies": {
+    "@readable/api": "workspace:*",
+    "@readable/lintconfig": "workspace:*",
+    "@readable/tsconfig": "workspace:*",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
+  }
+}

apps/dashboard/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

apps/dashboard/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

apps/dashboard/src/lib/client.ts

@@ -0,0 +1,10 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import type { AppRouter } from '@readable/api/trpc';
+
+export const client = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc',
+    }),
+  ],
+});

apps/dashboard/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

apps/dashboard/src/routes/+page.server.ts

@@ -0,0 +1,7 @@
+import { client } from '$lib/client';
+
+export const load = async () => {
+  return {
+    user: await client.getUserById.query('1'),
+  };
+};

apps/dashboard/src/routes/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let data;
+
+  $: console.log(data.user);
+</script>
+
+dashboard
+<br />
+{data.user}

apps/dashboard/svelte.config.js

@@ -0,0 +1,11 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+export default {
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter(),
+  },
+};

apps/dashboard/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["./.svelte-kit/tsconfig.json", "@readable/tsconfig"]
+}

apps/dashboard/vite.config.ts

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  server: { port: 4100 },
+});

apps/usersite/.gitignore

@@ -0,0 +1,9 @@
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/usersite/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@readable/usersite",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@readable/lintconfig": "workspace:*",
+    "@readable/tsconfig": "workspace:*",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
+  }
+}

apps/usersite/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

apps/usersite/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

apps/usersite/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

apps/usersite/src/routes/+page.svelte

@@ -0,0 +1 @@
+usersite

apps/usersite/svelte.config.js

@@ -0,0 +1,11 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+export default {
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter(),
+  },
+};

apps/usersite/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["./.svelte-kit/tsconfig.json", "@readable/tsconfig"]
+}

apps/usersite/vite.config.ts

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  server: { port: 4200 },
+});

apps/website/.gitignore

@@ -0,0 +1,9 @@
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*