bookish-press 0.7.1 → 0.8.2

package/dist/components/page/Chapter.svelte

@@ -1,203 +1,173 @@
-<script>import Parser from '../../models/chapter/Parser';
-import Header from './Header.svelte';
-import Authors from './Authors.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import TextEditor from '../editor/TextEditor.svelte';
-import BookishEditor from '../editor/BookishEditor.svelte';
-import Toggle from '../editor/Toggle.svelte';
-import Instructions from './Instructions.svelte';
-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 { 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 Muted from './Muted.svelte';
-import Title from './Title.svelte';
-import PageHeader from './PageHeader.svelte';
-import Permissions from '../editor/Permissions.svelte';
-export let chapter;
-export let print = false;
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import Header from "./Header.svelte";
+import Authors from "./Authors.svelte";
+import Outline from "./Outline.svelte";
+import Page from "./Page.svelte";
+import TextEditor from "../editor/TextEditor.svelte";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Toggle from "../editor/Toggle.svelte";
+import Instructions from "./Instructions.svelte";
+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 { 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 Muted from "./Muted.svelte";
+import Title from "./Title.svelte";
+import PageHeader from "./PageHeader.svelte";
+import Permissions from "../editor/Permissions.svelte";
+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);
 }
-// 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 = 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.
+let marginal = writable(void 0);
+let highlightedID = $state(void 0);
 onMount(() => {
-    // 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(() => layoutMarginals());
-    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
+  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();
-    // 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();
-    };
+  };
+  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();
+  };
 });
-// 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() {
-    // 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]);
-        }
+  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]);
     }
-    // Otherwise, if there's an ID in the URL, jump to it.
-    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 (highlightedID) {
+    const el = document.getElementById(highlightedID);
+    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));
-        }
-        // Otherwise, just scroll to the top.
-        else {
-            window.scrollTo(0, 0);
-        }
+  } 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);
     }
+  }
 }
-/** Account for static builds, where location isn't defined */
 function getLocation() {
-    return typeof location === 'undefined' ? undefined : location;
+  return typeof location === "undefined" ? void 0 : location;
 }
 function getHighlightedWord() {
-    return getLocation()?.search.split('&')[0]?.split('=')[1] ?? undefined;
+  return getLocation()?.search.split("&")[0]?.split("=")[1] ?? void 0;
 }
 function getHighlightedNumber() {
-    const number = getLocation()?.search.split('&')[1]?.split('=')[1];
-    return number === undefined ? undefined : parseInt(number);
+  const number = getLocation()?.search.split("&")[1]?.split("=")[1];
+  return number === void 0 ? void 0 : parseInt(number);
+}
+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 layoutRequested = false;
+function requestLayout() {
+  if (typeof requestAnimationFrame === "undefined") return;
+  if (layoutRequested) return;
+  layoutRequested = true;
+  requestAnimationFrame(() => {
+    layoutRequested = false;
+    layoutMarginals();
+  });
 }
-// Prepare to render the chapter by getting some data from the chapter and book.
-$: chapterID = chapter.getID();
-$: chapterNumber = $edition?.getChapterNumber(chapterID);
-$: chapterSection = $edition?.getChapterSection(chapterID);
-$: chapterAST = $edition ? chapter.getAST($edition) : undefined;
-$: citations = chapterAST ? chapterAST.getCitations() : undefined;
-$: editionNumber = $edition ? $edition.getEditionNumber() : undefined;
 let chapterStore = writable();
 setContext(CHAPTER, chapterStore);
