react

mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00

Files

T

Sebastian Markbåge 2e4db3344f Use valid CSS selectors in useId format (#32001 )

For the `useId` algorithm we used colon `:` before and after.
https://github.com/facebook/react/pull/23360

This avoids collisions in general by using an unusual characters. It
also avoids collisions when concatenated with some other ID.
Unfortunately, `:` is not a valid character in `view-transition-name`.

This PR swaps the format from:

```
:r123:
```

To the unicode:

```
«r123»
```

Which is valid CSS selectors. This also allows them being used for
`querySelector()` which we didn't really find a legit use for but seems
ok-ish.

That way you can get a view-transition-name that you can manually
reference. E.g. to generate styles:

```js
const id = useId();
return <>
  <style>{`
    ::view-transition-group(${id}) { ... }
    ::view-transition-old(${id}) { ... }
    ::view-transition-new(${id}) { ... }
  `}</style>
  <ViewTransition name={id}>...</ViewTransition>
</>;
```

2025-02-25 12:45:18 -05:00

__tests__

Use valid CSS selectors in useId format (#32001 )

2025-02-25 12:45:18 -05:00

client

[Fiber] Disable comments as containers in OSS (#32250 )

2025-02-04 12:39:52 -08:00

events

Add jest lint rules (#29760 )

2024-06-10 14:31:37 -04:00

server

Expose prerender() for SSG in stable (#31298 )