@caipira/vue-reader 0.0.3 → 0.0.4

package/dist/src/composables/useEpubReader.js

@@ -20,10 +20,7 @@ export const useEpubReader = (src, containerRef, options) => {
     const sourceRef = computed(() => toValue(src));
     const storage = options?.storage ?? createSessionStorageAdapter();
     const fontBaseUrl = options?.assets?.fontBaseUrl ?? '/fonts';
-    const { settings, hydrate, onSettingsChange } = useReaderSettings({
-        initialSettings: options?.settings,
-        preferences: options?.preferences,
-    });
+    const { settings, onSettingsChange } = useReaderSettings(options?.preferences);
     let stopSettingsWatcher = null;
     let activeChapterHref = '';
     let chapterProgressions = new Map();
@@ -95,7 +92,6 @@ export const useEpubReader = (src, containerRef, options) => {
         if (!containerRef.value) {
             return;
         }
-        await hydrate();
         loading.value = true;
         error.value = null;
         try {

package/dist/src/composables/useReaderSettings.d.ts

@@ -1,4 +1,4 @@
-import type { ReaderPreferencesAdapter, ReaderSettings } from '../../src/types/common';
+import type { ReaderPreferences, ReaderSettings } from '../../src/types/common';
 import { TextAlignment } from '@readium/navigator';
 export declare const EPUB_FONT_SIZE_OPTIONS: {
     value: number;
@@ -19,11 +19,7 @@ export declare const ALIGN_OPTIONS: ({
     key: TextAlignment;
     label: string;
 })[];
-type UseReaderSettingsOptions = {
-    initialSettings?: Partial<ReaderSettings>;
-    preferences?: ReaderPreferencesAdapter;
-};
-export declare const useReaderSettings: (options?: UseReaderSettingsOptions) => {
+export declare const useReaderSettings: (options?: ReaderPreferences) => {
     settings: {
         backgroundColor: string | null;
         columnCount: number | null;
@@ -35,8 +31,6 @@ export declare const useReaderSettings: (options?: UseReaderSettingsOptions) =>
         textAlign: TextAlignment | null;
         textColor: string | null;
     };
-    hydrate: () => Promise<void>;
     onSettingsChange: (handler: (next: Readonly<ReaderSettings>) => void) => () => boolean;
     toggleFullscreen: () => void;
 };
-export {};

package/dist/src/composables/useReaderSettings.js

@@ -1,5 +1,5 @@
 import { TextAlignment } from '@readium/navigator';
-import { reactive, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import { getReaderColors } from '../../src/composables/useReaderColors';
 import { useEpubReaderState } from '../../src/composables/useEpubReaderState';
 export const EPUB_FONT_SIZE_OPTIONS = [
@@ -41,52 +41,38 @@ const settings = reactive({
     isFullscreen: false,
 });
 const listeners = new Set();
-let activePreferences;
-let hydrated = false;
-let watchInitialized = false;
-const initWatcher = () => {
-    if (watchInitialized) {
-        return;
-    }
-    watchInitialized = true;
-    watch(() => [
-        settings.fontFamily,
-        settings.fontSize,
-        settings.lineHeight,
-        settings.textAlign,
-        settings.columnCount,
-        settings.scroll,
-        settings.backgroundColor,
-        settings.textColor,
-        settings.isFullscreen,
-    ], () => {
-        listeners.forEach((handler) => handler(settings));
-        void activePreferences?.save?.(settings);
-    });
-};
+const currentOptions = ref();
+watch(() => [
+    settings.fontFamily,
+    settings.fontSize,
+    settings.lineHeight,
+    settings.textAlign,
+    settings.columnCount,
+    settings.scroll,
+    settings.backgroundColor,
+    settings.textColor,
+    settings.isFullscreen,
+], () => {
+    listeners.forEach((handler) => handler(settings));
+    void currentOptions.value?.save?.(settings);
+});
 export const useReaderSettings = (options) => {
-    initWatcher();
-    if (options?.preferences && options.preferences !== activePreferences) {
-        activePreferences = options.preferences;
-        hydrated = false;
-    }
-    if (options?.initialSettings) {
-        Object.assign(settings, options.initialSettings);
-    }
-    const { containerRef } = useEpubReaderState();
-    const hydrate = async () => {
-        if (hydrated || !activePreferences?.load) {
-            hydrated = true;
-            return;
+    if (options) {
+        // Clear current options to prevent triggering save
+        currentOptions.value = undefined;
+        // Load the new options
+        if (options.load) {
+            const loaded = options.load();
+            Object.assign(settings, loaded ?? {});
         }
-        const loaded = await activePreferences.load();
-        Object.assign(settings, loaded ?? {});
-        hydrated = true;
-    };
+        // Then only set the new options
+        currentOptions.value = options;
+    }
     const onSettingsChange = (handler) => {
         listeners.add(handler);
         return () => listeners.delete(handler);
     };
+    const { containerRef } = useEpubReaderState();
     const toggleFullscreen = () => {
         const el = containerRef.value?.parentElement;
         if (!el) {
@@ -109,7 +95,6 @@ export const useReaderSettings = (options) => {
     };
     return {
         settings,
-        hydrate,
         onSettingsChange,
         toggleFullscreen,
     };

package/dist/src/index.d.ts

@@ -1,8 +1,8 @@
-export type { TocEntry, ReaderSettings, ReaderAssetConfig, EpubReaderStrategy, ReaderStorageAdapter, ReaderPreferencesAdapter, EpubReaderOptions, } from '../src/types/common';
-export { createSessionStorageAdapter } from '../src/services/common/storage';
+export type { TocEntry, ReaderSettings, ReaderAssetConfig, EpubReaderOptions, EpubReaderStrategy, ReaderStorageAdapter, } from '../src/types/common';
 export { useEpubReader } from '../src/composables/useEpubReader';
 export { useEpubReaderState } from '../src/composables/useEpubReaderState';
 export { useEpubReaderNavigation } from '../src/composables/useEpubReaderNavigation';
+export { createSessionStorageAdapter } from '../src/services/common/storage';
 export { useReaderSettings, ALIGN_OPTIONS, COLUMN_OPTIONS, PX_FONT_SIZE_OPTIONS, EPUB_FONT_SIZE_OPTIONS, } from '../src/composables/useReaderSettings';
 export { setReaderColors, getReaderColors } from '../src/composables/useReaderColors';
 export { setReaderDictionary, hasReaderDictionary, useReaderDictionary, } from '../src/composables/useReaderDictionary';

package/dist/src/index.js

@@ -1,7 +1,7 @@
-export { createSessionStorageAdapter } from '../src/services/common/storage';
 export { useEpubReader } from '../src/composables/useEpubReader';
 export { useEpubReaderState } from '../src/composables/useEpubReaderState';
 export { useEpubReaderNavigation } from '../src/composables/useEpubReaderNavigation';
+export { createSessionStorageAdapter } from '../src/services/common/storage';
 export { useReaderSettings, ALIGN_OPTIONS, COLUMN_OPTIONS, PX_FONT_SIZE_OPTIONS, EPUB_FONT_SIZE_OPTIONS, } from '../src/composables/useReaderSettings';
 export { setReaderColors, getReaderColors } from '../src/composables/useReaderColors';
 export { setReaderDictionary, hasReaderDictionary, useReaderDictionary, } from '../src/composables/useReaderDictionary';

package/dist/src/types/common.d.ts

@@ -69,9 +69,9 @@ export type ReaderStorageAdapter = {
     savePosition: (key: string, locator: Locator) => void;
     restorePosition: (key: string, publication: Publication) => Locator | undefined;
 };
-export type ReaderPreferencesAdapter = {
-    load: () => Partial<ReaderSettings> | Promise<Partial<ReaderSettings>>;
-    save?: (settings: Readonly<ReaderSettings>) => void | Promise<void>;
+export type ReaderPreferences = {
+    load: () => Partial<ReaderSettings>;
+    save?: (settings: Readonly<ReaderSettings>) => void;
 };
 export type ReaderAssetConfig = {
     swUrl?: string;
@@ -83,7 +83,7 @@ export type EpubReaderOptions = {
     strategy?: EpubReaderStrategy;
     settings?: Partial<ReaderSettings>;
     storage?: ReaderStorageAdapter;
-    preferences?: ReaderPreferencesAdapter;
+    preferences?: ReaderPreferences;
     assets?: ReaderAssetConfig;
     logNamespace?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@caipira/vue-reader",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "private": false,
     "description": "Headless e-book reader toolkit for vue",
     "author": {