Use counter per boundary for id generation

preactjs · Oct 25, 2022 · 8c04d9a · 8c04d9a
1 parent f6f4bee
commit 8c04d9a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/hooks/src/index.js b/hooks/src/index.js
@@ -1,4 +1,4 @@
-import { Fragment, options } from 'preact';
+import { options } from 'preact';
 
 /** @type {number} */
 let currentIndex;
@@ -374,26 +374,15 @@ export function useId() {
 		// the root node.
 		/** @type {import('./internal.d').VNode} */
 		let root = currentComponent._vnode;
-		let parent = root._parent;
-		let i = 0;
-		while (parent !== null) {
-			if (parent.type !== Fragment && typeof parent.type === 'function') {
-				i++;
-			}
-
-			root = parent;
-			parent = parent._parent;
+		while (root !== null && root._parent !== null) {
+			root = root._parent;
 		}
 
 		// Attach the id usage array to the root node and resize it to fit
-		let ids = root._mask || (root._mask = [0]);
-		while (ids.length < i) {
-			ids.push(0);
-		}
+		let mask = root._mask || (root._mask = [0, 0]);
 
 		// Increase the current component depth pointer
-		ids[i - 1]++;
-		state._value = 'P' + ids.join('') + currentIndex;
+		state._value = 'P' + mask[0] + mask[1]++ + currentIndex;
 	}
 
 	return state._value;

diff --git a/hooks/src/internal.d.ts b/hooks/src/internal.d.ts
@@ -39,7 +39,7 @@ export interface Component extends PreactComponent<any, any> {
 }
 
 export interface VNode extends PreactVNode {
-	_mask?: number[];
+	_mask?: [number, number];
 }
 
 export type HookState =

diff --git a/hooks/test/browser/useId.test.js b/hooks/test/browser/useId.test.js
@@ -55,12 +55,12 @@ describe('useId', () => {
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="P01"><div id="P11"><span id="P22">h</span></div></div>'
+			'<div id="P001"><div id="P011"><span id="P022">h</span></div></div>'
 		);
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="P01"><div id="P11"><span id="P22">h</span></div></div>'
+			'<div id="P001"><div id="P011"><span id="P022">h</span></div></div>'
 		);
 	});
 
@@ -83,12 +83,12 @@ describe('useId', () => {
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="P01"><span id="P11">h</span><span id="P21">h</span><span id="P31">h</span></div>'
+			'<div id="P001"><span id="P011">h</span><span id="P021">h</span><span id="P031">h</span></div>'
 		);
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="P01"><span id="P11">h</span><span id="P21">h</span><span id="P31">h</span></div>'
+			'<div id="P001"><span id="P011">h</span><span id="P021">h</span><span id="P031">h</span></div>'
 		);
 	});
 
@@ -121,13 +121,13 @@ describe('useId', () => {
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="P01"><div><span id="P011">h</span></div></div>'
+			'<div id="P001"><div><span id="P011">h</span></div></div>'
 		);
 
 		set(true);
 		rerender();
 		expect(scratch.innerHTML).to.equal(
-			'<div id="P01"><div><span id="P011">h</span><span id="P021">h</span></div></div>'
+			'<div id="P001"><div><span id="P011">h</span><span id="P021">h</span></div></div>'
 		);
 	});
 
@@ -332,13 +332,16 @@ describe('useId', () => {
 			return <Fragment>{children}</Fragment>;
 		};
 
+		const ids = [];
 		function Foo() {
 			const id = useId();
+			ids.push(id);
 			return <p>{id}</p>;
 		}
 
 		function App() {
 			const id = useId();
+			ids.push(id);
 			return (
 				<div>
 					<p>{id}</p>
@@ -350,7 +353,7 @@ describe('useId', () => {
 		}
 
 		render(<App />, scratch);
-		expect(scratch.innerHTML).to.equal('<div><p>P01</p><p>P011</p></div>');
+		expect(ids[0]).not.to.equal(ids[1]);
 	});
 
 	it('should skip over HTML', () => {
@@ -376,7 +379,7 @@ describe('useId', () => {
 		}
 
 		render(<App />, scratch);
-		expect(ids).to.deep.equal(['P11', 'P21']);
+		expect(ids[0]).not.to.equal(ids[1]);
 	});
 
 	it('should reset for each renderToString roots', () => {