feat: 문서 작성

docs/.vitepress/config.mts

@@ -30,6 +30,7 @@ export default defineConfig({
         items: [
           { text: 'View class', link: '/api/view' },
           { text: 'Template', link: '/api/template' },
+          { text: 'Event handling', link: '/api/event' },
         ]
       }
     ],

docs/api/event.md

@@ -0,0 +1,133 @@
+---
+outline: deep
+---
+
+# Event handling
+
+View class, Enable class 에 제공되는 이벤트 핸들링 메서드들을 설명합니다.
+
+## addEventListener()
+
+```
+addEventListener<K extends keyof HTMLElementEventMap, M extends keyof this>(
+  eventType: K,
+  listener: M,
+  options?: boolean | AddEventListenerOptions,
+): this;
+addEventListener<M extends keyof this>(
+  eventType: string,
+  listener: M,
+  options?: boolean | AddEventListenerOptions,
+): this;
+addEventListener<K extends keyof HTMLElementEventMap>(
+  eventType: K,
+  listener: (this: this, ev: HTMLElementEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): this;
+addEventListener<T extends Event>(
+  eventType: string,
+  listener: (this: this, ev: T) => any,
+  options?: boolean | AddEventListenerOptions,
+): this;
+```
+
+View class와 Enable class는 `addEventListener`를 확장한 메서드를 제공합니다. `view.addEventListener()`는 받은 함수를 등록해두었다가 이벤트가 실행되었을 때 `this`에 `view`를 바인딩하여 실행합니다. 그 외 모든 동작은 Web API의 `addEventListener`와 동일합니다. ([Tutorial - Event 다루기](/tutorial/event.html))
+
+## removeEventListener() 
+
+```
+removeEventListener<
+  K extends keyof HTMLElementEventMap,
+  M extends keyof this,
+>(eventType: K, listener: M, options?: boolean | EventListenerOptions): this;
+removeEventListener<M extends keyof this>(
+  eventType: string,
+  listener: M,
+  options?: boolean | EventListenerOptions,
+): this;
+removeEventListener<K extends keyof HTMLElementEventMap>(
+  eventType: K,
+  listener: (this: this, ev: HTMLElementEventMap[K]) => any,
+  options?: boolean | EventListenerOptions,
+): this;
+removeEventListener<T extends Event>(
+  eventType: string,
+  listener: (this: this, ev: T) => any,
+  options?: boolean | EventListenerOptions,
+): this;
+```
+
+## delegate()
+
+```
+delegate<K extends keyof HTMLElementEventMap, M extends keyof this>(
+  eventType: K,
+  selector: string,
+  listener: M,
+): this;
+delegate<M extends keyof this>(
+  eventType: string,
+  selector: string,
+  listener: M,
+): this;
+delegate<K extends keyof HTMLElementEventMap>(
+  eventType: K,
+  selector: string,
+  listener: (this: this, e: HTMLElementEventMap[K]) => void,
+): this;
+delegate<T extends Event>(
+  eventType: string,
+  selector: string,
+  listener: (this: this, ev: T) => any,
+): this;
+```
+
+([Tutorial - 이벤트 델리게이트](/tutorial/event.html#이벤트-델리게이트))
+
+## @on Decorator
+
+`@on` 데코레이터를 사용하면 보다 간결하게 코드를 작성할 수 있습니다. 
+
+```typescript
+export class CheckboxView extends View<{ checked: boolean }> {
+  override onMount() {
+    this.addEventListener('click', () => this._toggle());
+  }
+
+  private _toggle() {
+    this.data.checked = !this.data.checked;
+    this.element().classList.toggle('checked');
+  }
+}
+
+export class CheckboxView extends View<{ checked: boolean }> {
+  @on('click')
+  private _toggle() {
+    this.data.checked = !this.data.checked;
+    this.element().classList.toggle('checked');
+  }
+}
+```
+
+`@on` 데코레이터에 인자를 하나만 전달하면 `addEventListener`를 사용하고, `@on`에 두 번째 인자로 CSS 셀렉터를 함께 전달하면 `delegate`를 사용합니다. 
+
+```typescript
+class MyView extends View<number> {
+  override onMount() {
+    this.delegate('click', 'button', () => this.remove());
+  }
+
+  remove() {
+    this.element().remove();
+  }
+}
+
+class MyView extends View<number> {
+  @on('click', 'button')
+  remove() {
+    this.element().remove();
+  }
+}
+```
+
+

docs/api/view.md

@@ -126,6 +126,13 @@ const element: HTMLElement = userView.element();
 
 `public isRendered(): boolean;`
 
+
+## renderCount
+`public renderCount: number;`
+
+내부에서 `template()` 함수를 실행한 수입니다. 이 프로퍼티를 활용하여 부분적으로만 렌더링하도록 `template()` 함수를 정의하는 식으로 지연적인 렌더링을 구현할 수 있습니다. 
+
+
 ## hydrateFromSSR()
 
 `public hydrateFromSSR(element: HTMLElement): this;`
@@ -242,3 +249,25 @@ selector로 찾아지는 부모 엘리먼트 내부에 그려진 subViews 배열
 `protected redrawOnlySubViews(): this;`
 
 subView를 순회하면서 `redraw()`를 실행합니다.
+
+## chain()
+
+`chain(f: (this: this, view: this) => void): this;`
+
+```typescript
+view
+  .chain((view) => view.data.quantity++)
+  .redraw();
+```
+
+## toString()
+
+View의 클래스이름을 리턴합니다.
+
+```typescript
+new MyView('hi').toString();
+// MyView
+```
+## onMount()
+
+View가 `document`에 `append` 된 이후에 실행됩니다.