refactor(core): refactor code by ts and composition api

build.js

@@ -5,6 +5,7 @@ const replace = require('@rollup/plugin-replace')
 const { terser } = require('rollup-plugin-terser')
 const resolve = require('rollup-plugin-node-resolve')
 const commonjs = require('rollup-plugin-commonjs')
+const typescript = require('rollup-plugin-typescript')
 const version = process.env.VERSION || require('./package.json').version
 
 const banner =
@@ -42,13 +43,15 @@ function blue (str) {
 }
 
 build({
-  input: path.resolve(__dirname, 'src/index.js'),
+  input: path.resolve(__dirname, 'src/index.ts'),
+  external: ['vue'],
   plugins: [
     resolve(),
     commonjs(),
+    typescript(),
     babel({ runtimeHelpers: true }),
     replace({
-      '__VUE_LAZYLOAD_VERSION__': JSON.stringify(version)
+      __VUE_LAZYLOAD_VERSION__: JSON.stringify(version)
     }),
     terser()
   ]
@@ -58,12 +61,14 @@ build({
 })
 
 build({
-  input: path.resolve(__dirname, 'src/index.js'),
+  input: path.resolve(__dirname, 'src/index.ts'),
+  external: ['vue'],
   plugins: [
     resolve(),
     commonjs(),
+    typescript(),
     replace({
-      '__VUE_LAZYLOAD_VERSION__': JSON.stringify(version)
+      __VUE_LAZYLOAD_VERSION__: JSON.stringify(version)
     }),
     babel({ runtimeHelpers: true })
   ]

package.json

@@ -29,7 +29,7 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not ie < 11"
   ],
   "license": "MIT",
   "jest": {
@@ -39,9 +39,8 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.12.17",
-    "@rollup/plugin-replace": "^2.3.4",
-    "@vue/test-utils": "^2.0.0-rc.4",
+    "@babel/preset-env": "^7.13.12",
+    "@rollup/plugin-replace": "^2.4.2",
     "assign-deep": "^1.0.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
@@ -50,23 +49,26 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.26.0",
-    "chai": "^4.3.0",
-    "eslint": "^4.19.1",
-    "eslint-config-standard": "^11.0.0",
+    "chai": "^4.3.4",
+    "eslint": "^7.23.0",
+    "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-standard": "^3.1.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-standard": "^5.0.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
-    "mocha": "^4.0.1",
-    "rollup": "^2.39.0",
+    "mocha": "^8.3.2",
+    "rollup": "^2.43.1",
     "rollup-plugin-babel": "^2.6.1",
     "rollup-plugin-commonjs": "^8.4.1",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-uglify": "^1.0.1",
-    "vue": "^3.0.5"
+    "rollup-plugin-uglify": "^6.0.4",
+    "rollup-plugin-typescript": "^1.0.1",
+    "tslib": "^2.1.0",
+    "typescript": "^4.1.3",
+    "vue": "^3.0.9"
   }
 }

src/index.js → src/index.ts

@@ -2,17 +2,23 @@ import Lazy from './lazy'
 import LazyComponent from './lazy-component'
 import LazyContainer from './lazy-container'
 import LazyImage from './lazy-image'
+import { VueLazyloadOptions } from '../types/lazyload'
+import { App } from 'vue'
 
 export default {
   /*
-   * install function
-   * @param  {Vue} Vue
-   * @param  {object} options  lazyload options
-   */
-  install (Vue, options = {}) {
-    const LazyClass = Lazy(Vue)
-    const lazy = new LazyClass(options)
-    const lazyContainer = new LazyContainer({ lazy })
+  * install function
+  * @param  {Vue} Vue
+  * @param  {object} options lazyload options
+  */
+  install (Vue: App, options: VueLazyloadOptions = {}) {
+    const lazy = new Lazy(options)
+    const lazyContainer = new LazyContainer(lazy)
+
+    const vueVersion = Number(Vue.version.split('.')[0])
+    if (vueVersion < 3) return new Error('Vue version at least 3.0')
+
+    Vue.config.globalProperties.$Lazyload = lazy
 
     Vue.provide('Lazyload', lazy)
 
@@ -37,10 +43,3 @@ export default {
     })
   }
 }
-
-export {
-  Lazy,
-  LazyComponent,
-  LazyImage,
-  LazyContainer
-}

src/lazy-component.ts

@@ -0,0 +1,65 @@
+import Lazy from './lazy'
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  Ref,
+  reactive,
+  computed,
+  createVNode
+} from 'vue'
+import { useCheckInView } from './useCheckInView'
+
+export default (lazy: Lazy) => {
+  return defineComponent({
+    props: {
+      tag: {
+        type: String,
+        default: 'div'
+      }
+    },
+    emits: ['show'],
+    setup(props, { emit, slots }) {
+      const el: Ref = ref(null)
+      const state = reactive({
+        loaded: false,
+        error: false,
+        attempt: 0
+      })
+      const show = ref(false)
+      const { rect, checkInView } = useCheckInView(el, lazy.options.preLoad!)
+      const load = () => {
+        show.value = true
+        state.loaded = true
+        emit('show', show.value)
+      }
+      const vm = computed(() => {
+        return {
+          el: el.value,
+          rect,
+          checkInView,
+          load,
+          state,
+        }
+      })
+
+      onMounted(() => {
+        lazy.addLazyBox(vm.value)
+        lazy.lazyLoadHandler()
+      })
+
+      onUnmounted(() => {
+        lazy.removeComponent(vm.value)
+      })
+
+      return () => createVNode(
+        props.tag,
+        {
+          ref: el
+        },
+        [show.value && slots.default?.()]
+      )
+    }
+  })
+}