bookish-press 0.7.4 → 0.8.2

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;

package/dist/components/page/Header.svelte

@@ -1,58 +1,52 @@
-<script>import Parser from '../../models/chapter/Parser';
-import Embed from '../chapter/Embed.svelte';
-import BookishEditor from '../editor/BookishEditor.svelte';
-import Title from './Title.svelte';
-import { onMount } from 'svelte';
-import TextEditor from '../editor/TextEditor.svelte';
-import { getUser, getEdition, getLeasee, lease } from './Contexts';
-import Button from '../app/Button.svelte';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
-/** True if an author should be able to edit this header. */
-export let editable;
-export let label;
-export let header;
-export let id;
-export let subtitle = undefined;
-export let print = false;
-export let tags = undefined;
-export let getImage = undefined;
-export let setImage = undefined;
-/** For saving the revised chapter title*/
-export let save = null;
-let title = null;
-let showReminder = true;
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import Embed from "../chapter/Embed.svelte";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Title from "./Title.svelte";
+import { onMount } from "svelte";
+import TextEditor from "../editor/TextEditor.svelte";
+import { getUser, getEdition, getLeasee, lease } from "./Contexts";
+import Button from "../app/Button.svelte";
+import ConfirmButton from "../editor/ConfirmButton.svelte";
+let {
+  editable,
+  label,
+  header,
+  id,
+  subtitle = void 0,
+  print = false,
+  tags = void 0,
+  getImage = void 0,
+  setImage = void 0,
+  save = null,
+  outline,
+  before,
+  after
+} = $props();
+let title = $state(null);
+let showReminder = $state(true);
 let auth = getUser();
 let edition = getEdition();
 function updateScrollReminder() {
-    // If the bottom of the window is below the top of the title, hide the reminder.
-    if (title)
-        showReminder =
-            window.scrollY + window.innerHeight <=
-                title.getBoundingClientRect().top + window.scrollY;
+  if (title)
+    showReminder = window.scrollY + window.innerHeight <= title.getBoundingClientRect().top + window.scrollY;
 }
 function addCover() {
-    if (setImage)
-        setImage('|||||');
+  if (setImage) setImage("|||||");
 }
 function removeCover() {
-    if (setImage)
-        setImage(null);
+  if (setImage) setImage(null);
 }
-// When the title becomes visible or hidden, update the scroll reminder.
 onMount(() => {
-    const intersectionObserver = new IntersectionObserver(() => updateScrollReminder());
-    if (title)
-        intersectionObserver.observe(title);
-    updateScrollReminder();
-    // Stop observing when unmounted.
-    return () => {
-        if (title)
-            intersectionObserver.unobserve(title);
-    };
+  const intersectionObserver = new IntersectionObserver(
+    () => updateScrollReminder()
+  );
+  if (title) intersectionObserver.observe(title);
+  updateScrollReminder();
+  return () => {
+    if (title) intersectionObserver.unobserve(title);
+  };
 });
-// Get the embed, update when getImage function prop changes.
-let embed;
-$: embed = getImage ? getImage() : null;
+let embed = $derived(getImage ? getImage() : null);
 </script>
 
 <!-- We key on the chapter ID to avoid laggy updates from image loading -->
@@ -80,7 +74,7 @@ $: embed = getImage ? getImage() : null;
                     />
                 {/if}
                 {#if !print && showReminder}
-                    <div class="bookish-scroll-reminder" />
+                    <div class="bookish-scroll-reminder"></div>
                 {/if}
             </div>
         {:else}
@@ -88,7 +82,7 @@ $: embed = getImage ? getImage() : null;
             <p>&nbsp;</p>
         {/if}
         {#if !print}
-            <slot name="outline" />
+            {@render outline?.()}
         {/if}
         {#if editable && getImage && setImage}
             {#if embed === null}
@@ -104,7 +98,7 @@ $: embed = getImage ? getImage() : null;
             {/if}
         {/if}
         <div bind:this={title} class="bookish-chapter-header-text">
-            <slot name="before" />
+            {@render before?.()}
             <Title>
                 {#if editable && save}
                     <TextEditor
@@ -123,7 +117,7 @@ $: embed = getImage ? getImage() : null;
                         >{/if}
                 {/if}
             </Title>
-            <slot name="after" />
+            {@render after?.()}
             {#if tags}
                 <div
                     >{#each tags as tag}<span class="bookish-tag">{tag}</span

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

@@ -1,31 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** True if an author should be able to edit this header. */ editable: boolean;
-        label: string;
-        header: string;
-        id: string;
-        subtitle?: string | undefined;
-        print?: boolean;
-        tags?: string[] | undefined;
-        getImage?: undefined | (() => string | null);
-        setImage?: undefined | ((embed: string | null) => Promise<void> | void);
-        /** For saving the revised chapter title*/ save?: ((text: string) => Promise<void> | void) | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        outline: {};
-        before: {};
-        after: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type HeaderProps = typeof __propDef.props;
-export type HeaderEvents = typeof __propDef.events;
-export type HeaderSlots = typeof __propDef.slots;
-export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
+interface Props {
+    /** True if an author should be able to edit this header. */
+    editable: boolean;
+    label: string;
+    header: string;
+    id: string;
+    subtitle?: string | undefined;
+    print?: boolean;
+    tags?: string[] | undefined;
+    getImage?: undefined | (() => string | null);
+    setImage?: undefined | ((embed: string | null) => Promise<void> | void);
+    /** For saving the revised chapter title*/
+    save?: ((text: string) => Promise<void> | void) | null;
+    outline?: import('svelte').Snippet;
+    before?: import('svelte').Snippet;
+    after?: import('svelte').Snippet;
 }
-export {};
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;