FY-193/feature react hooks migrate ver 16.12.0

.eslintrc.cjs

@@ -26,12 +26,10 @@ module.exports = {
  strict: ["error", "global"], // "use strict"
  camelcase: "error", // camelCase 사용
  "no-var": "error", // var is not allowed
- indent: ["error", 4], // 4 spaces
  "linebreak-style": ["error", "unix"], // LF
  quotes: ["error", "double"], // use double quotes
  semi: ["error", "always"], // always use semicolon
  eqeqeq: ["error", "always"], // always use ===
- "prettier/prettier": "error", // Prettier
  "prefer-const": "error", // use const
  "func-style": ["error", "expression"], // 함수 표현식 스타일 권장
  "prefer-rest-params": "error", // Rest 파라미터 사용 권장

.github/workflows/build_check.yaml

@@ -29,4 +29,8 @@ jobs:
  if [ $? -ne 0 ]; then
  echo "Build failed with error code $?"
  exit 1
- fi
+ fi
+ - name: Execute script forEach file
+ run: |
+ chmod +x ./scripts/run-tests.sh
+ ./scripts/run-tests.sh

.prettierrc

@@ -1,7 +1,7 @@
 {
  "semi": true,
  "trailingComma": "es5",
- "printWidth": 80,
+ "printWidth": 120,
  "tabWidth": 4,
  "useTabs": false
 }

package.json

@@ -48,5 +48,8 @@
  "*.js": [
  "eslint --cache ."
  ]
+ },
+ "dependencies": {
+ "lodash": "^4.17.21"
  }
 }

scripts/execJsFile.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# 시작 디렉토리를 입력받거나 현재 디렉토리를 기본값으로 사용
+START_DIR=${1:-../srcs/}
+ERROR_OCCURRED=0
+
+echo "Node.js로 실행할 JavaScript 파일 검색 중 ('type' 폴더 제외)..."
+find "$START_DIR" -path "$START_DIR/type" -prune -o -name "*.js" -print | while read filename; do
+ echo "실행 중: $filename"
+ if ! node "$filename"; then
+ echo "오류 발생: $filename 실행 중 오류가 발생했습니다."
+ ERROR_OCCURRED=1
+ exit 1
+ fi
+done
+
+echo "모든 JavaScript 파일이 성공적으로 실행되었습니다."
+exit 0

srcs/core/createElement.js

