Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 15:42:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reuse the generated dynamic import

Browse Source
This commit is contained in:
tbitw2549 2024-08-16 18:47:09 +03:00
parent 784c34fc91
commit 47e2443a37
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/nuxt/src/components/loader.ts
View File

@ -75,29 +75,29 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
} }
if (lazy) { if (lazy) {
imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
if (modifier && normalComponent && nuxt?.options.experimental.delayedHydration === true) { if (modifier && normalComponent && nuxt?.options.experimental.delayedHydration === true) {
switch (modifier) { switch (modifier) {
case 'Visible': case 'Visible':
case 'visible-': case 'visible-':
imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyIOComponent' }])) imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyIOComponent' }]))
identifier += '_delayedIO' identifier += '_delayedIO'
imports.add(`const ${identifier} = createLazyIOComponent(__defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)))`) imports.add(`const ${identifier} = createLazyIOComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c))`)
break break
case 'Event': case 'Event':
case 'event-': case 'event-':
imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyEventComponent' }])) imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyEventComponent' }]))
identifier += '_delayedEvent' identifier += '_delayedEvent'
imports.add(`const ${identifier} = createLazyEventComponent(__defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)))`) imports.add(`const ${identifier} = createLazyEventComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c))`)
break break
case 'Idle': case 'Idle':
case 'idle-': case 'idle-':
imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyNetworkComponent' }])) imports.add(genImport(clientDelayedComponentRuntime, [{ name: 'createLazyNetworkComponent' }]))
identifier += '_delayedNetwork' identifier += '_delayedNetwork'
imports.add(`const ${identifier} = createLazyNetworkComponent(__defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)))`) imports.add(`const ${identifier} = createLazyNetworkComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c))`)
break break
} }
} else { } else {
imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
identifier += '_lazy' identifier += '_lazy'
imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`) imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
} }

8
packages/nuxt/src/components/runtime/client-delayed-component.ts
View File

@ -17,14 +17,14 @@ export const createLazyIOComponent = (componentLoader: AsyncComponentLoader) =>
inheritAttrs: false, inheritAttrs: false,
setup (_, { attrs }) { setup (_, { attrs }) {
if (import.meta.server) { if (import.meta.server) {
return () => h(componentLoader, attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
const nuxt = useNuxtApp() const nuxt = useNuxtApp()
const instance = getCurrentInstance()! const instance = getCurrentInstance()!
if (instance.vnode.el && nuxt.isHydrating && elementIsVisibleInViewport(instance.vnode.el as Element)) { if (instance.vnode.el && nuxt.isHydrating && elementIsVisibleInViewport(instance.vnode.el as Element)) {
return h(componentLoader, attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
return () => h(defineAsyncComponent({ return () => h(defineAsyncComponent({
@ -41,7 +41,7 @@ export const createLazyNetworkComponent = (componentLoader: AsyncComponentLoader
inheritAttrs: false, inheritAttrs: false,
setup (_, { attrs }) { setup (_, { attrs }) {
if (import.meta.server) { if (import.meta.server) {
return () => h(componentLoader, attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
return () => defineAsyncComponent({ return () => defineAsyncComponent({
loader: componentLoader, loader: componentLoader,
@ -57,7 +57,7 @@ export const createLazyEventComponent = (componentLoader: AsyncComponentLoader)
inheritAttrs: false, inheritAttrs: false,
setup (_, { attrs }) { setup (_, { attrs }) {
if (import.meta.server) { if (import.meta.server) {
return () => h(componentLoader, attrs) return () => h(defineAsyncComponent(componentLoader), attrs)
} }
const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover'] const events: Array<keyof HTMLElementEventMap> = attrs.hydrate as Array<keyof HTMLElementEventMap> ?? ['mouseover']
return () => h(defineAsyncComponent({ return () => h(defineAsyncComponent({