useId hook

hooks/src/index.d.ts

@@ -137,3 +137,5 @@ export function useDebugValue<T>(value: T, formatter?: (value: T) => any): void;
 export function useErrorBoundary(
 	callback?: (error: any) => Promise<void> | void
 ): [any, () => void];
+
+export function useId(): string;

hooks/src/index.js

@@ -14,6 +14,9 @@ let previousInternal;
 /** @type {number} */
 let currentHook = 0;
 
+/** @type {number} */
+let currentIdCounter = 0;
+
 /** @type {Array<import('./internal').Component>} */
 let afterPaintEffects = [];
 
@@ -353,6 +356,24 @@ export function useErrorBoundary(cb) {
 	];
 }
 
+export function useId() {
+	const state = getHookState(currentIndex++, 11);
+	if (!state._id) {
+		currentIdCounter++;
+
+		console.log(
+			currentInternal,
+			currentInternal._parent._children.indexOf(currentInternal)
+		);
+		state._id =
+			'_P' +
+			(currentInternal._parent._children.indexOf(currentInternal) +
+				currentInternal._depth +
+				currentIdCounter);
+	}
+	return state._id;
+}
+
 /**
  * After paint effects consumer.
  */

hooks/test/browser/useId.test.js

@@ -0,0 +1,91 @@
+import { createElement, render } from 'preact';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
+import { useId } from 'preact/hooks';
+
+/** @jsx createElement */
+
+describe('useId', () => {
+	/** @type {HTMLDivElement} */
+	let scratch;
+
+	beforeEach(() => {
+		scratch = setupScratch();
+	});
+
+	afterEach(() => {
+		teardown(scratch);
+	});
+
+	it('keeps the id consistent after an update', () => {
+		function Comp() {
+			const id = useId();
+			return <div id={id} />;
+		}
+
+		render(<Comp />, scratch);
+		const id = scratch.firstChild.getAttribute('id');
+		expect(scratch.firstChild.getAttribute('id')).to.equal(id);
+
+		render(<Comp />, scratch);
+		expect(scratch.firstChild.getAttribute('id')).to.equal(id);
+	});
+
+	it('ids are unique according to dom-depth', () => {
+		function Child() {
+			const id = useId();
+			const spanId = useId();
+			return (
+				<div id={id}>
+					<span id={spanId}>h</span>
+				</div>
+			);
+		}
+
+		function Comp() {
+			const id = useId();
+			return (
+				<div id={id}>
+					<Child />
+				</div>
+			);
+		}
+
+		render(<Comp />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<div id="_P3"><div id="_P6"><span id="_P7">h</span></div></div>'
+		);
+
+		render(<Comp />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<div id="_P3"><div id="_P6"><span id="_P7">h</span></div></div>'
+		);
+	});
+
+	it('ids are unique across siblings', () => {
+		function Child() {
+			const id = useId();
+			return <span id={id}>h</span>;
+		}
+
+		function Comp() {
+			const id = useId();
+			return (
+				<div id={id}>
+					<Child />
+					<Child />
+					<Child />
+				</div>
+			);
+		}
+
+		render(<Comp />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<div id="_P6"><span id="_P9">h</span><span id="_P11">h</span><span id="_P13">h</span></div>'
+		);
+
+		render(<Comp />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<div id="_P6"><span id="_P9">h</span><span id="_P11">h</span><span id="_P13">h</span></div>'
+		);
+	});
+});

mangle.json

@@ -65,6 +65,7 @@
       "$_originalParentDom": "__O",
       "$_prevState": "__u",
       "$_root": "__",
+      "$_rootId": "__ri",
       "$_diff": "__b",
       "$_commit": "__c",
       "$_addHookName": "__a",

server/jsx.js

@@ -1 +1 @@
-module.exports = require('./dist/jsx'); // eslint-disable-line
+module.exports = require('./dist/server'); // eslint-disable-line

server/src/index.d.ts

@@ -1,26 +1,16 @@
 import { VNode } from 'preact';
 
-export interface Options {
+interface Options {
 	shallow?: boolean;
 	xml?: boolean;
 	pretty?: boolean | string;
 }
 
-type RenderFn = (vnode: VNode, context?: any, options?: Options) => string;
-export const render: RenderFn;
-export const renderToString: RenderFn;
-export const renderToStaticMarkup: RenderFn;
-
-export function shallowRender(vnode: VNode, context?: any): string;
-
-export interface JsxOptions extends Options {
-	functions?: boolean;
-	functionNames?: boolean;
-	skipFalseAttributes?: boolean;
-}
-
-export function renderToJsxString(
+export function render(vnode: VNode, context?: any, options?: Options): string;
+export function renderToString(
 	vnode: VNode,
 	context?: any,
-	options: JsxOptions
+	options?: Options
 ): string;
+export function shallowRender(vnode: VNode, context?: any): string;
+export default render;