bookish-press 0.7.1 → 0.8.2

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;

package/dist/components/page/Index.svelte

@@ -1,44 +1,42 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import Instructions from './Instructions.svelte';
-import ChapterIDs from '../../models/book/ChapterID';
-import Link from '../Link.svelte';
-import { getBase, getEdition, isEditionEditable } from './Contexts';
-import { page } from '$app/stores';
-import Muted from './Muted.svelte';
-import ChapterTitle from './ChapterTitle.svelte';
-import ChapterNumber from './ChapterNumber.svelte';
-import PageHeader from './PageHeader.svelte';
-import Rows from './Rows.svelte';
+<script lang="ts">import Header from "./Header.svelte";
+import Outline from "./Outline.svelte";
+import Page from "./Page.svelte";
+import Instructions from "./Instructions.svelte";
+import ChapterIDs from "../../models/book/ChapterID";
+import Link from "../Link.svelte";
+import { getBase, getEdition, isEditionEditable } from "./Contexts";
+import { page } from "$app/state";
+import Muted from "./Muted.svelte";
+import ChapterTitle from "./ChapterTitle.svelte";
+import ChapterNumber from "./ChapterNumber.svelte";
+import PageHeader from "./PageHeader.svelte";
+import Rows from "./Rows.svelte";
 let editable = isEditionEditable();
 let edition = getEdition();
 let base = getBase();
-// What letter are we matching?
-$: letter = $page.params.letter;
-$: bookIndex = $edition?.getBookIndex() ?? {};
-let letters = {};
-// Figure out what letters have words
-$: {
-    for (const word of Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)))
-        letters[word.charAt(0).toLocaleLowerCase()] = true;
-}
-let words = [];
-$: {
-    words = [];
-    let count = 0;
-    Object.keys(bookIndex)
-        .sort((a, b) => a.localeCompare(b))
-        .forEach((word) => {
-        const firstLetter = word.charAt(0).toLowerCase();
-        if (letter === firstLetter) {
-            count++;
-            if (count % 20 === 0)
-                words.push(true);
-            words.push(word);
-        }
-    });
-}
+let letter = $derived(page.params.letter);
+let bookIndex = $derived($edition?.getBookIndex() ?? {});
+let letters = $derived.by(() => {
+  const map = {};
+  for (const word of Object.keys(bookIndex).sort(
+    (a, b) => a.localeCompare(b)
+  ))
+    map[word.charAt(0).toLocaleLowerCase()] = true;
+  return map;
+});
+let words = $derived.by(() => {
+  const list = [];
+  let count = 0;
+  Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)).forEach((word) => {
+    const firstLetter = word.charAt(0).toLowerCase();
+    if (letter === firstLetter) {
+      count++;
+      if (count % 20 === 0) list.push(true);
+      list.push(word);
+    }
+  });
+  return list;
+});
 </script>
 
 {#if $edition}
@@ -59,14 +57,16 @@ $: {
                     ? edition.set($edition.withHeader(ChapterIDs.IndexID, text))
                     : undefined}
         >
-            <Outline
-                slot="outline"
-                previous={$edition.getPreviousChapterID(
-                    ChapterIDs.IndexID,
-                    editable,
-                )}
-                next={$edition.getNextChapterID(ChapterIDs.IndexID, editable)}
-            />
+            {#snippet outline()}
+                        <Outline
+                    
+                    previous={$edition.getPreviousChapterID(
+                        ChapterIDs.IndexID,
+                        editable,
+                    )}
+                    next={$edition.getNextChapterID(ChapterIDs.IndexID, editable)}
+                />
+                    {/snippet}
         </Header>
 
         <Instructions {editable}>

package/dist/components/page/Index.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 IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-}
-export {};
+declare const Index: import("svelte").Component<Record<string, never>, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/page/Instructions.svelte

@@ -1,8 +1,8 @@
-<script>export let editable;
+<script lang="ts">let { editable, children } = $props();
 </script>
 
 {#if editable}
-    <aside class="instructions"><slot /></aside>
+    <aside class="instructions">{@render children?.()}</aside>
 {/if}
 
 <style>

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

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

package/dist/components/page/License.svelte

@@ -1,9 +1,15 @@
-<script>import Parser from '../../models/chapter/Parser';
-import BookishEditor from '../editor/BookishEditor.svelte';
-import Instructions from './Instructions.svelte';
-import Format from '../chapter/Format.svelte';
-import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
-import EditableHeader from './EditableHeader.svelte';
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Instructions from "./Instructions.svelte";
+import Format from "../chapter/Format.svelte";
+import {
+  getUser,
+  getEdition,
+  getLeasee,
+  isEditionEditable,
+  lease
+} from "./Contexts";
+import EditableHeader from "./EditableHeader.svelte";
 let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
@@ -19,7 +25,7 @@ let editable = isEditionEditable();
 {#if $edition}
     <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
     {#if editable}
-        <!-- svelte-ignore missing-declaration -->
+        <!-- svelte-ignore missing_declaration -->
         <BookishEditor
             text={$edition.getLicense()}
             parser={(text) =>

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

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LicenseProps = typeof __propDef.props;
-export type LicenseEvents = typeof __propDef.events;
-export type LicenseSlots = typeof __propDef.slots;
-export default class License extends SvelteComponent<LicenseProps, LicenseEvents, LicenseSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const License: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type License = InstanceType<typeof License>;
+export default License;

package/dist/components/page/Loading.svelte

@@ -7,15 +7,15 @@
             : '')}
 >
     <div class="bookish-loading-animation">
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
     </div>
 </div>
 

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

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  LoadingProps */
-/** @typedef {typeof __propDef.events}  LoadingEvents */
-/** @typedef {typeof __propDef.slots}  LoadingSlots */
-export default class Loading extends SvelteComponent<{
+export default Loading;
+type Loading = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LoadingProps = typeof __propDef.props;
-export type LoadingEvents = typeof __propDef.events;
-export type LoadingSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Loading: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/page/Media.svelte

@@ -1,30 +1,37 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import Instructions from './Instructions.svelte';
-import ChapterIDs from '../../models/book/ChapterID';
-import Format from '../chapter/Format.svelte';
-import MediaPreview from './MediaPreview.svelte';
-import { onMount } from 'svelte';
-import { getBase, getBook, getEdition, isBookEditable, isEditionEditable, } from './Contexts';
-import PageHeader from './PageHeader.svelte';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
+<script lang="ts">import Header from "./Header.svelte";
+import Outline from "./Outline.svelte";
+import Page from "./Page.svelte";
+import Instructions from "./Instructions.svelte";
+import ChapterIDs from "../../models/book/ChapterID";
+import Format from "../chapter/Format.svelte";
+import MediaPreview from "./MediaPreview.svelte";
+import { onMount } from "svelte";
+import {
+  getBase,
+  getBook,
+  getEdition,
+  isBookEditable,
+  isEditionEditable
+} from "./Contexts";
+import PageHeader from "./PageHeader.svelte";
+import ConfirmButton from "../editor/ConfirmButton.svelte";
 let book = getBook();
 let edition = getEdition();
 let editable = isBookEditable();
 let base = getBase();
-let images = [];
-$: embeds = $edition?.getEmbeds() ?? [];
-$: media = $book?.getMedia();
+let images = $state([]);
+let embeds = $derived($edition?.getEmbeds() ?? []);
+let media = $derived($book?.getMedia());
 function updateImages(newImages) {
-    images = newImages;
+  images = newImages;
 }
 onMount(() => {
-    // Listen to image changes.
-    media?.notify(updateImages);
-    return () => media?.stopNotifying(updateImages);
+  media?.notify(updateImages);
+  return () => media?.stopNotifying(updateImages);
 });
-$: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL())));
+let unused = $derived(images?.filter(
+  (image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL()))
+));
 </script>
 
 {#if $edition}
@@ -45,14 +52,16 @@ $: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes
                     ? edition.set($edition.withHeader(ChapterIDs.MediaID, text))
                     : undefined}
         >
