Manually track children's index & fix parent pointers when rerendering components

jsx-runtime/src/index.js

@@ -53,6 +53,7 @@ function createVNode(type, props, key, isStaticChildren, __source, __self) {
 		_hydrating: null,
 		constructor: undefined,
 		_original: --vnodeId,
+		_index: -1,
 		__source,
 		__self
 	};

mangle.json

@@ -54,6 +54,7 @@
       "$_dom": "__e",
       "$_hydrating": "__h",
       "$_component": "__c",
+      "$_index": "__i",
       "$__html": "__html",
       "$_parent": "__",
       "$_pendingError": "__E",

src/component.js

@@ -91,7 +91,7 @@ export function getDomSibling(vnode, childIndex) {
 	if (childIndex == null) {
 		// Use childIndex==null as a signal to resume the search from the vnode's sibling
 		return vnode._parent
-			? getDomSibling(vnode._parent, vnode._parent._children.indexOf(vnode) + 1)
+			? getDomSibling(vnode._parent, vnode._index + 1)
 			: null;
 	}
 
@@ -103,7 +103,7 @@ export function getDomSibling(vnode, childIndex) {
 			// Since updateParentDomPointers keeps _dom pointer correct,
 			// we can rely on _dom to tell us if this subtree contains a
 			// rendered DOM node, and what the first rendered DOM node is
-			return sibling._nextDom || sibling._dom;
+			return sibling._dom;
 		}
 	}
 
@@ -130,6 +130,12 @@ function renderComponent(component) {
 		const oldVNode = assign({}, vnode);
 		oldVNode._original = vnode._original + 1;
 
+		if (oldVNode._children) {
+			oldVNode._children.forEach(child => {
+				if (child) child._parent = oldVNode;
+			});
+		}
+
 		diff(
 			parentDom,
 			vnode,

src/create-element.js

@@ -72,7 +72,8 @@ export function createVNode(type, props, key, ref, original) {
 		_component: null,
 		_hydrating: null,
 		constructor: undefined,
-		_original: original == null ? ++vnodeId : original
+		_original: original == null ? ++vnodeId : original,
+		_index: -1
 	};
 
 	// Only invoke the vnode hook if this was *not* a direct copy:

src/diff/children.js

@@ -40,7 +40,9 @@ export function diffChildren(
 ) {
 	let i,
 		j,
+		/** @type {import('../internal').VNode} */
 		oldVNode,
+		/** @type {import('../internal').VNode} */
 		childVNode,
 		newDom,
 		firstChildDom,
@@ -111,7 +113,6 @@ export function diffChildren(
 			oldVNode = oldChildren[i];
 			if (oldVNode && oldVNode.key == null && oldVNode._dom) {
 				if (oldVNode._dom == oldDom) {
-					oldVNode._parent = oldParentVNode;
 					oldDom = getDomSibling(oldVNode);
 				}
 
@@ -124,6 +125,7 @@ export function diffChildren(
 
 		childVNode._parent = newParentVNode;
 		childVNode._depth = newParentVNode._depth + 1;
+		childVNode._index = i;
 
 		let skewedIndex = i + skew;
 		const matchingIndex = findMatchingIndex(

src/internal.d.ts

@@ -122,6 +122,7 @@ export interface VNode<P = {}> extends preact.VNode<P> {
 	_hydrating: boolean | null;
 	constructor: undefined;
 	_original: number;
+	_index: number;
 }
 
 export interface Component<P = {}, S = {}> extends preact.Component<P, S> {

test/browser/fragments.test.js

@@ -677,6 +677,84 @@ describe('Fragment', () => {
 		);
 	});
 
+	it('should preserve order for fragment switching with sibling DOM', () => {
+		/** @type {() => void} */
+		let set;
+		class Foo extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { isLoading: true, data: null };
+				set = this.setState.bind(this);
+			}
+			render(props, { isLoading, data }) {
+				return (
+					<Fragment>
+						<div>HEADER</div>
+						{isLoading ? <div>Loading...</div> : null}
+						{data ? <div>Content: {data}</div> : null}
+						<div>FOOTER</div>
+					</Fragment>
+				);
+			}
+		}
+
+		render(<Foo />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<div>HEADER</div><div>Loading...</div><div>FOOTER</div>'
+		);
+
+		set({ isLoading: false, data: 2 });
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<div>HEADER</div><div>Content: 2</div><div>FOOTER</div>'
+		);
+	});
+
+	it('should preserve order for fragment switching with sibling Components', () => {
+		/** @type {() => void} */
+		let set;
+		class Foo extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { isLoading: true, data: null };
+				set = this.setState.bind(this);
+			}
+			render(props, { isLoading, data }) {
+				return (
+					<Fragment>
+						<div>HEADER</div>
+						{isLoading ? <div>Loading...</div> : null}
+						{data ? <div>Content: {data}</div> : null}
+					</Fragment>
+				);
+			}
+		}
+
+		function Footer() {
+			return <div>FOOTER</div>;
+		}
+
+		function App() {
+			return (
+				<Fragment>
+					<Foo />
+					<Footer />
+				</Fragment>
+			);
+		}
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<div>HEADER</div><div>Loading...</div><div>FOOTER</div>'
+		);
+
+		set({ isLoading: false, data: 2 });
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<div>HEADER</div><div>Content: 2</div><div>FOOTER</div>'
+		);
+	});
+
 	it('should preserve order for nested fragment switching w/ child return', () => {
 		let set;
 		const Wrapper = ({ children }) => <Fragment>{children}</Fragment>;