-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1075 from basics/feature/use-booster-hydrate
fix(composable): added `useBoosterHydrate` composable
- Loading branch information
Showing
14 changed files
with
107 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
--- | ||
title: useBoosterHydrate | ||
--- | ||
|
||
# {{$frontmatter.title}} | ||
|
||
Compasable provides a function for wrapping components in order to control hydration. | ||
|
||
[Learn more about component import](/guide/usage#import-components). | ||
|
||
## Return | ||
|
||
Returns import wrapper function. | ||
|
||
## Example | ||
|
||
```js | ||
const hydrate = useBoosterHydrate(); | ||
|
||
const component = hydrate(() => import('~/components/MyComponent.vue')); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { hydrateWhenVisible } from 'vue3-lazy-hydration'; | ||
import { defineAsyncComponent, useRuntimeConfig } from '#imports'; | ||
|
||
export default function () { | ||
return hydrate; | ||
} | ||
|
||
const isDev = process.env.NODE_ENV === 'development'; | ||
|
||
export const hydrate = component => { | ||
const runtimeConfig = useRuntimeConfig(); | ||
|
||
return hydrateWhenVisible(wrapComponent(component), { | ||
rootMargin: runtimeConfig.public.booster.lazyOffsetComponent || '0%' | ||
}); | ||
}; | ||
|
||
const wrapComponent = component => { | ||
if (!(isDev || import.meta.server) && typeof component === 'function') { | ||
return defineAsyncComponent(component); | ||
} | ||
return component; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,10 @@ | ||
import { hydrateWhenVisible } from 'vue3-lazy-hydration'; | ||
import { defineAsyncComponent, useRuntimeConfig } from '#imports'; | ||
|
||
const isDev = process.env.NODE_ENV === 'development'; | ||
|
||
export default component => { | ||
const runtimeConfig = useRuntimeConfig(); | ||
|
||
return hydrateWhenVisible(wrapComponent(component), { | ||
rootMargin: runtimeConfig.public.booster.lazyOffsetComponent || '0%' | ||
}); | ||
}; | ||
|
||
const wrapComponent = component => { | ||
if (!(isDev || import.meta.server) && typeof component === 'function') { | ||
return defineAsyncComponent(component); | ||
} | ||
return component; | ||
}; | ||
import { hydrate } from './composables/useBoosterHydrate'; | ||
import { obsolete } from './utils/deprecation'; | ||
|
||
/** | ||
* @deprecated Import `#booster/hydrate` has been deprecated, please use the new composable `useBoosterHydrate` instead! | ||
*/ | ||
export default obsolete( | ||
hydrate, | ||
'WARNING! Obsolete import called. Import `#booster/hydrate` has been deprecated, please use the new composable `useBoosterHydrate` instead!' | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
export default function obsolete(newFunction, message) { | ||
const wrapper = (...args) => { | ||
console.warn(message); | ||
return newFunction.apply(this, args); | ||
}; | ||
wrapper.prototype = newFunction.prototype; | ||
|
||
return wrapper; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters