[1팀 박용태] Chapter2-2. 나만의 React 만들기

.github/workflows/deploy.yml

@@ -0,0 +1,57 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - feature-*
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: "Branch to deploy"
+        required: true
+        default: "main"
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "packages/app/dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

packages/react/src/core/commit.ts

@@ -0,0 +1,21 @@
+import { DomEffect } from "./types";
+import { updateDomProps, insertInstance, removeInstance } from "./dom";
+
+export const commitMutations = (mutations: DomEffect[]) => {
+  for (const mutation of mutations) {
+    switch (mutation.type) {
+      case "INSERT":
+        insertInstance(mutation.parentDOM, mutation.instance, mutation.anchor);
+        break;
+      case "REMOVE":
+        removeInstance(mutation.parentDOM, mutation.instance);
+        break;
+      case "UPDATE_PROPS":
+        updateDomProps(mutation.dom, mutation.prevProps, mutation.nextProps);
+        break;
+      case "UPDATE_TEXT":
+        mutation.dom.nodeValue = mutation.nextText;
+        break;
+    }
+  }
+};

packages/react/src/core/constants.ts

@@ -19,3 +19,13 @@ export const HookTypes = {
 } as const;
 
 export type HookType = typeof HookTypes;
+
+export const BOOLEAN_ATTRIBUTES = [
+  "disabled",
+  "checked",
+  "readOnly",
+  "required",
+  "selected",
+  "autoFocus",
+  "multiple",
+] as const;

packages/react/src/core/context.ts

@@ -1,74 +1,36 @@
-import { Context } from "./types";
+import { StoreContext, RuntimeContext } from "./types";
 
-/**
- * Mini-React의 전역 컨텍스트입니다.
- * 렌더링 루트, 훅 상태, 이펙트 큐 등 모든 런타임 데이터를 관리합니다.
- */
-export const context: Context = {
-  /**
-   * 렌더링 루트와 관련된 정보를 관리합니다.
-   */
+// Persistent context
+export const storeContext: StoreContext = {
   root: {
     container: null,
     node: null,
     instance: null,
-    reset({ container, node }) {
-      // 여기를 구현하세요.
-      // container, node, instance를 전달받은 값으로 초기화합니다.
-    },
   },
+  hooks: new Map(),
+  cleanupEffects: new Map(),
+};
 
-  /**
-   * 훅의 상태를 관리합니다.
-   * 컴포넌트 경로(path)를 키로 사용하여 각 컴포넌트의 훅 상태를 격리합니다.
-   */
-  hooks: {
-    state: new Map(),
-    cursor: new Map(),
-    visited: new Set(),
-    componentStack: [],
-
-    /**
-     * 모든 훅 관련 상태를 초기화합니다.
-     */
-    clear() {
-      // 여기를 구현하세요.
-      // state, cursor, visited, componentStack을 모두 비웁니다.
-    },
-
-    /**
-     * 현재 실행 중인 컴포넌트의 고유 경로를 반환합니다.
-     */
-    get currentPath() {
-      // 여기를 구현하세요.
-      // componentStack의 마지막 요소를 반환해야 합니다.
-      // 스택이 비어있으면 '훅은 컴포넌트 내부에서만 호출되어야 한다'는 에러를 발생시켜야 합니다.
-      return "";
-    },
-
-    /**
-     * 현재 컴포넌트에서 다음에 실행될 훅의 인덱스(커서)를 반환합니다.
-     */
-    get currentCursor() {
-      // 여기를 구현하세요.
-      // cursor Map에서 현재 경로의 커서를 가져옵니다. 없으면 0을 반환합니다.
-      return 0;
-    },
-
-    /**
-     * 현재 컴포넌트의 훅 상태 배열을 반환합니다.
-     */
-    get currentHooks() {
-      // 여기를 구현하세요.
-      // state Map에서 현재 경로의 훅 배열을 가져옵니다. 없으면 빈 배열을 반환합니다.
-      return [];
-    },
+// Temporary context for each render
+export const runtimeContext: RuntimeContext = {
+  cursor: {
+    path: null,
+    index: 0,
   },
-
-  /**
-   * useEffect 훅의 실행을 관리하는 큐입니다.
-   */
-  effects: {
-    queue: [],
+  workQueue: {
+    domMutations: [],
+    passiveEffects: [],
+    cleanups: [],
   },
-};
+  componentStack: [],
+  visited: new Set(),
+};
+
+export const resetRuntime = () => {
+  runtimeContext.cursor.path = null;
+  runtimeContext.cursor.index = 0;
+  runtimeContext.workQueue.domMutations = [];
+  runtimeContext.workQueue.passiveEffects = [];
+  runtimeContext.workQueue.cleanups = [];
+  runtimeContext.visited.clear();
+};