bookish-press 0.7.4 → 0.9.2

package/dist/components/page/Edition.svelte

@@ -1,83 +1,69 @@
-<script>import smoothscroll from 'smoothscroll-polyfill';
-import { goto } from '$app/navigation';
-import { onMount, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { BASE, DARK_MODE, getBook, } from './Contexts';
-import { BookishTheme } from '../../models/book/Theme';
-import { isDark, setDark } from '../../util/dark';
-import { page } from '$app/stores';
-import Title from './Title.svelte';
-import Page from './Page.svelte';
-// Poly fill smooth scrolling for Safari.
+<script lang="ts">import smoothscroll from "smoothscroll-polyfill";
+import { goto } from "$app/navigation";
+import { onMount, setContext, untrack } from "svelte";
+import { writable } from "svelte/store";
+import {
+  BASE,
+  DARK_MODE,
+  getBook
+} from "./Contexts";
+import { BookishTheme } from "../../models/book/Theme";
+import { isDark, setDark } from "../../util/dark";
+import { page } from "$app/state";
+import Title from "./Title.svelte";
+import Page from "./Page.svelte";
+import Parser from "../../models/chapter/Parser";
+import EmbedNode from "../../models/chapter/EmbedNode";
 onMount(() => smoothscroll.polyfill());
-// The book and edition to render
-export let edition;
-// The base path allows links to adjust to different routing contexts in which a book is placed.
-// For example, when the book is hosted alone, all routes might start with the bare root "/",
-// but when the book is being viewed or edited in the Bookish app, it needs a prefix for the
-// route in the app.
-export let base = '';
+let { edition, base = "", children } = $props();
+let coverURL = $derived.by(() => {
+  const cover = edition?.getImage("cover");
+  if (!cover) return void 0;
+  const node = Parser.parseEmbed(edition, cover);
+  const url = node instanceof EmbedNode ? node.getURL() : void 0;
+  if (!url || url.length === 0) return void 0;
+  return url.startsWith("http") ? url : `${base}/images/${url}`;
+});
 let book = getBook();
-// When the base changes, update the context.
-let baseStore = writable(base);
-$: setContext(BASE, baseStore);
-$: baseStore.set(base);
-// Default dark mode to whatever's stored in local storage, if anything.
-// respect user choice on the website despite the system theme
+let baseStore = writable(untrack(() => base));
+setContext(BASE, baseStore);
+$effect.pre(() => {
+  baseStore.set(base);
+});
 let darkMode = writable(isDark());
-// Expose dark mode to descendants
 setContext(DARK_MODE, darkMode);
-// When dark mode changes, update the body's class list.
-$: {
-    setDark($darkMode);
-    // Set the theme, whatever it is, and change it when the edition changes
-    setTheme(edition?.getTheme() ?? BookishTheme);
-}
-// The CSS to set on the edition.
-let themeCSS;
-// Set the theme on mount.
-onMount(() => {
-    setTheme(edition?.getTheme() ?? BookishTheme);
+let themeCSS = $derived(
+  themeToCSS(edition?.getTheme() ?? BookishTheme)
+);
+$effect.pre(() => {
+  setDark($darkMode);
 });
-// Redirect old hash routes by simply replacing their hash before routing.
-if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
-    goto(location.hash.replace('#', ''));
-/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme. */
-function setTheme(theme) {
-    if (theme === null)
-        theme = BookishTheme;
-    themeCSS = `
-            ${(theme.imports ?? [])
-        .map((url) => `@import url(${url});`)
-        .join('\n')}
+if (typeof window !== "undefined" && window.location.hash.startsWith("#/"))
+  goto(location.hash.replace("#", ""));
+function themeToCSS(theme) {
+  if (theme === null) theme = BookishTheme;
+  return `
+            ${(theme.imports ?? []).map((url) => `@import url(${url});`).join("\n")}
             .bookish {
-                ${theme.light ? toRules(theme.light) : ''}
-                ${theme.fonts ? toRules(theme.fonts) : ''}
-                ${theme.sizes ? toRules(theme.sizes) : ''}
-                ${theme.weights ? toRules(theme.weights) : ''}
-                ${theme.spacing ? toRules(theme.spacing) : ''}
+                ${theme.light ? toRules(theme.light) : ""}
+                ${theme.fonts ? toRules(theme.fonts) : ""}
+                ${theme.sizes ? toRules(theme.sizes) : ""}
+                ${theme.weights ? toRules(theme.weights) : ""}
+                ${theme.spacing ? toRules(theme.spacing) : ""}
             }
             .dark {
-                ${theme.dark ? toRules(theme.dark) : ''}
+                ${theme.dark ? toRules(theme.dark) : ""}
             }
         `;
 }
 function toRules(set) {
-    return Object.keys(set)
-        .map((name) => {
-        const value = set[name];
-        if (value.length > 0) {
-            const cssVariable = '--bookish-' +
-                name
-                    .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .split(' ')
-                    .map((s) => s.toLowerCase())
-                    .join('-')
-                    .replace(/([0-9])/g, '-$1-');
-            return `${cssVariable}: ${value};`;
-        }
-    })
-        .join('\n\t\t');
+  return Object.keys(set).map((name) => {
+    const value = set[name];
+    if (value.length > 0) {
+      const cssVariable = "--bookish-" + name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((s) => s.toLowerCase()).join("-").replace(/([0-9])/g, "-$1-");
+      return `${cssVariable}: ${value};`;
+    }
+  }).join("\n		");
 }
 </script>
 
@@ -87,7 +73,7 @@ function toRules(set) {
 
     {#if edition}
         <meta property="og:title" content={edition.getTitle()} />
-        <meta property="og:image" content={edition.getImage('cover')} />
+        {#if coverURL}<meta property="og:image" content={coverURL} />{/if}
         <meta property="og:description" content={edition.getDescription()} />
         <meta property="og:type" content="book" />
         <meta property="og:author" content={edition.getAuthorsText()} />
@@ -95,7 +81,7 @@ function toRules(set) {
             property="og:url"
             content={edition.base ??
                 `https://bookish.press/${
-                    $book && $book.domain ? $book.domain : $page.params.bookid
+                    $book && $book.domain ? $book.domain : page.params.bookid
                 }`}
         />
     {/if}
@@ -103,7 +89,7 @@ function toRules(set) {
 
 <main class="bookish {$darkMode ? ' dark' : ''}">
     {#if edition}
-        <slot />
+        {@render children?.()}
         <!-- No edition to render? Coming soon. -->
     {:else if $book}
         <Page title={$book.title}>

package/dist/components/page/Edition.svelte.d.ts

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type EditionModel from '../../models/book/Edition';
-declare const __propDef: {
-    props: {
-        edition: EditionModel | undefined;
-        base?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EditionProps = typeof __propDef.props;
-export type EditionEvents = typeof __propDef.events;
-export type EditionSlots = typeof __propDef.slots;
-export default class Edition extends SvelteComponent<EditionProps, EditionEvents, EditionSlots> {
+interface Props {
+    edition: EditionModel | undefined;
+    base?: string;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Edition: import("svelte").Component<Props, {}, "">;
+type Edition = ReturnType<typeof Edition>;
+export default Edition;

package/dist/components/page/EditionLoader.svelte

@@ -1,98 +1,135 @@
-<script>import Loading from './Loading.svelte';
-import Edition from './Edition.svelte';
-import Feedback from '../app/Feedback.svelte';
-import { getBook, getEdition, getUser, getChapterText, } from './Contexts';
-import { onDestroy } from 'svelte';
-import { page } from '$app/stores';
-import { listenToChapters, listenToEdition } from '../../models/CRUD';
-export let write;
-let currentEditionID;
+<script lang="ts">import Loading from "./Loading.svelte";
+import Edition from "./Edition.svelte";
+import Feedback from "../app/Feedback.svelte";
+import {
+  getBook,
+  getEdition,
+  getStatus,
+  getUser,
+  getChapterText
+} from "./Contexts";
+import BookSaveStatus from "../../models/book/BookSaveStatus";
+import { get } from "svelte/store";
+import { onDestroy, untrack } from "svelte";
+import { page } from "$app/state";
+import { listenToChapters, listenToEdition } from "../../models/CRUD";
+let { write, children } = $props();
+let currentEditionID = $state();
 let auth = getUser();
 let book = getBook();
 let edition = getEdition();
-/** Mapping from Firestore docuemnt IDs to chapter text */
-let chapterText = new Map();
-let editionUnsub = undefined;
-let chaptersUnsub = undefined;
-let error = undefined;
+let status = getStatus();
+let locallyEdited = false;
+let applyingSnapshot = false;
+const localEditWatch = edition.subscribe(() => {
+  if (!applyingSnapshot) locallyEdited = true;
+});
+const statusWatch = status?.subscribe((current) => {
+  if (current === BookSaveStatus.Saved) locallyEdited = false;
+});
+function skipStaleSnapshot() {
+  const current = status ? get(status) : void 0;
+  return locallyEdited && (current === BookSaveStatus.Changed || current === BookSaveStatus.Saving);
+}
+function applySnapshot(apply) {
+  applyingSnapshot = true;
+  try {
+    apply();
+  } finally {
+    applyingSnapshot = false;
+  }
+}
+let chapterText = /* @__PURE__ */ new Map();
+let editionUnsub = void 0;
+let chaptersUnsub = void 0;
+let error = $state(void 0);
 function unsub() {
-    // Unsubscribe to the old edition document if we were listening to one.
-    if (editionUnsub)
-        editionUnsub();
-    if (chaptersUnsub)
-        chaptersUnsub();
+  if (editionUnsub) editionUnsub();
+  if (chaptersUnsub) chaptersUnsub();
 }
 function listen() {
-    unsub();
-    error = undefined;
-    // If we no longer have a book, we can't get an edition.
-    if ($book === undefined) {
-        edition.set(undefined);
-        error = 'Unknown book.';
-        return;
+  unsub();
+  error = void 0;
+  if ($book === void 0) {
+    edition.set(void 0);
+    error = "Unknown book.";
+    return;
+  } else {
+    currentEditionID = page.params.editionid;
+    const latestPublished = !write;
+    let editionID;
+    if (currentEditionID === void 0) {
+      if (latestPublished) {
+        editionID = $book.getLatestPublishedEditionID();
+        if (editionID === void 0)
+          error = "There is no published edition of this book.";
+      } else {
+        editionID = $book.getLatestEditionID();
+      }
+    } else {
+      editionID = $book.getEditionNumberID(
+        parseFloat(currentEditionID)
+      );
+      if (editionID === void 0)
+        error = `There is no ${currentEditionID} edition of this book`;
     }
-    else {
-        currentEditionID = $page.params.editionid;
-        const latestPublished = !write;
-        // Figure out which edition to load.
-        let editionID;
-        if (currentEditionID === undefined) {
-            if (latestPublished) {
-                editionID = $book.getLatestPublishedEditionID();
-                if (editionID === undefined)
-                    error = 'There is no published edition of this book.';
-            }
-            else {
-                editionID = $book.getLatestEditionID();
-            }
+    if (editionID !== void 0) {
+      editionUnsub = listenToEdition(
+        $book.getID(),
+        editionID,
+        (ed) => {
+          if (skipStaleSnapshot()) return;
+          if (ed) {
+            applySnapshot(
+              () => edition.set(ed.withChapterText(chapterText))
+            );
+          } else {
+            applySnapshot(() => edition.set(void 0));
+            error = "Unable to load edition";
+          }
         }
-        else {
-            editionID = $book.getEditionNumberID(parseFloat(currentEditionID));
-            if (editionID === undefined)
-                error = `There is no ${currentEditionID} edition of this book`;
-        }
-        // Listen to the doc for changes and listen to all of its chapters.
-        if (editionID !== undefined) {
-            editionUnsub = listenToEdition($book.getID(), editionID, (ed) => {
-                if (ed) {
-                    // Before setting the new edition, augmented it with the chapter text.
-                    edition.set(ed.withChapterText(chapterText));
-                }
-                else {
-                    edition.set(undefined);
-                    error = 'Unable to load edition';
-                }
-            });
-            chaptersUnsub = listenToChapters($book.getID(), editionID, (chapters) => {
-                // Update the text of the chapters we received.
-                for (const [ref, text] of chapters)
-                    chapterText.set(ref.id, text);
-                // Update the chapter text in the current edition.
-                if ($edition) {
-                    edition.set($edition.withChapterText(chapterText));
-                }
-            });
+      );
+      chaptersUnsub = listenToChapters(
+        $book.getID(),
+        editionID,
+        (chapters) => {
+          const stale = skipStaleSnapshot();
+          for (const [ref, text] of chapters)
+            if (!stale || !chapterText.has(ref.id))
+              chapterText.set(ref.id, text);
+          if ($edition) {
+            applySnapshot(
+              () => edition.set(
+                $edition.withChapterText(chapterText)
+              )
+            );
+          }
         }
+      );
     }
+  }
 }
-// Remember the chapter text whenever the edition changes, so we don't overwrite stale text.
-// when other things change.
-$: if ($edition) {
+$effect.pre(() => {
+  if ($edition) {
     for (const chapter of $edition.chapters) {
-        if (chapter.ref && chapter.text !== null)
-            chapterText.set(chapter.ref.id, chapter.text);
+      if (chapter.ref && chapter.text !== null)
+        chapterText.set(chapter.ref.id, chapter.text);
     }
-}
-// Whenever the book changes, change the listener.
-$: if ((currentEditionID === undefined ||
-    $page.params.editionid !== currentEditionID) &&
-    $auth &&
-    $auth.user !== null)
-    listen();
-// When unmounted, unset the stores — no longer viewing a book.
+  }
+});
+$effect(() => {
+  const requestedEditionID = page.params.editionid;
+  const user = $auth?.user;
+  untrack(() => {
+    if ((currentEditionID === void 0 || requestedEditionID !== currentEditionID) && user !== null && user !== void 0)
+      listen();
+  });
+});
 onDestroy(() => {
-    edition.set(undefined);
-    unsub();
+  localEditWatch();
+  statusWatch?.();
+  edition.set(void 0);
+  unsub();
 });
 </script>
 
@@ -107,6 +144,6 @@ onDestroy(() => {
             ? `/write/${$book.getID()}/${$edition.getEditionNumber()}`
             : `/${$book.getSubdomain() ?? $book.getID()}`}
     >
-        <slot />
+        {@render children?.()}
     </Edition>
 {/if}

package/dist/components/page/EditionLoader.svelte.d.ts

@@ -1,20 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        write: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EditionLoaderProps = typeof __propDef.props;
-export type EditionLoaderEvents = typeof __propDef.events;
-export type EditionLoaderSlots = typeof __propDef.slots;
-export default class EditionLoader extends SvelteComponent<EditionLoaderProps, EditionLoaderEvents, EditionLoaderSlots> {
+interface Props {
+    write: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const EditionLoader: import("svelte").Component<Props, {}, "">;
+type EditionLoader = ReturnType<typeof EditionLoader>;
+export default EditionLoader;

package/dist/components/page/Editions.svelte

@@ -1,41 +1,36 @@
-<script>import { createNewEdition } from '../../models/CRUD';
-import Instructions from './Instructions.svelte';
-import Note from '../editor/Note.svelte';
-import { getBook, getUser, isBookEditable } from './Contexts';
-import Button from '../app/Button.svelte';
-import Link from '../app/Link.svelte';
-import Format from '../chapter/Format.svelte';
-import Parser from '../../models/chapter/Parser';
-import Permissions from '../editor/Permissions.svelte';
-export let editors = true;
+<script lang="ts">import { createNewEdition } from "../../models/CRUD";
+import Instructions from "./Instructions.svelte";
+import Note from "../editor/Note.svelte";
+import { getBook, getUser, isBookEditable } from "./Contexts";
+import Button from "../app/Button.svelte";
+import Link from "../app/Link.svelte";
+import Format from "../chapter/Format.svelte";
+import Parser from "../../models/chapter/Parser";
+import Permissions from "../editor/Permissions.svelte";
+let { editors = true } = $props();
 let book = getBook();
 let editable = isBookEditable();
 let user = getUser();
-$: editions = $book?.getEditions();
-$: latestPublishedID = $book?.getLatestPublishedEditionID();
-let publisher = false;
-$: {
-    if ($user && $user.user)
-        updateUserClaims();
-}
+let publisher = $state(false);
 async function updateUserClaims() {
-    if ($user === undefined || $user.user === null)
-        return;
-    const token = await $user.user.getIdTokenResult();
-    publisher =
-        'publisher' in token.claims && token.claims.publisher === true;
+  if ($user === void 0 || $user.user === null) return;
+  const token = await $user.user.getIdTokenResult();
+  publisher = "publisher" in token.claims && token.claims.publisher === true;
 }
 async function createEdition() {
-    if ($book === undefined)
-        return;
-    try {
-        const revisedBook = await createNewEdition($book);
-        book.set(revisedBook);
-    }
-    catch (err) {
-        console.error('Error creating new edition:', err);
-    }
+  if ($book === void 0) return;
+  try {
+    const revisedBook = await createNewEdition($book);
+    book.set(revisedBook);
+  } catch (err) {
+    console.error("Error creating new edition:", err);
+  }
 }
+let editions = $derived($book?.getEditions());
+let latestPublishedID = $derived($book?.getLatestPublishedEditionID());
+$effect(() => {
+  if ($user && $user.user) updateUserClaims();
+});
 </script>
 
 {#if $book && editions}

package/dist/components/page/Editions.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        editors?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EditionsProps = typeof __propDef.props;
-export type EditionsEvents = typeof __propDef.events;
-export type EditionsSlots = typeof __propDef.slots;
-export default class Editions extends SvelteComponent<EditionsProps, EditionsEvents, EditionsSlots> {
+interface Props {
+    editors?: boolean;
 }
-export {};
+declare const Editions: import("svelte").Component<Props, {}, "">;
+type Editions = ReturnType<typeof Editions>;
+export default Editions;

package/dist/components/page/Glossary.svelte

@@ -1,31 +1,25 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import ChapterIDs from '../../models/book/ChapterID';
-import DefinitionView from './DefinitionView.svelte';
-import { getUser, getEdition, isEditionEditable } from './Contexts';
-import Instructions from './Instructions.svelte';
-import Button from '../app/Button.svelte';
+<script lang="ts">import Header from "./Header.svelte";
+import Outline from "./Outline.svelte";
+import Page from "./Page.svelte";
+import ChapterIDs from "../../models/book/ChapterID";
+import DefinitionView from "./DefinitionView.svelte";
+import { getUser, getEdition, isEditionEditable } from "./Contexts";
+import Instructions from "./Instructions.svelte";
+import Button from "../app/Button.svelte";
 let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
-$: glossary = $edition?.getGlossary() ?? {};
-// Sort by canonical phrases
-$: keys =
-    $edition === undefined
-        ? []
-        : glossary === undefined || Object.keys(glossary).length === 0
-            ? null
-            : Object.keys(glossary).sort((a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase));
+let glossary = $derived($edition?.getGlossary() ?? {});
+let keys = $derived($edition === void 0 ? [] : glossary === void 0 || Object.keys(glossary).length === 0 ? null : Object.keys(glossary).sort(
+  (a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase)
+));
 function addEmptyDefinition() {
-    if ($edition === undefined)
-        return;
-    // Generate an ID.
-    const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
-    let id = '';
-    while (id.length < 4 || $edition.hasDefinition(id))
-        id = id + letters[Math.round(Math.random() * 26)];
-    edition.set($edition.withDefinition(id, '', '', []));
+  if ($edition === void 0) return;
+  const letters = "abcdefghijklmnopqrstuvwxyz".split("");
+  let id = "";
+  while (id.length < 4 || $edition.hasDefinition(id))
+    id = id + letters[Math.round(Math.random() * 26)];
+  edition.set($edition.withDefinition(id, "", "", []));
 }
 </script>
 
@@ -54,17 +48,19 @@ function addEmptyDefinition() {
                       )
                     : undefined}
         >
-            <Outline
-                slot="outline"
-                previous={$edition.getPreviousChapterID(
-                    ChapterIDs.GlossaryID,
-                    editable,
-                )}
-                next={$edition.getNextChapterID(
-                    ChapterIDs.GlossaryID,
-                    editable,
-                )}
-            />
+            {#snippet outline()}
+                        <Outline
+                    
+                    previous={$edition.getPreviousChapterID(
+                        ChapterIDs.GlossaryID,
+                        editable,
+                    )}
+                    next={$edition.getNextChapterID(
+                        ChapterIDs.GlossaryID,
+                        editable,
+                    )}
+                />
+                    {/snippet}
         </Header>
         {#if editable}
             <Instructions {editable}>

package/dist/components/page/Glossary.svelte.d.ts

@@ -1,16 +1,3 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type GlossaryProps = typeof __propDef.props;
-export type GlossaryEvents = typeof __propDef.events;
-export type GlossarySlots = typeof __propDef.slots;
-export default class Glossary extends SvelteComponent<GlossaryProps, GlossaryEvents, GlossarySlots> {
-}
-export {};
+declare const Glossary: import("svelte").Component<Record<string, never>, {}, "">;
+type Glossary = ReturnType<typeof Glossary>;
+export default Glossary;