style: use hooks

Author: hoiheart

src/hooks.ts

@@ -1,71 +1,118 @@
-import { computed, onBeforeUnmount, onMounted, toRaw } from 'vue'
-import throttle from 'lodash-es/throttle'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useThrottleFn, debouncedWatch } from '@vueuse/core'
+import { renderLines } from './utils'
 
 import type { ComputedRef, Ref } from 'vue'
-import type { Meta, Lines, VirtualScroll } from './types'
+import type { Mode, Theme, Meta, Lines, VirtualScroll } from './types'
 
-type UseVirtualScroll = (params: {
-  viewer: Ref<null|HTMLElement>;
+interface Props {
+  mode: Mode;
+  theme: Theme;
+  language: string;
+  prev: string;
+  current: string;
+  inputDelay: number;
   virtualScroll: boolean|VirtualScroll;
-  meta: Ref<Array<Meta>>;
-  render: Ref<Array<Lines>>;
-}) => {
-  minHeight: ComputedRef<null|number>;
-  scrollOptions: ComputedRef<null|VirtualScroll>;
-  setMeta: () => void;
 }
 
-export const useVirtualScroll: UseVirtualScroll = ({ viewer, virtualScroll, meta }) => {
-  const scrollOptions = computed(() => {
-    if (!virtualScroll) return null
-    return {
-      height: 500,
-      lineMinHeight: 24,
-      scrollDelay: 250,
-      ...(typeof virtualScroll === 'object' ? toRaw(virtualScroll) : {})
-    }
-  })
+export const useRender = (props: Props, viewer: Ref<null|HTMLElement>, scrollOptions: ComputedRef<false|VirtualScroll>) => {
+  const render = ref<Array<Lines>>([])
+  const meta = ref<Array<Meta>>([])
+  const visible = computed(() => meta.value.filter(item => item.visible))
+
+  // debouncedWatch(
+  //   [() => props.mode, () => props.prev, () => props.current, () => props.inputDelay],
+  //   () => { console.log('changed!') },
+  //   { debounce: props.inputDelay }
+  // )
+
+  watch(
+    [() => props.mode, () => props.prev, () => props.current],
+    () => {
+      const result = renderLines(props.mode, props.prev, props.current)
+      render.value = result
+      meta.value.splice(render.value.length)
 
+      render.value.map((v, index: number) => {
+        const item = meta.value[index]
+
+        if (scrollOptions.value) {
+          meta.value[index] = {
+            index,
+            visible: item?.visible || false,
+            top: item?.top || undefined,
+            height: item?.height || scrollOptions.value.lineMinHeight
+          }
+        } else {
+          meta.value[index] = {
+            index,
+            visible: true
+          }
+        }
+      })
+    },
+    { immediate: true }
+  )
+
+  return {
+    meta,
+    render,
+    visible
+  }
+}
+
+export const useVirtualScroll = (props: Props, viewer: Ref<null|HTMLElement>, scrollOptions: ComputedRef<false|VirtualScroll>, meta: Ref<Array<Meta>>) => {
   const minHeight = computed(() => {
-    if (!scrollOptions.value) return null
-    return meta.value.reduce((acc, curr) => {
+    if (!scrollOptions.value) return undefined
+    const reduce = meta.value.reduce((acc, curr) => {
       curr.top = acc
-      return acc + curr.height
+      return acc + (curr.height as number)
     }, 0)
+    return reduce + 'px'
   })
 
   const setMeta = () => {
-    console.log('setMeta')
     if (!viewer.value || !scrollOptions.value) return
-    const start = viewer.value.scrollTop - scrollOptions.value.height * 1.5
-    const end = viewer.value.scrollTop + scrollOptions.value.height + scrollOptions.value.height * 1.5
+    const scrollTop = viewer.value.scrollTop
+    const height = scrollOptions.value.height
+    const min = scrollTop - height * 1.5
+    const max = scrollTop + height + height * 1.5
 
     meta.value.reduce((acc, curr) => {
-      if (acc >= start && acc <= end) {
+      if (acc >= min && acc <= max) {
         curr.visible = true
       } else {
         curr.visible = false
       }
 
       curr.top = acc
-      return acc + curr.height
+      return acc + (curr.height as number)
     }, 0)
   }
 
   onMounted(() => {
     if (!scrollOptions.value) return
-    viewer.value?.addEventListener('scroll', throttle(setMeta, scrollOptions.value.scrollDelay))
-    setMeta()
+    viewer.value?.addEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.scrollDelay))
+
+    // debouncedWatch(
+    //   [() => props.mode, () => props.prev, () => props.current, () => props.inputDelay],
+    //   () => { console.log('changed!') },
+    //   { debounce: props.inputDelay }
+    // )
+
+    watch(
+      [() => props.mode, () => props.prev, () => props.current],
+      () => nextTick(setMeta),
+      { immediate: true }
+    )
   })
 
   onBeforeUnmount(() => {
     if (!scrollOptions.value) return
-    viewer.value?.removeEventListener('scroll', throttle(setMeta, scrollOptions.value.scrollDelay))
+    viewer.value?.removeEventListener('scroll', useThrottleFn(setMeta, scrollOptions.value.scrollDelay))
   })
 
   return {
-    minHeight,
-    scrollOptions,
-    setMeta
+    minHeight
   }
 }