feat: mini-react 구현(fiber, useState)

Author: Pilse

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

.gitignore

@@ -0,0 +1 @@
+/node_modules

commitUpdate.ts

@@ -0,0 +1,135 @@
+import { context } from "./context";
+import { Fiber } from "./fiber";
+
+export function commitRootFiber(rootFiber: Fiber) {
+  if (!rootFiber.child) return;
+
+  context.deletedQueue.forEach((deletion) => commitFiberUpdate(deletion));
+  context.deletedQueue = [];
+
+  commitFiberUpdate(rootFiber.child);
+
+  context.recentlyCommittedRootFiber = context.unCommitedRootFiber;
+  context.unCommitedRootFiber = null;
+}
+
+export function commitFiberUpdate(fiber: Fiber) {
+  let parentFiber: Nullable<Fiber> = fiber.parent!;
+  while (parentFiber && parentFiber.dom === null) {
+    parentFiber = parentFiber.parent;
+  }
+
+  const parentDom = parentFiber!.dom!;
+
+  if (fiber.effectTag === "PLACEMENT" && fiber.dom) {
+    commitAddDom(parentDom, fiber);
+  }
+
+  if (fiber.effectTag === "UPDATE" && fiber.dom) {
+    commitUpdateDomProerty(fiber.dom, fiber.alternate?.props, fiber.props);
+  }
+
+  if (fiber.effectTag === "DELETE") {
+    commitDeleteDom(parentDom, fiber);
+  }
+
+  if (fiber.child) commitFiberUpdate(fiber.child);
+  if (fiber.sibling) commitFiberUpdate(fiber.sibling);
+}
+
+export function commitUpdateDomProerty(
+  dom: Node,
+  prevProps: Record<string, unknown> = {},
+  nextProps: Record<string, unknown> = {}
+) {
+  commitDeletedEventListener(dom, prevProps, nextProps);
+  commitAddedEventListener(dom, prevProps, nextProps);
+  commitDeletedProperty(dom, prevProps, nextProps);
+  commitAddedProperty(dom, prevProps, nextProps);
+}
+
+export function commitAddDom(parent: Node, child: Fiber) {
+  parent.appendChild(child.dom!);
+}
+export function commitDeleteDom(parent: Node, child: Fiber) {
+  while (!child.dom) child = child.child!;
+  parent.removeChild(child.dom);
+}
+
+export function isEvent(key: string) {
+  return key.startsWith("on");
+}
+
+export function isProperty(key: string) {
+  return key !== "children" && !isEvent(key);
+}
+
+export function isNewProperty(prevProps: Record<string, unknown>, nextProps: Record<string, unknown>) {
+  return function (key: string) {
+    return prevProps[key] !== nextProps[key];
+  };
+}
+
+export function isDeletedProperty(prevProps: Record<string, unknown>, nextProps: Record<string, unknown>) {
+  return function (key: string) {
+    return key in prevProps && !(key in nextProps);
+  };
+}
+
+export function getEventNameFromOnEvent(onEventName: string) {
+  return onEventName.substring(2).toLowerCase();
+}
+
+export function commitDeletedEventListener(
+  dom: Node,
+  prevProps: Record<string, unknown> = {},
+  nextProps: Record<string, unknown> = {}
+) {
+  Object.keys(prevProps)
+    .filter(isEvent)
+    .filter((key) => isDeletedProperty(prevProps, nextProps)(key) || isNewProperty(prevProps, nextProps)(key))
+    .forEach((key) =>
+      dom.removeEventListener(
+        getEventNameFromOnEvent(key),
+        prevProps[key] as unknown as EventListenerOrEventListenerObject
+      )
+    );
+}
+
+export function commitAddedEventListener(
+  dom: Node,
+  prevProps: Record<string, unknown> = {},
+  nextProps: Record<string, unknown> = {}
+) {
+  Object.keys(nextProps)
+    .filter(isEvent)
+    .filter((key) => isNewProperty(prevProps, nextProps)(key))
+    .forEach((key) =>
+      dom.addEventListener(
+        getEventNameFromOnEvent(key),
+        nextProps[key] as unknown as EventListenerOrEventListenerObject
+      )
+    );
+}
+
+export function commitDeletedProperty(
+  dom: Node,
+  prevProps: Record<string, unknown> = {},
+  nextProps: Record<string, unknown> = {}
+) {
+  Object.keys(prevProps)
+    .filter(isProperty)
+    .filter((key) => isDeletedProperty(prevProps, nextProps)(key))
+    .forEach((key) => delete dom[key as keyof Node]);
+}
+
+export function commitAddedProperty(
+  dom: Node,
+  prevProps: Record<string, unknown> = {},
+  nextProps: Record<string, unknown> = {}
+) {
+  Object.keys(nextProps)
+    .filter(isProperty)
+    .filter((key) => isNewProperty(prevProps, nextProps)(key))
+    .forEach((key) => (dom[key] = nextProps[key]));
+}

