Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-12 03:38:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: rename loader to hydrate

Browse Source
This commit is contained in:
tbitw2549 2024-06-22 00:20:01 +03:00
parent 9456f3f12e
commit 70789a0631
7 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/2.guide/2.directory-structure/1.components.md
View File

@ -167,14 +167,14 @@ If you would like the component to load after certain events occur, like a click
### Custom hydration triggers ### Custom hydration triggers
If you would like to override the default hydration triggers when dealing with delayed hydration, like changing the timeout, the options for the intersection observer, or the events to trigger the hydration, you can do so by supplying a `loader` prop to your lazy components. If you would like to override the default hydration triggers when dealing with delayed hydration, like changing the timeout, the options for the intersection observer, or the events to trigger the hydration, you can do so by supplying a `hydrate` prop to your lazy components.
```vue [pages/index.vue] ```vue [pages/index.vue]
<template> <template>
<div> <div>
<LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/> <LazyIdleMyComponent :hydrate="createIdleLoader({timeout: 3000})"/>
<LazyVisibleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/> <LazyVisibleMyComponent :hydrate="createVisibleLoader({threshold: 0.2})"/>
<LazyEventMyComponent :loader="createEventLoader(['click','mouseover'])"/> <LazyEventMyComponent :hydrate="createEventLoader(['click','mouseover'])"/>
</div> </div>
</template> </template>
``` ```

2
docs/3.api/3.utils/create-event-loader.md
View File

@ -21,7 +21,7 @@ If you would like to trigger hydration when the element is either clicked or has
```vue [pages/index.vue] ```vue [pages/index.vue]
<template> <template>
<div> <div>
<LazyEventMyComponent :loader="createEventLoader(['click','mouseover'])"/> <LazyEventMyComponent :hydrate="createEventLoader(['click','mouseover'])"/>
</div> </div>
<template> <template>
``` ```

2
docs/3.api/3.utils/create-idle-loader.md
View File

@ -21,7 +21,7 @@ If you would like to give a timeout of 5 seconds for the components:
```vue [pages/index.vue] ```vue [pages/index.vue]
<template> <template>
<div> <div>
<LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/> <LazyIdleMyComponent :hydrate="createIdleLoader({timeout: 3000})"/>
</div> </div>
<template> <template>
``` ```

2
docs/3.api/3.utils/create-visible-loader.md
View File

@ -21,7 +21,7 @@ If you would like to change the threshold of the element:
```vue [pages/index.vue] ```vue [pages/index.vue]
<template> <template>
<div> <div>
<LazyVisibleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/> <LazyVisibleMyComponent :hydrate="createVisibleLoader({threshold: 0.2})"/>
</div> </div>
<template> <template>
``` ```

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

