bookish-press 0.9.4 → 0.10.0

package/dist/components/page/BookLoader.svelte

@@ -2,55 +2,53 @@
 import Feedback from "../app/Feedback.svelte";
 import { onDestroy } from "svelte";
 import { page } from "$app/state";
-import { getBook, getUser } from "./Contexts";
-import {
-  listenToBookWithID as listenToBooksWithID,
-  listenToBooksByName as listenToBooksWithName
-} from "../../models/CRUD";
+import { getBook, getUser } from "./Contexts.js";
+import { listenToBookWithID as listenToBooksWithID, listenToBooksByName as listenToBooksWithName } from "../../models/CRUD.js";
 let { children } = $props();
 let auth = getUser();
 let book = getBook();
-let booksByName = $state(void 0);
-let bookByID = $state(void 0);
+// Keep track of the query updates
+let booksByName = $state(undefined);
+let bookByID = $state(undefined);
+// Merge them together here
 let currentBook = $derived.by(() => {
-  if (booksByName === void 0 && bookByID === void 0)
-    return void 0;
-  return booksByName !== void 0 && booksByName.length > 0 ? booksByName[0] : bookByID ?? null;
+	// Neither loaded? Current book isn't loaded.
+	if (booksByName === undefined && bookByID === undefined) return undefined;
+	return booksByName !== undefined && booksByName.length > 0 ? booksByName[0] : bookByID ?? null;
 });
+// Whenever the merge changes, update the book store (updating the whole UI)
 $effect.pre(() => {
-  book.set(currentBook ?? void 0);
+	book.set(currentBook ?? undefined);
 });
-let nameUnsub = void 0;
-let idUnsub = void 0;
+// Keep track of listeners to unsubscribe to on page changes.
+let nameUnsub = undefined;
+let idUnsub = undefined;
 function unsub() {
-  if (nameUnsub) nameUnsub();
-  if (idUnsub) idUnsub();
+	if (nameUnsub) nameUnsub();
+	if (idUnsub) idUnsub();
 }
+// Keep track of any errors.
 let error = $state();
 function listen() {
-  unsub();
-  const bookid = page.params.bookid;
-  if (bookid === void 0) return;
-  try {
-    nameUnsub = listenToBooksWithName(
-      bookid,
-      (books) => booksByName = books
-    );
-    idUnsub = listenToBooksWithID(
-      bookid,
-      (book2) => bookByID = book2
-    );
-  } catch (err) {
-    error = "" + err;
-  }
+	unsub();
+	const bookid = page.params.bookid;
+	if (bookid === undefined) return;
+	try {
+		nameUnsub = listenToBooksWithName(bookid, (books) => booksByName = books);
+		idUnsub = listenToBooksWithID(bookid, (book) => bookByID = book);
+	} catch (err) {
+		error = "" + err;
+	}
 }
+// When the book id or auth changes and there's a user, update the listener.
 $effect(() => {
-  void page.params.bookid;
-  if ($auth && $auth.user !== null) listen();
+	void page.params.bookid;
+	if ($auth && $auth.user !== null) listen();
 });
+// When this is unmounted, unset them.
 onDestroy(() => {
-  book.set(void 0);
-  unsub();
+	book.set(undefined);
+	unsub();
 });
 </script>
 

package/dist/components/page/BulkReferenceEditor.svelte

@@ -1,52 +1,32 @@
 <script lang="ts">import Instructions from "./Instructions.svelte";
