feat: cleanup

Author: mbret

packages/core/src/features/Features.ts

@@ -0,0 +1,85 @@
+import { isShallowEqual } from "@prose-reader/shared"
+import {
+  distinctUntilChanged,
+  map,
+  merge,
+  takeUntil,
+  withLatestFrom,
+} from "rxjs"
+import type { Context } from "../context/Context"
+import type { ReaderSettingsManager } from "../settings/ReaderSettingsManager"
+import type { CoreInputSettings } from "../settings/types"
+import { ReactiveEntity } from "../utils/ReactiveEntity"
+
+export type ContextSettings = Partial<CoreInputSettings>
+
+type State = {
+  supportedPageTurnAnimation: NonNullable<
+    ContextSettings[`pageTurnAnimation`]
+  >[]
+  supportedPageTurnMode: NonNullable<ContextSettings[`pageTurnMode`]>[]
+  supportedPageTurnDirection: NonNullable<
+    ContextSettings[`pageTurnDirection`]
+  >[]
+  supportedComputedPageTurnDirection: NonNullable<
+    ContextSettings[`pageTurnDirection`]
+  >[]
+}
+
+export class Features extends ReactiveEntity<State> {
+  constructor(context: Context, settingsManager: ReaderSettingsManager) {
+    super({
+      supportedPageTurnAnimation: [`fade`, `none`, `slide`],
+      supportedPageTurnMode: [`controlled`, `scrollable`],
+      supportedPageTurnDirection: [`horizontal`, `vertical`],
+      supportedComputedPageTurnDirection: [`horizontal`, `vertical`],
+    })
+
+    merge(context.state$, settingsManager.values$)
+      .pipe(
+        withLatestFrom(context.state$),
+        map(([, { hasVerticalWriting }]) => {
+          const manifest = context.manifest
+
+          return {
+            hasVerticalWriting,
+            renditionFlow: manifest?.renditionFlow,
+            renditionLayout: manifest?.renditionLayout,
+            computedPageTurnMode: settingsManager.values.computedPageTurnMode,
+          }
+        }),
+        distinctUntilChanged(isShallowEqual),
+        map(
+          ({
+            hasVerticalWriting,
+            renditionFlow,
+            renditionLayout,
+            computedPageTurnMode,
+          }) => {
+            return {
+              ...this.value,
+              supportedPageTurnMode:
+                renditionFlow === `scrolled-continuous`
+                  ? [`scrollable`]
+                  : [`controlled`, `scrollable`],
+              supportedPageTurnAnimation:
+                renditionFlow === `scrolled-continuous` ||
+                computedPageTurnMode === `scrollable`
+                  ? [`none`]
+                  : hasVerticalWriting
+                    ? [`fade`, `none`]
+                    : [`fade`, `none`, `slide`],
+              supportedPageTurnDirection:
+                computedPageTurnMode === `scrollable`
+                  ? [`vertical`]
+                  : renditionLayout === `reflowable`
+                    ? [`horizontal`]
+                    : [`horizontal`, `vertical`],
+            } satisfies State
+          },
+        ),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(this.next.bind(this))
+  }
+}

packages/core/src/reader.ts

@@ -1,18 +1,13 @@
-import { BehaviorSubject, type ObservedValueOf, Subject, merge } from "rxjs"
-import {
-  distinctUntilChanged,
-  filter,
-  map,
-  takeUntil,
-  withLatestFrom,
-} from "rxjs/operators"
+import { BehaviorSubject, Subject } from "rxjs"
+import { filter, map } from "rxjs/operators"
 import { generateCfiForSpineItemPage } from "./cfi/generate/generateCfiForSpineItemPage"
 import { generateCfiFromRange } from "./cfi/generate/generateCfiFromRange"
 import { generateCfiFromSelection } from "./cfi/generate/generateCfiFronSelection"
 import { parseCfi } from "./cfi/lookup/parseCfi"
 import { resolveCfi } from "./cfi/lookup/resolveCfi"
 import { HTML_PREFIX } from "./constants"
 import { Context, type ContextState } from "./context/Context"
+import { Features } from "./features/Features"
 import { HookManager } from "./hooks/HookManager"
 import { createNavigator } from "./navigation/Navigator"
 import { Pagination } from "./pagination/Pagination"
@@ -26,7 +21,6 @@ import { SpineItemsManager } from "./spine/SpineItemsManager"
 import type { SpineItem } from "./spineItem/SpineItem"
 import { createSpineItemLocator } from "./spineItem/locationResolver"
 import { isDefined } from "./utils/isDefined"
-import { isShallowEqual } from "./utils/objects"
 import { Viewport } from "./viewport/Viewport"
 
 export type CreateReaderOptions = Partial<CoreInputSettings>
@@ -38,27 +32,11 @@ export type ContextSettings = Partial<CoreInputSettings>
 export type ReaderInternal = ReturnType<typeof createReader>
 
 export const createReader = (inputSettings: CreateReaderOptions) => {
-  const stateSubject$ = new BehaviorSubject<{
-    supportedPageTurnAnimation: NonNullable<
-      ContextSettings[`pageTurnAnimation`]
-    >[]
-    supportedPageTurnMode: NonNullable<ContextSettings[`pageTurnMode`]>[]
-    supportedPageTurnDirection: NonNullable<
-      ContextSettings[`pageTurnDirection`]
-    >[]
-    supportedComputedPageTurnDirection: NonNullable<
-      ContextSettings[`pageTurnDirection`]
-    >[]
-  }>({
-    supportedPageTurnAnimation: [`fade`, `none`, `slide`],
-    supportedPageTurnMode: [`controlled`, `scrollable`],
-    supportedPageTurnDirection: [`horizontal`, `vertical`],
-    supportedComputedPageTurnDirection: [`horizontal`, `vertical`],
-  })
   const destroy$ = new Subject<void>()
   const hookManager = new HookManager()
   const context = new Context()
   const settingsManager = new ReaderSettingsManager(inputSettings, context)
+  const features = new Features(context, settingsManager)
   const spineItemsManager = new SpineItemsManager(context, settingsManager)
   const elementSubject$ = new BehaviorSubject<HTMLElement | undefined>(
     undefined,
@@ -174,54 +152,6 @@ export const createReader = (inputSettings: CreateReaderOptions) => {
     layout()
   }
 
-  merge(context.state$, settingsManager.values$)
-    .pipe(
-      map(() => undefined),
-      withLatestFrom(context.state$),
-      map(([, { hasVerticalWriting }]) => {
-        const manifest = context.manifest
-
-        return {
-          hasVerticalWriting,
-          renditionFlow: manifest?.renditionFlow,
-          renditionLayout: manifest?.renditionLayout,
-          computedPageTurnMode: settingsManager.values.computedPageTurnMode,
-        }
-      }),
-      distinctUntilChanged(isShallowEqual),
-      map(
-        ({
-          hasVerticalWriting,
-          renditionFlow,
-          renditionLayout,
-          computedPageTurnMode,
-        }): ObservedValueOf<typeof stateSubject$> => {
-          return {
-            ...stateSubject$.value,
-            supportedPageTurnMode:
-              renditionFlow === `scrolled-continuous`
-                ? [`scrollable`]
-                : [`controlled`, `scrollable`],
-            supportedPageTurnAnimation:
-              renditionFlow === `scrolled-continuous` ||
-              computedPageTurnMode === `scrollable`
-                ? [`none`]
-                : hasVerticalWriting
-                  ? [`fade`, `none`]
-                  : [`fade`, `none`, `slide`],
-            supportedPageTurnDirection:
-              computedPageTurnMode === `scrollable`
-                ? [`vertical`]
-                : renditionLayout === `reflowable`
-                  ? [`horizontal`]
-                  : [`horizontal`, `vertical`],
-          }
-        },
-      ),
-      takeUntil(destroy$),
-    )
-    .subscribe(stateSubject$)
-
   /**
    * Free up resources, and dispose the whole reader.
    * You should call this method if you leave the reader.
@@ -240,7 +170,7 @@ export const createReader = (inputSettings: CreateReaderOptions) => {
     navigator.destroy()
     spine.destroy()
     elementSubject$.getValue()?.remove()
-    stateSubject$.complete()
+    features.destroy()
     destroy$.next()
     destroy$.complete()
     viewport.destroy()
@@ -293,8 +223,8 @@ export const createReader = (inputSettings: CreateReaderOptions) => {
     state$: context.manifest$.pipe(
       map((manifest) => (manifest ? "ready" : "idle")),
     ),
+    features,
     $: {
-      state$: stateSubject$.asObservable(),
       destroy$,
     },
   }

packages/demo/src/common/NavigationSettings.tsx

@@ -17,7 +17,7 @@ export const NavigationSettings = ({
 }) => {
   const settings = useReaderSettings()
   const { reader } = useReader()
-  const readerState = useObserve(() => reader?.$.state$, [reader])
+  const readerState = useObserve(() => reader?.features, [reader])
   const onlySupportScrollableMode =
     readerState?.supportedPageTurnMode.length === 1 &&
     readerState.supportedPageTurnMode[0] === `scrollable`