-$: chapterStore.set({
+$effect.pre(() => {
+  chapterStore.set({
     chapter,
     highlightedWord: getHighlightedWord(),
     highlightedID,
     marginal,
-    layoutMarginals,
+    requestLayout
+  });
 });
-let editable = isBookEditable() ||
-    isEditionEditable() ||
-    isChapterEditable() ||
-    ($auth !== undefined &&
-        $auth.user !== null &&
-        chapter.isEditor($auth.user.uid));
+let editable = $derived(
+  !print && (isBookEditable() || isEditionEditable() || isChapterEditable() || $auth !== void 0 && $auth.user !== null && chapter.isEditor($auth.user.uid))
+);
 </script>
 
 {#if $edition}
     <Page
         afterLoaded={scrollToLastLocation}
-        title={`${$edition.getTitle()} - ${chapter.getTitle()}`}
+        title={print ? undefined : `${$edition.getTitle()} - ${chapter.getTitle()}`}
     >
         <Header
-            editable={isChapterEditable()}
+            {editable}
             id={chapter.id}
             header={chapter.getTitle()}
             label="Chapter title"
@@ -210,94 +180,100 @@ let editable = isBookEditable() ||
             {print}
         >
             <!-- Collapse the outline if a marginal is selected. -->
-            <Outline
-                slot="outline"
-                collapse={$marginal !== undefined}
-                previous={$edition.getPreviousChapterID(chapterID, editable)}
-                next={$edition.getNextChapterID(chapterID, editable)}
-                listener={(expanded) => {
-                    // If the outline is being expanded, hide the marginal, otherwise leave it alone.
-                    if (expanded) marginal.set(undefined);
+            {#snippet outline()}
+                        <Outline
+                    
+                    collapse={$marginal !== undefined}
+                    previous={$edition.getPreviousChapterID(chapterID, editable)}
+                    next={$edition.getNextChapterID(chapterID, editable)}
+                    listener={(expanded) => {
+                        // If the outline is being expanded, hide the marginal, otherwise leave it alone.
+                        if (expanded) marginal.set(undefined);
 
-                    // Check if we need to hide the outline after positioning.
-                    hideOutlineIfObscured();
-                }}
-            />
+                        // Check if we need to hide the outline after positioning.
+                        hideOutlineIfObscured();
+                    }}
+                />
+                    {/snippet}
             <!-- Add an editable chapter ID if in editor mode -->
-            <svelte:fragment slot="before">
-                {#if editable && $book}
-                    <Muted>
-                        <em>bookish.press/book/</em><TextEditor
-                            text={chapter.getID()}
-                            label="Chapter URL ID editor"
-                            save={// After the ID is edited, reload the page with the new URL.
-                            async (newChapterID) => {
-                                if ($book) {
-                                    setChapter(
-                                        edition,
-                                        chapter,
-                                        chapter.withChapterID(newChapterID),
-                                    );
-                                    // Navigate to the new ID
-                                    goto(
-                                        `/write/${$book.getID()}/${editionNumber}/${newChapterID}`,
-                                        {
-                                            keepFocus: true,
-                                        },
-                                    );
-                                }
-                            }}
-                            placeholder="chapter name"
-                            valid={(newChapterID) =>
-                                !/^[a-zA-Z0-9]+$/.test(newChapterID)
-                                    ? 'Chapter IDs must be one or more letters or numbers'
-                                    : chapter.getID() !== newChapterID &&
-                                        $edition?.hasChapter(newChapterID)
-                                      ? "There's already a chapter that has this ID."
-                                      : undefined}
-                            saveOnExit={true}
-                        />
-                    </Muted>
-                {/if}
-                {#if editable}
-                    <Toggle
-                        on={chapter.isNumbered()}
-                        save={(on) =>
-                            setChapter(
-                                edition,
-                                chapter,
-                                chapter.asNumbered(on),
-                            )}
-                    >
-                        <ChapterNumber
-                            >{#if chapterNumber !== undefined}Chapter {chapterNumber}{:else}<Muted
-                                    >Unnumbered</Muted
-                                >{/if}</ChapterNumber
+            {#snippet before()}
+                    
+                    {#if editable && $book}
+                        <Muted>
+                            <em>bookish.press/book/</em><TextEditor
+                                text={chapter.getID()}
+                                label="Chapter URL ID editor"
+                                save={// After the ID is edited, reload the page with the new URL.
+                                async (newChapterID) => {
+                                    if ($book) {
+                                        setChapter(
+                                            edition,
+                                            chapter,
+                                            chapter.withChapterID(newChapterID),
+                                        );
+                                        // Navigate to the new ID
+                                        goto(
+                                            `/write/${$book.getID()}/${editionNumber}/${newChapterID}`,
+                                            {
+                                                keepFocus: true,
+                                            },
+                                        );
+                                    }
+                                }}
+                                placeholder="chapter name"
+                                valid={(newChapterID) =>
+                                    !/^[a-zA-Z0-9]+$/.test(newChapterID)
+                                        ? 'Chapter IDs must be one or more letters or numbers'
+                                        : chapter.getID() !== newChapterID &&
+                                            $edition?.hasChapter(newChapterID)
+                                          ? "There's already a chapter that has this ID."
+                                          : undefined}
+                                saveOnExit={true}
+                            />
+                        </Muted>
+                    {/if}
+                    {#if editable}
+                        <Toggle
+                            on={chapter.isNumbered()}
+                            save={(on) =>
+                                setChapter(
+                                    edition,
+                                    chapter,
+                                    chapter.asNumbered(on),
+                                )}
                         >
-                    </Toggle>
-                {:else if chapterNumber !== undefined}
-                    <ChapterNumber>Chapter {chapterNumber}</ChapterNumber>
-                {/if}
-                {#if chapterSection !== undefined && chapterSection.length > 0}
-                    <span class="section-name">{chapterSection}</span>
-                {/if}
-            </svelte:fragment>
+                            <ChapterNumber
+                                >{#if chapterNumber !== undefined}Chapter {chapterNumber}{:else}<Muted
+                                        >Unnumbered</Muted
+                                    >{/if}</ChapterNumber
+                            >
+                        </Toggle>
+                    {:else if chapterNumber !== undefined}
+                        <ChapterNumber>Chapter {chapterNumber}</ChapterNumber>
+                    {/if}
+                    {#if chapterSection !== undefined && chapterSection.length > 0}
+                        <span class="section-name">{chapterSection}</span>
+                    {/if}
+                
+                    {/snippet}
             <!-- If there are chapter authors, render those, otherwise use the book authors -->
-            <Authors
-                editable={isChapterEditable()}
-                slot="after"
-                authors={chapter.getAuthors()}
-                inheritedAuthors={$edition.getAuthors()}
-                add={() => setChapter(edition, chapter, chapter.withAuthor(''))}
-                edit={(index, text) =>
-                    setChapter(
-                        edition,
-                        chapter,
-                        chapter.withRenamedAuthor(index, text),
-                    )}
-                remove={(index) =>
-                    setChapter(edition, chapter, chapter.withoutAuthor(index))}
-            />
+            {#snippet after()}
+                        <Authors
+                    editable={isChapterEditable()}
+                    
+                    authors={chapter.getAuthors()}
+                    inheritedAuthors={$edition.getAuthors()}
+                    add={() => setChapter(edition, chapter, chapter.withAuthor(''))}
+                    edit={(index, text) =>
+                        setChapter(
+                            edition,
+                            chapter,
+                            chapter.withRenamedAuthor(index, text),
+                        )}
+                    remove={(index) =>
+                        setChapter(edition, chapter, chapter.withoutAuthor(index))}
+                />
+                    {/snippet}
         </Header>
 
         <Instructions {editable}>

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type ChapterModel from '../../models/book/Chapter';
-declare const __propDef: {
-    props: {
-        chapter: ChapterModel;
-        print?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ChapterProps = typeof __propDef.props;
-export type ChapterEvents = typeof __propDef.events;
-export type ChapterSlots = typeof __propDef.slots;
-export default class Chapter extends SvelteComponent<ChapterProps, ChapterEvents, ChapterSlots> {
+interface Props {
+    chapter: ChapterModel;
+    print?: boolean;
 }
-export {};
+declare const Chapter: import("svelte").Component<Props, {}, "">;
+type Chapter = ReturnType<typeof Chapter>;
+export default Chapter;

package/dist/components/page/ChapterContext.d.ts

@@ -5,6 +5,8 @@ type ChapterContext = {
     highlightedWord?: string;
     highlightedID?: string;
     marginal: Writable<string | undefined>;
-    layoutMarginals: () => void;
+    /** Request a chapter-wide marginal layout pass. Requests are
+     *  coalesced into a single pass per animation frame. */
+    requestLayout: () => void;
 } | undefined;
 export type { ChapterContext as default };

package/dist/components/page/ChapterNumber.svelte

@@ -1,4 +1,7 @@
-<span class="bookish-chapter-number"><slot /></span>
+<script lang="ts">let { children } = $props();
+</script>
+
+<span class="bookish-chapter-number">{@render children?.()}</span>
 
 <style>
     .bookish-chapter-number {

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  ChapterNumberProps */
-/** @typedef {typeof __propDef.events}  ChapterNumberEvents */
-/** @typedef {typeof __propDef.slots}  ChapterNumberSlots */
-export default class ChapterNumber extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type ChapterNumberProps = typeof __propDef.props;
-export type ChapterNumberEvents = typeof __propDef.events;
-export type ChapterNumberSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const ChapterNumber: import("svelte").Component<Props, {}, "">;
+type ChapterNumber = ReturnType<typeof ChapterNumber>;
+export default ChapterNumber;

package/dist/components/page/ChapterTitle.svelte

@@ -1,11 +1,11 @@
-<script>import Link from '../Link.svelte';
-export let link = undefined;
+<script lang="ts">import Link from "../Link.svelte";
+let { link = void 0, children } = $props();
 </script>
 
 {#if link}
-    <Link to={link}><h3> <slot /></h3></Link>
+    <Link to={link}><h3> {@render children?.()}</h3></Link>
 {:else}
-    <h3><slot /></h3>
+    <h3>{@render children?.()}</h3>
 {/if}
 
 <style>