Skip to content

Commit

Permalink
fix: remove react identifierPrefix from client:only (#8075)
Browse files Browse the repository at this point in the history
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 <[email protected]>
  • Loading branch information
SudoCat and natemoo-re authored Aug 14, 2023
1 parent 7d7920e commit da517d4
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/thin-plums-drop.md
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
19 changes: 19 additions & 0 deletions packages/astro/e2e/react-component.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
});
})
2 changes: 1 addition & 1 deletion packages/integrations/react/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default (element) =>
}
if (client === 'only') {
return startTransition(() => {
createRoot(element, renderOptions).render(componentEl);
createRoot(element).render(componentEl);
});
}
return startTransition(() => {
Expand Down

0 comments on commit da517d4

Please sign in to comment.