bookish-press 0.7.4 → 0.9.2

package/dist/components/chapter/ChapterBody.test.js

@@ -0,0 +1,85 @@
+import { beforeAll, expect, test, vi } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { writable } from 'svelte/store';
+import Parser from '../../models/chapter/Parser';
+import Chapter from '../../models/book/Chapter';
+import ChapterBody from './ChapterBody.svelte';
+import { CARET, CHAPTER, EDITION } from '../page/Contexts';
+// The page state only exists inside a running SvelteKit app; Contexts.ts
+// reads it to decide whether a route is editable.
+vi.mock('$app/state', () => ({
+    page: {
+        route: { id: '/(reader)/[bookid]' },
+        params: {},
+        url: new URL('http://localhost/'),
+    },
+}));
+beforeAll(() => {
+    // jsdom doesn't implement matchMedia, which Marginal uses for mobile layout.
+    window.matchMedia = (query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => undefined,
+        removeListener: () => undefined,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        dispatchEvent: () => false,
+    });
+});
+function makeChapterContext(requestLayout) {
+    const context = {
+        chapter: Chapter.fromJSON({
+            id: 'test',
+            title: 'Test Chapter',
+            authors: [],
+            image: null,
+            numbered: true,
+            forthcoming: false,
+            text: '',
+            uids: [],
+        }),
+        marginal: writable(undefined),
+        requestLayout,
+    };
+    return context;
+}
+function renderChapter(markup, requestLayout = () => undefined) {
+    return render(ChapterBody, {
+        props: { node: Parser.parseChapter(undefined, markup) },
+        context: new Map([
+            [CHAPTER, writable(makeChapterContext(requestLayout))],
+            [EDITION, writable(undefined)],
+            [CARET, writable(undefined)],
+        ]),
+    });
+}
+test('renders paragraphs and code blocks', () => {
+    const { container } = renderChapter("Hello world, this is a paragraph.\n\n`\nconsole.log('hi');\n`\n");
+    expect(container.textContent).toContain('Hello world, this is a paragraph.');
+    expect(container.querySelector('code.bookish-code')).not.toBeNull();
+});
+test('renders footnote content in a marginal', () => {
+    const { container } = renderChapter('This is a claim.{And this is the footnote that supports it.}');
+    expect(container.textContent).toContain('This is a claim.');
+    const footnote = container.querySelector('.bookish-footnote');
+    expect(footnote).not.toBeNull();
+    expect(footnote?.textContent).toContain('And this is the footnote that supports it.');
+});
+// This guards the marginal layout contract: every render of a marginal
+// component must request a chapter-wide layout pass, including re-renders
+// caused by content changes. (Marginal components do this in an $effect
+// that tracks their rendered inputs; see Footnote.svelte and friends.)
+test('lays out marginals on render and again when content changes', async () => {
+    const layout = vi.fn();
+    const { rerender } = renderChapter('A fact.{A footnote.}', layout);
+    await tick();
+    expect(layout).toHaveBeenCalled();
+    const initialCalls = layout.mock.calls.length;
+    await rerender({
+        node: Parser.parseChapter(undefined, 'A revised fact.{A revised footnote.}'),
+    });
+    await tick();
+    expect(layout.mock.calls.length).toBeGreaterThan(initialCalls);
+});

package/dist/components/chapter/Citations.svelte

@@ -1,36 +1,30 @@
-<svelte:options immutable={true} />
-
-<script>import Marginal from './Marginal.svelte';
-import Problem from './Problem.svelte';
-import Atom from './Atom.svelte';
-import { getChapter, getEdition, getRoot } from '../page/Contexts';
-import PossibleReference from '../page/PossibleReference.svelte';
-import { afterUpdate } from 'svelte';
-export let node;
+<script lang="ts">import Marginal from "./Marginal.svelte";
+import Problem from "./Problem.svelte";
+import Atom from "./Atom.svelte";
+import { getChapter, getEdition, getRoot } from "../page/Contexts";
+import PossibleReference from "../page/PossibleReference.svelte";
+let { node } = $props();
 let chapter = getChapter();
 let edition = getEdition();
 let root = getRoot();
