feat(examples): add with-logger

crashmax-dev · crashmax-dev · commit 81656bfb8d1b · 2023-02-08T21:49:01.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@
 .env
 .DS_Store
 **/database
+**/logs
+**/temp
diff --git a/examples/with-logger/index.html b/examples/with-logger/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>with-logger</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>
diff --git a/examples/with-logger/package.json b/examples/with-logger/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "with-logger",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "4.9.5",
+    "vite": "4.1.1"
+  },
+  "dependencies": {
+    "@stenodb/browser": "workspace:*",
+    "@stenodb/logger": "workspace:*",
+    "@zero-dependency/dom": "0.12.0",
+    "class-transformer": "0.5.1",
+    "reflect-metadata": "0.1.13"
+  }
+}
diff --git a/examples/with-logger/src/entities.ts b/examples/with-logger/src/entities.ts
@@ -0,0 +1,32 @@
+import { Type } from 'class-transformer'
+
+export class Users {
+  @Type(() => User)
+  users: User[]
+
+  constructor(...users: User[]) {
+    this.users = users
+  }
+
+  addUser(user: User): void {
+    this.users.push(user)
+  }
+
+  getLastUserId(): number {
+    return this.users!.at(-1)!.id
+  }
+}
+
+export class User {
+  id: number
+  username: string
+
+  constructor(id: number, username: string) {
+    this.id = id
+    this.username = username
+  }
+
+  changeUsername(username: string): void {
+    this.username = username
+  }
+}
diff --git a/examples/with-logger/src/index.ts b/examples/with-logger/src/index.ts
@@ -0,0 +1,72 @@
+import 'reflect-metadata'
+import { el } from '@zero-dependency/dom'
+import { User } from './entities.js'
+import { storage } from './storage.js'
+
+const app = document.querySelector('#app')!
+
+const userIdInput = el('input', {
+  type: 'number',
+  name: 'id',
+  disabled: true
+})
+
+const usernameInput = el('input', {
+  type: 'text',
+  name: 'username',
+  placeholder: 'Username'
+})
+
+const submitButton = el(
+  'button',
+  {
+    type: 'submit'
+  },
+  'Submit'
+)
+
+const resetButton = el(
+  'button',
+  {
+    onclick: () => {
+      storage.reset()
+      render()
+    }
+  },
+  'Reset'
+)
+
+const form = el(
+  'form',
+  {
+    onsubmit: (event: Event) => {
+      event.preventDefault()
+      const formData = new FormData(form)
+      const username = formData.get('username')?.toString()
+      if (!username) {
+        usernameInput.focus()
+        return
+      }
+      const user = new User(storage.data!.getLastUserId() + 1, username)
+      storage.data!.addUser(user)
+      storage.write()
+      render()
+    }
+  },
+  userIdInput,
+  usernameInput,
+  submitButton,
+  resetButton
+)
+
+const storagePreview = el('pre')
+
+function render() {
+  form.reset()
+  usernameInput.focus()
+  userIdInput.value = storage.data!.getLastUserId().toString()
+  storagePreview.textContent = JSON.stringify(storage.data, null, 2)
+}
+
+render()
+app.append(form, storagePreview)
diff --git a/examples/with-logger/src/storage.ts b/examples/with-logger/src/storage.ts
@@ -0,0 +1,10 @@
+import { BrowserProvider, LocalStorage } from '@stenodb/browser'
+import { createLogger } from '@stenodb/logger'
+import { User, Users } from './entities.js'
+
+const initialData = new Users(new User(1, 'John'))
+const adapter = new LocalStorage('users', Users, initialData)
+const provider = new BrowserProvider({ logger: createLogger() })
+
+export const storage = provider.create(adapter)
+storage.read()
diff --git a/examples/with-logger/src/vite-env.d.ts b/examples/with-logger/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/with-logger/tsconfig.json b/examples/with-logger/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "strictPropertyInitialization": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/with-node/package.json b/examples/with-node/package.json
@@ -8,6 +8,7 @@
     "build": "del-cli dist && tsc"
   },
   "dependencies": {
+    "@stenodb/logger": "workspace:^0.0.0",
     "@stenodb/node": "workspace:*",
     "class-transformer": "0.5.1",
     "reflect-metadata": "0.1.13"
diff --git a/examples/with-node/src/index.ts b/examples/with-node/src/index.ts
@@ -1,13 +1,24 @@
 import 'reflect-metadata'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { createLogger } from '@stenodb/logger'
+import { createRotation } from '@stenodb/logger/rotation'
 import { AsyncAdapter, NodeProvider } from '@stenodb/node'
 import { Post, User, Users } from './entities.js'
 
 const path = resolve(dirname(fileURLToPath(import.meta.url)), '..', 'database')
+const logger = createLogger({
+  rotation: createRotation({
+    path: 'logs',
+    size: '10M', // rotate every 10 MegaBytes written
+    interval: '1d', // rotate daily
+    compress: 'gzip' // compress rotated files
+  })
+})
+
 const initialData = new Users(new User('John Doe'))
 const adapter = new AsyncAdapter('users', Users, initialData)
-const provider = new NodeProvider(path)
+const provider = new NodeProvider(path, { logger })
 
 const database = provider.createAsync(adapter)
 await database.read()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