-import {
-  getUniqueReferenceID,
-  mineReference
-} from "../../util/mineReference";
-import Reference from "../../models/book/Reference";
-import {
-  getEdition,
-  isEditionEditable,
-  isEditionPartiallyEditable
-} from "./Contexts";
+import { getUniqueReferenceID, mineReference } from "../../util/mineReference.js";
+import Reference from "../../models/book/Reference.js";
+import { getEdition, isEditionEditable, isEditionPartiallyEditable } from "./Contexts";
 import Button from "../app/Button.svelte";
 let edition = getEdition();
 let text = $state("");
 let editable = isEditionEditable() || isEditionPartiallyEditable();
 function handleBulkAdd() {
-  const chunks = text.split(/\n+/);
-  const newReferences = [];
-  for (const chunk of chunks) {
-    newReferences.push(
-      mineReference(
-        // Pass the current IDs and the new reference IDs
-        Array.from(
-          /* @__PURE__ */ new Set([
-            ...Object.keys($edition?.getReferences() ?? []),
-            ...newReferences.map((ref) => ref.citationID)
-          ])
-        ),
-        chunk
-      )
-    );
-  }
-  if ($edition) {
-    edition.set($edition.withNewReferences(newReferences));
-    text = "";
-  }
+	// Split by lines, skipping empty lines.
+	const chunks = text.split(/\n+/);
+	const newReferences = [];
+	for (const chunk of chunks) {
+		newReferences.push(mineReference(
+			// Pass the current IDs and the new reference IDs
+			Array.from(new Set([...Object.keys($edition?.getReferences() ?? []), ...newReferences.map((ref) => ref.citationID)])),
+			chunk
+		));
+	}
+	// Handle possible duplicate IDs.
+	if ($edition) {
+		edition.set($edition.withNewReferences(newReferences));
+		text = "";
+	}
 }
 function handleEmptyAdd() {
-  if ($edition) {
-    edition.set(
-      $edition.withNewReferences([
-        new Reference(
-          getUniqueReferenceID(
-            Object.keys($edition.getReferences())
-          )
-        )
-      ])
-    );
-  }
+	if ($edition) {
+		edition.set($edition.withNewReferences([new Reference(getUniqueReferenceID(Object.keys($edition.getReferences())))]));
+	}
 }
 </script>
 

package/dist/components/page/Chapter.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import Parser from "../../models/chapter/Parser";
+<script lang="ts">import Parser from "../../models/chapter/Parser.js";
 import Header from "./Header.svelte";
 import Authors from "./Authors.svelte";
 import Outline from "./Outline.svelte";
@@ -11,25 +11,13 @@ import ChapterBody from "../chapter/ChapterBody.svelte";
 import PossibleReference from "./PossibleReference.svelte";
 import ChapterNumber from "./ChapterNumber.svelte";
 import Problem from "../chapter/Problem.svelte";
-import {
-  CHAPTER,
-  getUser,
-  getBook,
-  getEdition,
-  isBookEditable,
-  isChapterEditable,
-  isEditionPartiallyEditable,
-  getLeasee,
-  lease,
-  setChapter,
-  isEditionEditable
-} from "./Contexts";
+import { CHAPTER, getUser, getBook, getEdition, isBookEditable, isChapterEditable, isEditionPartiallyEditable, getLeasee, lease, setChapter, isEditionEditable } from "./Contexts";
 import { writable } from "svelte/store";
 import { onMount, setContext } from "svelte";
 import { hideOutlineIfObscured, layoutMarginals } from "./margins";
 import scrollToEyeLevel from "../../util/scrollToEyeLevel";
 import { goto } from "$app/navigation";
-import ChapterNode from "../../models/chapter/ChapterNode";
+import ChapterNode from "../../models/chapter/ChapterNode.js";
 import Muted from "./Muted.svelte";
 import Title from "./Title.svelte";
 import PageHeader from "./PageHeader.svelte";
@@ -38,127 +26,164 @@ let { chapter, print = false } = $props();
 let book = getBook();
 let edition = getEdition();
 let auth = getUser();
+// Keep track of the scroll position to facilitate reading during reloads.
 function rememberPosition() {
-  localStorage.setItem("scrollposition", "" + window.scrollY);
+	localStorage.setItem("scrollposition", "" + window.scrollY);
 }
