fix: noop-renderer support Fragment

BetaSu · BetaSu · commit 725e09df9458 · 2023-01-17T18:04:36.000+08:00
diff --git a/demos/noop-renderer/index.html b/demos/noop-renderer/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>noop-renderer测试</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="main.tsx"></script>
+</body>
+
+</html>
diff --git a/demos/noop-renderer/main.tsx b/demos/noop-renderer/main.tsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import * as ReactNoop from 'react-noop-renderer';
+
+const root = ReactNoop.createRoot();
+
+function Parent() {
+	return (
+		<>
+			<Child />
+			<div>hello world</div>
+		</>
+	);
+}
+
+function Child() {
+	return 'Child';
+}
+
+root.render(<Parent />);
+
+window.root = root;
diff --git a/demos/noop-renderer/vite-env.d.ts b/demos/noop-renderer/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/demos/vite.config.js b/demos/vite.config.js
@@ -26,11 +26,16 @@ export default defineConfig({
 				find: 'react-reconciler',
 				replacement: path.resolve(__dirname, '../packages/react-reconciler')
 			},
+			{
+				find: 'react-noop-renderer',
+				replacement: path.resolve(__dirname, '../packages/react-noop-renderer')
+			},
 			{
 				find: 'hostConfig',
 				replacement: path.resolve(
 					__dirname,
-					'../packages/react-dom/src/hostConfig.ts'
+					'../packages/react-noop-renderer/src/hostConfig.ts'
+					// '../packages/react-dom/src/hostConfig.ts'
 				)
 			}
 		]
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
 	"license": "MIT",
 	"scripts": {
 		"build:dev": "rm -rf dist && rollup --config scripts/rollup/dev.config.js",
-		"demo": "vite serve demos/fragment --config demos/vite.config.js --force",
+		"demo": "vite serve demos/noop-renderer --config demos/vite.config.js --force",
 		"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages",
 		"test": "jest --config scripts/jest/jest.config.js"
 	},
diff --git a/packages/react-dom/src/SyntheticEvent.ts b/packages/react-dom/src/SyntheticEvent.ts
@@ -29,7 +29,7 @@ export interface DOMElement extends Element {
 function createSyntheticEvent(e: Event): SyntheticEvent {
 	const syntheticEvent = e as SyntheticEvent;
 	syntheticEvent.__stopPropagation = false;
-	const originStopPropagation = e.stopPropagation;
+	const originStopPropagation = e.stopPropagation.bind(e);
 
 	syntheticEvent.stopPropagation = () => {
 		syntheticEvent.__stopPropagation = true;
diff --git a/packages/react-noop-renderer/src/ReactNoop.ts b/packages/react-noop-renderer/src/ReactNoop.ts
@@ -1,5 +1,5 @@
 import { ReactElement } from 'shared/ReactTypes';
-import { REACT_ELEMENT_TYPE } from 'shared/ReactSymbols';
+import { REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE } from 'shared/ReactSymbols';
 import Reconciler from 'react-reconciler';
 import * as Scheduler from 'scheduler';
 import { Container, Instance } from './hostConfig';
@@ -9,35 +9,34 @@ let idCounter = 0;
 export function createRoot() {
 	const container: Container = {
 		rootID: idCounter++,
-		pendingChildren: [],
 		children: []
 	};
 	const root = Reconciler.createContainer(container);
 
-	function getChildren(root: Container) {
-		if (root) {
-			return root.children;
+	function getChildren(parent: Container | Instance) {
+		if (parent) {
+			return parent.children;
 		}
 		return null;
 	}
 
 	function getChildrenAsJSX(root: Container) {
 		const children = childToJSX(getChildren(root));
-		if (children === null) {
-			return null;
-		}
 		if (Array.isArray(children)) {
-			// 对应混合了Instance与TextInstance，应该用Fragment处理
-			console.error('TODO Fragment的case，还未实现');
+			return {
+				$$typeof: REACT_ELEMENT_TYPE,
+				type: REACT_FRAGMENT_TYPE,
+				key: null,
+				ref: null,
+				props: { children },
+				__mark: 'KaSong'
+			};
 		}
 		return children;
 	}
 
 	// 递归将整棵子树变为JSX
 	function childToJSX(child: any): any {
-		if (child === null) {
-			return null;
-		}
 		if (['string', 'number'].includes(typeof child)) {
 			return child;
 		}
@@ -58,7 +57,6 @@ export function createRoot() {
 		}
 		// 这是Instance
 		if (Array.isArray(child.children)) {
-			// This is an instance.
 			const instance: Instance = child;
 			const children = childToJSX(instance.children);
 			const props = instance.props;
@@ -71,7 +69,7 @@ export function createRoot() {
 				type: instance.type,
 				key: null,
 				ref: null,
-				props: props,
+				props,
 				__mark: 'KaSong'
 			};
 		}
diff --git a/packages/react-noop-renderer/src/hostConfig.ts b/packages/react-noop-renderer/src/hostConfig.ts
@@ -1,6 +1,5 @@
 export interface Container {
 	rootID: number;
-	pendingChildren: (Instance | TextInstance)[];
 	children: (Instance | TextInstance)[];
 }
 export interface Instance {
@@ -17,15 +16,14 @@ export interface TextInstance {
 }
 
 import { FiberNode } from 'react-reconciler/src/fiber';
-import { DefaultLane } from 'react-reconciler/src/fiberLanes';
 import { HostText } from 'react-reconciler/src/workTags';
 
 let instanceCounter = 0;
 
 export const createInstance = (type: string, props: any): Instance => {
 	const instance = {
 		id: instanceCounter++,
-		type: type,
+		type,
 		children: [],
 		parent: -1,
 		props

Original file line number	Diff line number	Diff line change
`@@ -26,11 +26,16 @@ export default defineConfig({`
`26`	`26`	`find: 'react-reconciler',`
`27`	`27`	`replacement: path.resolve(__dirname, '../packages/react-reconciler')`
`28`	`28`	`},`
	`29`	`+ {`
	`30`	`+ find: 'react-noop-renderer',`
	`31`	`+ replacement: path.resolve(__dirname, '../packages/react-noop-renderer')`
	`32`	`+ },`
`29`	`33`	`{`
`30`	`34`	`find: 'hostConfig',`
`31`	`35`	`replacement: path.resolve(`
`32`	`36`	`__dirname,`
`33`		`- '../packages/react-dom/src/hostConfig.ts'`
	`37`	`+ '../packages/react-noop-renderer/src/hostConfig.ts'`
	`38`	`+ // '../packages/react-dom/src/hostConfig.ts'`
`34`	`39`	`)`
`35`	`40`	`}`
`36`	`41`	`]`