refactor!: rename LazyImage to UnLazyImage

johannschopplich · johannschopplich · commit 348c05d32099 · 2023-04-20T22:50:36.000+02:00
diff --git a/docs/integrations/nuxt.md b/docs/integrations/nuxt.md
@@ -61,7 +61,7 @@ In both examples, the `sizes` attribute is automatically calculated.
 
 ```html
 <!-- Your placeholder image in `src` attribute (provided by your backend for example) -->
-<LazyImage
+<UnLazyImage
   src="data:image/svg+xml, ..."
   data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
   auto-sizes
diff --git a/docs/integrations/react.md b/docs/integrations/react.md
@@ -18,14 +18,14 @@ Install the `@unlazy/react` package using your favorite package manager:
   ```
 :::
 
-Import the `LazyImage` component in your component file:
+Import the `UnLazyImage` component in your component file:
 
 ```tsx
-import { LazyImage } from '@unlazy/react'
+import { UnLazyImage } from '@unlazy/react'
 
 export default function MyComponent() {
   return (
-    <LazyImage
+    <UnLazyImage
       autoSizes
       src="data:image/svg+xml, ..."
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
@@ -34,15 +34,15 @@ export default function MyComponent() {
 }
 ```
 
-## `LazyImage` Component
+## `UnLazyImage` Component
 
-The `LazyImage` component allows you to easily implement unlazy in your React application, providing a smoother image loading experience.
+The `UnLazyImage` component allows you to easily implement unlazy in your React application, providing a smoother image loading experience.
 
 The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop. It also enables you to specify a `blurhash` for the blurry placeholder image.
 
 ### Props
 
-The `LazyImage` component accepts the following props:
+The `UnLazyImage` component accepts the following props:
 
 | Prop | Type | Description |
 | --- | --- | --- |
