fix: afterLoad type

Author: CCherry07

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     sourceType: 'module',
   },
   rules: {
+    "prettier/prettier": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
   },
   overrides: [

package.json

@@ -1,13 +1,14 @@
 {
   "name": "vue-lazy-load-image-component",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "vue-lazy-load-image-component",
-  "main": "lib/index.es.js",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
-    ".": "./lib/index.es.js",
+    ".": "./lib/index.js",
     "./lib/index.css": "./lib/index.css"
   },
-  "types": "./lib/index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/components/LazyLoadImage.tsx

@@ -15,12 +15,12 @@ const LazyLoadImage = defineComponent({
   props: LazyLoadImagePropsFunc(),
   setup(props, { attrs }) {
     const loaded = ref(false);
-    function onImageLoad() {
+    function onImageLoad(): ((payload: Event) => void) | undefined {
       if (loaded.value) {
-        return null;
+        return undefined;
       }
-      return () => {
-        props.afterLoad?.();
+      return (e) => {
+        props.afterLoad?.(e);
         loaded.value = true;
       };
     }
@@ -47,8 +47,9 @@ const LazyLoadImage = defineComponent({
         } = props;
         return imgProps;
       });
-      // @ts-ignore
-      return <img onLoad={onImageLoad()} {...imgProps.value} {...attrs} />;
+      return (
+        <img onLoad={onImageLoad()} onError={props.onImageError} {...imgProps.value} {...attrs} />
+      );
     }
     function getLazyLoadImage() {
       return (
@@ -80,7 +81,7 @@ const LazyLoadImage = defineComponent({
         backgroundSize: '100% 100%',
       };
     });
-    function getWrappedLazyLoadImage(lazyLoadImage: any) {
+    function getWrappedLazyLoadImage(lazyLoadImage: ReturnType<typeof getLazyLoadImage>) {
       return (
         <span
           class={

src/components/PlaceholderWithTracking.tsx

@@ -3,7 +3,9 @@ import { trackWindowScroll } from './trackWindowScroll.tsx';
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking';
 import { PlaceholderWithTrackingPropsFunc } from './interface.ts';
 const PlaceholderWithTracking = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PlaceholderWithTracking',
+  inheritAttrs: false,
   props: PlaceholderWithTrackingPropsFunc(),
   setup(props) {
     return () => <PlaceholderWithoutTracking {...props} />;

src/components/PlaceholderWithoutTracking.tsx

@@ -77,6 +77,7 @@ export default defineComponent({
         width: `${props.width}px`,
       };
     });
+    console.log('props', props);
 
     return () => {
       return (

src/components/__test__/LazyLoadComponent.test.ts

@@ -7,7 +7,7 @@ export interface ScrollPosition {
 }
 export const LazyLoadComponentPropsFunc = () => ({
   afterLoad: {
-    type: Function as PropType<() => void>,
+    type: Function as PropType<(payload?: Event) => void>,
     default: () => {},
   },
   beforeLoad: {
@@ -64,6 +64,10 @@ export type Effect = 'blur' | 'black-and-white' | 'opacity';
 export const LazyLoadImagePropsFunc = () => {
   return {
     ...LazyLoadComponentPropsFunc(),
+    onImageError: {
+      type: Function as PropType<(payload: Event) => void>,
+      default: () => {},
+    },
     effect: {
       type: String as PropType<Effect>,
       default: '',