context.ts

@@ -0,0 +1,25 @@
+import { Fiber } from "./fiber";
+
+type Context = {
+  recentlyCommittedRootFiber: Nullable<Fiber>;
+  unCommitedRootFiber: Nullable<Fiber>;
+  workInProgressFiber: Nullable<Fiber>;
+  hookIndex: number;
+  deletedQueue: Fiber[];
+};
+
+export const context: Context = {
+  recentlyCommittedRootFiber: null,
+  unCommitedRootFiber: null,
+  workInProgressFiber: null,
+  hookIndex: 0,
+  deletedQueue: [],
+};
+
+export function canCommit(context: Context) {
+  return context.workInProgressFiber === null && context.unCommitedRootFiber !== null;
+}
+
+export function isWorkInProgress(workInProgressFiber: Fiber | null): workInProgressFiber is Fiber {
+  return workInProgressFiber !== null;
+}

fiber.ts

@@ -0,0 +1,58 @@
+export type Fiber = {
+  type: any;
+  alternate: Nullable<Fiber>;
+  child: Nullable<Fiber>;
+  sibling: Nullable<Fiber>;
+  parent: Nullable<Fiber>;
+  effectTag: Nullable<"UPDATE" | "DELETE" | "PLACEMENT">;
+  hooks: Nullable<any[]>;
+  dom: Nullable<Node>;
+  props: Record<string, unknown> & { children: Fiber[] };
+};
+
+export function createFiber({
+  type,
+  alternate = null,
+  child = null,
+  sibling = null,
+  parent = null,
+  effectTag = null,
+  hooks = null,
+  dom = null,
+  props = { children: [] },
+}: Partial<Fiber>): Fiber {
+  return {
+    type,
+    alternate,
+    child,
+    sibling,
+    parent,
+    effectTag,
+    hooks,
+    dom,
+    props,
+  };
+}
+
+export function getNextFiber(fiber: Fiber) {
+  if (fiber.child) return fiber.child;
+
+  if (fiber.sibling) return fiber.sibling;
+
+  let nextFiber: Fiber | null = fiber;
+  for (; nextFiber !== null; nextFiber = nextFiber.parent) {
+    if (nextFiber.sibling) {
+      return nextFiber.sibling;
+    }
+  }
+
+  return null;
+}
+
+export function isFunctionComponent(fiber: Fiber) {
+  return fiber.type instanceof Function;
+}
+
+export function hasFiberHasEmptyChildren(fiber: Fiber) {
+  return fiber.props.children.length === 0;
+}

fiberReconcil.ts

