squiffy-runtime 6.0.0-alpha.1 → 6.0.0-alpha.11

package/src/__snapshots__/squiffy.runtime.test.ts.snap

@@ -0,0 +1,104 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`"Hello world" script should run 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Hello world</p></div></div></div>"
+`;
+
+exports[`Click a passage link 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+<p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
+<p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div>"
+`;
+
+exports[`Click a passage link 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+<p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
+<p>This should be <a class="squiffy-link link-passage disabled" data-passage="passage" role="link" tabindex="-1">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div><div class="squiffy-output-block"><div data-source="[[Introduction]][passage]"><p>Here's some text for the passage.</p></div></div></div>"
+`;
+
+exports[`Click a section link 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+<p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
+<p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div>"
+`;
+
+exports[`Click a section link 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+<p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
+<p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="section 3"><div class="squiffy-output-block"><div data-source="[[section 3]]"><p>Another section is here, with passages <a class="squiffy-link link-passage" data-passage="a" role="link" tabindex="0">a</a> and <a class="squiffy-link link-passage" data-passage="b" role="link" tabindex="0">b</a>.</p></div></div></div>"
+`;
+
+exports[`Delete passage 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>New passage</p></div></div></div>"
+`;
+
+exports[`Delete passage 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div></div>"
+`;
+
+exports[`Delete section 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="a"><div class="squiffy-output-block"><div data-source="[[a]]"><p>New section</p></div></div></div>"
+`;
+
+exports[`Delete section 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div>"
+`;
+
+exports[`Update default section output 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Hello world</p></div></div></div>"
+`;
+
+exports[`Update default section output 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Updated content</p></div></div></div>"
+`;
+
+exports[`Update passage output - passage name "a" 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>Passage a content</p></div></div></div>"
+`;
+
+exports[`Update passage output - passage name "a" 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>Updated passage content</p></div></div></div>"
+`;
+
+exports[`Update passage output - passage name "a'1" 1`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a'1" role="link" tabindex="-1">a'1</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a'1]"><p>Passage a content</p></div></div></div>"
+`;
+
+exports[`Update passage output - passage name "a'1" 2`] = `
+"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a'1" role="link" tabindex="-1">a'1</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a'1]"><p>Updated passage content</p></div></div></div>"
+`;

package/src/events.ts

@@ -0,0 +1,42 @@
+type LinkType = 'section' | 'passage' | 'rotate' | 'sequence';
+
+export type SquiffyEventMap = {
+    linkClick: { linkType: LinkType }; // a story link was clicked
+};
+
+export type SquiffyEventHandler<E extends keyof SquiffyEventMap> =
+    (payload: SquiffyEventMap[E]) => void;
+
+export class Emitter<Events extends Record<string, any>> {
+    private listeners = new Map<keyof Events, Set<Function>>();
+
+    on<E extends keyof Events>(event: E, handler: (p: Events[E]) => void) {
+        if (!this.listeners.has(event)) this.listeners.set(event, new Set());
+        this.listeners.get(event)!.add(handler);
+        return () => this.off(event, handler);
+    }
+
+    off<E extends keyof Events>(event: E, handler: (p: Events[E]) => void) {
+        this.listeners.get(event)?.delete(handler);
+    }
+
+    once<E extends keyof Events>(event: E, handler: (p: Events[E]) => void) {
+        const off = this.on(event, (payload) => {
+            off();
+            handler(payload);
+        });
+        return off;
+    }
+
+    emit<E extends keyof Events>(event: E, payload: Events[E]) {
+        // Fire handlers asynchronously so the runtime isn't blocked by user code.
+        queueMicrotask(() => {
+            this.listeners.get(event)?.forEach(h => {
+                try { (h as any)(payload); } catch (err) {
+                    // Swallow so a bad handler doesn't break the game; optionally log.
+                    console.error(`[Squiffy] handler for "${String(event)}" failed`, err);
+                }
+            });
+        });
+    }
+}

package/src/squiffy.runtime.test.ts

@@ -0,0 +1,413 @@
+import { expect, test, beforeEach, afterEach, vi } from 'vitest';
+import fs from 'fs/promises';
+import globalJsdom from 'global-jsdom';
+import { init } from './squiffy.runtime.js';
+import { compile as squiffyCompile } from 'squiffy-compiler'; 
+
+const html = `
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="squiffy">
+    </div>
+    <div id="test">
+    </div>
+</body>
+</html>
+`;
+
+const compile = async (script: string) => {
+    const compileResult = await squiffyCompile({
+        script: script,
+    });
+
+    if (!compileResult.success) {
+        throw new Error('Compile failed');
+    }
+
+    const story = compileResult.output.story;
+    const js = compileResult.output.js.map(jsLines => new Function('squiffy', 'get', 'set', jsLines.join('\n')));
+
+    return {
+        story: {
+            js: js as any,
+            ...story,
+        },
+    };
+}
+
+const initScript = async (script: string) => {
+    const element = document.getElementById('squiffy');
+
+    if (!element) {
+        throw new Error('Element not found');
+    }
+
+    const compileResult = await compile(script);
+
+    const squiffyApi = init({
+        element: element,
+        story: compileResult.story,
+    });
+
+    return {
+        squiffyApi,
+        element
+    }
+};
+
+const findLink = (element: HTMLElement, linkType: string, linkText: string, onlyEnabled: boolean = false) => {
+    const links = onlyEnabled
+        ? element.querySelectorAll(`.squiffy-output-section:last-child a.squiffy-link.link-${linkType}`)
+        : element.querySelectorAll(`a.squiffy-link.link-${linkType}`);
+    return Array.from(links).find(link => link.textContent === linkText && (onlyEnabled ? !link.classList.contains("disabled") : true)) as HTMLElement;
+};
+
+const getTestOutput = () => {
+    const testElement = document.getElementById('test');
+    if (!testElement) {
+        throw new Error('Test element not found');
+    }
+    return testElement.innerText;
+}
+
+let cleanup: { (): void };
+
+beforeEach(() => {
+    cleanup = globalJsdom(html);
+});
+
+afterEach(() => {
+    cleanup();
+});
+
+test('"Hello world" script should run', async () => {
+    const { element } = await initScript("Hello world");
+    expect(element.innerHTML).toMatchSnapshot();
+});
+
+test('Click a section link', async () => {
+    const script = await fs.readFile('../examples/test/example.squiffy', 'utf-8');
+    const { squiffyApi, element } = await initScript(script);
+    expect(element.innerHTML).toMatchSnapshot();
+
+    expect(element.querySelectorAll('a.squiffy-link').length).toBe(10);
+    const linkToPassage = findLink(element, 'passage', 'a link to a passage');
+    const section3Link = findLink(element, 'section', 'section 3');
+
+    expect(linkToPassage).not.toBeNull();
+    expect(section3Link).not.toBeNull();
+    expect(linkToPassage.classList).not.toContain('disabled');
+
+    const handler = vi.fn();
+    const off = squiffyApi.on('linkClick', handler);
+
+    const handled = squiffyApi.clickLink(section3Link);
+    expect(handled).toBe(true);
+
+    expect(element.innerHTML).toMatchSnapshot();
+
+    // passage link is from the previous section, so should be unclickable
+    expect(squiffyApi.clickLink(linkToPassage)).toBe(false);
+
+    // await for the event to be processed
+    await Promise.resolve();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith(
+        expect.objectContaining({ linkType: 'section' })
+    );
+    off();
+});
+
+test('Click a passage link', async () => {
+    const script = await fs.readFile('../examples/test/example.squiffy', 'utf-8');
+    const { squiffyApi, element } = await initScript(script);
+    expect(element.innerHTML).toMatchSnapshot();
+
+    expect(element.querySelectorAll('a.squiffy-link').length).toBe(10);
+    const linkToPassage = findLink(element, 'passage', 'a link to a passage');
+    const section3Link = findLink(element, 'section', 'section 3');
+
+    expect(linkToPassage).not.toBeNull();
+    expect(section3Link).not.toBeNull();
+    expect(linkToPassage.classList).not.toContain('disabled');
+
+    const handler = vi.fn();
+    const off = squiffyApi.on('linkClick', handler);
+
+    const handled = squiffyApi.clickLink(linkToPassage);
+    expect(handled).toBe(true);
+
+    expect(linkToPassage.classList).toContain('disabled');
+    expect(element.innerHTML).toMatchSnapshot();
+
+    // shouldn't be able to click it again
+    expect(squiffyApi.clickLink(linkToPassage)).toBe(false);
+
+    // await for the event to be processed
+    await Promise.resolve();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith(
+        expect.objectContaining({ linkType: 'passage' })
+    );
+    off();
+});
+
+test('Run JavaScript functions', async () => {
+    const script = `
+    document.getElementById('test').innerText = 'Initial JavaScript';
+@set some_string = some_value
+@set some_number = 5
+
++++Continue...
+    document.getElementById('test').innerText = "Value: " + get("some_number");
++++Continue...
+    document.getElementById('test').innerText = "Value: " + get("some_string");
+    set("some_number", 10);
++++Continue...
+    document.getElementById('test').innerText = "Value: " + get("some_number");
++++Continue...
+@inc some_number
++++Continue...
+    document.getElementById('test').innerText = "Value: " + get("some_number");
++++Continue...
+    squiffy.story.go("other section");
+[[other section]]:
+    document.getElementById('test').innerText = "In other section";
+`;
+
+    const clickContinue = () => {
+        const continueLink = findLink(element, 'section', 'Continue...', true);
+        expect(continueLink).not.toBeNull();
+        const handled = squiffyApi.clickLink(continueLink);
+        expect(handled).toBe(true);
+    };
+
+    const { squiffyApi, element } = await initScript(script);
+
+    expect(getTestOutput()).toBe('Initial JavaScript');
+    clickContinue();
+    
+    expect(getTestOutput()).toBe('Value: 5');
+    clickContinue();
+
+    expect(getTestOutput()).toBe('Value: some_value');
+    clickContinue();
+
+    expect(getTestOutput()).toBe('Value: 10');
+
+    clickContinue();
+    clickContinue();
+    expect(getTestOutput()).toBe('Value: 11');
+
+    clickContinue();
+    expect(getTestOutput()).toBe('In other section');
+});
+
+function safeQuerySelector(name: string) {
+    return name.replace(/'/g, "\\'");
+}
+
+function getSectionContent(element: HTMLElement, section: string) {
+    return element.querySelector(`[data-source='[[${safeQuerySelector(section)}]]'] p`)?.textContent || null;
+}
+
+function getPassageContent(element: HTMLElement, section: string, passage: string) {
+    return element.querySelector(`[data-source='[[${safeQuerySelector(section)}]][${safeQuerySelector(passage)}]'] p`)?.textContent || null;
+}
+
+test('Update default section output', async () => {
+    const { squiffyApi, element } = await initScript("Hello world");
+    let defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Hello world');
+    expect(element.innerHTML).toMatchSnapshot();
+
+    const updated = await compile("Updated content");
+    squiffyApi.update(updated.story);
+    defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Updated content');
+    expect(element.innerHTML).toMatchSnapshot();
+});
+
+test.each(['a', 'a\'1'])('Update passage output - passage name "%s"', async (name) => {
+    const { squiffyApi, element } = await initScript(`Click this: [${name}]
+
+[${name}]:
+Passage a content`);
+    
+    const link = findLink(element, 'passage', name);
+    const handled = squiffyApi.clickLink(link);
+    expect(handled).toBe(true);
+
+    let defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe(`Click this: ${name}`);
+    let passageOutput = getPassageContent(element, '_default', name);
+    expect(passageOutput).toBe('Passage a content');
+    expect(element.innerHTML).toMatchSnapshot();
+
+    const updated = await compile(`Click this: [${name}]
+
+[${name}]:
+Updated passage content`);
+
+    squiffyApi.update(updated.story);
+
+    defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe(`Click this: ${name}`);
+
+    passageOutput = getPassageContent(element, '_default', name);
+    expect(passageOutput).toBe('Updated passage content');
+    expect(element.innerHTML).toMatchSnapshot();
+});
+
+test('Delete section', async () => {
+    const { squiffyApi, element } = await initScript(`Click this: [[a]]
+
+[[a]]:
+New section`);
+    
+    const link = findLink(element, 'section', 'a');
+    const handled = squiffyApi.clickLink(link);
+    expect(handled).toBe(true);
+
+    let defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Click this: a');
+    let sectionOutput = getSectionContent(element, 'a');
+    expect(sectionOutput).toBe('New section');
+    expect(element.innerHTML).toMatchSnapshot();
+
+    const updated = await compile(`Click this: [[a]]`);
+
+    squiffyApi.update(updated.story);
+
+    defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Click this: a');
+    sectionOutput = getSectionContent(element, 'a');
+    expect(sectionOutput).toBeNull();
+
+    expect(element.innerHTML).toMatchSnapshot();
+});
+
+test('Delete passage', async () => {
+    const { squiffyApi, element } = await initScript(`Click this: [a]
+
+[a]:
+New passage`);
+    
+    const link = findLink(element, 'passage', 'a');
+    const handled = squiffyApi.clickLink(link);
+    expect(handled).toBe(true);
+
+    let defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Click this: a');
+    let passageOutput = getPassageContent(element, '_default', 'a');
+    expect(passageOutput).toBe('New passage');
+    expect(element.innerHTML).toMatchSnapshot();
+
+    const updated = await compile(`Click this: [a]`);
+
+    squiffyApi.update(updated.story);
+
+    defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Click this: a');
+    passageOutput = getPassageContent(element, '_default', 'a');
+    expect(passageOutput).toBeNull();
+
+    expect(element.innerHTML).toMatchSnapshot();
+});
+
+test('Clicked passage links remain disabled after an update', async () => {
+    const { squiffyApi, element } = await initScript(`Click one of these: [a] [b]
+
+[a]:
+Output for passage A.
+
+[b]:
+Output for passage B.`);
+
+    // click linkA
+    
+    let linkA = findLink(element, 'passage', 'a');
+    expect(linkA.classList).not.toContain('disabled');
+    expect(squiffyApi.clickLink(linkA)).toBe(true);
+
+    const updated = await compile(`Click one of these (updated): [a] [b]
+
+[a]:
+Output for passage A.
+
+[b]:
+Output for passage B.`);
+
+    squiffyApi.update(updated.story);
+
+    // linkA should still be disabled
+
+    linkA = findLink(element, 'passage', 'a');
+    expect(linkA.classList).toContain('disabled');
+    expect(squiffyApi.clickLink(linkA)).toBe(false);
+
+    // linkB should still be enabled
+
+    let linkB = findLink(element, 'passage', 'b');
+    expect(linkB.classList).not.toContain('disabled');
+    expect(squiffyApi.clickLink(linkB)).toBe(true);
+});
+
+test('Deleting the current section activates the previous section', async () => {
+    const { squiffyApi, element } = await initScript(`Choose a section: [[a]] [[b]], or passage [start1].
+    
+[start1]:
+Output for passage start1.
+
+[[a]]:
+Output for section A.
+
+[[b]]:
+Output for section B.`);
+
+    // click linkA
+
+    let linkA = findLink(element, 'section', 'a');
+    let linkB = findLink(element, 'section', 'b');
+    expect(linkA.classList).not.toContain('disabled');
+    expect(squiffyApi.clickLink(linkA)).toBe(true);
+
+    // can't click start1 passage as we're in section [[a]] now
+    let linkStart1 = findLink(element, 'passage', 'start1');
+    expect(squiffyApi.clickLink(linkStart1)).toBe(false);
+
+    // can't click linkB as we're in section [[a]] now
+    expect(squiffyApi.clickLink(linkB)).toBe(false);
+
+    // now we delete section [[a]]
+
+    const updated = await compile(`Choose a section: [[a]] [[b]], or passage [start1].
+    
+[start1]:
+Output for passage start1.
+
+[[b]]:
+Output for section B. Here's a passage: [b1].
+
+[b1]:
+Passage in section B.`);
+
+    squiffyApi.update(updated.story);
+
+    // We're in the first section, so the start1 passage should be clickable now
+    linkStart1 = findLink(element, 'passage', 'start1');
+    expect(squiffyApi.clickLink(linkStart1)).toBe(true);
+
+    // We're in the first section, so linkB should be clickable now
+    linkB = findLink(element, 'section', 'b');
+    expect(squiffyApi.clickLink(linkB)).toBe(true);
+
+    // and the passage [b1] within it should be clickable
+    const linkB1 = findLink(element, 'passage', 'b1');
+    expect(squiffyApi.clickLink(linkB1)).toBe(true);
+});