style: update style

Author: CCherry07

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     es2021: true,
   },
   extends: ['plugin:vue/vue3-recommended', 'prettier', 'plugin:prettier/recommended'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',

package.json

@@ -52,6 +52,7 @@
     "lib"
   ],
   "dependencies": {
+    "@typescript-eslint/parser": "^5.59.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/test-utils": "^2.3.2",
     "babel": "^6.23.0",

pnpm-lock.yaml

@@ -1,11 +1,13 @@
-import { DefineComponent } from 'vue'
-import { reactive, computed, watch, defineComponent, ExtractPropTypes } from 'vue'
-import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.tsx'
+import type { DefineComponent, ExtractPropTypes } from 'vue';
+import { reactive, computed, watch, defineComponent } from 'vue';
+import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.tsx';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
-import PlaceholderWithTracking from './PlaceholderWithTracking.tsx'
-import { LazyLoadComponentPropsFunc } from "./interface.ts";
+import PlaceholderWithTracking from './PlaceholderWithTracking.tsx';
+import { LazyLoadComponentPropsFunc } from './interface.ts';
 
-export type LazyLoadComponentProps = Partial<ExtractPropTypes<ReturnType<typeof LazyLoadComponentPropsFunc>>>
+export type LazyLoadComponentProps = Partial<
+  ExtractPropTypes<ReturnType<typeof LazyLoadComponentPropsFunc>>
+>;
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
@@ -17,39 +19,42 @@ export default defineComponent({
       visible: props.visibleByDefault ?? false,
       loaded: false,
       error: false,
-    })
-    const isScrollTracked = computed(() => Boolean(
-      props.scrollPosition &&
-      Number.isFinite(props.scrollPosition.x) &&
-      props.scrollPosition.x >= 0 &&
-      Number.isFinite(props.scrollPosition.y) &&
-      props.scrollPosition.y >= 0
-    ))
+    });
+    const isScrollTracked = computed(() =>
+      Boolean(
+        props.scrollPosition &&
+          Number.isFinite(props.scrollPosition.x) &&
+          props.scrollPosition.x >= 0 &&
+          Number.isFinite(props.scrollPosition.y) &&
+          props.scrollPosition.y >= 0,
+      ),
+    );
 
-    watch(state,
+    watch(
+      state,
       (prevState, state) => {
         if (prevState.visible !== state?.visible) {
           props.afterLoad?.();
         }
       },
-      { immediate: true }
-    )
+      { immediate: true },
+    );
 
     const onVisible = () => {
-      state.visible = true
-      props.afterLoad?.()
-    }
+      state.visible = true;
+      props.afterLoad?.();
+    };
 
     if (props.visibleByDefault) {
-      props.beforeLoad?.()
-      props.afterLoad?.()
+      props.beforeLoad?.();
+      props.afterLoad?.();
     }
     return () => {
       if (state.visible) {
-        return slots.default?.()
+        return slots.default?.();
       }
-      return (isScrollTracked ||
-        (props.useIntersectionObserver && isIntersectionObserverAvailable()) ?
+      return isScrollTracked.value ||
+        (props.useIntersectionObserver && isIntersectionObserverAvailable()) ? (
         <PlaceholderWithoutTracking
           height={props.height}
           onVisible={onVisible}
@@ -59,7 +64,7 @@ export default defineComponent({
           useIntersectionObserver={props.useIntersectionObserver}
           width={props.width}
         />
-        :
+      ) : (
         <PlaceholderWithTracking
           height={props.height}
           onVisible={onVisible}
@@ -68,8 +73,8 @@ export default defineComponent({
           threshold={props.threshold}
           useIntersectionObserver={props.useIntersectionObserver}
           width={props.width}
-        />)
-    }
-  }
-}) as DefineComponent<LazyLoadComponentProps>
-
+        />
+      );
+    };
+  },
+}) as DefineComponent<LazyLoadComponentProps>;

src/components/LazyLoadComponent.tsx