-let marginal = writable(void 0);
-let highlightedID = $state(void 0);
+// The currently selected marginal; we only do one at a time.
+let marginal = writable(undefined);
+// Keep track of which hash mark is scrolled to
+let highlightedID = $state(undefined);
+// When this component is mounted...
+// 1) Subscribe and unsubscribe to window listeners
+// 2) Do initial layout of marginals
+// 3) Start observing any elements corresponding to the ID in the URL's hash string
+// 4) Clean up our mess after unmounting.
 onMount(() => {
-  const observeHash = () => {
-    const elementID = window.location.hash.substring(1);
-    const element = elementID ? document.getElementById(elementID) : null;
-    if (element) {
-      highlightedID = elementID;
-      setTimeout(() => observer.observe(element), 2500);
-    }
-  };
-  const handleScroll = () => {
-    hideOutlineIfObscured();
-    observeHash();
-  };
-  window.addEventListener("scroll", handleScroll);
-  const resize = new ResizeObserver(() => requestLayout());
-  resize.observe(document.body);
-  window.addEventListener("beforeunload", rememberPosition);
-  window.addEventListener("visibilitychange", rememberPosition);
-  window.addEventListener("pagehide", rememberPosition);
-  window.addEventListener("pushstate", observeHash);
-  window.addEventListener("popstate", observeHash);
-  window.addEventListener("hashchange", observeHash);
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.intersectionRatio === 0 && entry.target.id === window.location.hash.substring(1)) {
-        history.pushState(
-          "",
-          document.title,
-          window.location.pathname + window.location.search
-        );
-        observer.unobserve(entry.target);
-        highlightedID = void 0;
-      }
-    });
-  });
-  observeHash();
-  layoutMarginals();
-  return () => {
-    window.removeEventListener("scroll", handleScroll);
-    resize.unobserve(document.body);
-    window.removeEventListener("beforeunload", rememberPosition);
-    window.removeEventListener("visibilitychange", rememberPosition);
-    window.removeEventListener("pagehide", rememberPosition);
-    localStorage.removeItem("scrollposition");
-    window.removeEventListener("pushstate", observeHash);
-    window.removeEventListener("popstate", observeHash);
-    window.removeEventListener("hashchange", observeHash);
-    observer.disconnect();
-  };
+	// On render or when scrolling, see if the URL hash has changed and update state accordingly.
+	// We also track whether we've scrolled to it.
+	const observeHash = () => {
+		// Get the ID without the hash and the corresponding element
+		const elementID = window.location.hash.substring(1);
+		const element = elementID ? document.getElementById(elementID) : null;
+		// If it's not empty, observe it, and remember what we're observing for highlighting
+		if (element) {
+			highlightedID = elementID;
+			// Start watching this a few seconds after we see it, giving the for in-page scrolling.
+			setTimeout(() => observer.observe(element), 2500);
+		}
+	};
+	// Do things to do when scrolling
+	const handleScroll = () => {
+		// See if the outline is obscured by an image
+		hideOutlineIfObscured();
+		// See if there are any new hashes to observe. This is because
+		// we're using react-router-hash-link, which doesn't trigger hashchange events for some reason.
+		observeHash();
+	};
+	// Lay things out when the window or scroll changes.
+	window.addEventListener("scroll", handleScroll);
+	// When the chapter view resizes, the responsive layout might cause the marginals to move to the footer.
+	// when this happens, we want to immediately remove all of the explicit positioning.
+	const resize = new ResizeObserver(() => requestLayout());
+	resize.observe(document.body);
+	// Remember the scroll position before a refresh.
+	// We have to do all of these because browser support varies.
+	window.addEventListener("beforeunload", rememberPosition);
+	window.addEventListener("visibilitychange", rememberPosition);
+	window.addEventListener("pagehide", rememberPosition);
+	// Start listening for hash changes, since we want to remove them upon scrolling away from them.
+	window.addEventListener("pushstate", observeHash);
+	window.addEventListener("popstate", observeHash);
+	window.addEventListener("hashchange", observeHash);
+	// Make an intersection observer to monitor the location of elements selected by the URL hash ID.
+	const observer = new IntersectionObserver((entries) => {
+		// Go through all of the monitored elements
+		entries.forEach((entry) => {
+			// If the observed element is out of view and in the hash, remove the hash
+			if (entry.intersectionRatio === 0 && entry.target.id === window.location.hash.substring(1)) {
+				history.pushState("", document.title, window.location.pathname + window.location.search);
+				observer.unobserve(entry.target);
+				highlightedID = undefined;
+			}
+		});
+	});
+	// Do an initial check the hash to see if there's an ID to scroll to
+	observeHash();
+	// Position the marginals, since there's new content.
+	layoutMarginals();
+	// On cleanup, unsubscribe from everything above.
+	return () => {
+		window.removeEventListener("scroll", handleScroll);
+		resize.unobserve(document.body);
+		// Stop listening to page visibility changes.
+		window.removeEventListener("beforeunload", rememberPosition);
+		window.removeEventListener("visibilitychange", rememberPosition);
+		window.removeEventListener("pagehide", rememberPosition);
+		// Delete the remembered position so that the next page scrolls to top.
+		localStorage.removeItem("scrollposition");
+		// Stop listening for hash changes
+		window.removeEventListener("pushstate", observeHash);
+		window.removeEventListener("popstate", observeHash);
+		window.removeEventListener("hashchange", observeHash);
+		// Stop observing everything on unmount
+		observer.disconnect();
+	};
 });
