bookish-press 0.7.1 → 0.8.2

package/dist/components/chapter/Python.svelte

@@ -1,74 +1,60 @@
-<script context="module">"use strict";
-</script>
+<script module lang="ts"></script>
 
-<script>import { afterUpdate, onMount } from 'svelte';
-import Code from './Code.svelte';
-export let node;
-export let startCode;
-// Start with whatever code was passed in.
-let code = startCode;
-// What is currently rendered to the console (not always program output).
-let output = '';
-// Whether the runtime is loaded. Initialized based on presence of global.
-let loaded = skulptLoaded();
-let ref = null;
+<script lang="ts">import { onMount, untrack } from "svelte";
+import Code from "./Code.svelte";
+let { node, startCode } = $props();
+let code = $state(untrack(() => startCode));
+let output = $state("");
+let loaded = $state(skulptLoaded());
+let ref = $state(null);
 onMount(() => {
-    // Dynamically load the script to minimize payload and reduce index complexity.
-    if (document.getElementById('skulpt') === null) {
-        let script = document.createElement('script');
-        script.type = 'text/javascript';
-        script.async = true;
-        script.id = 'skulpt';
-        script.onload = () => (loaded = true);
-        script.src =
-            'https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js';
-        document.getElementsByTagName('head')[0].appendChild(script);
-    }
+  if (document.getElementById("skulpt") === null) {
+    let script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = true;
+    script.id = "skulpt";
+    script.onload = () => loaded = true;
+    script.src = "https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js";
+    document.getElementsByTagName("head")[0].appendChild(script);
+  }
 });
