diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index 77f58c63..d1f4c245 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -2,7 +2,7 @@ import React, { FC, memo, useEffect } from "react"
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"
import { useSetRecoilState } from "recoil"
import { Home as ComicsHome } from "./comics/Home"
-import { Home } from "./Home"
+import { Home } from "./home/Home"
import { ChakraProvider, ColorModeProvider } from "@chakra-ui/react"
import { theme } from "./theme/theme"
import { ReaderInstance } from "./types"
@@ -11,36 +11,41 @@ import { isZoomingState } from "./state"
import { ErrorBoundary } from "./common/ErrorBoundary"
import { useReader } from "./reader/useReader"
import { Subscribe } from "@react-rxjs/core"
-import { Reader } from "./Reader"
+import { Reader } from "./reader/Reader"
import "@fontsource/dancing-script/400.css"
+import { QueryClient, QueryClientProvider } from "reactjrx"
+
+const queryClient = new QueryClient()
export const App = memo(() => {
const { reader, setReader } = useReader()
return (
-
-
-
-
-
-
-
-
- }
- />
- } />
- } />
- } />
- } />
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ }
+ />
+ } />
+ } />
+ } />
+ } />
+
+
+
+
+
+
+
)
})
diff --git a/packages/demo/src/classic/ClassicSettings.tsx b/packages/demo/src/classic/ClassicSettings.tsx
index 3c9ea5e1..82dc4228 100644
--- a/packages/demo/src/classic/ClassicSettings.tsx
+++ b/packages/demo/src/classic/ClassicSettings.tsx
@@ -8,7 +8,7 @@ import { Settings } from "../common/Settings"
import { ArrowDownIcon, ArrowUpIcon, ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons"
import { OtherSettings } from "../common/OtherSettings"
import { useReaderSettings } from "../common/useReaderSettings"
-import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants"
+import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants.shared"
type Theme = Parameters[0]
diff --git a/packages/demo/src/classic/Reader.tsx b/packages/demo/src/classic/Reader.tsx
index 037d983d..e99f4ab2 100644
--- a/packages/demo/src/classic/Reader.tsx
+++ b/packages/demo/src/classic/Reader.tsx
@@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
import { useGestureHandler } from "./useGestureHandler"
import { Reader as ReactReader } from "@prose-reader/react"
import { Manifest } from "@prose-reader/core"
-import { QuickMenu } from "../QuickMenu"
+import { QuickMenu } from "../reader/QuickMenu"
import {
bookReadyState,
isHelpOpenState,
@@ -14,17 +14,17 @@ import {
useResetStateOnUnMount
} from "../state"
import { ClassicSettings } from "./ClassicSettings"
-import { Loading } from "../Loading"
+import { Loading } from "../reader/Loading"
import { createAppReader, ReactReaderProps, ReaderInstance } from "../types"
-import { useBookmarks } from "../useBookmarks"
+import { useBookmarks } from "../reader/useBookmarks"
import { useParams } from "react-router"
-import { BookError } from "../BookError"
+import { BookError } from "../reader/BookError"
import { getEpubUrlFromLocation } from "../serviceWorker/utils"
-import { HighlightMenu } from "../HighlightMenu"
-import { SearchDialog } from "../SearchDialog"
-import { HelpDialog } from "../HelpDialog"
+import { HighlightMenu } from "../reader/HighlightMenu"
+import { SearchDialog } from "../reader/SearchDialog"
+import { HelpDialog } from "../reader/HelpDialog"
import { useReader } from "../reader/useReader"
-import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants"
+import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants.shared"
export const Reader = ({
onReader,
diff --git a/packages/demo/src/comics/Reader.tsx b/packages/demo/src/comics/Reader.tsx
index 69d62a30..07b2145d 100644
--- a/packages/demo/src/comics/Reader.tsx
+++ b/packages/demo/src/comics/Reader.tsx
@@ -3,15 +3,15 @@ import { useEffect } from "react"
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
import { useGestureHandler } from "./useGestureHandler"
import { Reader as ReactReader } from "@prose-reader/react"
-import { QuickMenu } from "../QuickMenu"
+import { QuickMenu } from "../reader/QuickMenu"
import { bookReadyState, isMenuOpenState, manifestState, useResetStateOnUnMount } from "../state"
import { ComicsSettings } from "./ComicsSettings"
-import { Loading } from "../Loading"
-import { useBookmarks } from "../useBookmarks"
+import { Loading } from "../reader/Loading"
+import { useBookmarks } from "../reader/useBookmarks"
import { useParams } from "react-router"
-import { BookError } from "../BookError"
+import { BookError } from "../reader/BookError"
import { getEpubUrlFromLocation } from "../serviceWorker/utils"
-import { HighlightMenu } from "../HighlightMenu"
+import { HighlightMenu } from "../reader/HighlightMenu"
import { ZoomingIndicator } from "../common/ZoomingIndicator"
import { Manifest } from "@prose-reader/core"
import { createAppReader, ReactReaderProps, ReaderInstance } from "../types"
diff --git a/packages/demo/src/constants.shared.ts b/packages/demo/src/constants.shared.ts
index c0f4c4f4..7d5811f9 100644
--- a/packages/demo/src/constants.shared.ts
+++ b/packages/demo/src/constants.shared.ts
@@ -1 +1,3 @@
-export const PROJECT_NAME = `@prose/web-reader`
\ No newline at end of file
+export const PROJECT_NAME = `@prose/web-reader`
+export const FONT_SCALE_MIN = 0.2
+export const FONT_SCALE_MAX = 5
\ No newline at end of file
diff --git a/packages/demo/src/constants.ts b/packages/demo/src/constants.ts
deleted file mode 100644
index b72baf24..00000000
--- a/packages/demo/src/constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const FONT_SCALE_MIN = 0.2
-export const FONT_SCALE_MAX = 5
\ No newline at end of file
diff --git a/packages/demo/src/Home.tsx b/packages/demo/src/home/Home.tsx
similarity index 98%
rename from packages/demo/src/Home.tsx
rename to packages/demo/src/home/Home.tsx
index 517ea488..8b6e9ca0 100644
--- a/packages/demo/src/Home.tsx
+++ b/packages/demo/src/home/Home.tsx
@@ -1,7 +1,7 @@
import React from "react"
import { Link } from "react-router-dom"
import { Button as ChakraButton, Text, Box, Heading, Link as ChakraLink } from "@chakra-ui/react"
-import { OrDivider } from "./common/OrDivider"
+import { OrDivider } from "../common/OrDivider"
import { ExternalLinkIcon } from "@chakra-ui/icons"
export const Home = () => {
diff --git a/packages/demo/src/BookError.tsx b/packages/demo/src/reader/BookError.tsx
similarity index 100%
rename from packages/demo/src/BookError.tsx
rename to packages/demo/src/reader/BookError.tsx
diff --git a/packages/demo/src/HelpDialog.tsx b/packages/demo/src/reader/HelpDialog.tsx
similarity index 83%
rename from packages/demo/src/HelpDialog.tsx
rename to packages/demo/src/reader/HelpDialog.tsx
index 7cd8dd66..97ff38bd 100644
--- a/packages/demo/src/HelpDialog.tsx
+++ b/packages/demo/src/reader/HelpDialog.tsx
@@ -1,8 +1,8 @@
import { List, ListIcon, ListItem } from "@chakra-ui/react"
import React from "react"
-import { FullScreenModal } from "./common/FullScreenModal"
-import { usePagination } from "./reader/state"
-import { useReader } from "./reader/useReader"
+import { FullScreenModal } from "../common/FullScreenModal"
+import { usePagination } from "./state"
+import { useReader } from "./useReader"
export const HelpDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: boolean }) => {
const { reader$ } = useReader()
diff --git a/packages/demo/src/HighlightMenu.tsx b/packages/demo/src/reader/HighlightMenu.tsx
similarity index 93%
rename from packages/demo/src/HighlightMenu.tsx
rename to packages/demo/src/reader/HighlightMenu.tsx
index 59d085a2..9a8d4be5 100644
--- a/packages/demo/src/HighlightMenu.tsx
+++ b/packages/demo/src/reader/HighlightMenu.tsx
@@ -1,8 +1,8 @@
import React, { useCallback } from "react"
import { useRecoilState } from "recoil"
-import { Button } from "./common/Button"
-import { currentHighlight } from "./state"
-import { useReader } from "./reader/useReader"
+import { Button } from "../common/Button"
+import { currentHighlight } from "../state"
+import { useReader } from "./useReader"
export const HighlightMenu = () => {
const { reader } = useReader()
diff --git a/packages/demo/src/Loading.tsx b/packages/demo/src/reader/Loading.tsx
similarity index 100%
rename from packages/demo/src/Loading.tsx
rename to packages/demo/src/reader/Loading.tsx
diff --git a/packages/demo/src/QuickMenu.tsx b/packages/demo/src/reader/QuickMenu.tsx
similarity index 97%
rename from packages/demo/src/QuickMenu.tsx
rename to packages/demo/src/reader/QuickMenu.tsx
index 7e7a57ab..08f84940 100644
--- a/packages/demo/src/QuickMenu.tsx
+++ b/packages/demo/src/reader/QuickMenu.tsx
@@ -4,10 +4,10 @@ import { useRecoilValue, useSetRecoilState } from "recoil"
import { IconButton, Box } from "@chakra-ui/react"
import { ArrowBackIcon, ArrowForwardIcon, SettingsIcon, SearchIcon, HamburgerIcon, QuestionOutlineIcon } from "@chakra-ui/icons"
import { Scrubber } from "./Scrubber"
-import { bookTitleState, isComicState, isHelpOpenState, isSearchOpenState, isTocOpenState } from "./state"
-import { AppBar } from "./common/AppBar"
-import { useReader } from "./reader/useReader"
-import { usePagination } from "./reader/state"
+import { bookTitleState, isComicState, isHelpOpenState, isSearchOpenState, isTocOpenState } from "../state"
+import { AppBar } from "../common/AppBar"
+import { useReader } from "./useReader"
+import { usePagination } from "./state"
import { useObserve } from "reactjrx"
import { NEVER } from "rxjs"
diff --git a/packages/demo/src/Reader.tsx b/packages/demo/src/reader/Reader.tsx
similarity index 81%
rename from packages/demo/src/Reader.tsx
rename to packages/demo/src/reader/Reader.tsx
index 04e60570..b5b648f0 100644
--- a/packages/demo/src/Reader.tsx
+++ b/packages/demo/src/reader/Reader.tsx
@@ -1,12 +1,12 @@
import React, { memo } from "react"
-import { ReaderInstance } from "./types"
+import { ReaderInstance } from "../types"
import { useManifest } from "./useManifest"
-import { Reader as ClassicReader } from "./classic/Reader"
-import { Reader as ComicsReader } from "./comics/Reader"
+import { Reader as ClassicReader } from "../classic/Reader"
+import { Reader as ComicsReader } from "../comics/Reader"
import { useParams } from "react-router-dom"
import { TocDialog } from "./TocDialog"
import { useRecoilState } from "recoil"
-import { isTocOpenState } from "./state"
+import { isTocOpenState } from "../state"
export const Reader = memo(({ onReader }: { onReader: (instance: ReaderInstance | undefined) => void }) => {
const { url = `` } = useParams<`url`>()
diff --git a/packages/demo/src/Scrubber.tsx b/packages/demo/src/reader/Scrubber.tsx
similarity index 92%
rename from packages/demo/src/Scrubber.tsx
rename to packages/demo/src/reader/Scrubber.tsx
index 55220811..42a55709 100644
--- a/packages/demo/src/Scrubber.tsx
+++ b/packages/demo/src/reader/Scrubber.tsx
@@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useState } from "react"
import RcSlider from "rc-slider"
import "rc-slider/assets/index.css"
import { useRecoilValue } from "recoil"
-import { isComicState, manifestState } from "./state"
-import { useReader } from "./reader/useReader"
-import { usePagination } from "./reader/state"
+import { isComicState, manifestState } from "../state"
+import { useReader } from "./useReader"
+import { usePagination } from "./state"
export const Scrubber = () => {
const { reader, reader$ } = useReader()
diff --git a/packages/demo/src/SearchDialog.tsx b/packages/demo/src/reader/SearchDialog.tsx
similarity index 97%
rename from packages/demo/src/SearchDialog.tsx
rename to packages/demo/src/reader/SearchDialog.tsx
index 76ade12d..955bf5a3 100644
--- a/packages/demo/src/SearchDialog.tsx
+++ b/packages/demo/src/reader/SearchDialog.tsx
@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useState } from "react"
import { tap } from "rxjs/operators"
import { SearchResult } from "@prose-reader/enhancer-search"
import { groupBy } from "@prose-reader/core"
-import { FullScreenModal } from "./common/FullScreenModal"
-import { useReader } from "./reader/useReader"
+import { FullScreenModal } from "../common/FullScreenModal"
+import { useReader } from "./useReader"
export const SearchDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: boolean }) => {
const [text, setText] = useState("")
diff --git a/packages/demo/src/TocDialog.tsx b/packages/demo/src/reader/TocDialog.tsx
similarity index 93%
rename from packages/demo/src/TocDialog.tsx
rename to packages/demo/src/reader/TocDialog.tsx
index 1b499c10..2f6829cb 100644
--- a/packages/demo/src/TocDialog.tsx
+++ b/packages/demo/src/reader/TocDialog.tsx
@@ -2,10 +2,10 @@ import { CheckCircleIcon } from "@chakra-ui/icons"
import { List, ListIcon, ListItem, Text } from "@chakra-ui/react"
import React, { useEffect, useState } from "react"
import { useRecoilValue } from "recoil"
-import { manifestState } from "./state"
-import { FullScreenModal } from "./common/FullScreenModal"
-import { useReader } from "./reader/useReader"
-import { usePagination } from "./reader/state"
+import { manifestState } from "../state"
+import { FullScreenModal } from "../common/FullScreenModal"
+import { useReader } from "./useReader"
+import { usePagination } from "./state"
export const TocDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: boolean }) => {
const { nav, renditionLayout } = useRecoilValue(manifestState) || {}
diff --git a/packages/demo/src/useBookmarks.ts b/packages/demo/src/reader/useBookmarks.ts
similarity index 87%
rename from packages/demo/src/useBookmarks.ts
rename to packages/demo/src/reader/useBookmarks.ts
index 4587b202..c7e209ff 100644
--- a/packages/demo/src/useBookmarks.ts
+++ b/packages/demo/src/reader/useBookmarks.ts
@@ -1,7 +1,6 @@
import { useEffect } from "react"
import { tap, switchMap } from "rxjs/operators"
-import { Report } from "./report"
-import { ReaderInstance } from "./types"
+import { ReaderInstance } from "../types"
type Bookmark = Parameters[0][number]
@@ -17,7 +16,7 @@ export const useBookmarks = (reader: ReaderInstance | undefined, bookKey: string
const importableBookmarks = reader.bookmarks.mapToImportable(bookmarks)
persist(bookKey, importableBookmarks)
- Report.log(`persisted bookmarks`, importableBookmarks)
+ console.log(`persisted bookmarks`, importableBookmarks)
})
)
)
@@ -36,7 +35,7 @@ export const useBookmarks = (reader: ReaderInstance | undefined, bookKey: string
useEffect(() => {
const bookmarksForBook = restore(bookKey)
- Report.log(`restored bookmarks`, bookmarksForBook)
+ console.log(`restored bookmarks`, bookmarksForBook)
reader?.bookmarks.load(bookmarksForBook)
}, [reader, bookKey])
diff --git a/packages/demo/src/useHighlights.ts b/packages/demo/src/reader/useHighlights.ts
similarity index 94%
rename from packages/demo/src/useHighlights.ts
rename to packages/demo/src/reader/useHighlights.ts
index 3897de79..66513d13 100644
--- a/packages/demo/src/useHighlights.ts
+++ b/packages/demo/src/reader/useHighlights.ts
@@ -1,8 +1,8 @@
import { useEffect } from "react"
-import { ReaderInstance } from "./types"
+import { ReaderInstance } from "../types"
import { tap } from "rxjs/operators"
import { useSetRecoilState } from "recoil"
-import { currentHighlight, isMenuOpenState } from "./state"
+import { currentHighlight, isMenuOpenState } from "../state"
export const useHighlights = (reader: ReaderInstance | undefined) => {
const setMenuOpenState = useSetRecoilState(isMenuOpenState)
diff --git a/packages/demo/src/useManifest.ts b/packages/demo/src/reader/useManifest.ts
similarity index 81%
rename from packages/demo/src/useManifest.ts
rename to packages/demo/src/reader/useManifest.ts
index f630cb8c..411fcc97 100644
--- a/packages/demo/src/useManifest.ts
+++ b/packages/demo/src/reader/useManifest.ts
@@ -1,7 +1,6 @@
import { Manifest } from "@prose-reader/core"
import { useQuery } from "react-query"
-import { Report } from "./report"
-import { STREAMER_URL_PREFIX } from "./serviceWorker/constants"
+import { STREAMER_URL_PREFIX } from "../serviceWorker/constants"
export const useManifest = (epubUrl: string) =>
useQuery(
@@ -18,6 +17,6 @@ export const useManifest = (epubUrl: string) =>
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
- onError: Report.error
+ onError: console.error
}
)
diff --git a/packages/demo/src/report.ts b/packages/demo/src/report.ts
deleted file mode 100644
index 92021638..00000000
--- a/packages/demo/src/report.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { PROJECT_NAME } from "./constants.shared"
-
-const IS_DEVELOPMENT = !import.meta.env.PROD
-
-export const Report = {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- log: (...data: any[]) => {
- if (IS_DEVELOPMENT) {
- // eslint-disable-next-line no-console
- console.log(`[${PROJECT_NAME}]`, ...data)
- }
- },
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- warn: (...data: any[]) => {
- if (self.__PROSE_READER_DEBUG) {
- // eslint-disable-next-line no-console
- console.warn(`[prose-reader]`, ...data)
- }
- },
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- error: (...data: any[]) => {
- // eslint-disable-next-line no-console
- console.error(...data)
- },
- time: (label?: string | undefined) => {
- if (self.__PROSE_READER_DEBUG) {
- // eslint-disable-next-line no-console
- console.time(`[prose-reader] [metric] ${label}`)
- }
- },
- timeEnd: (label?: string | undefined) => {
- if (self.__PROSE_READER_DEBUG) {
- // eslint-disable-next-line no-console
- console.timeEnd(`[prose-reader] [metric] ${label}`)
- }
- },
- metric: (performanceEntry: PerformanceEntry | { name: string; duration: number }, targetDuration = Infinity) => {
- const duration = typeof performanceEntry === "number" ? performanceEntry : performanceEntry.duration
- if (self.__PROSE_READER_DEBUG) {
- if (performanceEntry.duration <= targetDuration) {
- // eslint-disable-next-line no-console
- console.log(`[prose-reader] [metric] `, `${performanceEntry.name} took ${duration}ms`)
- } else {
- // eslint-disable-next-line no-console
- console.warn(
- `[prose-reader] [metric] `,
- `${performanceEntry.name} took ${performanceEntry.duration}ms which is above the ${targetDuration}ms target for this function`
- )
- }
- }
- },
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- measurePerformance: any>(name: string, targetDuration = 10, functionToMeasure: F) => {
- return (...args: Parameters): ReturnType => {
- const t0 = performance.now()
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const response = functionToMeasure(...(args as any))
-
- if (response && response.then) {
- return response.then((res: any) => {
- const t1 = performance.now()
- Report.metric({ name, duration: t1 - t0 }, targetDuration)
- return res
- })
- }
-
- const t1 = performance.now()
- Report.metric({ name, duration: t1 - t0 }, targetDuration)
-
- return response
- }
- }
-}
diff --git a/packages/demo/src/serviceWorker/loadEpub.ts b/packages/demo/src/serviceWorker/loadEpub.ts
index 124bfe47..ef01a44a 100644
--- a/packages/demo/src/serviceWorker/loadEpub.ts
+++ b/packages/demo/src/serviceWorker/loadEpub.ts
@@ -1,5 +1,4 @@
import { loadAsync } from "jszip"
-import { Report } from "../report"
import { createArchiveFromText, Archive, createArchiveFromJszip } from "@prose-reader/streamer"
import localforage from "localforage"
import { getEpubFilenameFromUrl } from "./utils"
@@ -14,7 +13,7 @@ const cleanup = () => {
cleanupInterval = setInterval(
() => {
if (!loading && archive) {
- Report.log(`serviceWorker`, `cleaning up unused epub archive reference (after 5mn)`)
+ console.log(`serviceWorker`, `cleaning up unused epub archive reference (after 5mn)`)
archive = undefined
lastUrl = undefined
}
diff --git a/packages/demo/src/useSearch.ts b/packages/demo/src/useSearch.ts
deleted file mode 100644
index 78bafbe4..00000000
--- a/packages/demo/src/useSearch.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { searchEnhancer } from "@prose-reader/enhancer-search"
-import { ReaderInstance } from "./types"
-
-export const useSearch = (_: ReaderInstance | undefined) => {
- return searchEnhancer
-}