+// Position the marginals on mount.
 onMount(() => layoutMarginals());
+// This gets called after the page is done loading. There are various things we scroll to.
 function scrollToLastLocation() {
-  layoutMarginals();
-  if (location.search) {
-    const highlights = document.getElementsByClassName(
-      "bookish-text bookish-content-highlight"
-    );
-    const num = getHighlightedNumber();
-    if (num && highlights.length > 0 && num < highlights.length && num >= 0) {
-      scrollToEyeLevel(highlights[num]);
-    }
-  } else if (highlightedID) {
-    const el = document.getElementById(highlightedID);
-    if (el) {
-      scrollToEyeLevel(el);
-    }
-  } else {
-    const entries = performance.getEntriesByType("navigation");
-    const position = localStorage.getItem("scrollposition");
-    if (position !== null && entries.length > 0 && entries[entries.length - 1].type === "reload") {
-      window.scrollTo(0, parseInt(position));
-    } else {
-      window.scrollTo(0, 0);
-    }
-  }
+	// In case loading changed marginal positions
+	layoutMarginals();
+	// If there's a word we're trying to highlight in the URL path, scroll to the corresponding match.
+	if (location.search) {
+		const highlights = document.getElementsByClassName("bookish-text bookish-content-highlight");
+		const num = getHighlightedNumber();
+		if (num && highlights.length > 0 && num < highlights.length && num >= 0) {
+			scrollToEyeLevel(highlights[num]);
+		}
+	} else if (highlightedID) {
+		const el = document.getElementById(highlightedID);
+		// If we found the element, remove the hash any time after a few seconds. See handleScroll for the removal logic.
+		if (el) {
+			scrollToEyeLevel(el);
+		}
+	} else {
+		// If we got to this page through a refresh, scroll to
+		const entries = performance.getEntriesByType("navigation");
+		const position = localStorage.getItem("scrollposition");
+		if (position !== null && entries.length > 0 && entries[entries.length - 1].type === "reload") {
+			// Scroll to the previous position, if there was one, so that refresh preserves position.
+			window.scrollTo(0, parseInt(position));
+		} else {
+			window.scrollTo(0, 0);
+		}
+	}
 }
+/** Account for static builds, where location isn't defined */
 function getLocation() {
-  return typeof location === "undefined" ? void 0 : location;
+	return typeof location === "undefined" ? undefined : location;
 }
 function getHighlightedWord() {
-  return getLocation()?.search.split("&")[0]?.split("=")[1] ?? void 0;
+	return getLocation()?.search.split("&")[0]?.split("=")[1] ?? undefined;
 }
 function getHighlightedNumber() {
-  const number = getLocation()?.search.split("&")[1]?.split("=")[1];
-  return number === void 0 ? void 0 : parseInt(number);
+	const number = getLocation()?.search.split("&")[1]?.split("=")[1];
+	return number === undefined ? undefined : parseInt(number);
 }
