feat(client): lazy render large data (#181)

Author: alexzhang1030

packages/client/src/components/inspector/InspectorStateField.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
-import { sortByKey } from '@vue/devtools-shared'
+import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
 import { formatInspectorStateValue, getInspectorStateValueType, getRawValue } from '@vue/devtools-kit'
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
+import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 import Actions from './InspectorDataField/Actions.vue'
 import type { EditorAddNewPropType } from '~/composables/inspector'
 
@@ -15,6 +16,8 @@ const props = withDefaults(defineProps<{
   depth: 0,
 })
 
+const STATE_FIELDS_LIMIT_SIZE = 30
+
 const state = useStateEditorContext()
 const bridgeRpc = useDevToolsBridgeRpc()
 const value = computed(() => formatInspectorStateValue(props.data.value))
@@ -49,11 +52,13 @@ const normalizedValue = computed(() => {
 
 const rawValue = computed(() => getRawValue(props.data.value))
 
+const limit = ref(STATE_FIELDS_LIMIT_SIZE)
+
 const normalizedChildField = computed(() => {
-  let { value, inherit } = rawValue.value
-  if (Array.isArray(value)) {
-    // @TODO: show more
-    const sliced = value.slice(0, 20)
+  const { value, inherit } = rawValue.value
+  let displayedValue: any[]
+  if (isArray(value)) {
+    const sliced = value.slice(0, limit.value)
     return sliced.map((item, i) => ({
       key: `${props.data.key}.${i}`,
       value: item,
@@ -62,22 +67,32 @@ const normalizedChildField = computed(() => {
       creating: false,
     }))
   }
-  else if (value !== null && typeof value === 'object') {
-    value = Object.keys(value).map(key => ({
+  else if (isObject(value)) {
+    displayedValue = Object.keys(value).slice(0, limit.value).map(key => ({
       key: `${props.data.key}.${key}`,
       value: value[key],
       ...inherit,
       editable: props.data.editable,
       creating: false,
     }))
     if (type.value !== 'custom')
-      value = sortByKey(value)
+      displayedValue = sortByKey(displayedValue)
   }
   else {
-    value = []
+    displayedValue = []
   }
 
-  return value === props.data.value ? {} : value
+  return displayedValue === props.data.value ? {} : displayedValue
+})
+
+const fieldsCount = computed(() => {
+  const { value } = rawValue.value
+  if (isArray(value))
+    return value.length
+  else if (isObject(value))
+    return Object.keys(value).length
+  else
+    return 0
 })
 
 const normalizedDisplayedKey = computed(() => {
@@ -150,8 +165,8 @@ function submitDrafting() {
   resetDrafting()
 }
 
-const containerRef = ref()
-const { isHovering } = useHover(containerRef)
+const containerRef = ref<HTMLDivElement>()
+const { isHovering } = useHover(() => containerRef.value)
 </script>
 
 <template>
@@ -194,6 +209,11 @@ const { isHovering } = useHover(containerRef)
           <InspectorStateField
             v-for="(field, index) in normalizedChildField" :key="index" :data="field" :depth="depth + 1" :no="no" :root-id="rootId"
           />
+          <VueButton v-if="fieldsCount > limit" v-tooltip="'Show more'" flat size="mini" class="ml-4" @click="limit += STATE_FIELDS_LIMIT_SIZE">
+            <template #icon>
+              <VueIcon icon="i-material-symbols-more-horiz" />
+            </template>
+          </VueButton>
           <div v-if="draftingNewProp.enable" :style="{ paddingLeft: `${(depth + 1) * 15 + 4}px` }">
             <span overflow-hidden text-ellipsis whitespace-nowrap state-key>
               <EditInput v-model="draftingNewProp.key" type="string" :show-actions="false" />

packages/client/src/composables/hover.ts

@@ -1,13 +1,13 @@
 import { useEventListener } from '@vueuse/core'
-import type { MaybeRef } from '@vueuse/core'
+import type { MaybeRefOrGetter } from '@vueuse/core'
 
 export interface UseHoverOptions {
   enter?: () => void
   leave?: () => void
   initital?: boolean
 }
 
-export function useHover(el: MaybeRef<EventTarget | null | undefined>, options: UseHoverOptions = {}) {
+export function useHover(el: MaybeRefOrGetter<HTMLElement | null | undefined>, options: UseHoverOptions = {}) {
   const {
     enter = () => { },
     leave = () => { },
@@ -23,6 +23,7 @@ export function useHover(el: MaybeRef<EventTarget | null | undefined>, options:
     isHovering.value = false
     leave()
   })
+
   return {
     isHovering,
   }

packages/playground/src/App.preview.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import STC from './components/ScrollToComponent.vue'
+import LargeData from './components/LargeData.vue'
 import { useAppStore } from './stores'
 
 import { availableLocales, loadLanguageAsync } from './modules/i18n'
@@ -51,6 +52,7 @@ async function toggleLocales() {
         Hello
       </router-link>
     </p>
+    <LargeData />
     <STC />
   </div>
 </template>

packages/playground/src/components/LargeData.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const arr = ref(Array.from({ length: 10000 }).fill(0).map((_, i) => i))
+const object = ref(Object.fromEntries(arr.value.map(i => [i, i])))
+const map = ref(new Map(arr.value.map(i => [i, i])))
+const set = ref(new Set(arr.value))
+</script>
+
+<template>
+  <h1>Large Data Test</h1>
+  <div>
+    <p>Array Length: {{ arr.length }}</p>
+    <p>Object Length: {{ Object.keys(object).length }}</p>
+    <p>Map Size: {{ map.size }}</p>
+    <p>Set Size: {{ set.size }}</p>
+  </div>
+</template>

packages/shared/src/general.ts

@@ -58,3 +58,21 @@ export const deepClone = rfdc({ circles: true })
 export function randomStr() {
   return Math.random().toString(36).slice(2)
 }
+
+// #region assert types
+export function isObject<T extends object>(value: any): value is T {
+  return typeof value === 'object' && !Array.isArray(value) && value !== null
+}
+
+export function isArray<T>(value: any): value is T[] {
+  return Array.isArray(value)
+}
+
+export function isSet<T>(value: any): value is Set<T> {
+  return value instanceof Set
+}
+
+export function isMap<K, V>(value: any): value is Map<K, V> {
+  return value instanceof Map
+}
+// #endregion