@@ -58,14 +58,14 @@ In both examples, the `sizes` attribute is automatically calculated.
 return (
   <>
     {/* BlurHash in `blurhash` prop */}
-    <LazyImage
+    <UnLazyImage
       blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
       autoSizes
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
     />
 
     {/* Your placeholder image in `src` attribute (provided by your backend for example) */}
-    <LazyImage
+    <UnLazyImage
       autoSizes
       src="data:image/svg+xml, ..."
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
diff --git a/docs/integrations/solid.md b/docs/integrations/solid.md
@@ -18,14 +18,14 @@ Install the `@unlazy/solid` package using your favorite package manager:
   ```
 :::
 
-Import the `LazyImage` component in your component file:
+Import the `UnLazyImage` component in your component file:
 
 ```tsx
-import { LazyImage } from '@unlazy/solid'
+import { UnLazyImage } from '@unlazy/solid'
 
 export default function MyComponent() {
   return (
-    <LazyImage
+    <UnLazyImage
       autoSizes
       src="data:image/svg+xml, ..."
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
@@ -34,15 +34,15 @@ export default function MyComponent() {
 }
 ```
 
-## `LazyImage` Component
+## `UnLazyImage` Component
 
-The `LazyImage` component allows you to easily implement unlazy in your Solid application, providing a smoother image loading experience.
+The `UnLazyImage` component allows you to easily implement unlazy in your Solid application, providing a smoother image loading experience.
 
 The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop. It also enables you to specify a `blurhash` for the blurry placeholder image.
 
 ### Props
 
-The `LazyImage` component accepts the following props:
+The `UnLazyImage` component accepts the following props:
 
 | Prop | Type | Description |
 | --- | --- | --- |
@@ -58,14 +58,14 @@ In both examples, the `sizes` attribute is automatically calculated.
 return (
   <>
     {/* BlurHash in `blurhash` prop */}
-    <LazyImage
+    <UnLazyImage
       blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
       autoSizes
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
     />
 
     {/* Your placeholder image in `src` attribute (provided by your backend for example) */}
-    <LazyImage
+    <UnLazyImage
       autoSizes
       src="data:image/svg+xml, ..."
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
diff --git a/docs/integrations/vue.md b/docs/integrations/vue.md
@@ -20,15 +20,15 @@ Install the `@unlazy/vue` package using your favorite package manager:
 
 ### Local Import
 
-Import the `LazyImage` component in your Vue single file component and use it in your template:
+Import the `UnLazyImage` component in your Vue single file component and use it in your template:
 
 ```vue
 <script setup lang="ts">
-import { LazyImage } from '@unlazy/vue/components'
+import { UnLazyImage } from '@unlazy/vue/components'
 </script>
 
 <template>
-  <LazyImage
+  <UnLazyImage
     src="data:image/svg+xml, ..."
     data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
     auto-sizes
@@ -51,13 +51,13 @@ app.use(Unlazy)
 app.mount('#app')
 ```
 
-## `LazyImage` Component
+## `UnLazyImage` Component
 
-The `LazyImage` component allows you to easily implement unlazy in your Vue application, providing a smoother image loading experience. The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop. It also enables you to specify a `blurhash` for the blurry placeholder image.
+The `UnLazyImage` component allows you to easily implement unlazy in your Vue application, providing a smoother image loading experience. The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop. It also enables you to specify a `blurhash` for the blurry placeholder image.
 
 ### Props
 
-The `LazyImage` component accepts the following props:
+The `UnLazyImage` component accepts the following props:
 
 | Prop | Type | Description |
 | --- | --- | --- |
@@ -71,14 +71,14 @@ In both examples, the `sizes` attribute is automatically calculated.
 
 ```html
 <!-- BlurHash -->
-<LazyImage
+<UnLazyImage
   :blurhash="blurhash"
   data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
   auto-sizes
 />
 
 <!-- Your placeholder image in `src` attribute (provided by your backend for example) -->
-<LazyImage
+<UnLazyImage
   src="data:image/svg+xml, ..."
   data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
   auto-sizes
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -56,6 +56,8 @@
     "unlazy": "workspace:*"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "^0.3.0",
+    "@nuxt/schema": "^3.4.2",
     "@types/node": "^18.15.12",
     "@unhead/vue": "^1.1.26",
     "@unocss/nuxt": "^0.51.5",
diff --git a/packages/react/playground/App.tsx b/packages/react/playground/App.tsx
@@ -1,8 +1,8 @@
-import { LazyImage } from '../src'
+import { UnLazyImage } from '../src'
 
 function App() {
   return (
-    <LazyImage
+    <UnLazyImage
       blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
       autoSizes={true}
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -10,7 +10,7 @@ interface Props
   blurhash?: string
 }
 
-export function LazyImage({
+export function UnLazyImage({
   autoSizes,
   blurhash,
   blurhashSize,
diff --git a/packages/solid/playground/App.tsx b/packages/solid/playground/App.tsx
@@ -1,9 +1,9 @@
 /* @refresh granular */
-import { LazyImage } from '../src'
+import { UnLazyImage } from '../src'
 
 function App() {
   return (
-    <LazyImage
+    <UnLazyImage
       blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
       autoSizes={true}
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
diff --git a/packages/solid/src/index.tsx b/packages/solid/src/index.tsx
@@ -12,7 +12,7 @@ interface Props
   blurhash?: string
 }
 
-export function LazyImage(props: Props) {
+export function UnLazyImage(props: Props) {
   const [target, setTarget] = createSignal<HTMLImageElement | null>(null)
 
   createEffect(() => {
diff --git a/packages/vue/playground/App.vue b/packages/vue/playground/App.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { LazyImage } from '../src/components'
+import { UnLazyImage } from '../src/components'
 </script>
 
 <template>
-  <LazyImage
+  <UnLazyImage
     blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
     auto-sizes
     data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
diff --git a/packages/vue/src/components/UnLazyImage.vue b/packages/vue/src/components/UnLazyImage.vue
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
@@ -1,5 +1,5 @@
-import LazyImage from './LazyImage.vue'
+import UnLazyImage from './UnLazyImage.vue'
 
 export {
-  LazyImage,
+  UnLazyImage,
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ interface Props`
`10`	`10`	`blurhash?: string`
`11`	`11`	`}`
`12`	`12`
`13`		`-export function LazyImage({`
	`13`	`+export function UnLazyImage({`
`14`	`14`	`autoSizes,`
`15`	`15`	`blurhash,`
`16`	`16`	`blurhashSize,`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ interface Props`
`12`	`12`	`blurhash?: string`
`13`	`13`	`}`
`14`	`14`
`15`		`-export function LazyImage(props: Props) {`
	`15`	`+export function UnLazyImage(props: Props) {`
`16`	`16`	`const [target, setTarget] = createSignal<HTMLImageElement \| null>(null)`
`17`	`17`
`18`	`18`	`createEffect(() => {`