refactor: various components to script setup

Author: JammingBen

packages/web-app-epub-reader/src/App.vue

@@ -91,8 +91,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, nextTick, PropType, ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, nextTick, ref, unref, watch } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 import {
   AppConfigObject,
@@ -120,161 +120,133 @@ const MAX_FONT_SIZE_PERCENTAGE = 150
 const MIN_FONT_SIZE_PERCENTAGE = 50
 const FONT_SIZE_PERCENTAGE_STEP = 10
 
-export default defineComponent({
-  name: 'EpubReader',
-  props: {
-    applicationConfig: { type: Object as PropType<AppConfigObject>, required: true },
-    currentContent: {
-      type: String,
-      required: true
-    },
-    isReadOnly: { type: Boolean, required: false },
-    resource: { type: Object as PropType<Resource>, required: true }
-  },
-  emits: ['close'],
-  setup(props) {
-    const keyboardActions = useKeyboardActions()
-    const bookContainer = ref<Element>()
-    const chapters = ref<NavItem[]>([])
-    const currentChapter = ref<NavItem>()
-    const navigateLeftDisabled = ref(false)
-    const navigateRightDisabled = ref(false)
-    const localStorageData = useLocalStorage<{ fontSizePercentage?: number }>(`oc_epubReader`, {})
-    const currentFontSizePercentage = ref(unref(localStorageData).fontSizePercentage || 100)
-    const themeStore = useThemeStore()
-    const book = ref<Book>()
-    const rendition = ref<Rendition>()
-
-    const navigateLeft = () => {
-      unref(rendition).prev()
-    }
-
-    const navigateRight = () => {
-      unref(rendition).next()
-    }
-
-    const showChapter = (chapter: NavItem) => {
-      unref(rendition).display(chapter.href)
-    }
+const { currentContent, resource } = defineProps<{
+  applicationConfig: AppConfigObject
+  currentContent: string
+  resource: Resource
+  isReadOnly?: boolean
+}>()
+
+const keyboardActions = useKeyboardActions()
+const bookContainer = ref<Element>()
+const chapters = ref<NavItem[]>([])
+const currentChapter = ref<NavItem>()
+const navigateLeftDisabled = ref(false)
+const navigateRightDisabled = ref(false)
+const localStorageData = useLocalStorage<{ fontSizePercentage?: number }>(`oc_epubReader`, {})
+const currentFontSizePercentage = ref(unref(localStorageData).fontSizePercentage || 100)
+const themeStore = useThemeStore()
+const book = ref<Book>()
+const rendition = ref<Rendition>()
+
+const navigateLeft = () => {
+  unref(rendition).prev()
+}
 
-    const increaseFontSize = () => {
-      currentFontSizePercentage.value = Math.min(
-        unref(currentFontSizePercentage) + FONT_SIZE_PERCENTAGE_STEP,
-        MAX_FONT_SIZE_PERCENTAGE
-      )
-    }
+const navigateRight = () => {
+  unref(rendition).next()
+}
 
-    const resetFontSize = () => {
-      currentFontSizePercentage.value = 100
-    }
+const showChapter = (chapter: NavItem) => {
+  unref(rendition).display(chapter.href)
+}
 
-    const decreaseFontSize = () => {
-      currentFontSizePercentage.value = Math.max(
-        unref(currentFontSizePercentage) - FONT_SIZE_PERCENTAGE_STEP,
-        MIN_FONT_SIZE_PERCENTAGE
-      )
-    }
+const increaseFontSize = () => {
+  currentFontSizePercentage.value = Math.min(
+    unref(currentFontSizePercentage) + FONT_SIZE_PERCENTAGE_STEP,
+    MAX_FONT_SIZE_PERCENTAGE
+  )
+}
 
-    const increaseFontSizeDisabled = computed(() => {
-      return unref(currentFontSizePercentage) >= MAX_FONT_SIZE_PERCENTAGE
-    })
+const resetFontSize = () => {
+  currentFontSizePercentage.value = 100
+}
 
-    const decreaseFontSizeDisabled = computed(() => {
-      return unref(currentFontSizePercentage) <= MIN_FONT_SIZE_PERCENTAGE
-    })
+const decreaseFontSize = () => {
+  currentFontSizePercentage.value = Math.max(
+    unref(currentFontSizePercentage) - FONT_SIZE_PERCENTAGE_STEP,
+    MIN_FONT_SIZE_PERCENTAGE
+  )
+}
 
-    keyboardActions.bindKeyAction({ primary: Key.ArrowLeft }, () => navigateLeft())
-    keyboardActions.bindKeyAction({ primary: Key.ArrowRight }, () => navigateRight())
+const increaseFontSizeDisabled = computed(() => {
+  return unref(currentFontSizePercentage) >= MAX_FONT_SIZE_PERCENTAGE
+})
 
-    watch(
-      () => props.currentContent,
-      async () => {
-        await nextTick()
+const decreaseFontSizeDisabled = computed(() => {
+  return unref(currentFontSizePercentage) <= MIN_FONT_SIZE_PERCENTAGE
+})
 
-        if (unref(book)) {
-          unref(book).destroy()
-        }
+keyboardActions.bindKeyAction({ primary: Key.ArrowLeft }, () => navigateLeft())
+keyboardActions.bindKeyAction({ primary: Key.ArrowRight }, () => navigateRight())
 
-        const localStorageResourceData = useLocalStorage<{ currentLocation?: Location }>(
-          `oc_epubReader_resource_${props.resource.id}`,
-          {}
-        )
+watch(
+  () => currentContent,
+  async () => {
+    await nextTick()
 
-        book.value = ePub(props.currentContent)
+    if (unref(book)) {
+      unref(book).destroy()
+    }
 
-        unref(book).loaded.navigation.then(({ toc }) => {
-          chapters.value = toc
-          currentChapter.value = toc?.[0]
-        })
+    const localStorageResourceData = useLocalStorage<{ currentLocation?: Location }>(
+      `oc_epubReader_resource_${resource.id}`,
+      {}
+    )
 
-        rendition.value = unref(book).renderTo(unref(bookContainer), {
-          flow: 'paginated',
-          width: 650,
-          height: '90%' // Don't use full height to avoid cut-off text
-        })
+    book.value = ePub(currentContent)
 
-        unref(rendition).themes.register('dark', DARK_THEME_CONFIG)
-        unref(rendition).themes.register('light', LIGHT_THEME_CONFIG)
-        unref(rendition).themes.select(themeStore.currentTheme.isDark ? 'dark' : 'light')
-        unref(rendition).themes.fontSize(`${unref(currentFontSizePercentage)}%`)
-        unref(rendition).display(unref(localStorageResourceData)?.currentLocation?.start?.cfi)
+    unref(book).loaded.navigation.then(({ toc }) => {
+      chapters.value = toc
+      currentChapter.value = toc?.[0]
+    })
 
-        unref(rendition).on('keydown', (event: KeyboardEvent) => {
-          if (event.key === Key.ArrowLeft) {
-            navigateLeft()
-          }
-          if (event.key === Key.ArrowRight) {
-            navigateRight()
-          }
-        })
+    rendition.value = unref(book).renderTo(unref(bookContainer), {
+      flow: 'paginated',
+      width: 650,
+      height: '90%' // Don't use full height to avoid cut-off text
+    })
 
-        unref(rendition).on('relocated', () => {
-          const currentLocation = unref(rendition).currentLocation() as any & Location
-          localStorageResourceData.value = { currentLocation }
-          navigateLeftDisabled.value = currentLocation.atStart === true
-          navigateRightDisabled.value = currentLocation.atEnd === true
+    unref(rendition).themes.register('dark', DARK_THEME_CONFIG)
+    unref(rendition).themes.register('light', LIGHT_THEME_CONFIG)
+    unref(rendition).themes.select(themeStore.currentTheme.isDark ? 'dark' : 'light')
+    unref(rendition).themes.fontSize(`${unref(currentFontSizePercentage)}%`)
+    unref(rendition).display(unref(localStorageResourceData)?.currentLocation?.start?.cfi)
 
-          const locationCfi = currentLocation.start.cfi
-          const spineItem = unref(book).spine.get(locationCfi)
-          const navItem = unref(book).navigation.get(spineItem.href)
-          // Might be sub nav item and therefore undefined
-          if (navItem) {
-            currentChapter.value = navItem
-          }
-        })
-      },
-      {
-        immediate: true
+    unref(rendition).on('keydown', (event: KeyboardEvent) => {
+      if (event.key === Key.ArrowLeft) {
+        navigateLeft()
       }
-    )
+      if (event.key === Key.ArrowRight) {
+        navigateRight()
+      }
+    })
 
-    watch(currentFontSizePercentage, () => {
-      unref(rendition).themes.fontSize(`${unref(currentFontSizePercentage)}%`)
-      localStorageData.value = {
-        ...unref(localStorageData),
-        fontSizePercentage: unref(currentFontSizePercentage)
+    unref(rendition).on('relocated', () => {
+      const currentLocation = unref(rendition).currentLocation() as any & Location
+      localStorageResourceData.value = { currentLocation }
+      navigateLeftDisabled.value = currentLocation.atStart === true
+      navigateRightDisabled.value = currentLocation.atEnd === true
+
+      const locationCfi = currentLocation.start.cfi
+      const spineItem = unref(book).spine.get(locationCfi)
+      const navItem = unref(book).navigation.get(spineItem.href)
+      // Might be sub nav item and therefore undefined
+      if (navItem) {
+        currentChapter.value = navItem
       }
     })
+  },
+  {
+    immediate: true
+  }
+)
 
-    return {
-      bookContainer,
-      navigateLeft,
-      navigateLeftDisabled,
-      navigateRight,
-      navigateRightDisabled,
-      currentChapter,
-      chapters,
-      showChapter,
-      resetFontSize,
-      increaseFontSize,
-      decreaseFontSize,
-      increaseFontSizeDisabled,
-      decreaseFontSizeDisabled,
-      currentFontSizePercentage,
-      FONT_SIZE_PERCENTAGE_STEP,
-      rendition,
-      book
-    }
+watch(currentFontSizePercentage, () => {
+  unref(rendition).themes.fontSize(`${unref(currentFontSizePercentage)}%`)
+  localStorageData.value = {
+    ...unref(localStorageData),
+    fontSizePercentage: unref(currentFontSizePercentage)
   }
 })
 </script>

packages/web-app-epub-reader/tests/unit/app.spec.ts

@@ -62,26 +62,26 @@ describe('Epub reader app', () => {
     it('sets the theme based on current theme setting', async () => {
       const { wrapper } = getWrapper({ localStorageGeneral: { fontSizePercentage: 50 } })
       await nextTicks(2)
-      expect(wrapper.vm.rendition.themes.select).toHaveBeenCalledWith('light')
+      expect((wrapper.vm as any).rendition.themes.select).toHaveBeenCalledWith('light')
     })
   })
   describe('font size', () => {
     it('initializes with default font size percentage', async () => {
       const { wrapper } = getWrapper()
       await nextTicks(2)
-      expect(wrapper.vm.rendition.themes.fontSize).toHaveBeenCalledWith('100%')
+      expect((wrapper.vm as any).rendition.themes.fontSize).toHaveBeenCalledWith('100%')
     })
     it('initializes with local storage font size when set', async () => {
       const { wrapper } = getWrapper({ localStorageGeneral: { fontSizePercentage: 50 } })
       await nextTicks(2)
-      expect(wrapper.vm.rendition.themes.fontSize).toHaveBeenCalledWith('50%')
+      expect((wrapper.vm as any).rendition.themes.fontSize).toHaveBeenCalledWith('50%')
     })
     describe('increase font size button', () => {
       it('increases font size when clicked', async () => {
         const { wrapper } = getWrapper()
         await nextTicks(2)
         await wrapper.find(selectors.increaseFontSize).trigger('click')
-        expect(wrapper.vm.rendition.themes.fontSize).toHaveBeenCalledWith('110%')
+        expect((wrapper.vm as any).rendition.themes.fontSize).toHaveBeenCalledWith('110%')
       })
       it('is disabled when "MAX_FONT_SIZE_PERCENTAGE" is reached', () => {
         const { wrapper } = getWrapper({ localStorageGeneral: { fontSizePercentage: 150 } })
@@ -95,7 +95,7 @@ describe('Epub reader app', () => {
         const { wrapper } = getWrapper()
         await nextTicks(2)
         await wrapper.find(selectors.decreaseFontSize).trigger('click')
-        expect(wrapper.vm.rendition.themes.fontSize).toHaveBeenCalledWith('90%')
+        expect((wrapper.vm as any).rendition.themes.fontSize).toHaveBeenCalledWith('90%')
       })
       it('is disabled when "MIN_FONT_SIZE_PERCENTAGE" is reached', () => {
         const { wrapper } = getWrapper({ localStorageGeneral: { fontSizePercentage: 50 } })
@@ -109,7 +109,7 @@ describe('Epub reader app', () => {
         const { wrapper } = getWrapper({ localStorageGeneral: { fontSizePercentage: 50 } })
         await nextTicks(2)
         await wrapper.find(selectors.resetFontSize).trigger('click')
-        expect(wrapper.vm.rendition.themes.fontSize).toHaveBeenCalledWith('100%')
+        expect((wrapper.vm as any).rendition.themes.fontSize).toHaveBeenCalledWith('100%')
       })
       it('shows the current font size', async () => {
         const { wrapper } = getWrapper()
@@ -127,7 +127,7 @@ describe('Epub reader app', () => {
         }
       })
       await nextTicks(2)
-      expect(wrapper.vm.rendition.display).toHaveBeenCalledWith(
+      expect((wrapper.vm as any).rendition.display).toHaveBeenCalledWith(
         'epubcfi(/6/4!/4/4/14/2/150/2/1:23)'
       )
     })
@@ -147,7 +147,7 @@ describe('Epub reader app', () => {
         await nextTicks(2)
         const chapterElements = wrapper.findAll(selectors.chaptersListItem)
         await chapterElements[1].find('.oc-button').trigger('click')
-        expect(wrapper.vm.rendition.display).toHaveBeenCalledWith('c2')
+        expect((wrapper.vm as any).rendition.display).toHaveBeenCalledWith('c2')
       })
     })
     describe('chapters select', () => {
@@ -166,7 +166,7 @@ describe('Epub reader app', () => {
           close: false
         })
         await chapterElements[1].trigger('click')
-        expect(wrapper.vm.rendition.display).toHaveBeenCalledWith('c2')
+        expect((wrapper.vm as any).rendition.display).toHaveBeenCalledWith('c2')
       })
     })
   })
@@ -177,30 +177,30 @@ describe('Epub reader app', () => {
         await nextTicks(2)
         const keyboardEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft' })
         document.dispatchEvent(keyboardEvent)
-        expect(wrapper.vm.rendition.prev).toHaveBeenCalled()
+        expect((wrapper.vm as any).rendition.prev).toHaveBeenCalled()
       })
       it('calls method "next" when right arrow key is pressed', async () => {
         const { wrapper } = getWrapper()
         await nextTicks(2)
         const keyboardEvent = new KeyboardEvent('keydown', { key: 'ArrowRight' })
         document.dispatchEvent(keyboardEvent)
-        expect(wrapper.vm.rendition.next).toHaveBeenCalled()
+        expect((wrapper.vm as any).rendition.next).toHaveBeenCalled()
       })
     })
     describe('navigate left button', () => {
       it('calls method "prev" when clicked', async () => {
         const { wrapper } = getWrapper()
         await nextTicks(2)
         await wrapper.find(selectors.navigateLeft).trigger('click')
-        expect(wrapper.vm.rendition.prev).toHaveBeenCalled()
+        expect((wrapper.vm as any).rendition.prev).toHaveBeenCalled()
       })
     })
     describe('navigate right button', () => {
       it('calls method "next" when clicked', async () => {
         const { wrapper } = getWrapper()
         await nextTicks(2)
         await wrapper.find(selectors.navigateRight).trigger('click')
-        expect(wrapper.vm.rendition.next).toHaveBeenCalled()
+        expect((wrapper.vm as any).rendition.next).toHaveBeenCalled()
       })
     })
   })