From b38cfd70ba3c61f3aa9323ce3151ba65026b9388 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Thu, 10 Oct 2024 19:18:30 +0200
Subject: [PATCH] Add type stubs for foliate-view

---
 apps/readest-app/src/components/FoliateViewer.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/src/components/FoliateViewer.tsx b/apps/readest-app/src/components/FoliateViewer.tsx
index 7a878e79..98115458 100644
--- a/apps/readest-app/src/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/components/FoliateViewer.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react';
 import { BookDoc } from '@/libs/document';
 
 type FoliateViewerProps = {
-  book: BookDoc | null;
+  book: BookDoc;
 };
 
 const getCSS = (spacing: number, justify: boolean, hyphenate: boolean) => `
@@ -46,6 +46,15 @@ const getCSS = (spacing: number, justify: boolean, hyphenate: boolean) => `
     }
 `;
 
+interface FoliateView extends HTMLElement {
+  open: (book: BookDoc) => Promise<void>;
+  renderer: {
+    setStyles: (css: string) => void;
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+  };
+}
+
 const FoliateViewer: React.FC<FoliateViewerProps> = ({ book }) => {
   const viewRef = useRef<HTMLDivElement>(null);
   const isViewCreated = useRef(false);
@@ -54,7 +63,7 @@ const FoliateViewer: React.FC<FoliateViewerProps> = ({ book }) => {
     if (isViewCreated.current) return;
     const openBook = async () => {
       await import('foliate-js/view.js');
-      const view = document.createElement('foliate-view');
+      const view = document.createElement('foliate-view') as FoliateView;
       document.body.append(view);
       viewRef.current?.appendChild(view);
 
@@ -76,7 +85,7 @@ const FoliateViewer: React.FC<FoliateViewerProps> = ({ book }) => {
     const leftThreshold = width * 0.5;
     const rightThreshold = width * 0.5;
 
-    const existingView = viewRef.current?.querySelector('foliate-view');
+    const existingView = viewRef.current?.querySelector('foliate-view') as FoliateView;
     if (clientX < leftThreshold) {
       existingView?.renderer?.prev();
     } else if (clientX > rightThreshold) {