bookish-press 0.7.4 → 0.8.2

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-pragraph-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;

package/dist/components/chapter/Definition.svelte

@@ -1,23 +1,26 @@
-<svelte:options immutable={true} />
-
-<script>import Parser from '../../models/chapter/Parser';
-import Text from './Text.svelte';
-import Format from './Format.svelte';
-import Marginal from './Marginal.svelte';
-import Problem from './Problem.svelte';
-import { getChapter, getEdition, isChapterEditable, } from '../page/Contexts';
-import { afterUpdate } from 'svelte';
-export let node;
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import Text from "./Text.svelte";
+import Format from "./Format.svelte";
+import Marginal from "./Marginal.svelte";
+import Problem from "./Problem.svelte";
+import {
+  getChapter,
+  getEdition,
+  isChapterEditable
+} from "../page/Contexts";
+let { node } = $props();
 let editable = isChapterEditable();
 let edition = getEdition();
 let chapter = getChapter();
-// Find the definition.
-$: glossaryID = node.getMeta();
-$: phrase = node.getText();
-$: glossary = $edition?.getGlossary() ?? {};
-$: entry = glossary[glossaryID];
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+let glossaryID = $derived(node.getMeta());
+let phrase = $derived(node.getText());
+let glossary = $derived($edition?.getGlossary() ?? {});
+let entry = $derived(glossary[glossaryID]);
+$effect(() => {
+  void phrase;
+  void entry;
+  $chapter?.requestLayout();
+});
 </script>
 
 <!-- Error if there's no corresponding entry. -->
@@ -26,23 +29,22 @@ afterUpdate(() => $chapter?.layoutMarginals());
         {node}
         id={'glossary-' + glossaryID}
         label={entry ? `definition: ${entry.phrase}` : 'undefined phrase'}
-        ><Text slot="interactor" node={phrase} /><span
-            slot="content"
-            class="bookish-definition-entry"
-            >{#if entry === undefined}<Problem
-                    >{#if editable}{glossaryID.length === 0
-                            ? 'choose a definition'
-                            : `unknown glossary ID ${glossaryID}`}{:else}<em
-                            >missing definition</em
-                        >{/if}</Problem
-                >{:else}<strong class="bookish-definition-entry-phrase"
-                    >{entry.phrase}</strong
-                >: <Format
-                    node={Parser.parseFormat($edition, entry.definition)}
-                />{#if entry.synonyms && entry.synonyms.length > 0}<p
-                        class="synonyms">{entry.synonyms.join(', ')}</p
-                    >{/if}{/if}</span
-        ></Marginal
+        >{#snippet interactor()}<Text node={phrase} />{/snippet}{#snippet content()}<span
+                class="bookish-definition-entry"
+                >{#if entry === undefined}<Problem
+                        >{#if editable}{glossaryID.length === 0
+                                ? 'choose a definition'
+                                : `unknown glossary ID ${glossaryID}`}{:else}<em
+                                >missing definition</em
+                            >{/if}</Problem
+                    >{:else}<strong class="bookish-definition-entry-phrase"
+                        >{entry.phrase}</strong
+                    >: <Format
+                        node={Parser.parseFormat($edition, entry.definition)}
+                    />{#if entry.synonyms && entry.synonyms.length > 0}<p
+                            class="synonyms">{entry.synonyms.join(', ')}</p
+                        >{/if}{/if}</span
+            >{/snippet}</Marginal
     ></span
 >