feat: init react-dom

package.json

@@ -6,14 +6,15 @@
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"lint": "eslint --ext .jsx,.ts,.js,.tsx --fix --quiet ./packages",
-		"build:dev": "rimraf dist && rollup --bundleConfigAsCjs --config scripts/rollup/react.config.js"
+		"build:dev": "rimraf dist && rollup --bundleConfigAsCjs --config scripts/rollup/dev.config.js"
 	},
 	"keywords": [],
 	"author": "",
 	"license": "ISC",
 	"devDependencies": {
 		"@commitlint/cli": "^18.2.0",
 		"@commitlint/config-conventional": "^18.1.0",
+		"@rollup/plugin-alias": "^5.0.1",
 		"@rollup/plugin-commonjs": "^25.0.7",
 		"@rollup/plugin-replace": "^5.0.5",
 		"@types/node": "^20.8.10",

packages/react-dom/index.ts

@@ -0,0 +1,8 @@
+/*
+ * @Author: chenjianfeng chenjianfeng93@163.com
+ * @Date: 2023-11-07 23:33:32
+ * @Description:
+ */
+import * as ReactDOM from './src/root'
+
+export default ReactDOM

packages/react-dom/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "react-dom",
+	"version": "1.0.0",
+	"description": "",
+	"module": "index.ts",
+	"dependencies": {
+		"shared": "workspace:*",
+		"react-reconciler": "workspace:*"
+	},
+	"peerDependencies": {
+		"react": "workspace:*"
+	},
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}

packages/react-dom/src/hostConfig.ts

@@ -0,0 +1,26 @@
+/*
+ * @Author: chenjianfeng chenjianfeng93@163.com
+ * @Date: 2023-11-03 14:58:51
+ * @Description:
+ */
+export type Container = Element
+export type Instance = Element
+
+// export const createInstance = (type: string, props: any): Instance => {
+export const createInstance = (type: string): Instance => {
+	const element = document.createElement(type)
+	return element
+}
+
+export const appendInitialChild = (
+	parent: Instance | Container,
+	child: Instance
+) => {
+	parent.appendChild(child)
+}
+
+export const createTextInstance = (content: string) => {
+	return document.createTextNode(content)
+}
+
+export const appendChildToContainer = appendInitialChild

packages/react-dom/src/root.ts

@@ -0,0 +1,21 @@
+/*
+ * @Author: chenjianfeng chenjianfeng93@163.com
+ * @Date: 2023-11-07 22:25:43
+ * @Description:
+ */
+import {
+	createContainer,
+	updateContainer
+} from 'react-reconciler/src/fiberReconciler'
+import { Container } from './hostConfig'
+import { ReactElementType } from 'shared/ReactTypes'
+
+export const createRoot = (container: Container) => {
+	const root = createContainer(container)
+
+	return {
+		render(element: ReactElementType) {
+			updateContainer(element, root)
+		}
+	}
+}

packages/react-reconciler/src/beginWork.ts

@@ -19,6 +19,7 @@ export const beginWork = (wip: FiberNode) => {
 				console.warn('unknown type by beginWork')
 			}
 	}