+// Prepare to render the chapter by getting some data from the chapter and book.
 let chapterID = $derived(chapter.getID());
 let chapterNumber = $derived($edition?.getChapterNumber(chapterID));
 let chapterSection = $derived($edition?.getChapterSection(chapterID));
-let chapterAST = $derived($edition ? chapter.getAST($edition) : void 0);
-let citations = $derived(chapterAST ? chapterAST.getCitations() : void 0);
-let editionNumber = $derived($edition ? $edition.getEditionNumber() : void 0);
+let chapterAST = $derived($edition ? chapter.getAST($edition) : undefined);
+let citations = $derived(chapterAST ? chapterAST.getCitations() : undefined);
+let editionNumber = $derived($edition ? $edition.getEditionNumber() : undefined);
+// Coalesce marginal layout requests from descendants into a single
+// layout pass per animation frame. Marginal components request a pass
+// whenever their rendered content changes.
 let layoutRequested = false;
 function requestLayout() {
-  if (typeof requestAnimationFrame === "undefined") return;
-  if (layoutRequested) return;
-  layoutRequested = true;
-  requestAnimationFrame(() => {
-    layoutRequested = false;
-    layoutMarginals();
-  });
+	if (typeof requestAnimationFrame === "undefined") return;
+	if (layoutRequested) return;
+	layoutRequested = true;
+	requestAnimationFrame(() => {
+		layoutRequested = false;
+		layoutMarginals();
+	});
 }
 let chapterStore = writable();
 setContext(CHAPTER, chapterStore);
 $effect.pre(() => {
-  chapterStore.set({
-    chapter,
-    highlightedWord: getHighlightedWord(),
-    highlightedID,
-    marginal,
-    requestLayout
-  });
+	chapterStore.set({
+		chapter,
+		highlightedWord: getHighlightedWord(),
+		highlightedID,
+		marginal,
+		requestLayout
+	});
 });