@ -37,7 +37,7 @@ export const createLazyIOComponent = (componentLoader: Component) => {
if (!hasIntersected.value) { if (!hasIntersected.value) {
onMounted(() => { onMounted(() => {
const observer = useIntersectionObserver(attrs.loader as Partial<IntersectionObserverInit> | undefined) const observer = useIntersectionObserver(attrs.hydrate as Partial<IntersectionObserverInit> | undefined)
unobserve = observer!.observe(el.value as Element, () => { unobserve = observer!.observe(el.value as Element, () => {
hasIntersected.value = true hasIntersected.value = true
unobserve?.() unobserve?.()
@ -76,7 +76,7 @@ export const createLazyNetworkComponent = (componentLoader: Component) => {
isIdle.value = true isIdle.value = true
cancelIdleCallback(idleHandle as unknown as number) cancelIdleCallback(idleHandle as unknown as number)
idleHandle = null idleHandle = null
}, attrs.loader ?? { timeout: 10000 }) }, attrs.hydrate ?? { timeout: 10000 })
}) })
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
@ -102,7 +102,7 @@ export const createLazyEventComponent = (componentLoader: Component) => {
const nuxt = useNuxtApp() const nuxt = useNuxtApp()
const instance = getCurrentInstance()! const instance = getCurrentInstance()!
const isTriggered = ref(false) const isTriggered = ref(false)
const events: string[] = attrs.loader as string[] ?? ['mouseover'] const events: string[] = attrs.hydrate as string[] ?? ['mouseover']
const registeredEvents: (() => void)[] = [] const registeredEvents: (() => void)[] = []
if (!eventsMapper.has(instance)) { if (!eventsMapper.has(instance)) {

12
packages/nuxt/src/components/templates.ts
View File

@ -119,9 +119,9 @@ ${nuxt.options.experimental.componentIslands ? islandType : ''}
interface _GlobalComponents { interface _GlobalComponents {
${componentTypes.map(([pascalName, type]) => ` '${pascalName}': ${type}`).join('\n')} ${componentTypes.map(([pascalName, type]) => ` '${pascalName}': ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => ` 'Lazy${pascalName}': ${type}`).join('\n')} ${componentTypes.map(([pascalName, type]) => ` 'Lazy${pascalName}': ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => ` 'LazyIdle${pascalName}': ${type} & DefineComponent<{loader?: IdleRequestOptions}>`).join('\n')} ${componentTypes.map(([pascalName, type]) => ` 'LazyIdle${pascalName}': ${type} & DefineComponent<{hydrate?: IdleRequestOptions}>`).join('\n')}
${componentTypes.map(([pascalName, type]) => ` 'LazyVisible${pascalName}': ${type} & DefineComponent<{loader?: Partial<IntersectionObserverInit>}>`).join('\n')} ${componentTypes.map(([pascalName, type]) => ` 'LazyVisible${pascalName}': ${type} & DefineComponent<{hydrate?: Partial<IntersectionObserverInit>}>`).join('\n')}
${componentTypes.map(([pascalName, type]) => ` 'LazyEvent${pascalName}': ${type} & DefineComponent<{loader?: Array<keyof HTMLElementEventMap>}>`).join('\n')} ${componentTypes.map(([pascalName, type]) => ` 'LazyEvent${pascalName}': ${type} & DefineComponent<{hydrate?: Array<keyof HTMLElementEventMap>}>`).join('\n')}
} }
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
@ -138,9 +138,9 @@ declare module 'vue' {
${componentTypes.map(([pascalName, type]) => `export const ${pascalName}: ${type}`).join('\n')} ${componentTypes.map(([pascalName, type]) => `export const ${pascalName}: ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => `export const Lazy${pascalName}: ${type}`).join('\n')} ${componentTypes.map(([pascalName, type]) => `export const Lazy${pascalName}: ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => `export const LazyIdle${pascalName}: ${type} & DefineComponent<{loader?: IdleRequestOptions}>`).join('\n')} ${componentTypes.map(([pascalName, type]) => `export const LazyIdle${pascalName}: ${type} & DefineComponent<{hydrate?: IdleRequestOptions}>`).join('\n')}
${componentTypes.map(([pascalName, type]) => `export const LazyVisible${pascalName}: ${type} & DefineComponent<{loader?: Partial<IntersectionObserverInit>}>`).join('\n')} ${componentTypes.map(([pascalName, type]) => `export const LazyVisible${pascalName}: ${type} & DefineComponent<{hydrate?: Partial<IntersectionObserverInit>}>`).join('\n')}
${componentTypes.map(([pascalName, type]) => `export const LazyEvent${pascalName}: ${type} & DefineComponent<{loader?: Array<keyof HTMLElementEventMap>}>`).join('\n')} ${componentTypes.map(([pascalName, type]) => `export const LazyEvent${pascalName}: ${type} & DefineComponent<{hydrate?: Array<keyof HTMLElementEventMap>}>`).join('\n')}
export const componentNames: string[] export const componentNames: string[]
` `

2
test/fixtures/basic/pages/lazy-import-components/index.vue vendored
View File

@ -7,7 +7,7 @@
<LazyEventView /> <LazyEventView />
<LazyEventDelayedEvent <LazyEventDelayedEvent
id="lazyevent2" id="lazyevent2"
:loader="createEventLoader(['click'])" :hydrate="createEventLoader(['click'])"
/> />
<LazyIdleDelayedNetwork /> <LazyIdleDelayedNetwork />
<div style="height:3000px"> <div style="height:3000px">