@@ -0,0 +1,115 @@
+import { context } from "./context";
+import { createFiber, Fiber, hasFiberHasEmptyChildren } from "./fiber";
+
+const FirstChild = 0;
+
+export function reconcilFiberChildren(fiber: Fiber) {
+  if (!fiber.alternate) {
+    reconcilReplacedChildren(fiber, fiber.props.children);
+    return;
+  }
+
+  if (hasFiberHasEmptyChildren(fiber)) {
+    reconcilDeletedChildren(fiber.alternate.child);
+    return;
+  }
+
+  reconcilChildrenCompareToAlternate(fiber, fiber.props.children, fiber.alternate.child);
+}
+
+export function reconcilReplacedChildren(
+  parent: Fiber,
+  children: Fiber[],
+  from: number = 0,
+  prevSibling: Nullable<Fiber> = null
+) {
+  for (let idx = from; idx < children.length; idx++) {
+    const child = children[idx];
+
+    const newFiber = createFiber({
+      type: child.type,
+      props: child.props,
+      parent,
+      effectTag: "PLACEMENT",
+    });
+
+    if (idx === FirstChild) {
+      parent.child = newFiber;
+      prevSibling = newFiber;
+      continue;
+    }
+
+    prevSibling!.sibling = newFiber;
+    prevSibling = newFiber;
+  }
+}
+
+export function reconcilDeletedChildren(alternate: Nullable<Fiber>, prevSibling: Nullable<Fiber> = null) {
+  while (alternate) {
+    alternate.effectTag = "DELETE";
+    if (prevSibling) {
+      prevSibling.sibling = alternate;
+    }
+    prevSibling = alternate;
+    alternate = alternate.sibling;
+  }
+}
+
+export function reconcilChildrenCompareToAlternate(
+  parent: Fiber,
+  children: Fiber[],
+  alternate: Nullable<Fiber>
+) {
+  let prevSibling: Nullable<Fiber> = null;
+  let idx = 0;
+
+  const childrenLength = children.length;
+
+  while (idx < childrenLength && alternate) {
+    const child = children[idx];
+    const newFiber = getNewFiberByCompare(parent, alternate, child);
+
+    if (newFiber.effectTag === "PLACEMENT") {
+      alternate.effectTag = "DELETE";
+      context.deletedQueue.push(alternate);
+    }
+
+    if (idx === FirstChild) {
+      parent.child = newFiber;
+      prevSibling = newFiber;
+      idx++;
+      alternate = alternate.sibling;
+      continue;
+    }
+
+    idx++;
+    alternate = alternate.sibling;
+    prevSibling!.sibling = newFiber;
+    prevSibling = newFiber;
+  }
+
+  reconcilDeletedChildren(alternate, prevSibling);
+  reconcilReplacedChildren(parent, children, idx, prevSibling);
+}
+
+export function getNewFiberByCompare(parent: Fiber, alternate: Fiber, child: Fiber) {
+  return isUpdated(alternate, child)
+    ? createFiber({
+        type: alternate.type,
+        props: child.props,
+        dom: alternate.dom,
+        parent,
+        alternate: alternate,
+        effectTag: "UPDATE",
+      })
+    : createFiber({
+        type: child.type,
+        props: child.props,
+        parent,
+        effectTag: "PLACEMENT",
+      });
+}
+
+export function isUpdated(oldFiber: Fiber, newFiber: Fiber) {
+  return oldFiber.type === newFiber.type;
+}

fiberUpdates.ts

@@ -0,0 +1,51 @@
+import { Fiber, getNextFiber, isFunctionComponent } from "./fiber";
+import { canCommit, context, isWorkInProgress } from "./context";
+import { reconcilFiberChildren } from "./fiberReconcil";
+import { commitAddedEventListener, commitAddedProperty, commitRootFiber } from "./commitUpdate";
+
+export function updateRootFiberIfIdle(deadLine: IdleDeadline) {
+  let shouldYield = false;
+  while (context.workInProgressFiber && !shouldYield) {
+    context.workInProgressFiber = updateFiberByType(context.workInProgressFiber);
+  }
+  shouldYield = deadLine.timeRemaining() < 1;
+
+  if (canCommit(context)) {
+    commitRootFiber(context.unCommitedRootFiber!);
+    return;
+  }
+
+  requestIdleCallback(updateRootFiberIfIdle);
+}
+
+export function updateFiberByType(fiber: Fiber) {
+  const updateComponentFunction = isFunctionComponent(fiber) ? updateFunctionComponent : updateHostComponent;
+
+  updateComponentFunction(fiber);
+
+  return getNextFiber(fiber);
+}
+
+export function updateFunctionComponent(fiber: Fiber) {
+  if (!isWorkInProgress(context.workInProgressFiber)) return;
+  context.workInProgressFiber.hooks = [];
+  context.hookIndex = 0;
+
+  fiber.props.children = [fiber.type(fiber.props)];
+  reconcilFiberChildren(fiber);
+}
+export function updateHostComponent(fiber: Fiber) {
+  fiber.dom = fiber.dom ?? createDom(fiber);
+
+  reconcilFiberChildren(fiber);
+}
+
+export function createDom(fiber: Fiber) {
+  const dom: Node =
+    fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);
+
+  commitAddedProperty(dom, {}, fiber.props);
+  commitAddedEventListener(dom, {}, fiber.props);
+
+  return dom;
+}

global.d.ts

@@ -0,0 +1 @@
+type Nullable<T> = T | null;