bookish-press 0.7.4 → 0.9.2

package/dist/components/app/Link.svelte

@@ -1,21 +1,24 @@
-<script>import { page } from '$app/stores';
-export let to;
-export let before = undefined;
-export let title = undefined;
-export let external = false;
-$: at = to === $page.url.pathname;
+<script lang="ts">import { page } from "$app/state";
+let {
+  to,
+  before = void 0,
+  title = void 0,
+  external = false,
+  children
+} = $props();
+let at = $derived(to === page.url.pathname);
 </script>
 
 {#if at}
-    <span class="link"> <slot /></span>
+    <span class="link"> {@render children?.()}</span>
 {:else}
     <a
         class="link"
         href={to}
         {title}
-        on:click={() => (before ? before() : undefined)}
+        onclick={() => (before ? before() : undefined)}
         target={to.startsWith('http') || external ? '_blank' : null}
-        rel={external ? 'noreferrer' : null}><slot /></a
+        rel={external ? 'noreferrer' : null}>{@render children?.()}</a
     >
 {/if}
 

package/dist/components/app/Link.svelte.d.ts

@@ -1,23 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        to: string;
-        before?: Function | undefined;
-        title?: string | undefined;
-        external?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
+interface Props {
+    to: string;
+    before?: Function | undefined;
+    title?: string | undefined;
+    external?: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/app/Options.svelte

@@ -1,11 +1,13 @@
-<script>export let options;
-export let changed;
-export let value;
-export let label;
+<script lang="ts">let {
+  options,
+  changed,
+  value = $bindable(),
+  label
+} = $props();
 </script>
 
-<select bind:value on:change={() => changed(value)} aria-label={label}>
-    <option value="" selected={value === ''} />
+<select bind:value onchange={() => changed(value)} aria-label={label}>
+    <option value="" selected={value === ''}></option>
     {#each options as option}
         <option value={option[1]} selected={value === option[1]}
             >{option[0]}</option

package/dist/components/app/Options.svelte.d.ts

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        options: [string, string][];
-        changed: (value: string) => void;
-        value: string;
-        label: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type OptionsProps = typeof __propDef.props;
-export type OptionsEvents = typeof __propDef.events;
-export type OptionsSlots = typeof __propDef.slots;
-export default class Options extends SvelteComponent<OptionsProps, OptionsEvents, OptionsSlots> {
+interface Props {
+    options: [string, string][];
+    changed: (value: string) => void;
+    value: string;
+    label: string;
 }
-export {};
+declare const Options: import("svelte").Component<Props, {}, "value">;
+type Options = ReturnType<typeof Options>;
+export default Options;

package/dist/components/app/Paragraph.svelte

@@ -1,7 +1,7 @@
-<script>export let aside = false;
+<script lang="ts">let { aside = false, children } = $props();
 </script>
 
-<p class={aside ? 'aside' : ''}><slot /></p>
+<p class={aside ? 'aside' : ''}>{@render children?.()}</p>
 
 <style>
     p {

package/dist/components/app/Paragraph.svelte.d.ts

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

package/dist/components/app/Section.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <section>
-    <slot />
+    {@render children?.()}
 </section>
 
 <style>

package/dist/components/app/Section.svelte.d.ts

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  SectionProps */
-/** @typedef {typeof __propDef.events}  SectionEvents */
-/** @typedef {typeof __propDef.slots}  SectionSlots */
-export default class Section extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type SectionProps = typeof __propDef.props;
-export type SectionEvents = typeof __propDef.events;
-export type SectionSlots = 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 Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/app/Table.svelte

@@ -1,6 +1,9 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <section>
     <table>
-        <slot />
+        {@render children?.()}
     </table>
 </section>
 

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  TableProps */
-/** @typedef {typeof __propDef.events}  TableEvents */
-/** @typedef {typeof __propDef.slots}  TableSlots */
-export default class Table extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = 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 Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/app/TextInput.svelte

@@ -1,11 +1,13 @@
-<script>export let text = '';
-export let autocomplete = null;
-export let type;
-export let placeholder;
-export let disabled;
-let input;
+<script lang="ts">let {
+  text = $bindable(""),
+  autocomplete = null,
+  type,
+  placeholder,
+  disabled
+} = $props();
+let input = $state();
 export function value() {
-    return text;
+  return text;
 }
 </script>
 
@@ -16,7 +18,7 @@ export function value() {
     {disabled}
     value={text}
     bind:this={input}
-    on:input={() => (text = input.value)}
+    oninput={(event) => (text = event.currentTarget.value)}
 />
 
 <style>

package/dist/components/app/TextInput.svelte.d.ts

@@ -1,24 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text?: string;
-        autocomplete?: string | null;
-        type: string;
-        placeholder: string;
-        disabled: boolean;
-        value?: () => string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
-export default class TextInput extends SvelteComponent<TextInputProps, TextInputEvents, TextInputSlots> {
-    get value(): () => string;
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    text?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    type: string;
+    placeholder: string;
+    disabled: boolean;
 }
-export {};
+declare const TextInput: import("svelte").Component<Props, {
+    value: () => string;
+}, "text">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/components/chapter/Atom.svelte

@@ -1,10 +1,7 @@
-<svelte:options immutable={true} />
-
-<script>import { getCaret } from '../page/Contexts';
-export let node;
+<script lang="ts">import { getCaret } from "../page/Contexts";
+let { node, children } = $props();
 let caret = getCaret();
-// Is the caret on this link?
-$: selected = $caret && $caret.range && $caret.range.start.node === node;
+let selected = $derived($caret && $caret.range && $caret.range.start.node === node);
 </script>
 
 <!-- Prevent the editor from receiving the click. -->
@@ -12,7 +9,7 @@ $: selected = $caret && $caret.range && $caret.range.start.node === node;
     class={`bookish-editor-atom ${
         selected ? 'bookish-editor-atom-selected' : ''
     } ${$caret?.focused ? 'bookish-editor-atom-selected-focused' : ''}`}
-    ><slot /></span
+    >{@render children?.()}</span
 >
 
 <style>

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

@@ -1,21 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type AtomNode from '../../models/chapter/AtomNode';
-declare const __propDef: {
-    props: {
-        node: AtomNode<any>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AtomProps = typeof __propDef.props;
-export type AtomEvents = typeof __propDef.events;
-export type AtomSlots = typeof __propDef.slots;
-export default class Atom extends SvelteComponent<AtomProps, AtomEvents, AtomSlots> {
+interface Props {
+    node: AtomNode<any>;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Atom: import("svelte").Component<Props, {}, "">;
+type Atom = ReturnType<typeof Atom>;
+export default Atom;

package/dist/components/chapter/Block.svelte

@@ -1,26 +1,24 @@
-<svelte:options immutable={true} />
-
-<script>import CalloutNode from '../../models/chapter/CalloutNode';
-import CodeNode from '../../models/chapter/CodeNode';
-import EmbedNode from '../../models/chapter/EmbedNode';
-import ErrorNode from '../../models/chapter/ErrorNode';
-import ListNode from '../../models/chapter/ListNode';
-import ParagraphNode from '../../models/chapter/ParagraphNode';
-import QuoteNode from '../../models/chapter/QuoteNode';
-import RuleNode from '../../models/chapter/RuleNode';
-import TableNode from '../../models/chapter/TableNode';
-import Callout from './Callout.svelte';
-import CaptionedCode from './CaptionedCode.svelte';
-import Embed from './Embed.svelte';
-import ErrorMessage from './ErrorMessage.svelte';
-import List from './List.svelte';
-import Paragraph from './Paragraph.svelte';
-import Quote from './Quote.svelte';
-import Rule from './Rule.svelte';
-import Table from './Table.svelte';
-import Problem from './Problem.svelte';
-import { isChapterEditable } from '../page/Contexts';
-export let node;
+<script lang="ts">import CalloutNode from "../../models/chapter/CalloutNode";
+import CodeNode from "../../models/chapter/CodeNode";
+import EmbedNode from "../../models/chapter/EmbedNode";
+import ErrorNode from "../../models/chapter/ErrorNode";
+import ListNode from "../../models/chapter/ListNode";
+import ParagraphNode from "../../models/chapter/ParagraphNode";
+import QuoteNode from "../../models/chapter/QuoteNode";
+import RuleNode from "../../models/chapter/RuleNode";
+import TableNode from "../../models/chapter/TableNode";
+import Callout from "./Callout.svelte";
+import CaptionedCode from "./CaptionedCode.svelte";
+import Embed from "./Embed.svelte";
+import ErrorMessage from "./ErrorMessage.svelte";
+import List from "./List.svelte";
+import Paragraph from "./Paragraph.svelte";
+import Quote from "./Quote.svelte";
+import Rule from "./Rule.svelte";
+import Table from "./Table.svelte";
+import Problem from "./Problem.svelte";
+import { isChapterEditable } from "../page/Contexts";
+let { node } = $props();
 let editable = isChapterEditable();
 </script>
 

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

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

package/dist/components/chapter/Callout.svelte

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

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

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

package/dist/components/chapter/CaptionedCode.svelte

@@ -1,16 +1,13 @@
-<svelte:options immutable={true} />
-
-<script>import Code from './Code.svelte';
-import Python from './Python.svelte';
-import Text from './Text.svelte';
-import { isChapterEditable } from '../page/Contexts';
-import Figure from './Figure.svelte';
-import Button from '../app/Button.svelte';
-export let node;
-$: language = node.getLanguage();
+<script lang="ts">import Code from "./Code.svelte";
+import Python from "./Python.svelte";
+import Text from "./Text.svelte";
+import { isChapterEditable } from "../page/Contexts";
+import Figure from "./Figure.svelte";
+import Button from "../app/Button.svelte";
+let { node } = $props();
+let language = $derived(node.getLanguage());
 let editable = isChapterEditable();
-// const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
-let editing = true;
+let editing = $state(true);
 </script>
 
 <Figure {node} caption={node.getCaption()} focusable={false}>
@@ -29,8 +26,9 @@ let editing = true;
             editable={false}
             inline={false}
             language={node.getLanguage()}
-            nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code
-        >
+            nodeID={node.getCodeNode().nodeID}
+            code={node.getCode()}
+        />
     {/if}
     {#if editable}
         <Button

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

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

package/dist/components/chapter/ChapterBody.svelte

@@ -1,21 +1,18 @@
-<svelte:options immutable />
-
-<script>import ParagraphNode from '../../models/chapter/ParagraphNode';
-import { writable } from 'svelte/store';
-import { setContext } from 'svelte';
-import { ROOT } from '../page/Contexts';
-import Block from './Block.svelte';
-import Paragraph from './Paragraph.svelte';
-import Problem from './Problem.svelte';
-export let node;
-export let placeholder = '';
-export let editable = false;
-$: errors = node.getErrors();
-$: blocks = node.getBlocks();
-// Make this chapter node available to all children in a reactive store.
-let root = writable(node);
+<script lang="ts">import ParagraphNode from "../../models/chapter/ParagraphNode";
+import { writable } from "svelte/store";
+import { setContext, untrack } from "svelte";
+import { ROOT } from "../page/Contexts";
+import Block from "./Block.svelte";
+import Paragraph from "./Paragraph.svelte";
+import Problem from "./Problem.svelte";
+let { node, placeholder = "", editable = false } = $props();
+let errors = $derived(node.getErrors());
+let blocks = $derived(node.getBlocks());
+let root = writable(untrack(() => node));
 setContext(ROOT, root);
-$: root.set(node);
+$effect.pre(() => {
+  root.set(node);
+});
 </script>
 
 <section class="bookish-chapter-body" data-nodeid={node.nodeID}>

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

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type ChapterNode from '../../models/chapter/ChapterNode';
-declare const __propDef: {
-    props: {
-        node: ChapterNode;
-        placeholder?: string;
-        editable?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ChapterBodyProps = typeof __propDef.props;
-export type ChapterBodyEvents = typeof __propDef.events;
-export type ChapterBodySlots = typeof __propDef.slots;
-export default class ChapterBody extends SvelteComponent<ChapterBodyProps, ChapterBodyEvents, ChapterBodySlots> {
+interface Props {
+    node: ChapterNode;
+    placeholder?: string;
+    editable?: boolean;
 }
-export {};
+declare const ChapterBody: import("svelte").Component<Props, {}, "">;
+type ChapterBody = ReturnType<typeof ChapterBody>;
+export default ChapterBody;

package/dist/components/chapter/ChapterBody.test.d.ts

@@ -0,0 +1 @@
+export {};