-let editable = $derived(
-  !print && (isBookEditable() || isEditionEditable() || isChapterEditable() || $auth !== void 0 && $auth.user !== null && chapter.isEditor($auth.user.uid))
-);
+let editable = $derived(!print && (isBookEditable() || isEditionEditable() || isChapterEditable() || $auth !== undefined && $auth.user !== null && chapter.isEditor($auth.user.uid)));
 </script>
 
 {#if $edition}
@@ -215,7 +240,7 @@ let editable = $derived(
                                         goto(
                                             `/write/${$book.getID()}/${editionNumber}/${newChapterID}`,
                                             {
-                                                keepFocus: true,
+                                                reset: false,
                                             },
                                         );
                                     }

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

@@ -1,4 +1,4 @@
-import type ChapterModel from '../../models/book/Chapter';
+import type ChapterModel from '../../models/book/Chapter.js';
 interface Props {
     chapter: ChapterModel;
     print?: boolean;

package/dist/components/page/ChapterTitle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import Link from "../Link.svelte";
-let { link = void 0, children } = $props();
+let { link = undefined, children } = $props();
 </script>
 
 {#if link}

package/dist/components/page/Contexts.js

@@ -5,7 +5,6 @@
 import { getContext } from 'svelte';
 import { get } from 'svelte/store';
 import { page } from '$app/state';
-import { updateLock } from '../../models/CRUD';
 export const DARK_MODE = Symbol('dark');
 export function getDarkMode() {
     return getContext(DARK_MODE);
@@ -119,6 +118,9 @@ export async function lease(authStore, editionStore, contentID, lock) {
     const edition = get(editionStore);
     const auth = get(authStore);
     if (edition && auth && auth.user) {
+        // Loaded here rather than at the top so bound books, which never
+        // lease, don't load Firebase. See FirebaseAvailable.ts.
+        const { updateLock } = await import('../../models/CRUD');
         await updateLock(edition, auth.user.uid, contentID, lock);
         const latestEdition = get(editionStore);
         const latestAuth = get(authStore);

package/dist/components/page/DefinitionView.svelte

@@ -1,64 +1,52 @@
-<script lang="ts">import Parser from "../../models/chapter/Parser";
+<script lang="ts">import Parser from "../../models/chapter/Parser.js";
 import ConfirmButton from "../editor/ConfirmButton.svelte";
 import TextEditor from "../editor/TextEditor.svelte";
 import BookishEditor from "../editor/BookishEditor.svelte";
 import Format from "../chapter/Format.svelte";
 import Note from "../editor/Note.svelte";
-import {
-  getUser,
-  getEdition,
-  getLeasee,
-  isChapterEditable,
-  lease,
-  isEditionEditable
-} from "./Contexts";
+import { getUser, getEdition, getLeasee, isChapterEditable, lease, isEditionEditable } from "./Contexts";
 import Button from "../app/Button.svelte";
 let { id, definition } = $props();
 let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
+// Focus after adding a new synonym.
 let newSynonym = false;
 let synonymsEditor = $state(null);
+// After the definition re-renders with a newly added synonym,
+// focus its editor.
 $effect(() => {
-  void definition;
-  if (newSynonym && synonymsEditor) {
-    const editors = synonymsEditor.querySelectorAll("input");
-    if (editors.length > 0) {
-      const last = editors[editors.length - 1];
-      if (last instanceof HTMLElement)
-        setTimeout(() => last.focus(), 0);
-    }
-    newSynonym = false;
-  }
+	void definition;
+	if (newSynonym && synonymsEditor) {
+		const editors = synonymsEditor.querySelectorAll("input");
+		if (editors.length > 0) {
+			const last = editors[editors.length - 1];
+			// Defer past the click's default action, which would
+			// otherwise return focus to the add-synonym button.
+			if (last instanceof HTMLElement) setTimeout(() => last.focus(), 0);
+		}
+		newSynonym = false;
+	}
 });
 function addSynonym() {
-  if ($edition) {
-    edition.set(
-      $edition.withEditedDefinition(id, {
-        phrase: definition.phrase,
-        definition: definition.definition,
-        synonyms: [...definition.synonyms ?? [], ""]
-      })
-    );
-  }
-  newSynonym = true;
+	if ($edition) {
+		edition.set($edition.withEditedDefinition(id, {
+			phrase: definition.phrase,
+			definition: definition.definition,
+			synonyms: [...definition.synonyms ?? [], ""]
+		}));
+	}
+	newSynonym = true;
 }
 function removeSynonym(index) {
-  if (definition.synonyms && index >= 0 && index < definition.synonyms.length)
-    updateSynonyms([
-      ...definition.synonyms.slice(0, index),
-      ...definition.synonyms.slice(index + 1)
-    ]);
+	if (definition.synonyms && index >= 0 && index < definition.synonyms.length) updateSynonyms([...definition.synonyms.slice(0, index), ...definition.synonyms.slice(index + 1)]);
 }
 function updateSynonyms(synonyms) {
-  if ($edition)
-    edition.set(
-      $edition.withEditedDefinition(id, {
-        phrase: definition.phrase,
-        definition: definition.definition,
-        synonyms
-      })
-    );
+	if ($edition) edition.set($edition.withEditedDefinition(id, {
+		phrase: definition.phrase,
+		definition: definition.definition,
+		synonyms
+	}));
 }
 let syns = $derived(definition.synonyms || []);
 </script>

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

@@ -1,4 +1,4 @@
-import type Definition from '../../models/book/Definition';
+import type Definition from '../../models/book/Definition.js';
 interface Props {
     id: string;
     definition: Definition;

package/dist/components/page/Description.svelte

@@ -1,13 +1,7 @@
-<script lang="ts">import Parser from "../../models/chapter/Parser";
+<script lang="ts">import Parser from "../../models/chapter/Parser.js";
 import ChapterBody from "../chapter/ChapterBody.svelte";
 import BookishEditor from "../editor/BookishEditor.svelte";
-import {
-  getUser,
-  getEdition,
-  getLeasee,
-  isEditionEditable,
-  lease
-} from "./Contexts";
+import { getUser, getEdition, getLeasee, isEditionEditable, lease } from "./Contexts";
 let auth = getUser();
 let editable = isEditionEditable();
 let edition = getEdition();