@@ -1,4 +1,4 @@
-import isArray from "../shared/isArray";
+import isArray from "../shared/isArray.js";
 
 const RfsElement = (type, props, children) => {
  return {

srcs/core/createRoot.js

@@ -17,9 +17,9 @@
 //todo: ReactDOMRoot.render
 //todo: ReactDOMRoot.unmount
 
-import { ELEMENT_NODE, DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE } from "./const";
-import { ConcurrentRoot } from "../shared/type/TRootTag";
-import { createFiberRoot } from "../fiber/fiberRoot";
+import { ELEMENT_NODE, DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE } from "./const.js";
+import { ConcurrentRoot } from "../type/TRootTag.js";
+import { createFiberRoot } from "../fiber/fiberRoot.js";
 //todo: dom.js
 import { markContainerAsRoot } from "../dom/dom.js";
 /**
@@ -87,9 +87,7 @@ const ReactDOMRoot = class {
  */
 export const createRoot = (container) => {
  if (!isValidContainer(container)) {
- throw new Error(
- "createRoot: container is not a valid DOM element -RFS error"
- );
+ throw new Error("createRoot: container is not a valid DOM element -RFS error");
  }
  return new ReactDOMRoot(container);
 };

srcs/core/currentDispatcher.js

@@ -0,0 +1,14 @@
+/**
+ * @file currentDispatcher.js
+ * @description This file defines the currentDispatcher object.
+ * @module core/currentDispatcher
+ */
+
+/**
+ * @property current {Object} The current dispatcher.
+ */
+const currentDispatcher = {
+ current: null,
+};
+
+export default currentDispatcher;

srcs/dom/dom.js

@@ -11,7 +11,7 @@
  * 필요할 수 있다
  */
 
-import { HostComponent, HostText, HostRoot } from "../shared/type/TWorkTag";
+import { HostComponent, HostText, HostRoot } from "../type/TWorkTag.js";
 
 /**
  * @description 랜덤한 문자열 키를 생성합니다

srcs/fiber/fiber.js

@@ -1,9 +1,8 @@
-import { HostRoot } from "../shared/type";
-import { NoEffect } from "../shared/type/TSideEffectFlags";
-import { Tfiber } from "../shared/type/TFiber";
-import { NoWork } from "../shared/type/TExpirationTime";
-import { ConcurrentMode } from "../shared/type/TTypeOfMode";
-import { ConcurrentRoot } from "../shared/type/TRootTag";
+import { HostRoot } from "../type/TWorkTag.js";
+import { NoEffect } from "../type/TSideEffectFlags.js";
+import { NoWork } from "../type/TExpirationTime.js";
+import { ConcurrentMode } from "../type/TTypeOfMode.js";
+import { ConcurrentRoot } from "../type/TRootTag.js";
 /**
  * 
  * @param {tag} TWorkTag 
@@ -77,7 +76,7 @@ const createFiber = (tag, pendingProps, key, mode) => {
 
 /**
  *
- * @param {tag} TRootTag -> shared/type/TRootTag.js
+ * @param {tag} TRootTag ->/type/TRootTag.js
  * @returns fiber @type TFiber
  * @description HostRoot에 대응되는 FiberNode를 생성하는 함수
  */

srcs/fiber/fiberRoot.js

@@ -1,6 +1,5 @@
 import { createHostRootFiber } from "./fiber.js";
-import { TFiberRoot } from "../shared/type/TFiberRoot";
-import { NoWork } from "../shared/type/TExpirationTime";
+import { NoWork } from "../type/TExpirationTime.js";
 
 /**
  @description FiberRoot는 해당 Fiber에 대해서 관리를 위한 그 스코프내의 전역관리 공간이라고 생각할 수 있습니다. 

srcs/hooks/constructor/EffectInstance.js

@@ -0,0 +1,21 @@
+/**
+ * @module EffectInstance
+ * @description - This class is used to create an destroy Object for effect instance.
+ * @see https://github.com/facebook/react/pull/26561
+ * @property {Function} destroy - The cleanup function of the effect.
+ */
+class EffectInstance {
+ constructor(destroy) {
+ this.destroy = destroy;
+ }
+}
+
+/**
+ * @description - This function creates an effect instance.
+ * @returns {Object} - An effect instance includes destroy function.
+ */
+const createEffectInstance = (destroy) => {
+ return new EffectInstance(destroy);
+};
+
+export default createEffectInstance;

srcs/hooks/constructor/FunctionComponentUpdateQueue.js

@@ -0,0 +1,23 @@
+/**
+ * @module FunctionComponentUpdateQueue
+ * @description - This class is used to create an update queue for function component.
+ * @property {TEffect} lastEffect - The last effect in the circular update queue.
+ */
+class FunctionComponentUpdateQueue {
+ constructor(lastEffect) {
+ this.lastEffect = lastEffect;
+ }
+}
+
+/**
+ * @description - This function creates an update queue for function component.
+ * stores와 events, memocache는 각각 다른 hook들에서 사용됩니다.
+ * 각각 [useSyncExternalStore, useEffectEvent, useMemoCache]에서 사용.
+ * 그래서 위의 property들은 제거되었습니다.
+ * @returns {Object} - An update queue for function component.
+ */
+const createFunctionComponentUpdateQueue = (lastEffect) => {
+ return new FunctionComponentUpdateQueue(lastEffect);
+};
+
+export default createFunctionComponentUpdateQueue;

srcs/hooks/constructor/MemoizedStateAndDispatch.js

@@ -0,0 +1,26 @@
+/**
+ * MemoizedStateAndDispatch
+ * @description - useReducer와 useState에서 사용되는 memoizedState와 dispatch를 생성하는 함수입니다.
+ */
+class MemoizedStateAndDispatch {
+ constructor(state, dispatch) {
+ this.state = state;
+ this.dispatch = dispatch;
+ }
+
+ toArray() {
+ return [this.state, this.dispatch];
+ }
+}
+
+/**
+ *
+ * @param {any} state
+ * @param {Function} dispatch
+ * @returns
+ */
+const createMemoizedStateAndDispatch = (state, dispatch) => {
+ return new MemoizedStateAndDispatch(state, dispatch).toArray();
+};
+
+export default createMemoizedStateAndDispatch;

srcs/hooks/constructor/MemoizedValueAndDeps.js

@@ -0,0 +1,26 @@
+/**
+ * MemoizedValueAndDeps
+ * @description - useMemo와 useCallback에서 사용되는 memoizedState를 생성하는 클래스입니다.
+ */
+class MemoizedValueAndDeps {
+ constructor(value, deps) {
+ this.value = value;
+ this.deps = deps;
+ }
+
+ toArray() {
+ return [this.value, this.deps];
+ }
+}
+
+/**
+ *
+ * @param {any} value
+ * @param {Array} deps
+ * @returns
+ */
+const createMemoizedValueAndDeps = (value, deps) => {
+ return new MemoizedValueAndDeps(value, deps).toArray();
+};
+
+export default createMemoizedValueAndDeps;

srcs/hooks/constructor/effect.js

@@ -0,0 +1,34 @@
+/**
+ *
+ * @param {import("../../fiber/type").TEffectTags} effectTag
+ * @param {Function} create
+ * @param {import("../types/THookEffectFlags").THookEffectFlags} inst
+ * @param {Array} deps
+ * @param {TEffect} next
+ * @see TEffectInstance
+ */
+const effect = class {
+ constructor(effectTag, create, inst, deps, next) {
+ this.effectTag = effectTag;
+ this.create = create;
+ this.inst = inst;
+ this.deps = deps;
+ this.next = next;
+ }
+};
+
+/**
+ *
+ * @param {import("../../fiber/type").TEffectTags} effectTag
+ * @param {Function} create
+ * @param {import("../types/THookEffectFlags").THookEffectFlags}
+ * @param {Array} deps
+ * @param {TEffect} next
+ * @returns {TEffect}
+ * @see TEffectInstance
+ */
+const createEffect = (effectTag, create, inst, deps, next) => {
+ return new effect(effectTag, create, inst, deps, next);
+};
+
+export default createEffect;

srcs/hooks/constructor/hookObject.js

@@ -0,0 +1,32 @@
+/**
+ *
+ * @param {any} memoizedState
+ * @param {any} baseState
+ * @param {any} baseUpdate
+ * @param {TUpdateQueue} queue
+ * @param {THookObject} next
+ */
+const hookObject = class {
+ constructor(memoizedState, baseState, baseUpdate, queue, next) {
+ this.memoizedState = memoizedState;
+ this.baseState = baseState;
+ this.baseUpdate = baseUpdate;
+ this.queue = queue;
+ this.next = next;
+ }
+};
+
+/**
+ *
+ * @param {any} memoizedState
+ * @param {any} baseState
+ * @param {any} baseUpdate
+ * @param {TUpdateQueue} queue
+ * @param {THookObject} next
+ * @returns
+ */
+const createHookObject = (memoizedState, baseState, baseUpdate, queue, next) => {
+ return new hookObject(memoizedState, baseState, baseUpdate, queue, next);
+};
+
+export default createHookObject;

srcs/hooks/constructor/hookUpdate.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * @param {any} action
+ * @param {boolean} hasEagerState
+ * @param {any} eagerState
+ * @param {THookUpdate} next
+ */
+const hookUpdate = class {
+ constructor(expirationTime, suspenseConfig, action, eagerReducer, eagerState, next) {
+ this.expirationTime = expirationTime;
+ this.suspenseConfig = suspenseConfig;
+ this.action = action;
+ this.eagerReducer = eagerReducer;
+ this.eagerState = eagerState;
+ this.next = next;
+ }
+};
+
+/**
+ *
+ * @param {any} action
+ * @param {boolean} hasEagerState
+ * @param {any} eagerState
+ * @param {THookUpdate} next
+ * @returns hookUpdate
+ */
+const createHookUpdate = (expirationTime, suspenseConfig, action, eagerReducer, eagerState, next) => {
+ return new hookUpdate(expirationTime, suspenseConfig, action, eagerReducer, eagerState, next);
+};
+
+export default createHookUpdate;

srcs/hooks/constructor/hookUpdateQueue.js

@@ -0,0 +1,29 @@
+/**
+ *
+ * @param {THookUpdate} last
+ * @param {Function} dispatch
+ * @param {Function} lastRenderedReducer
+ * @param {any} lastRenderedState
+ */
+const hookUpdateQueue = class {
+ constructor(last, dispatch, lastRenderedReducer, lastRenderedState) {
+ this.last = last;
+ this.dispatch = dispatch;
+ this.lastRenderedReducer = lastRenderedReducer;
+ this.lastRenderedState = lastRenderedState;
+ }
+};
+
+/**
+ *
+ * @param {THookUpdate}last
+ * @param {Function} dispatch
+ * @param {Function} lastRenderedReducer
+ * @param {any} lastRenderedState
+ * @returns
+ */
+const createHookUpdateQueue = (last, dispatch, lastRenderedReducer, lastRenderedState) => {
+ return new hookUpdateQueue(last, dispatch, lastRenderedReducer, lastRenderedState);
+};
+
+export default createHookUpdateQueue;

srcs/hooks/constructor/index.js

@@ -0,0 +1,6 @@
+import createHookUpdate from "./hookUpdate.js";
+import createHookObject from "./hookObject.js";
+import createHookUpdateQueue from "./hookUpdateQueue.js";
+import createEffect from "./effect.js";
+
+export { createHookUpdate, createHookObject, createHookUpdateQueue, createEffect };