+	return null
 }
 
 const updateHostRoot = (wip: FiberNode) => {

packages/react-reconciler/src/commitWork.ts

@@ -0,0 +1,96 @@
+/*
+ * @Author: chenjianfeng chenjianfeng93@163.com
+ * @Date: 2023-11-07 16:04:55
+ * @Description:
+ */
+import { Container, appendChildToContainer } from 'hostConfig'
+import { FiberNode, FiberRootNode } from './fiber'
+import { MutationMask, NoFlags, Placement } from './fiberFlags'
+import { HostComponent, HostRoot, HostText } from './workTags'
+
+export const commitMutationEffects = (finishedWork: FiberNode) => {
+	let nextEffect = finishedWork
+
+	while (nextEffect !== null) {
+		const child = nextEffect.child
+		if (
+			(nextEffect.subtreeFlags & MutationMask) !== NoFlags &&
+			child !== null
+		) {
+			nextEffect = child
+		} else {
+			up: while (nextEffect !== null) {
+				commitMutationEffectsOnFiber(nextEffect)
+				const sibling = nextEffect.sibling
+				if (sibling !== null) {
+					nextEffect = sibling
+					break up
+				}
+				nextEffect = nextEffect.return!
+			}
+		}
+	}
+}
+
+const commitMutationEffectsOnFiber = (finishedWork: FiberNode) => {
+	const flags = finishedWork.flags
+	if ((flags & Placement) !== NoFlags) {
+		commitPlacement(finishedWork)
+		// remove Placement from flags
+		finishedWork.flags &= ~Placement
+	}
+
+	// update
+
+	// childDelection
+}
+
+const commitPlacement = (finishedWork: FiberNode) => {
+	// insert dom to parent's dom
+	if (__DEV__) {
+		console.warn('execute Placement operation')
+	}
+
+	const hostParent = getHostParent(finishedWork)
+	if (hostParent) {
+		appendPlacementNodeIntoContainer(finishedWork, hostParent)
+	}
+}
+
+const getHostParent = (fiber: FiberNode): Container | null => {
+	let parent = fiber.return
+	while (parent) {
+		const parentTag = parent.tag
+		if (parentTag === HostComponent) {
+			return parent.stateNode
+		}
+		if (parentTag === HostRoot) {
+			return (parent.stateNode as FiberRootNode).container
+		}
+		parent = parent.return
+	}
+	if (__DEV__) {
+		console.warn('can not find host parent')
+	}
+
+	return null
+}
+
+const appendPlacementNodeIntoContainer = (
+	finishedWork: FiberNode,
+	hostParent: Container
+) => {
+	if (finishedWork.tag === HostComponent || finishedWork.tag === HostText) {
+		appendChildToContainer(hostParent, finishedWork.stateNode)
+		return
+	}
+	const child = finishedWork.child
+	if (child !== null) {
+		appendPlacementNodeIntoContainer(child, hostParent)
+		let sibling = child.sibling
+		while (sibling !== null) {
+			appendPlacementNodeIntoContainer(sibling, hostParent)
+			sibling = sibling.sibling
+		}
+	}
+}

packages/react-reconciler/src/completeWork.ts

@@ -1,7 +1,8 @@
 import {
 	createInstance,
 	appendInitialChild,
-	createTextInstance
+	createTextInstance,
+	Container
 } from 'hostConfig'
 import { FiberNode } from './fiber'
 import { HostComponent, HostRoot, HostText } from './workTags'
@@ -20,7 +21,8 @@ export const completeWork = (wip: FiberNode) => {
 				// update
 			} else {
 				// 1. create Dom 2. insert dom
-				const instance = createInstance(wip.type, newProps)
+				// 				const instance = createInstance(wip.type, newProps)
+				const instance = createInstance(wip.type)
 				appendAllChildren(instance, wip)
 				wip.stateNode = instance
 			}
@@ -39,7 +41,7 @@ export const completeWork = (wip: FiberNode) => {
 	}
 }
 
-const appendAllChildren = (parent: FiberNode, wip: FiberNode) => {
+const appendAllChildren = (parent: Container, wip: FiberNode) => {
 	let node = wip.child
 	while (node !== null) {
 		if (node.tag === HostComponent || node.tag === HostText) {

packages/react-reconciler/src/fiberFlags.ts

@@ -9,3 +9,5 @@ export const NoFlags = 0b0000001
 export const Placement = 0b0000010
 export const Update = 0b0000100
 export const ChildDeletion = 0b0010000
+
+export const MutationMask = Placement | Update | ChildDeletion

packages/react-reconciler/src/fiberReconciler.ts

@@ -14,10 +14,11 @@ import {
 } from './updateQueue'
 import { ReactElementType } from 'shared/ReactTypes'
 import { scheduleUpdateOnFiber } from './workLoop'
+import { HostRoot } from './workTags'
 
 // ReactDom.createRoot
 export const createContainer = (container: Container) => {
-	const hostRootFiber = new FiberNode(container, {}, null)
+	const hostRootFiber = new FiberNode(HostRoot, {}, null)
 	const root = new FiberRootNode(container, hostRootFiber)
 	hostRootFiber.updateQueue = createUpdateQueue()
 

packages/react-reconciler/src/workLoop.ts

@@ -7,6 +7,7 @@ import { FiberNode, FiberRootNode, crateWorkInProgress } from './fiber'
 import { beginWork } from './beginWork'
 import { completeWork } from './completeWork'
 import { HostRoot } from './workTags'
+import { MutationMask, NoFlags } from './fiberFlags'
 
 let workInProgress: FiberNode | null = null
 
@@ -49,11 +50,39 @@ export const renderRoot = (root: FiberRootNode) => {
 	} while (true)
 
 	const finishedWork = root.current.alternate
+	// finishedWork is wip
 	root.finishedWork = finishedWork
 
 	commitRoot(root)
 }
 
+const commitRoot = (root: FiberRootNode) => {
+	// 1. switch fiber tree
+	// 2. execute Placement operation
+	const finishedWork = root.finishedWork
+	if (finishedWork === null) return
+	if (__DEV__) console.warn('commit start', finishedWork)
+
+	// reset
+	root.finishedWork = null
+
+	const subtreeHasEffect =
+		(finishedWork.subtreeFlags & MutationMask) !== NoFlags
+	const rootHasEffect = (finishedWork.flags & MutationMask) !== NoFlags
+
+	if (subtreeHasEffect || rootHasEffect) {
+		// beforeMutation
+		// mutation
+
+		// switch fiber tree
+		// hostRootNode
+		root.current = finishedWork
+		// layout
+	} else {
+		root.current = finishedWork
+	}
+}
+
 const workLoop = () => {
 	while (workInProgress !== null) {
 		performUnitOfWork(workInProgress)