mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
fix: remove react identifierPrefix from client:only (#8075)
This was causing React components rendered with client:only to be prefixed with null. While not technically causing any issues, it is unintended and could be considered a bug. Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
parent
7d7920ea91
commit
da517d4055
5 changed files with 38 additions and 1 deletions
5
.changeset/thin-plums-drop.md
Normal file
5
.changeset/thin-plums-drop.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/react': patch
|
||||
---
|
||||
|
||||
fix a bug where react identifierPrefix was set to null for client:only components causing React.useId to generate ids prefixed with null
|
|
@ -0,0 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function () {
|
||||
const id = React.useId();
|
||||
return <p className='react-use-id' id={id}>{id}</p>;
|
||||
}
|
|
@ -2,6 +2,7 @@
|
|||
import Counter from '../components/Counter.jsx';
|
||||
import ReactComponent from '../components/JSXComponent.jsx';
|
||||
import Suffix from '../components/Suffix.react';
|
||||
import WithId from '../components/WithId.jsx';
|
||||
|
||||
const someProps = {
|
||||
count: 0,
|
||||
|
@ -36,5 +37,11 @@ const someProps = {
|
|||
<ReactComponent id="client-only" client:only="react" />
|
||||
|
||||
<Suffix client:load />
|
||||
|
||||
<WithId />
|
||||
<WithId client:load />
|
||||
<WithId client:load />
|
||||
<WithId client:only="react" />
|
||||
<WithId client:only="react" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -34,3 +34,22 @@ test.describe('dev', () => {
|
|||
expect(await suffix.textContent()).toBe('suffix toggle true');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('React client id generation', () => {
|
||||
test('react components generate unique ids', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
const components = page.locator('.react-use-id');
|
||||
await expect(components).toHaveCount(5);
|
||||
const staticId = await components.nth(0).getAttribute('id');
|
||||
const hydratedId0 = await components.nth(1).getAttribute('id');
|
||||
const hydratedId1 = await components.nth(2).getAttribute('id');
|
||||
const clientOnlyId0 = await components.nth(3).getAttribute('id');
|
||||
const clientOnlyId1 = await components.nth(4).getAttribute('id');
|
||||
console.log("ho ho", staticId, hydratedId0, hydratedId1, clientOnlyId0, clientOnlyId1)
|
||||
expect(staticId).not.toEqual(hydratedId0)
|
||||
expect(hydratedId0).not.toEqual(hydratedId1)
|
||||
expect(hydratedId1).not.toEqual(clientOnlyId0)
|
||||
expect(clientOnlyId0).not.toEqual(clientOnlyId1)
|
||||
});
|
||||
})
|
||||
|
|
|
@ -31,7 +31,7 @@ export default (element) =>
|
|||
}
|
||||
if (client === 'only') {
|
||||
return startTransition(() => {
|
||||
createRoot(element, renderOptions).render(componentEl);
|
||||
createRoot(element).render(componentEl);
|
||||
});
|
||||
}
|
||||
return startTransition(() => {
|
||||
|
|
Loading…
Reference in a new issue