@@ -1,9 +1,12 @@
-import type { DefineComponent } from 'vue';
-import { ExtractPropTypes, computed, defineComponent, ref } from 'vue';
+import type { DefineComponent, ExtractPropTypes } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import LazyLoadComponent from './LazyLoadComponent.jsx';
 import { LazyLoadImagePropsFunc } from './interface.js';
-
-export type LazyLoadImageProps = Partial<ExtractPropTypes<ReturnType<typeof LazyLoadImagePropsFunc>>> & Partial<Omit<HTMLImageElement, 'style'>>
+import '../effects/index.css';
+export type LazyLoadImageProps = Partial<
+  ExtractPropTypes<ReturnType<typeof LazyLoadImagePropsFunc>>
+> &
+  Partial<Omit<HTMLImageElement, 'style'>>;
 
 const LazyLoadImage = defineComponent({
   name: 'LazyLoadImage',
@@ -14,12 +17,12 @@ const LazyLoadImage = defineComponent({
     const loaded = ref(false);
     function onImageLoad() {
       if (loaded.value) {
-        return null
+        return null;
       }
       return () => {
-        props.afterLoad?.()
-        loaded.value = true
-      }
+        props.afterLoad?.();
+        loaded.value = true;
+      };
     }
     function getImg() {
       const imgProps = computed(() => {
@@ -42,10 +45,10 @@ const LazyLoadImage = defineComponent({
           loadedClassName,
           ...imgProps
         } = props;
-        return imgProps
-      })
+        return imgProps;
+      });
       // @ts-ignore
-      return <img onLoad={onImageLoad()} {...imgProps.value} {...attrs} />
+      return <img onLoad={onImageLoad()} {...imgProps.value} {...attrs} />;
     }
     function getLazyLoadImage() {
       return (
@@ -65,25 +68,26 @@ const LazyLoadImage = defineComponent({
         >
           {getImg()}
         </LazyLoadComponent>
-      )
+      );
     }
-    const loadedClassName = computed(() => loaded.value ? ' lazy-load-image-loaded' : '')
+    const loadedClassName = computed(() => (loaded.value ? ' lazy-load-image-loaded' : ''));
     const wrapperBackground = computed(() => {
       if (loaded.value || !props.placeholderSrc) {
-        return {}
+        return {};
       }
       return {
         backgroundImage: `url(${props.placeholderSrc})`,
         backgroundSize: '100% 100%',
-      }
-    })
+      };
+    });
     function getWrappedLazyLoadImage(lazyLoadImage: any) {
       return (
         <span
           class={
             props.wrapperClassName +
             ' lazy-load-image-background ' +
-            props.effect + loadedClassName.value
+            props.effect +
+            loadedClassName.value
           }
           style={{
             ...wrapperBackground.value,
@@ -106,7 +110,7 @@ const LazyLoadImage = defineComponent({
         return lazyLoadImage;
       }
       return getWrappedLazyLoadImage(lazyLoadImage);
-    }
+    };
   },
 });
 

src/components/LazyLoadImage.tsx

@@ -1,15 +1,13 @@
-import { defineComponent } from 'vue'
-import { trackWindowScroll } from './trackWindowScroll.tsx'
-import PlaceholderWithoutTracking from './PlaceholderWithoutTracking'
-import { PlaceholderWithTrackingPropsFunc } from './interface.ts'
+import { defineComponent } from 'vue';
+import { trackWindowScroll } from './trackWindowScroll.tsx';
+import PlaceholderWithoutTracking from './PlaceholderWithoutTracking';
+import { PlaceholderWithTrackingPropsFunc } from './interface.ts';
 const PlaceholderWithTracking = defineComponent({
   name: 'PlaceholderWithTracking',
   props: PlaceholderWithTrackingPropsFunc(),
   setup(props) {
-    return () => (
-      <PlaceholderWithoutTracking {...props} />
-    )
-  }
-})
+    return () => <PlaceholderWithoutTracking {...props} />;
+  },
+});
 
-export default trackWindowScroll(PlaceholderWithTracking)
+export default trackWindowScroll(PlaceholderWithTracking);