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 -}