ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.08k stars 31 forks source link

Not same hydration behaviour in development vs production #42

Closed santicros closed 2 years ago

santicros commented 2 years ago

Hi @ElMassimo, thanks for this great project, I'm currently testing it, and it's very promising :)

Is your feature request related to a problem? Please describe. When creating a component in development, I'm seeing the component is always hydrated, even if it doesn't have any client:.... This was a bit confusing because it doesn't have the same behaviour as in production, where components without client:.. aren't interactive.

Describe the solution you'd like I would like to have the same behaviour in development than in production, so for example I don't forget that in development a counter was working but on production, as I didn't have client:... it is not interactive.

Describe alternatives you've considered Another idea: Could we warn if we have a component that has event handlers like @click... or hooks imported like onMounted, but then it doesn't have any client:... hydration?

Thanks!!

ElMassimo commented 2 years ago

Hydration during development is the only way to ensure a consistent HMR experience, which is one of the main goals of this project.

Disabling interactivity during development would prevent rerenders after HMR, or require specific handlers for each framework to do it manually, or require users to reload the page after each change.

Detecting event handlers in islands would require the use to register all island components explicitly, would be framework-specific, and would not handle all cases since v-bind can add listeners in Vue 3 (or {...props} in JSX).

Moving to discussions, there might be low-hanging fruit in adding a mode using v-once during development, but it will need deeper investigation.