FY-215/feature context refactoring (#37)

* FY-215/perf(changedBits): remove

changedBits 삭제

facebook/react#20953

* FY-215/refactor: remove threadcount

* FY-215/refactor: remove rendererSigil

* FY-215/refactor: project

* FY-215/refactor: remain observedBits

Author: JinmuGo

srcs/context/constructor/context.js

@@ -6,20 +6,16 @@
 /**
  *
  * @param {Symbol} $$typeof
- * @param {Function} _calculateChangedBits
  * @param {any} _currentValue
  * @param {any} _currentValue2
- * @param {Number} _threadCount
  * @param {TProvider} Provider
  * @param {TConsumer} Consumer
  */
 const context = class {
-    constructor($$typeof, _calculateChangedBits, _currentValue, _currentValue2, _threadCount, Provider, Consumer) {
+    constructor($$typeof, _currentValue, _currentValue2, Provider, Consumer) {
         this.$$typeof = $$typeof;
-        this._calculateChangedBits = _calculateChangedBits;
         this._currentValue = _currentValue;
         this._currentValue2 = _currentValue2;
-        this._threadCount = _threadCount;
         this.Provider = Provider;
         this.Consumer = Consumer;
     }
@@ -28,23 +24,13 @@ const context = class {
 /**
  *
  * @param {Symbol} $$typeof
- * @param {Function} _calculateChangedBits
  * @param {any} _currentValue
  * @param {any} _currentValue2
- * @param {Number} _threadCount
  * @param {TProvider} Provider
  * @param {TConsumer} Consumer
  */
-const createContextInst = (
-    $$typeof,
-    calculateChangedBits,
-    currentValue,
-    currentValue2,
-    threadCount,
-    Provider,
-    Consumer
-) => {
-    return new context($$typeof, calculateChangedBits, currentValue, currentValue2, threadCount, Provider, Consumer);
+const createContextInst = ($$typeof, currentValue, currentValue2, threadCount, Provider, Consumer) => {
+    return new context($$typeof, currentValue, currentValue2, threadCount, Provider, Consumer);
 };
 
 export default createContextInst;

srcs/context/constructor/contextItem.js

@@ -6,25 +6,22 @@
 /**
  *
  * @param {TContext} context
- * @param {number} observedBits
  * @param {import("../../../type/TContextItem").TContextItem | null} next
  */
 const contextItem = class {
-    constructor(context, observedBits, next) {
+    constructor(context, next) {
         this.context = context;
-        this.observedBits = observedBits;
         this.next = next;
     }
 };
 
 /**
  *
  * @param {TContext} context
- * @param {number} observedBits
- * @param {import("../../../type/TContextItem").TContextItem | null} next
+ * @param {number, * @param {import("../../../type/TContextItem").TContextItem | null}} next
  */
-const createContextItem = (context, observedBits, next) => {
-    return new contextItem(context, observedBits, next);
+const createContextItem = (context, next) => {
+    return new contextItem(context, next);
 };
 
 export default createContextItem;

srcs/context/core/contextCore.js

@@ -4,15 +4,14 @@ import { createCursor } from "../../fiber/fiberStack.js";
  * @property {Cursor} valueCursor - fiberStack을 가리키고 있으며, 현재 context의 value를 가리킨다.
  * @property {undefined | string} rendererSigil - 해당 변수는 여러개의 renderer가 동시에 동작할 때,
  * 같은 context를 공유하는지 확인하기 위한 변수이다. 현재 react 16.12.0은 해당기능을 지원하지 않기 때문에
- * 개발 모드에서 warning을 출력하기 위해 사용된다.
+ * 개발 모드에서 warning을 출력하기 위해 사용된다. -> NOTE: 사용하지 않음
  * @property {Fiber | null} currentlyRenderingFiber - 현재 렌더링 중인 fiber를 가리킨다.
  * @property {TContextItem | null} lastContextDependency - 마지막으로 의존성을 가진 contextItem를 가리킨다.
- * @property {TContext | null} lastContextWithAllBitsObserved - 마지막으로 모든 bit를 관찰한 context를 가리킨다.
+ * @property {TContext | null} lastFullyObservedContext - 마지막으로 완전히 관찰된 context를 가리킨다.
  */
 export default {
     valueCursor: createCursor(null),
-    rendererSigil: undefined,
     currentlyRenderingFiber: null,
     lastContextDependency: null,
-    lastContextWithAllBitsObserved: null,
+    lastFullyObservedContext: null,
 };

srcs/context/createContext.js

@@ -5,35 +5,17 @@ import createProvider from "./constructor/provider.js";
 /**
  *
  * @param {any} defaultValue
- * @param {Function | undefined} calculateChangedBits
  * @see ReactNewContext-test.internal.js 1055 line
  *
  * @description - 단순히 context 객체를 생성하는 함수입니다. 그 과정에서
  * Provider와 Consumer를 생성합니다.
  *
- * @description - calculateChangedBits
- *  비트 마스킹을 사용하여 변경되었다면 Context.consumer를 re-render합니다. 그것을
- *  클라이언트 코드에서 조정할 수 있도록 직접 second argument로 넘겨줄 수 있습니다.
- *  관련 링크는 아래에 있습니다.
  * @link https://dev.to/alexkhismatulin/react-context-a-hidden-power-3h8j
  * @returns
  */
-const createContext = (defaultValue, calculateChangedBits) => {
-    // client Code에서 calculateChangedBits를 넘겨주지 않았다면 null을 할당합니다.
-    if (calculateChangedBits === undefined) {
-        calculateChangedBits = null;
-    }
-
+const createContext = (defaultValue) => {
     // context Object를 생성합니다.
-    const context = createContextInst(
-        RFS_CONTEXT_TYPE,
-        calculateChangedBits,
-        defaultValue,
-        defaultValue,
-        0,
-        null,
-        null
-    );
+    const context = createContextInst(RFS_CONTEXT_TYPE, defaultValue, defaultValue, null, null);
 
     // Provider 객체 생성.
     const provider = createProvider(RFS_PROVIDER_TYPE, context);

srcs/context/newContext.js

@@ -1,10 +1,9 @@
-import { MAX_SIGNED_31_BIT_INT } from "../const/CExpirationTime.js";
 import { pop, push } from "../fiber/fiberStack.js";
 import { markWorkInProgressReceivedUpdate } from "../work/beginWork.js";
 import createContextItem from "./constructor/contextItem.js";
 import contextCore from "./core/contextCore.js";
 // TODO: import { isPrimaryRenderer } from "react-dom";
-// ReactDOMHostConfig에서 isPrimaryRenderer를 가져옵니다.
+// RFS의 ReactDOMHostConfig에서 isPrimaryRenderer를 가져옵니다.
 
 /**
  *
@@ -25,12 +24,10 @@ const pushProvider = (providerFiber, nextValue) => {
         push(contextCore.valueCursor, context._currentValue, providerFiber);
 
         context._currentValue = nextValue;
-        context._currentRenderer = contextCore.rendererSigil;
     } else {
         push(contextCore.valueCursor, context._currentValue2, providerFiber);
 
         context._currentValue2 = nextValue;
-        context._currentRenderer2 = contextCore.rendererSigil;
     }
 };
 
@@ -102,7 +99,7 @@ const scheduleWorkOnParentPath = (parent, renderExpirationTime) => {
  * // 이때 변경되었다는 것을 알리는 용도로 해당 fiber의 expirationTime을 변경합니다.
  * @returns
  */
-const propagateContextChange = (workInProgress, context, changedBits, renderExpirationTime) => {
+const propagateContextChange = (workInProgress, context, renderExpirationTime) => {
     let fiber = workInProgress.child;
     if (fiber !== null) {
         // Set the return pointer of the child to the work-in-progress fiber.
@@ -122,14 +119,9 @@ const propagateContextChange = (workInProgress, context, changedBits, renderExpi
                 // Check if the context matches.
                 // 현재 fiber의 context list중에서 현재 변경된 context와 일치하는 context가 있는지 확인합니다.
                 // 만약에 일치하면서 변경되었다면 해당 fiber를 re-render해야합니다.
-                if (dependency.context === context && (dependency.observedBits & changedBits) !== 0) {
+                if (dependency.context === context) {
                     // Match! Schedule an update on this fiber.
 
-                    if (fiber.tag === ClassComponent) {
-                        // NOTE: we don't implement ClassComponent.
-                        // 저희는 함수형 컴포넌트만 사용하기 때문에 해당 부분은 구현하지 않습니다.
-                    }
-
                     // fiber를 re-render하기 때문에 해당 fiber의 expirationTime을 변경합니다.
                     if (fiber.expirationTime < renderExpirationTime) {
                         fiber.expirationTime = renderExpirationTime;
@@ -161,12 +153,10 @@ const propagateContextChange = (workInProgress, context, changedBits, renderExpi
         } else if (fiber.tag === ContextProvider) {
             // Don't scan deeper if this is a matching provider
             nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
-        } else if (fiber.tag === DehydreatedFragment) {
-            // NOTE: we don't implement DehydreatedFragment.
-            // it's server components
         } else {
             nextFiber = fiber.child;
         }
+        // NOTE: we don't implement DehydreatedFragment.
 
         // nextFier가 null이라는 것은 더이상 child가 없다는 것.
         // 그러면 sibling을 확인하고 그마저도 존재하지 않는다면 parent로 올라갑니다.
@@ -210,7 +200,7 @@ const propagateContextChange = (workInProgress, context, changedBits, renderExpi
 const prepareToReadContext = (workInProgress, renderExpirationTime) => {
     contextCore.currentlyRenderingFiber = workInProgress;
     contextCore.lastContextDependency = null;
-    contextCore.lastContextWithAllBitsObserved = null;
+    contextCore.lastFullyObservedContext = null;
 
     // component는 여러개의 context를 사용할 수 있습니다.
     // dependencies는 해당 fiber에서 사용되는 컨텍스트의 리스트입니다.
@@ -234,27 +224,16 @@ const prepareToReadContext = (workInProgress, renderExpirationTime) => {
 /**
  *
  * @param {Tcontext} context
- * @param {number} observedBits
  *
  * @description - readContext의 목표는 context 값을 읽는 것입니다.
  * 이 함수에서 context의 값을 읽습니다.
  * @returns
  */
-const readContext = (context, observedBits) => {
-    if (contextCore.lastContextWithAllBitsObserved === context) {
+const readContext = (context) => {
+    if (contextCore.lastFullyObservedContext === context) {
         // Nothing to do. We already observe everything in this context.
-    } else if (observedBits === false || observedBits === 0) {
-        // Do not observe any updates.
     } else {
-        let resolvedObservedBits;
-        if (typeof observedBits !== "number" || observedBits === MAX_SIGNED_31_BIT_INT) {
-            contextCore.lastContextWithAllBitsObserved = context;
-            resolvedObservedBits = MAX_SIGNED_31_BIT_INT;
-        } else {
-            resolvedObservedBits = observedBits;
-        }
-
-        const contextItem = createContextItem(context, resolvedObservedBits, null);
+        const contextItem = createContextItem(context, null);
 
         if (contextCore.lastContextDependency === null) {
             // this is the first dependency for this component. Create a new list.

srcs/context/shared/calculateChangedBits.js renamed to srcs/context/shared/calculateChangedBits.js.deprecated

@@ -34,7 +34,6 @@ import { UpdateState } from "../const/CUpdateTag.js";
 import { NoWork } from "../const/CExpirationTime.js";
 import { markUnprocessedUpdateTime, markRenderEventTimeAndConfig } from "../work/workloop.js";
 import { Callback } from "../const/CSideEffectFlags.js";
-import { TFiber } from "../../type/TFiber.js";
 
 export class updateState {
     /**

srcs/core/UpdateQueue.js

@@ -1,8 +1,7 @@
-import { isArray } from "../shared/isArray.js";
+import isArray from "../shared/isArray.js";
 import { RFS_ELEMENT_TYPE, RFS_FRAGMENT_TYPE } from "../core/rfsSymbol.js";
 import { createWorkInProgress } from "../fiber/fiber.js";
 import { getIteratorFn } from "../core/rfsSymbol.js";
-import { TFiber } from "../../type/TFiber.js";
 import { createFiberFromElement, createFiberFromFragment, createFiberFromText } from "../fiber/fiber.js";
 //Reconcile
 //하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있습니다.
@@ -552,8 +551,8 @@ const ChildReconciler = (shouldTrackSideEffects) => {
             //그리고 마지막으로 배치가 바뀌지 않은 파이버의 인덱스를 가르키는 변수를 업데이트해야됨
             //NOTE: place-배치란 list에서의 배치를 의미함-> 이것은 array에서 index를 바꾸는 것이
             //NOTE:아닌 인접한것을 기준을 의미함 (fiber 자체가 list구조이므로)
-            //NOTE: placeChild의 알고리즘은 placeChild를 참고하면 
-          
+            //NOTE: placeChild의 알고리즘은 placeChild를 참고하면
+
             lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
 
             //딱 한번만 resultFirstFiber를 세팅해야됨

srcs/fiber/childFiber.js

@@ -27,7 +27,6 @@ const finishRenderingHooks = (hookCore, hookExpirationTime) => {
     hookCore.sideEffectTag = 0;
 
     // finish hookExpirationTime
-    // TODO: import NoWork
     hookExpirationTime.renderExpirationTime = NoWork;
     hookExpirationTime.remainingExpirationTime = NoWork;
 };
@@ -55,7 +54,7 @@ const renderWithHooks = (current, workInProgress, Component, props, refOrContext
     }
 
     // Component render
-    // TODO: ?? 그러면 props랑 context랑 같이 들어오는데? 이게 뭐지.
+    // NOTE: refOrContext를 넣어주는 이유는 ClassComponent 때문.
     let children = Component(props, refOrContext);
 
     // render phase시에 update가 발생했다면 해당 Component를 다시 렌더링합니다.

srcs/hooks/core/renderWithHooks.js

@@ -1,9 +1,10 @@
 import { NoWork } from "../../const/CExpirationTime.js";
 import is from "../../shared/objectIs.js";
+import { computeExpirationForFiber, requestCurrentTimeForUpdate, scheduleWork } from "../../work/workloop.js";
 import createHookUpdate from "../constructor/hookUpdate.js";
 import hookCore from "../core/hookCore.js";
 import hookExpirationTime from "../core/hookExpirationTime.js";
-import hookRenderPhase from "../core/hookRenderPhase.js";
+import hookRenderPhase, { RE_RENDER_LIMIT } from "../core/hookRenderPhase.js";
 import enqueueRenderPhaseUpdate from "./enqueueRenderPhaseUpdate.js";
 
 /**
@@ -26,6 +27,10 @@ import enqueueRenderPhaseUpdate from "./enqueueRenderPhaseUpdate.js";
  */
 
 const dispatchAction = (fiber, queue, action) => {
+    if (hookRenderPhase.numberOfReRenders < RE_RENDER_LIMIT) {
+        throw new Error("Too many re-renders. React limits the number of renders to prevent an infinite loop.");
+    }
+
     const alternate = fiber.alternate;
 
     // TODO: isRenderPhaseUpdate 함수로 Refactor
@@ -64,14 +69,9 @@ const dispatchAction = (fiber, queue, action) => {
         }
     } else {
         // this is an idle status update
-
-        // TODO: Implement this function. requestCurrentTimeForUpdate
         const currentTime = requestCurrentTimeForUpdate();
-        // TODO: Implement this function. requestCurrentSuspenseConfig 사용하지 않을 수 있음
-        const suspenseConfig = requestCurrentSuspenseConfig();
-        // TODO: Implement this function. computeExpirationForFiber
         // hookupdate에서 suspenseConfig를 사용하고 있는데 이후 updateReducer의 markRenderEventTimeAndConfig에서만 사용된다
-        const expirationTime = computeExpirationForFiber(currentTime, fiber, suspenseConfig);
+        const expirationTime = computeExpirationForFiber(currentTime, fiber);
 
         const update = createHookUpdate(expirationTime, suspenseConfig, action, null, null, null);
         enqueueRenderPhaseUpdate(queue, update);
@@ -94,7 +94,7 @@ const dispatchAction = (fiber, queue, action) => {
             // The queue is currently empty, which means we can eagerly compute the
             // next state before entering the render phase. If the new state is the
             // same as the current state, we may be able to bail out entirely.
-            //NOTE:여기서의 Bailout은 scheduleWork를 호출하지 않는다는 것인듯.
+            //NOTE: 여기서의 Bailout은 scheduleWork를 호출하지 않는다는 것인듯.
             const lastRenderedReducer = queue.lastRenderedReducer;
             if (lastRenderedReducer !== null) {
                 try {
@@ -113,7 +113,6 @@ const dispatchAction = (fiber, queue, action) => {
                 }
             }
         }
-        // TODO: Implement this function. scheduleWork
         scheduleWork(fiber, expirationTime);
     }
 };