-// Always scroll to the bottom of the output.
-afterUpdate(() => {
-    if (ref) {
-        let outputView = ref.querySelector('.bookish-python-output');
-        if (outputView)
-            outputView.scrollTop = outputView.scrollHeight;
-    }
+$effect(() => {
+  void output;
+  if (ref) {
+    let outputView = ref.querySelector(".bookish-python-output");
+    if (outputView) outputView.scrollTop = outputView.scrollHeight;
+  }
 });
 function skulptLoaded() {
-    return typeof window !== 'undefined' && window.hasOwnProperty('Sk');
+  return typeof window !== "undefined" && window.hasOwnProperty("Sk");
 }
 function reset() {
-    code = startCode;
+  code = startCode;
 }
 function handleEdit(newCode) {
-    code = newCode;
+  code = newCode;
 }
 function handleOutput(out) {
-    // Update the state to re-render.
-    output += out;
+  output += out;
 }
 function start() {
-    if (skulptLoaded()) {
-        // Communicate that executing is starting, wait a second, then execute the program.
-        // This is important in case the user wants to run it again; it provides confirmation that it was run again.
-        output = 'Executing...';
-        setTimeout(() => execute(), 500);
-    }
+  if (skulptLoaded()) {
+    output = "Executing...";
+    setTimeout(() => execute(), 500);
+  }
 }
 function execute() {
-    // Reset the output, run the code, and update it's output.
-    output = '';
-    if (Sk) {
-        Sk.configure({ output: handleOutput });
-        try {
-            if (Sk)
-                Sk.importMainWithBody('<stdin>', false, code, true);
-        }
-        catch (error) {
-            handleOutput(error);
-        }
+  output = "";
+  if (Sk) {
+    Sk.configure({ output: handleOutput });
+    try {
+      if (Sk) Sk.importMainWithBody("<stdin>", false, code, true);
+    } catch (error) {
+      handleOutput(error);
     }
+  }
 }
-$: lines = output.split('\n');
+let lines = $derived(output.split("\n"));
 </script>
 
 <div class="bookish-python" bind:this={ref}>
@@ -77,13 +63,14 @@ $: lines = output.split('\n');
         language={'python'}
         editable
         edited={handleEdit}
-        nodeID={node.nodeID}>{code}</Code
-    >
+        nodeID={node.nodeID}
+        {code}
+    />
     <div class="bookish-python-controls">
-        <button disabled={startCode === code} on:click={reset}
+        <button disabled={startCode === code} onclick={reset}
             >{'\u21BB'}</button
         >
-        <button disabled={!loaded} on:click={start}>{'\u25B6\uFE0E'}</button>
+        <button disabled={!loaded} onclick={start}>{'\u25B6\uFE0E'}</button>
         <div class="bookish-python-output">
             {#each lines as line, index}
                 <span class="python-output-line"

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type CodeNode from '../../models/chapter/CodeNode';
-declare const __propDef: {
-    props: {
-        node: CodeNode;
-        startCode: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PythonProps = typeof __propDef.props;
-export type PythonEvents = typeof __propDef.events;
-export type PythonSlots = typeof __propDef.slots;
-export default class Python extends SvelteComponent<PythonProps, PythonEvents, PythonSlots> {
+interface Props {
+    node: CodeNode;
+    startCode: string;
 }
-export {};
+declare const Python: import("svelte").Component<Props, {}, "">;
+type Python = ReturnType<typeof Python>;
+export default Python;

package/dist/components/chapter/Quote.svelte

@@ -1,10 +1,8 @@
-<svelte:options immutable={true} />
-
-<script>import Block from './Block.svelte';
-import Format from './Format.svelte';
-import Positioned from './Positioned.svelte';
-export let node;
-$: credit = node.getCredit();
+<script lang="ts">import Block from "./Block.svelte";
+import Format from "./Format.svelte";
+import Positioned from "./Positioned.svelte";
+let { node } = $props();
+let credit = $derived(node.getCredit());
 </script>
 
 <Positioned position={node.getPosition()}>

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

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

package/dist/components/chapter/Rule.svelte

@@ -1,6 +1,4 @@
-<svelte:options immutable={true} />
-
-<script>export let node;
+<script lang="ts">let { node } = $props();
 </script>
 
 <hr data-nodeid={node.nodeID} />

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

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

package/dist/components/chapter/Table.svelte

@@ -1,12 +1,10 @@
-<svelte:options immutable={true} />
-
-<script>import Figure from './Figure.svelte';
-import Format from './Format.svelte';
-import Rows from '../page/Rows.svelte';
-import { isChapterEditable } from '../page/Contexts';
-export let node;
+<script lang="ts">import Figure from "./Figure.svelte";
+import Format from "./Format.svelte";
+import Rows from "../page/Rows.svelte";
+import { isChapterEditable } from "../page/Contexts";
+let { node } = $props();
 let editable = isChapterEditable();
-$: rows = node.getRows();
+let rows = $derived(node.getRows());
 </script>
 
 <Figure {node} caption={node.getCaption()} focusable={false}>

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

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

package/dist/components/chapter/Text.svelte

@@ -1,77 +1,62 @@
-<svelte:options immutable={true} />
-
-<script>import { getChapter, isChapterEditable } from '../page/Contexts';
-export let node;
-export let placeholder = undefined;
-$: text = node.getText();
+<script lang="ts">import { getChapter, isChapterEditable } from "../page/Contexts";
+let { node, placeholder = void 0 } = $props();
 let context = getChapter();
 let editable = isChapterEditable();
 function replaceMultipleSpacesWithNonBreakingSpaces(original) {
-    let revisedText = '';
-    for (let i = 0; i < original.length; i++) {
-        // If its a space and its at the beginning, the end, or the previous character was a space, make it a non-breaking space.
-        let c = original.charAt(i);
-        if (c === ' ' &&
-            (i === 0 ||
-                i === original.length - 1 ||
-                original.charAt(i - 1) === ' '))
-            revisedText += '\u00a0';
-        else
-            revisedText += c;
-    }
-    return revisedText;
+  let revisedText = "";
+  for (let i = 0; i < original.length; i++) {
+    let c = original.charAt(i);
+    if (c === " " && (i === 0 || i === original.length - 1 || original.charAt(i - 1) === " "))
+      revisedText += "\xA0";
+    else revisedText += c;
+  }
+  return revisedText;
 }
-// Manipulate text for rendering.
-$: {
-    // Replace any spaces at the beginning or end of the string with explicit non-breaking spaces to ensure that they render.
-    text = replaceMultipleSpacesWithNonBreakingSpaces(text);
-    // If the text ends with a newline, render a non-breaking space at the end.
-    if (text.length > 0 && text.charAt(text.length - 1) === '\n')
-        text = text + '\ufeff';
-    // If there's no text, render a non-breaking space, or a placeholder if provided.
-    if (text.length === 0)
-        text = placeholder ?? '\ufeff';
-}
-// Compute highlights, if highlighted
-let segments = undefined;
-$: {
-    segments = undefined;
-    if (!editable) {
-        // Is there a query we're supposed to highlight? If so, highlight it.
-        if ($context && $context.highlightedWord) {
-            const query = $context.highlightedWord;
-            const lowerText = text.toLowerCase();
-            // Does this text contain the query? Highlight it.
-            if (lowerText.indexOf(query) >= 0) {
-                // Find all the matches
-                const indices = [];
-                for (let i = 0; i < text.length; ++i) {
-                    if (lowerText.substring(i, i + query.length) === query) {
-                        indices.push(i);
-                    }
-                }
-                // Go through each one and construct contents for the span to return.
-                segments = [];
-                for (let i = 0; i < indices.length; i++) {
-                    // Push the text from the end of the last match or the start of the string.
-                    segments.push([
-                        text.substring(i === 0 ? 0 : indices[i - 1] + query.length, indices[i]),
-                        false,
-                    ]);
-                    segments.push([
-                        text.substring(indices[i], indices[i] + query.length),
-                        true,
-                    ]);
-                }
-                if (indices[indices.length - 1] < text.length - 1)
-                    segments.push([
-                        text.substring(indices[indices.length - 1] + query.length, text.length),
-                        false,
-                    ]);
-            }
-        }
+let text = $derived.by(() => {
+  let revised = replaceMultipleSpacesWithNonBreakingSpaces(
+    node.getText()
+  );
+  if (revised.length > 0 && revised.charAt(revised.length - 1) === "\n")
+    revised = revised + "\uFEFF";
+  if (revised.length === 0) revised = placeholder ?? "\uFEFF";
+  return revised;
+});
+let segments = $derived.by(() => {
+  if (editable) return void 0;
+  if (!$context || !$context.highlightedWord) return void 0;
+  const query = $context.highlightedWord;
+  const lowerText = text.toLowerCase();
+  if (lowerText.indexOf(query) < 0) return void 0;
+  const indices = [];
+  for (let i = 0; i < text.length; ++i) {
+    if (lowerText.substring(i, i + query.length) === query) {
+      indices.push(i);
     }
-}
+  }
+  const list = [];
+  for (let i = 0; i < indices.length; i++) {
+    list.push([
+      text.substring(
+        i === 0 ? 0 : indices[i - 1] + query.length,
+        indices[i]
+      ),
+      false
+    ]);
+    list.push([
+      text.substring(indices[i], indices[i] + query.length),
+      true
+    ]);
+  }
+  if (indices[indices.length - 1] < text.length - 1)
+    list.push([
+      text.substring(
+        indices[indices.length - 1] + query.length,
+        text.length
+      ),
+      false
+    ]);
+  return list;
+});
 </script>
 
 {#if segments}

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type TextNode from '../../models/chapter/TextNode';
-declare const __propDef: {
-    props: {
-        node: TextNode;
-        placeholder?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TextProps = typeof __propDef.props;
-export type TextEvents = typeof __propDef.events;
-export type TextSlots = typeof __propDef.slots;
-export default class Text extends SvelteComponent<TextProps, TextEvents, TextSlots> {
+interface Props {
+    node: TextNode;
+    placeholder?: string | undefined;
 }
-export {};
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/controls/DarkToggle.svelte

@@ -1,10 +1,9 @@
-<script>export let dark;
-export let toggle;
-const lightLabel = '\u263C';
-const darkLabel = '\u263E';
+<script lang="ts">let { dark = $bindable(), toggle } = $props();
+const lightLabel = "\u263C";
+const darkLabel = "\u263E";
 function change() {
-    dark = !dark;
-    toggle();
+  dark = !dark;
+  toggle();
 }
 </script>
 
@@ -14,8 +13,8 @@ function change() {
     role="button"
     aria-label={dark === true ? 'Switch to light mode' : 'Switch to dark mode'}
     tabindex="0"
-    on:click={change}
-    on:keydown={(event) => {
+    onclick={change}
+    onkeydown={(event) => {
         if (event.key === 'Enter' || event.key === ' ') {
             change();
             event.stopPropagation();

package/dist/components/controls/DarkToggle.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        dark: boolean;
-        toggle: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DarkToggleProps = typeof __propDef.props;
-export type DarkToggleEvents = typeof __propDef.events;
-export type DarkToggleSlots = typeof __propDef.slots;
-export default class DarkToggle extends SvelteComponent<DarkToggleProps, DarkToggleEvents, DarkToggleSlots> {
+interface Props {
+    dark: boolean;
+    toggle: () => void;
 }
-export {};
+declare const DarkToggle: import("svelte").Component<Props, {}, "dark">;
+type DarkToggle = ReturnType<typeof DarkToggle>;
+export default DarkToggle;