namespace by rootId and add depth

preactjs · Mar 20, 2022 · e9c1876 · e9c1876
1 parent ab2ed5d
commit e9c1876
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/hooks/src/index.js b/hooks/src/index.js
@@ -358,11 +358,10 @@ export function useId() {
 
 		state._id =
 			'_P' +
-			(
-				currentInternal._rootId +
-				currentInternal._parent._children.indexOf(currentInternal) +
-				currentIdCounter
-			).toString(32);
+			currentInternal._rootId +
+			(currentInternal._parent._children.indexOf(currentInternal) +
+				currentInternal._depth +
+				currentIdCounter);
 	}
 	return state._id;
 }

diff --git a/hooks/test/browser/useId.test.js b/hooks/test/browser/useId.test.js
@@ -52,12 +52,12 @@ describe('useId', () => {
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="_P3"><div id="_P4"><span id="_P5">h</span></div></div>'
+			'<div id="_P13"><div id="_P16"><span id="_P17">h</span></div></div>'
 		);
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="_P3"><div id="_P4"><span id="_P5">h</span></div></div>'
+			'<div id="_P13"><div id="_P16"><span id="_P17">h</span></div></div>'
 		);
 	});
 
@@ -80,12 +80,12 @@ describe('useId', () => {
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="_P6"><span id="_P7">h</span><span id="_P9">h</span><span id="_Pb">h</span></div>'
+			'<div id="_P16"><span id="_P19">h</span><span id="_P111">h</span><span id="_P113">h</span></div>'
 		);
 
 		render(<Comp />, scratch);
 		expect(scratch.innerHTML).to.equal(
-			'<div id="_P6"><span id="_P7">h</span><span id="_P9">h</span><span id="_Pb">h</span></div>'
+			'<div id="_P16"><span id="_P19">h</span><span id="_P111">h</span><span id="_P113">h</span></div>'
 		);
 	});
 });