Fix duplicate ids when Fragments are involved

hooks/src/index.js

@@ -1,4 +1,4 @@
-import { Fragment, options } from 'preact';
+import { options } from 'preact';
 
 /** @type {number} */
 let currentIndex;
@@ -30,7 +30,8 @@ options._diff = vnode => {
 	if (
 		typeof vnode.type === 'function' &&
 		!vnode._mask &&
-		vnode.type !== Fragment
+		// Ignore root Fragment node
+		vnode._parent !== null
 	) {
 		vnode._mask =
 			(vnode._parent && vnode._parent._mask ? vnode._parent._mask : '') +

hooks/test/browser/useId.test.js

@@ -272,6 +272,84 @@ describe('useId', () => {
 
 		scratch.innerHTML = rtsOutput;
 		hydrate(<Component />, scratch);
-		expect(rtsOutput === scratch.innerHTML).to.equal(true);
+		expect(rtsOutput).to.equal(scratch.innerHTML);
+	});
+
+	it('should be unique across Fragments', () => {
+		const ids = [];
+		function Foo() {
+			const id = useId();
+			ids.push(id);
+			return <p>{id}</p>;
+		}
+
+		function App() {
+			return (
+				<div>
+					<Foo />
+					<Fragment>
+						<Foo />
+					</Fragment>
+				</div>
+			);
+		}
+
+		render(<App />, scratch);
+
+		expect(ids[0]).not.to.equal(ids[1]);
+	});
+
+	it('should match implicite Fragments with RTS', () => {
+		function Foo() {
+			const id = useId();
+			return <p>{id}</p>;
+		}
+
+		function Bar(props) {
+			return props.children;
+		}
+
+		function App() {
+			return (
+				<Bar>
+					<Foo />
+					<Fragment>
+						<Foo />
+					</Fragment>
+				</Bar>
+			);
+		}
+
+		const rtsOutput = rts(<App />);
+
+		scratch.innerHTML = rtsOutput;
+		hydrate(<App />, scratch);
+		expect(rtsOutput).to.equal(scratch.innerHTML);
+	});
+
+	it('should skip component top level Fragment child', () => {
+		const Wrapper = ({ children }) => {
+			return <Fragment>{children}</Fragment>;
+		};
+
+		function Foo() {
+			const id = useId();
+			return <p>{id}</p>;
+		}
+
+		function App() {
+			const id = useId();
+			return (
+				<div>
+					<p>{id}</p>
+					<Wrapper>
+						<Foo />
+					</Wrapper>
+				</div>
+			);
+		}
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.equal('<div><p>P481</p><p>P476951</p></div>');
 	});
 });

package.json

@@ -294,7 +294,7 @@
 		"mocha": "^8.2.1",
 		"npm-merge-driver-install": "^1.1.1",
 		"npm-run-all": "^4.0.0",
-		"preact-render-to-string": "^5.2.4",
+		"preact-render-to-string": "^5.2.5",
 		"prettier": "^1.18.2",
 		"prop-types": "^15.7.2",
 		"sade": "^1.7.4",