feat: type

Author: CCherry07

package.json

@@ -31,7 +31,7 @@
     "vite": "^4.3.5",
     "vite-plugin-dts": "^2.3.0",
     "vue": "^3.3.2",
-    "vue-lazy-load-image-component": "0.0.3"
+    "vue-lazy-load-image-component": "0.0.4"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import { DefineComponent } from 'vue'
 import { reactive, computed, watch, defineComponent, ExtractPropTypes } from 'vue'
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.tsx'
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
@@ -70,5 +71,5 @@ export default defineComponent({
         />
     }
   }
-})
+}) as DefineComponent<LazyLoadComponentProps>
 

src/components/LazyLoadComponent.tsx

@@ -1,42 +1,13 @@
-import { PropType, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import { trackWindowScroll } from './trackWindowScroll.tsx'
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking'
-import { ScrollPosition, VueNode } from './interface.ts'
+import { PlaceholderWithTrackingPropsFunc } from './interface.ts'
 const PlaceholderWithTracking = defineComponent({
   name: 'PlaceholderWithTracking',
-  props: {
-    scrollPosition: {
-      type: Object as PropType<ScrollPosition>,
-      default: null
-    },
-    useIntersectionObserver: {
-      type: Boolean,
-      default: true
-    },
-    threshold: {
-      type: Number,
-      default: 300
-    },
-    onVisible: {
-      type: Function as PropType<() => void>,
-      default: () => { }
-    },
-    height: {
-      type: Number,
-      default: 0
-    },
-    width: {
-      type: Number,
-      default: 0
-    },
-    placeholder:{
-      type: Object as PropType<VueNode>,
-      default: () => { }
-    }
-  },
-  setup(props, { attrs }) {
+  props: PlaceholderWithTrackingPropsFunc(),
+  setup(props) {
     return () => (
-      <PlaceholderWithoutTracking {...props} {...attrs} />
+      <PlaceholderWithoutTracking {...props} />
     )
   }
 })

src/components/PlaceholderWithTracking.tsx

@@ -1,42 +1,13 @@
-import type { PropType } from 'vue'
+import type { DefineComponent } from 'vue'
 import { computed, onMounted, shallowRef, defineComponent } from 'vue'
 
 import isIntersectionObserverAvailable from '../utils/intersection-observer'
 import { getObserver } from '../utils'
-import { ScrollPosition, VueNode } from './interface'
+import { PlaceholderWithoutTrackingPropsFunc } from './interface'
 
 export default defineComponent({
   name: 'PlaceholderWithoutTracking',
-  props: {
-    scrollPosition: {
-      type: Object as PropType<ScrollPosition>,
-      default: null
-    },
-    useIntersectionObserver: {
-      type: Boolean,
-      default: true
-    },
-    threshold: {
-      type: Number,
-      default: 300
-    },
-    onVisible: {
-      type: Function as PropType<() => void>,
-      default: () => { }
-    },
-    height: {
-      type: Number,
-      default: 0
-    },
-    width: {
-      type: Number,
-      default: 0
-    },
-    placeholder: {
-      type: Object as PropType<VueNode>,
-      default: () => { }
-    }
-  },
+  props: PlaceholderWithoutTrackingPropsFunc(),
   setup(props) {
     const placeholder = shallowRef<HTMLElement>()
     const supportsObserver = computed(() => !props.scrollPosition &&
@@ -117,4 +88,4 @@ export default defineComponent({
       )
     }
   }
-})
+}) as DefineComponent<ReturnType<typeof PlaceholderWithoutTrackingPropsFunc>>

src/components/PlaceholderWithoutTracking.tsx

@@ -39,7 +39,7 @@ export const LazyLoadComponentPropsFunc = () => ({
     default: 300
   },
   style: {
-    type: Object as PropType<CSSProperties>,
+    type: Object as PropType<Partial<CSSProperties>>,
     default: () => { }
   },
   class: {
@@ -88,3 +88,66 @@ export const LazyLoadImagePropsFunc = () => {
     },
   }
 }
+
+export const PlaceholderWithoutTrackingPropsFunc = () => ({
+  scrollPosition: {
+    type: Object as PropType<ScrollPosition>,
+    default: null
+  },
+  useIntersectionObserver: {
+    type: Boolean,
+    default: true
+  },
+  threshold: {
+    type: Number,
+    default: 300
+  },
+  onVisible: {
+    type: Function as PropType<() => void>,
+    default: () => { }
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  width: {
+    type: Number,
+    default: 100
+  },
+  placeholder: {
+    type: Object as PropType<VueNode>,
+    default: () => { }
+  }
+})
+
+
+export const PlaceholderWithTrackingPropsFunc = () => ({
+  scrollPosition: {
+    type: Object as PropType<ScrollPosition>,
+    default: null
+  },
+  useIntersectionObserver: {
+    type: Boolean,
+    default: true
+  },
+  threshold: {
+    type: Number,
+    default: 300
+  },
+  onVisible: {
+    type: Function as PropType<() => void>,
+    default: () => { }
+  },
+  height: {
+    type: Number,
+    default: 0
+  },
+  width: {
+    type: Number,
+    default: 0
+  },
+  placeholder: {
+    type: Object as PropType<VueNode>,
+    default: () => { }
+  }
+})

src/components/interface.ts

@@ -1,54 +1,16 @@
-import type { PropType } from 'vue'
 import { computed, defineComponent, onMounted, reactive, shallowRef, watch, onBeforeUnmount } from "vue";
 import { debounce, throttle } from 'lodash-es';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
 import getScrollAncestor from '../utils/get-scroll-ancestor';
 import { getScrollX, getScrollY } from "../utils";
-import { ScrollPosition, VueNode } from "./interface";
+import { LazyLoadComponentPropsFunc } from './interface';
 
 export type TrackWindowScroll = (Component: ReturnType<typeof defineComponent>) => ReturnType<typeof defineComponent>
 
 export const trackWindowScroll: TrackWindowScroll = (Component) => {
   const ScrollAwareComponent = defineComponent({
     name: "ScrollAwareComponent",
-    props: {
-      scrollPosition: {
-        type: Object as PropType<ScrollPosition>,
-        default: null
-      },
-      useIntersectionObserver: {
-        type: Boolean,
-        default: true
-      },
-      threshold: {
-        type: Number,
-        default: 300
-      },
-      onVisible: {
-        type: Function as PropType<() => void>,
-        default: () => { }
-      },
-      height: {
-        type: Number,
-        default: 0
-      },
-      width: {
-        type: Number,
-        default: 0
-      },
-      delayMethod: {
-        type: String as PropType<'debounce' | 'throttle'>,
-        default: 'throttle'
-      },
-      delayTime: {
-        type: Number,
-        default: 300
-      },
-      placeholder: {
-        type: Object as PropType<VueNode>,
-        default: () => { }
-      }
-    },
+    props: LazyLoadComponentPropsFunc(),
     setup(props, { attrs }) {
       const useIntersectionObserver = computed(() => props.useIntersectionObserver && isIntersectionObserverAvailable())
       const baseComponentRef = shallowRef(null)