feat(pages): routes HMR #8941
feat(pages): routes HMR #8941
Conversation
|
|
|
| Name | Link |
|---|---|
| 78b7c7b | |
| https://app.netlify.com/sites/nuxt3-docs/deploys/6370455604777a00091bdda6 | |
| https://deploy-preview-8941--nuxt3-docs.netlify.app | |
Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
|
/cc @posva |
| }) | ||
| let clearRoutes = router.addRoute({ path: '', children: routes }) |
There was a problem hiding this comment.
shouldn't this be
| let clearRoutes = router.addRoute({ path: '', children: routes }) | |
| let clearRoutes = router.addRoute({ path: '/', children: routes }) |
did you find any trouble with it? The router is more preared to take paths that start with / when they have no parent
I want to know because if you find a problem, it's likely a vue-router bug
| 'if (import.meta.hot) {', | ||
| ' import.meta.hot.accept((mod) => {', | ||
| ' onUpdate._fn?.(mod.default)', | ||
| ' mod.onUpdate._fn = onUpdate._fn', | ||
| ' })', | ||
| '}' |
There was a problem hiding this comment.
do we need to add an equivalent for webpack, like the following?
framework/packages/nuxt/src/app/config.ts
Lines 73 to 77 in 1700bf8
There was a problem hiding this comment.
I know nothing about Webpack HMR
| clearRoutes = router.addRoute({ path: '', children: routes }) | ||
| }) | ||
| }) | ||
| } |
There was a problem hiding this comment.
as above - do we need to add a webpack equivalent?
| ...imports, | ||
| `export default ${routes}`, | ||
| 'export function onUpdate(fn) { onUpdate._fn = fn }', | ||
| 'if (import.meta.hot) {', |
There was a problem hiding this comment.
It might be worth also adding a test for process.dev
There was a problem hiding this comment.
I supposed it would be tree-shaken in production? But sure I can do that.
| nuxtApp.vueApp.use(router) | ||
|
|
||
| // Routes HMR | ||
| if (import.meta.hot) { |
There was a problem hiding this comment.
as above, it might be worth also adding a test for process.dev
There was a problem hiding this comment.
isn't import.meta.hot automatically false in production too?
| }) | ||
| let clearRoutes = router.addRoute({ path: '', children: routes }) |
There was a problem hiding this comment.
is there any runtime overhead to doing this this way? if so, I guess we can use process.dev to only do this in dev mode?
There was a problem hiding this comment.
It shouldn't have too much of an overhead but I haven't benchmarked it. This is the code that runs with this: https://github.com/vuejs/router/blob/main/packages/router/src/matcher/index.ts#L161-L170
If it does end up having a bad impact on performance, then another more verbose version that inlines the routes at router creation in production and adds each route individually in dev would work too:
let clearRoutes = routes.map(route => router.addRoute(route))
clearRoutes.forEach(removeRoute => removeRoute())
|
Thank you! This will be amazing |
danielroe
added
enhancement
Volta.net
This make adding/removing routes HMR, without requiring a full reload.