-// Sort citations numerically, however they're numbered.
-$: citations = node.getMeta().sort((a, b) => {
-    if ($root === undefined)
-        return 0;
+let citations = $derived(
+  node.getMeta().sort((a, b) => {
+    if ($root === void 0) return 0;
     let aNumber = $root.getCitationNumber(a);
     let bNumber = $root.getCitationNumber(b);
     if (aNumber === null) {
-        if (bNumber === null)
-            return 0;
-        else
-            return 1;
-    }
-    else {
-        if (bNumber === null)
-            return -1;
-        else
-            return aNumber - bNumber;
+      if (bNumber === null) return 0;
+      else return 1;
+    } else {
+      if (bNumber === null) return -1;
+      else return aNumber - bNumber;
     }
+  })
+);
+$effect(() => {
+  void citations;
+  $chapter?.requestLayout();
 });
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <Atom {node}
@@ -41,7 +35,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
                 label="reference {citations
                     .map((c) => $root.getCitationNumber(c))
                     .join(', ')}"
-                ><svelte:fragment slot="interactor">
+                >{#snippet interactor()}
                     {#each citations as citationID, index}{@const citationNumber =
                             $root.getCitationNumber(
                                 citationID,
@@ -55,26 +49,26 @@ afterUpdate(() => $chapter?.layoutMarginals());
                                 >,</sup
                             >{/if}{:else}<sup class="bookish-citation-symbol"
                             >{'\u2014'}</sup
-                        >{/each}</svelte:fragment
-                ><span slot="content" class="bookish-references"
-                    >{#each citations as citationID}
-                        {@const citationNumber =
-                            $root.getCitationNumber(citationID)}
-                        {@const ref = $edition?.getReference(citationID)}
-                        {#if citationNumber && ref && $edition}<span
-                                class="bookish-reference"
-                                aria-hidden="true"
-                            >
-                                <sup class="bookish-citation-symbol"
-                                    >{citationNumber}</sup
+                        >{/each}{/snippet}{#snippet content()}<span
+                        class="bookish-references"
+                        >{#each citations as citationID}
+                            {@const citationNumber =
+                                $root.getCitationNumber(citationID)}
+                            {@const ref = $edition?.getReference(citationID)}
+                            {#if citationNumber && ref && $edition}<span
+                                    class="bookish-reference"
+                                    aria-hidden="true"
                                 >
-                                <PossibleReference
-                                    node={ref}
-                                    edit={false}
-                                /></span
-                            >{/if}
-                    {/each}</span
-                ></Marginal
+                                    <sup class="bookish-citation-symbol"
+                                        >{citationNumber}</sup
+                                    >
+                                    <PossibleReference
+                                        node={ref}
+                                        edit={false}
+                                    /></span
+                                >{/if}
+                        {/each}</span
+                    >{/snippet}</Marginal
             ></span
         >{/if}</Atom
 >

package/dist/components/chapter/Citations.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type CitationsNode from '../../models/chapter/CitationsNode';
-declare const __propDef: {
-    props: {
-        node: CitationsNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CitationsProps = typeof __propDef.props;
-export type CitationsEvents = typeof __propDef.events;
-export type CitationsSlots = typeof __propDef.slots;
-export default class Citations extends SvelteComponent<CitationsProps, CitationsEvents, CitationsSlots> {
+interface Props {
+    node: CitationsNode;
 }
-export {};
+declare const Citations: import("svelte").Component<Props, {}, "">;
+type Citations = ReturnType<typeof Citations>;
+export default Citations;

package/dist/components/chapter/Code.svelte

@@ -1,22 +1,22 @@
-<svelte:options immutable={true} />
-
-<script>import { afterUpdate } from 'svelte';
-import Prism from './ExtendedPrism';
-export let editable;
-export let inline;
-export let nodeID;
-export let edited = undefined;
-export let language = undefined;
-let element = null;
-// When the component mounts or updates, highlight the code inside.
-afterUpdate(() => {
-    if (element) {
-        Prism.highlightElement(element);
-    }
+<script lang="ts">import Prism from "./ExtendedPrism";
+let {
+  editable,
+  inline,
+  nodeID,
+  edited = void 0,
+  language = void 0,
+  code
+} = $props();
+let element = $state(null);
+$effect(() => {
+  void code;
+  void language;
+  if (element) {
+    Prism.highlightElement(element);
+  }
 });
 function handleChange() {
-    if (element && edited)
-        edited(element.innerText);
+  if (element && edited) edited(element.innerText);
 }
 </script>
 
@@ -27,145 +27,148 @@ function handleChange() {
     class={`bookish-code ${
         inline ? 'bookish-code-inline' : 'bookish-code-block'
     } ${language ? `language-${language}` : ''}`}
-    on:blur={handleChange}
+    onblur={handleChange}>{code}</code
 >
-    <slot />
-</code>
-
-<style global>
-    :global(.bookish-code) {
-        font-family: var(--bookish-code-font-family);
-        font-weight: var(--bookish-code-font-weight);
-        font-size: var(--bookish-code-font-size);
-        border: 1px solid var(--bookish-border-color-light);
-        color: var(--bookish-muted-color);
-        background-color: var(--bookish-block-background-color);
-        clear: both;
-        overflow-x: scroll;
-    }
-
-    :global(code) {
-        font-family: var(--bookish-code-font-family);
-        font-weight: var(--bookish-code-font-weight);
-        font-size: var(--bookish-code-font-size);
-    }
-
-    :global(.bookish-code-block) {
-        display: block;
-        padding: var(--bookish-block-padding);
-        line-height: var(--bookish-paragraph-line-height-tight);
-        border-radius: var(--bookish-roundedness);
-    }
-
-    :global(.bookish-code-block.wrap) {
-        white-space: pre-wrap !important;
-    }
-
-    :global(.bookish-code-inline) {
-        display: inline;
-        padding: calc(1.5 * var(--bookish-inline-padding))
-            var(--bookish-inline-padding);
-        white-space: pre-line !important;
-    }
-
-    :global(.bookish-code-inline) :global(code) {
-        display: inline;
-        padding: 0em;
-    }
-
-    /* PrismJS 1.29.0
-    https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+python */
-    /**
-    * prism.js default theme for JavaScript, CSS and HTML
-    * Based on dabblet (http://dabblet.com)
-    * @author Lea Verou
-    */
-
-    :global(code[class*='language-']) {
-        color: var(--bookish-paragraph-color);
-        background: none;
-        font-family: var(--bookish-code-font-family);
-        font-size: var(--bookish-code-font-size);
-        text-align: left;
-        white-space: pre;
-        word-spacing: normal;
-        word-break: normal;
-        word-wrap: normal;
-        line-height: 1.5;
-
-        -moz-tab-size: 4;
-        -o-tab-size: 4;
-        tab-size: 4;
-
-        -webkit-hyphens: none;
-        -moz-hyphens: none;
-        -ms-hyphens: none;
-        hyphens: none;
-    }
-
-    :global(.token.comment),
-    :global(.token.prolog),
-    :global(.token.doctype),
-    :global(.token.cdata) {
-        color: var(--bookish-comment-color);
-    }
-
-    :global(.token.punctuation) {
-        color: var(--bookish-muted-color);
-    }
-
-    :global(.token.namespace) {
-        opacity: 0.7;
-    }
-
-    :global(.token.property),
-    :global(.token.tag),
-    :global(.token.boolean),
-    :global(.token.number),
-    :global(.token.constant),
-    :global(.token.symbol),
-    :global(.token.deleted) {
-        color: var(--bookish-error-color);
-    }
-
-    :global(.token.selector),
-    :global(.token.attr-name),
-    :global(.token.string),
-    :global(.token.char),
-    :global(.token.builtin),
-    :global(.token.inserted) {
-        color: var(--bookish-pragraph-color);
-    }
-
-    :global(.token.operator),
-    :global(.token.entity),
-    :global(.token.url) {
-        color: var(--bookish-bullet-color);
-    }
-
-    :global(.token.atrule),
-    :global(.token.attr-value),
-    :global(.token.keyword) {
-        color: var(--bookish-link-color);
-    }
-
-    :global(.token.regex),
-    :global(.token.important),
-    :global(.token.variable),
-    :global(.token.function),
-    :global(.token.class-name) {
-        color: var(--bookish-highlight-color);
-    }
-
-    :global(.token.important),
-    :global(.token.bold) {
-        font-weight: bold;
-    }
-    :global(.token.italic) {
-        font-style: italic;
-    }
 
-    :global(.token.entity) {
-        cursor: help;
+<!-- These styles are global because Prism inserts token elements at runtime
+     that the compiler cannot see, and because other components render
+     bookish-code elements of their own. -->
+<style>
+    :global {
+        .bookish-code {
+            font-family: var(--bookish-code-font-family);
+            font-weight: var(--bookish-code-font-weight);
+            font-size: var(--bookish-code-font-size);
+            border: 1px solid var(--bookish-border-color-light);
+            color: var(--bookish-muted-color);
+            background-color: var(--bookish-block-background-color);
+            clear: both;
+            overflow-x: scroll;
+        }
+
+        code {
+            font-family: var(--bookish-code-font-family);
+            font-weight: var(--bookish-code-font-weight);
+            font-size: var(--bookish-code-font-size);
+        }
+
+        .bookish-code-block {
+            display: block;
+            padding: var(--bookish-block-padding);
+            line-height: var(--bookish-paragraph-line-height-tight);
+            border-radius: var(--bookish-roundedness);
+        }
+
+        .bookish-code-block.wrap {
+            white-space: pre-wrap !important;
+        }
+
+        .bookish-code-inline {
+            display: inline;
+            padding: calc(1.5 * var(--bookish-inline-padding))
+                var(--bookish-inline-padding);
+            white-space: pre-line !important;
+        }
+
+        .bookish-code-inline code {
+            display: inline;
+            padding: 0em;
+        }
+
+        /* PrismJS 1.29.0
+        https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+python */
+        /**
+        * prism.js default theme for JavaScript, CSS and HTML
+        * Based on dabblet (http://dabblet.com)
+        * @author Lea Verou
+        */
+
+        code[class*='language-'] {
+            color: var(--bookish-paragraph-color);
+            background: none;
+            font-family: var(--bookish-code-font-family);
+            font-size: var(--bookish-code-font-size);
+            text-align: left;
+            white-space: pre;
+            word-spacing: normal;
+            word-break: normal;
+            word-wrap: normal;
+            line-height: 1.5;
+
+            -moz-tab-size: 4;
+            -o-tab-size: 4;
+            tab-size: 4;
+
+            -webkit-hyphens: none;
+            -moz-hyphens: none;
+            -ms-hyphens: none;
+            hyphens: none;
+        }
+
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: var(--bookish-comment-color);
+        }
+
+        .token.punctuation {
+            color: var(--bookish-muted-color);
+        }
+
+        .token.namespace {
+            opacity: 0.7;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: var(--bookish-error-color);
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted {
+            color: var(--bookish-paragraph-color);
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url {
+            color: var(--bookish-bullet-color);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: var(--bookish-link-color);
+        }
+
+        .token.regex,
+        .token.important,
+        .token.variable,
+        .token.function,
+        .token.class-name {
+            color: var(--bookish-highlight-color);
+        }
+
+        .token.important,
+        .token.bold {
+            font-weight: bold;
+        }
+        .token.italic {
+            font-style: italic;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
     }
 </style>

package/dist/components/chapter/Code.svelte.d.ts

@@ -1,24 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        editable: boolean;
-        inline: boolean;
-        nodeID: number | undefined;
-        edited?: ((text: string) => void) | undefined;
-        language?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
-export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+interface Props {
+    editable: boolean;
+    inline: boolean;
+    nodeID: number | undefined;
+    edited?: ((text: string) => void) | undefined;
+    language?: string | undefined;
+    code: string;
 }
-export {};
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/chapter/Comment.svelte

@@ -1,21 +1,27 @@
-<svelte:options immutable={true} />
-
-<script>import Atom from './Atom.svelte';
-import Marginal from './Marginal.svelte';
-import Format from './Format.svelte';
-import { getChapter, isChapterEditable, getCaret, getEdition, getRoot, } from '../page/Contexts';
-import { afterUpdate } from 'svelte';
-import Icon from '../editor/Icon.svelte';
-import CommentIcon from '../editor/icons/comment.svg?raw';
-export let node;
+<script lang="ts">import Atom from "./Atom.svelte";
+import Marginal from "./Marginal.svelte";
+import Format from "./Format.svelte";
+import {
+  getChapter,
+  isChapterEditable,
+  getCaret,
+  getRoot
+} from "../page/Contexts";
+import Icon from "../editor/Icon.svelte";
+import CommentIcon from "../editor/icons/comment.svg?raw";
+let { node } = $props();
 let chapter = getChapter();
 let editable = isChapterEditable();
 let root = getRoot();
 let caret = getCaret();
-$: focused =
-    $caret && $caret.range && node.contains($caret.range.start.node);
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+let focused = $derived(
+  $caret && $caret.range && node.contains($caret.range.start.node)
+);
+$effect(() => {
+  void node;
+  void focused;
+  $chapter?.requestLayout();
+});
 </script>
 
 <Atom {node}>
@@ -26,15 +32,16 @@ afterUpdate(() => $chapter?.layoutMarginals());
                 ($root === undefined ? '?' : $root.getComments().indexOf(node))}
             label="comment, escape to edit"
         >
-            <span slot="interactor" class="bookish-comment-symbol">
-                <Icon icon={CommentIcon} />
-            </span>
-            <span
-                slot="content"
-                class={`comment ${focused ? 'comment-focused' : ''}`}
-            >
-                <Format node={node.getMeta()} placeholder="comment" />
-            </span>
+            {#snippet interactor()}
+                <span class="bookish-comment-symbol">
+                    <Icon icon={CommentIcon} />
+                </span>
+            {/snippet}
+            {#snippet content()}
+                <span class={`comment ${focused ? 'comment-focused' : ''}`}>
+                    <Format node={node.getMeta()} placeholder="comment" />
+                </span>
+            {/snippet}
         </Marginal>
     {/if}
 </Atom>

package/dist/components/chapter/Comment.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type CommentNode from '../../models/chapter/CommentNode';
-declare const __propDef: {
-    props: {
-        node: CommentNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CommentProps = typeof __propDef.props;
-export type CommentEvents = typeof __propDef.events;
-export type CommentSlots = typeof __propDef.slots;
-export default class Comment extends SvelteComponent<CommentProps, CommentEvents, CommentSlots> {
+interface Props {
+    node: CommentNode;
 }
-export {};
+declare const Comment: import("svelte").Component<Props, {}, "">;
+type Comment = ReturnType<typeof Comment>;
+export default Comment;