11392576677

Committed 17 Oct 2024 08:31PM UTC coverage: 85.38%. Remained the same

Build # 11392576677

Build Type

push

github

Committed by

web-flow

Commit Message

v1.6.5

**Fixes**

- Updates id generation to reduce risk of id collision #471

Run Details

1300 of 1694 branches covered (76.74%)

Branch coverage included in aggregate %.

3 of 6 new or added lines in 3 files covered. (50.0%)

1871 of 2020 relevant lines covered (92.62%)

149.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

37.5

/src/hooks/useId.ts

// Copied with minor modifications from
// https://github.com/reach/reach-ui/blob/dev/packages/auto-id/src/reach-auto-id.ts

import React, { useEffect, useState } from "react";
import { useLayoutEffect } from "./useLayoutEffect";

let serverHandoffComplete = false;
let id = 0;
function genId(baseName: string): string {
  ++id;
  return baseName + '-' + id.toString();
}

// Workaround for https://github.com/webpack/webpack/issues/14814
// https://github.com/eps1lon/material-ui/blob/8d5f135b4d7a58253a99ab56dce4ac8de61f5dc1/packages/mui-utils/src/useId.ts#L21
const maybeReactUseId: undefined | (() => string) = (React as any)[
  "useId".toString()
];

/**
 * useId
 *
 * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
 *
 * Note: The returned ID will initially be empty string and will update after a
 * component mounts.
 *
 * @see Docs https://reach.tech/auto-id
 */

export function useId(baseName: string): string {
  if (maybeReactUseId !== undefined) {
    return maybeReactUseId();
  }

  // If this instance isn't part of the initial render, we don't have to do the
  // double render/patch-up dance. We can just generate the ID and return it.
  const initialId = (serverHandoffComplete ? genId(baseName) : '');
  const [id, setId] = useState(initialId);

  useLayoutEffect(() => {
    if (id === '') {
      // Patch the ID after render. We do this in `useLayoutEffect` to avoid any
      // rendering flicker, though it'll make the first render slower (unlikely
      // to matter, but you're welcome to measure your app and let us know if
      // it's a problem).
      setId(genId(baseName));
    }
  }, [id]);

  useEffect(() => {
    if (serverHandoffComplete === false) {
      // Flag all future uses of `useId` to skip the update dance. This is in
      // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
      // accidentally bail out of the patch-up dance prematurely.
      serverHandoffComplete = true;
    }
  }, []);

  return id;
}

1	// Copied with minor modifications from
2	// https://github.com/reach/reach-ui/blob/dev/packages/auto-id/src/reach-auto-id.ts
3
4	import React, { useEffect, useState } from "react";	12✔
5	import { useLayoutEffect } from "./useLayoutEffect";	12✔
6
7	let serverHandoffComplete = false;	12✔
8	let id = 0;	12✔
9	function genId(baseName: string): string {
10	++id;	×
NEW 11	return baseName + '-' + id.toString();	×
12	}
13
14	// Workaround for https://github.com/webpack/webpack/issues/14814
15	// https://github.com/eps1lon/material-ui/blob/8d5f135b4d7a58253a99ab56dce4ac8de61f5dc1/packages/mui-utils/src/useId.ts#L21
16	const maybeReactUseId: undefined \| (() => string) = (React as any)[	12✔
17	"useId".toString()
18	];
19
20	/**
21	* useId
22	*
23	* Autogenerate IDs to facilitate WAI-ARIA and server rendering.
24	*
25	* Note: The returned ID will initially be empty string and will update after a
26	* component mounts.
27	*
28	* @see Docs https://reach.tech/auto-id
29	*/
30
31	export function useId(baseName: string): string {	12✔
32	if (maybeReactUseId !== undefined) {	955✔
33	return maybeReactUseId();	955✔
34	}
35
36	// If this instance isn't part of the initial render, we don't have to do the
37	// double render/patch-up dance. We can just generate the ID and return it.
NEW 38	const initialId = (serverHandoffComplete ? genId(baseName) : '');	×
39	const [id, setId] = useState(initialId);	×
40
41	useLayoutEffect(() => {	×
42	if (id === '') {	×
43	// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
44	// rendering flicker, though it'll make the first render slower (unlikely
45	// to matter, but you're welcome to measure your app and let us know if
46	// it's a problem).
NEW 47	setId(genId(baseName));	×
48	}
49	}, [id]);
50
51	useEffect(() => {	×
52	if (serverHandoffComplete === false) {	×
53	// Flag all future uses of `useId` to skip the update dance. This is in
54	// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
55	// accidentally bail out of the patch-up dance prematurely.
56	serverHandoffComplete = true;	×
57	}
58	}, []);
59
60	return id;	×
61	}

yext / search-ui-react / 11392576677

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous