-
-
Notifications
You must be signed in to change notification settings - Fork 190
feat: add hmr support for compound components #518
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working on this and adding the test!
I don't think we need to logic twice, I think this can be done like this:
if (isLikelyComponentType(exportValue)) {
register(...)
} else if (/* is obj & all keys are component */ ) {
for (const subKey in exportValue) {
register(
exportValue[subKey],
filename + ' export ' + key + '$' + subKey,
)
}
}|
I'll check and keep you posted |
|
My bad the code in isLikelyComponent is needed for the "validateRefreshBoundaryAndEnqueueUpdate" function. |
|
You're fast! I was just about to comment that I don't think the tests are passing 😅 I reverted back to the original changes. |
|
Is there something that I can help with in order to merge this change? |
# Conflicts: # pnpm-lock.yaml
|
@Newbie012 I was not very satisfied with the recursive nature of the current code. It would have return true for deeply nested object with only React component, but the runtime parts did not do it recursively. I think one level is enough. |
|
Can this be extended to support this syntax? export function Accordion() {
return <div></div>;
}
Accordion.Root = () => <div>Accordion Root</div>
Accordion.Item = () => <div>Accordion Item</div> |
| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 4.6.0 | 4.7.0 | ## [v4.7.0](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#470-2025-07-18) ##### Add HMR support for compound components ([#518](vitejs/vite-plugin-react#518)) HMR now works for compound components like this: ```tsx const Root = () => <div>Accordion Root</div> const Item = () => <div>Accordion Item</div> export const Accordion = { Root, Item } ``` ##### Return `Plugin[]` instead of `PluginOption[]` ([#537](vitejs/vite-plugin-react#537)) The return type has changed from `react(): PluginOption[]` to more specialized type `react(): Plugin[]`. This allows for type-safe manipulation of plugins, for example: ```tsx // previously this causes type errors react({ babel: { plugins: ['babel-plugin-react-compiler'] } }) .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' })) ```
| datasource | package | from | to | | ---------- | -------------------- | ----- | ----- | | npm | @vitejs/plugin-react | 4.6.0 | 4.7.0 | ## [v4.7.0](https://github.com/vitejs/vite-plugin-react/blob/HEAD/packages/plugin-react/CHANGELOG.md#470-2025-07-18) ##### Add HMR support for compound components ([#518](vitejs/vite-plugin-react#518)) HMR now works for compound components like this: ```tsx const Root = () => <div>Accordion Root</div> const Item = () => <div>Accordion Item</div> export const Accordion = { Root, Item } ``` ##### Return `Plugin[]` instead of `PluginOption[]` ([#537](vitejs/vite-plugin-react#537)) The return type has changed from `react(): PluginOption[]` to more specialized type `react(): Plugin[]`. This allows for type-safe manipulation of plugins, for example: ```tsx // previously this causes type errors react({ babel: { plugins: ['babel-plugin-react-compiler'] } }) .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' })) ```
closes #493