-            <Outline
-                slot="outline"
-                previous={$edition.getPreviousChapterID(
-                    ChapterIDs.MediaID,
-                    editable,
-                )}
-                next={$edition.getNextChapterID(ChapterIDs.MediaID, editable)}
-            />
+            {#snippet outline()}
+                        <Outline
+                    
+                    previous={$edition.getPreviousChapterID(
+                        ChapterIDs.MediaID,
+                        editable,
+                    )}
+                    next={$edition.getNextChapterID(ChapterIDs.MediaID, editable)}
+                />
+                    {/snippet}
         </Header>
         <Instructions {editable}>
             These are the images in the book, in order of appearance. You can

package/dist/components/page/Media.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 MediaProps = typeof __propDef.props;
-export type MediaEvents = typeof __propDef.events;
-export type MediaSlots = typeof __propDef.slots;
-export default class Media extends SvelteComponent<MediaProps, MediaEvents, MediaSlots> {
-}
-export {};
+declare const Media: import("svelte").Component<Record<string, never>, {}, "">;
+type Media = ReturnType<typeof Media>;
+export default Media;

package/dist/components/page/MediaPreview.svelte

@@ -1,23 +1,26 @@
-<script>import Link from '../Link.svelte';
-import { getBase } from './Contexts';
-export let url;
-export let alt;
-export let chapterID;
+<script lang="ts">import Link from "../Link.svelte";
+import { getBase } from "./Contexts";
+let {
+  url,
+  alt,
+  chapterID,
+  children
+} = $props();
 let base = getBase();
-let loaded;
-let urlChecked;
-$: {
-    if (urlChecked !== url && typeof Image !== 'undefined') {
-        urlChecked = url;
-        let image = new Image();
-        image.src = url;
-        loaded = image.complete;
-        if (!loaded) {
-            image.onload = () => (loaded = true);
-            image.onerror = () => (loaded = null);
-        }
+let loaded = $state();
+let urlChecked = void 0;
+$effect.pre(() => {
+  if (urlChecked !== url && typeof Image !== "undefined") {
+    urlChecked = url;
+    let image = new Image();
+    image.src = url;
+    loaded = image.complete;
+    if (!loaded) {
+      image.onload = () => loaded = true;
+      image.onerror = () => loaded = null;
     }
-}
+  }
+});
 </script>
 
 <figure class={'media-preview'}>
@@ -28,7 +31,7 @@ $: {
     {:else if loaded === null}
         <div class="missing">missing image</div>
     {/if}
-    <figcaption class="credit"><slot /></figcaption>
+    <figcaption class="credit">{@render children?.()}</figcaption>
 </figure>
 
 <style>