From 70789a0631f66d523c36abc61070bfbb02af3e08 Mon Sep 17 00:00:00 2001
From: tbitw2549 <yonshi29@gmail.com>
Date: Sat, 22 Jun 2024 00:20:01 +0300
Subject: [PATCH] chore: rename loader to hydrate

---
 docs/2.guide/2.directory-structure/1.components.md   |  8 ++++----
 docs/3.api/3.utils/create-event-loader.md            |  2 +-
 docs/3.api/3.utils/create-idle-loader.md             |  2 +-
 docs/3.api/3.utils/create-visible-loader.md          |  2 +-
 .../components/runtime/client-delayed-component.ts   |  6 +++---
 packages/nuxt/src/components/templates.ts            | 12 ++++++------
 .../basic/pages/lazy-import-components/index.vue     |  2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index dcf2339f2..b482b8ded 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@@ -167,14 +167,14 @@ If you would like the component to load after certain events occur, like a click
 
 ### 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]
 <template>
   <div>
-    <LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/>
-    <LazyVisibleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/>
-    <LazyEventMyComponent :loader="createEventLoader(['click','mouseover'])"/>
+    <LazyIdleMyComponent :hydrate="createIdleLoader({timeout: 3000})"/>
+    <LazyVisibleMyComponent :hydrate="createVisibleLoader({threshold: 0.2})"/>
+    <LazyEventMyComponent :hydrate="createEventLoader(['click','mouseover'])"/>
   </div>
 </template>
 ```
diff --git a/docs/3.api/3.utils/create-event-loader.md b/docs/3.api/3.utils/create-event-loader.md
index 7772eef9b..a94c98385 100644
--- a/docs/3.api/3.utils/create-event-loader.md
+++ b/docs/3.api/3.utils/create-event-loader.md
@@ -21,7 +21,7 @@ If you would like to trigger hydration when the element is either clicked or has
 ```vue [pages/index.vue]
 <template>
   <div>
-    <LazyEventMyComponent :loader="createEventLoader(['click','mouseover'])"/>
+    <LazyEventMyComponent :hydrate="createEventLoader(['click','mouseover'])"/>
   </div>
 <template>
 ```
diff --git a/docs/3.api/3.utils/create-idle-loader.md b/docs/3.api/3.utils/create-idle-loader.md
index 8adbebe56..ca17db26f 100644
--- a/docs/3.api/3.utils/create-idle-loader.md
+++ b/docs/3.api/3.utils/create-idle-loader.md
@@ -21,7 +21,7 @@ If you would like to give a timeout of 5 seconds for the components:
 ```vue [pages/index.vue]
 <template>
   <div>
-    <LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/>
+    <LazyIdleMyComponent :hydrate="createIdleLoader({timeout: 3000})"/>
   </div>
 <template>
 ```
diff --git a/docs/3.api/3.utils/create-visible-loader.md b/docs/3.api/3.utils/create-visible-loader.md
index 3ea458bf8..7cbeaeee0 100644
--- a/docs/3.api/3.utils/create-visible-loader.md
+++ b/docs/3.api/3.utils/create-visible-loader.md
@@ -21,7 +21,7 @@ If you would like to change the threshold of the element:
 ```vue [pages/index.vue]
 <template>
   <div>
-    <LazyVisibleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/>
+    <LazyVisibleMyComponent :hydrate="createVisibleLoader({threshold: 0.2})"/>
   </div>
 <template>
 ```
diff --git a/packages/nuxt/src/components/runtime/client-delayed-component.ts b/packages/nuxt/src/components/runtime/client-delayed-component.ts
index 80aefeda5..b670f5972 100644
--- a/packages/nuxt/src/components/runtime/client-delayed-component.ts
+++ b/packages/nuxt/src/components/runtime/client-delayed-component.ts
@@ -37,7 +37,7 @@ export const createLazyIOComponent = (componentLoader: Component) => {
 
       if (!hasIntersected.value) {
         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, () => {
             hasIntersected.value = true
             unobserve?.()
@@ -76,7 +76,7 @@ export const createLazyNetworkComponent = (componentLoader: Component) => {
             isIdle.value = true
             cancelIdleCallback(idleHandle as unknown as number)
             idleHandle = null
-          }, attrs.loader ?? { timeout: 10000 })
+          }, attrs.hydrate ?? { timeout: 10000 })
         })
       })
       onBeforeUnmount(() => {
@@ -102,7 +102,7 @@ export const createLazyEventComponent = (componentLoader: Component) => {
       const nuxt = useNuxtApp()
       const instance = getCurrentInstance()!
       const isTriggered = ref(false)
-      const events: string[] = attrs.loader as string[] ?? ['mouseover']
+      const events: string[] = attrs.hydrate as string[] ?? ['mouseover']
 
       const registeredEvents: (() => void)[] = []
       if (!eventsMapper.has(instance)) {
diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts
index b1e5c3d7a..7b54e5d83 100644
--- a/packages/nuxt/src/components/templates.ts
+++ b/packages/nuxt/src/components/templates.ts
@@ -119,9 +119,9 @@ ${nuxt.options.experimental.componentIslands ? islandType : ''}
 interface _GlobalComponents {
   ${componentTypes.map(([pascalName, type]) => `    '${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]) => `    'LazyVisible${pascalName}': ${type} & DefineComponent<{loader?: Partial<IntersectionObserverInit>}>`).join('\n')}
-  ${componentTypes.map(([pascalName, type]) => `    'LazyEvent${pascalName}': ${type} & DefineComponent<{loader?: Array<keyof HTMLElementEventMap>}>`).join('\n')}
+  ${componentTypes.map(([pascalName, type]) => `    'LazyIdle${pascalName}': ${type} & DefineComponent<{hydrate?: IdleRequestOptions}>`).join('\n')}
+  ${componentTypes.map(([pascalName, type]) => `    'LazyVisible${pascalName}': ${type} & DefineComponent<{hydrate?: Partial<IntersectionObserverInit>}>`).join('\n')}
+  ${componentTypes.map(([pascalName, type]) => `    'LazyEvent${pascalName}': ${type} & DefineComponent<{hydrate?: Array<keyof HTMLElementEventMap>}>`).join('\n')}
 }
 
 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 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 LazyVisible${pascalName}: ${type} & DefineComponent<{loader?: 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 LazyIdle${pascalName}: ${type} & DefineComponent<{hydrate?: IdleRequestOptions}>`).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<{hydrate?: Array<keyof HTMLElementEventMap>}>`).join('\n')}
 
 export const componentNames: string[]
 `
diff --git a/test/fixtures/basic/pages/lazy-import-components/index.vue b/test/fixtures/basic/pages/lazy-import-components/index.vue
index 282bc9c7f..0b49fc7fe 100644
--- a/test/fixtures/basic/pages/lazy-import-components/index.vue
+++ b/test/fixtures/basic/pages/lazy-import-components/index.vue
@@ -7,7 +7,7 @@
     <LazyEventView />
     <LazyEventDelayedEvent
       id="lazyevent2"
-      :loader="createEventLoader(['click'])"
+      :hydrate="createEventLoader(['click'])"
     />
     <LazyIdleDelayedNetwork />
     <div style="height:3000px">