squiffy-runtime 6.0.0-alpha.3 → 6.0.0-alpha.5

package/dist/squiffy.runtime.js

@@ -587,8 +587,8 @@ export const init = (options) => {
     if (settings.scroll === 'element') {
         outputElement.style.overflowY = 'auto';
     }
-    document.addEventListener('click', handleClick);
-    document.addEventListener('keypress', function (event) {
+    outputElement.addEventListener('click', handleClick);
+    outputElement.addEventListener('keypress', function (event) {
         if (event.key !== "Enter")
             return;
         handleClick(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.5",
   "main": "dist/squiffy.runtime.js",
   "types": "dist/squiffy.runtime.d.ts",
   "scripts": {

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

@@ -2,53 +2,93 @@
 
 exports[`"Hello world" script should run 1`] = `
 "
-    <div id="squiffy-section-1"><div><p>Hello world</p></div></div>"
+    <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 id="squiffy-section-1"><div><h1>Squiffy Test</h1>
+    <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>"
+<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 id="squiffy-section-1"><div><h1>Squiffy Test</h1>
+    <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><hr><div><p>Here's some text for the passage.</p></div></div>"
+<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 id="squiffy-section-1"><div><h1>Squiffy Test</h1>
+    <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>"
+<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 id="squiffy-section-1"><div><h1>Squiffy Test</h1>
+    <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 disabled" data-passage="passage2" role="link" tabindex="-1">another one</a>.</p>
 <p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage disabled" data-passage="link" role="link" tabindex="-1">link</a> and this <a class="squiffy-link link-section disabled" data-section="section" role="link" tabindex="-1">section</a>.</p>
 <p>And this goes to the <a class="squiffy-link link-section disabled" data-section="section2" role="link" tabindex="-1">next section</a>.</p>
 <p>This line has links to <a class="squiffy-link link-section disabled" data-section="section 3" role="link" tabindex="-1">section 3</a> and <a class="squiffy-link link-section disabled" data-section="section four" role="link" tabindex="-1">section 4</a>.</p>
 <p>This line has links to <a class="squiffy-link link-passage disabled" data-passage="passage 3" role="link" tabindex="-1">passage 3</a> and <a class="squiffy-link link-passage disabled" data-passage="passage four" role="link" tabindex="-1">passage 4</a>.</p>
-<p>Oh look - <a class="squiffy-link link-passage disabled" data-passage="it's a passage with an apostrophe" role="link" tabindex="-1">it's a passage with an apostrophe</a>.</p></div><hr></div><div id="squiffy-section-2"><div><p>Another section is here.</p></div></div>"
+<p>Oh look - <a class="squiffy-link link-passage disabled" data-passage="it's a passage with an apostrophe" role="link" tabindex="-1">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.</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 class="squiffy-output-block"></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 disabled" data-section="a" role="link" tabindex="-1">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 disabled" data-section="a" role="link" tabindex="-1">a</a></p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="a"><div class="squiffy-output-block"></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 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 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>"
 `;

package/src/squiffy.runtime.test.ts

@@ -2,7 +2,7 @@ import { expect, test, beforeEach, afterEach } from 'vitest';
 import fs from 'fs/promises';
 import globalJsdom from 'global-jsdom';
 import { init } from './squiffy.runtime.js';
-import { compile } from 'squiffy-compiler'; 
+import { compile as squiffyCompile } from 'squiffy-compiler'; 
 
 const html = `
 <!DOCTYPE html>
@@ -18,15 +18,8 @@ const html = `
 </html>
 `;
 
-const initScript = async (script: string) => {
-    globalJsdom(html);
-    const element = document.getElementById('squiffy');
-
-    if (!element) {
-        throw new Error('Element not found');
-    }
-
-    const compileResult = await compile({
+const compile = async (script: string) => {
+    const compileResult = await squiffyCompile({
         scriptBaseFilename: "filename.squiffy", // TODO: This shouldn't be required
         script: script,
     });
@@ -38,12 +31,27 @@ const initScript = async (script: string) => {
     const story = compileResult.output.story;
     const js = compileResult.output.js.map(jsLines => new Function('squiffy', 'get', 'set', jsLines.join('\n')));
 
-    const squiffyApi = init({
-        element: element,
+    return {
         story: {
             js: js as any,
             ...story,
         },
+    };
+}
+
+const initScript = async (script: string) => {
+    globalJsdom(html);
+    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 {
@@ -89,8 +97,8 @@ test('Click a section link', async () => {
     const linkToPassage = findLink(element, 'passage', 'a link to a passage');
     const section3Link = findLink(element, 'section', 'section 3');
 
-    expect(linkToPassage).toBeDefined();
-    expect(section3Link).toBeDefined();
+    expect(linkToPassage).not.toBeNull();
+    expect(section3Link).not.toBeNull();
     expect(linkToPassage.classList).not.toContain('disabled');
     expect(section3Link.classList).not.toContain('disabled');
 
@@ -110,8 +118,8 @@ test('Click a passage link', async () => {
     const linkToPassage = findLink(element, 'passage', 'a link to a passage');
     const section3Link = findLink(element, 'section', 'section 3');
 
-    expect(linkToPassage).toBeDefined();
-    expect(section3Link).toBeDefined();
+    expect(linkToPassage).not.toBeNull();
+    expect(section3Link).not.toBeNull();
     expect(linkToPassage.classList).not.toContain('disabled');
     expect(section3Link.classList).not.toContain('disabled');
 
@@ -147,7 +155,7 @@ test('Run JavaScript functions', async () => {
 
     const clickContinue = () => {
         const continueLink = findLink(element, 'section', 'Continue...', true);
-        expect(continueLink).toBeDefined();
+        expect(continueLink).not.toBeNull();
         squiffyApi.clickLink(continueLink);
     };
 
@@ -170,4 +178,109 @@ test('Run JavaScript functions', async () => {
 
     clickContinue();
     expect(getTestOutput()).toBe('In other section');
+});
+
+function getSectionContent(element: HTMLElement, section: string) {
+    return element.querySelector(`[data-source='[[${section}]]'] p`)?.textContent || null;
+}
+
+function getPassageContent(element: HTMLElement, section: string, passage: string) {
+    return element.querySelector(`[data-source='[[${section}]][${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('Update passage output', async () => {
+    const { squiffyApi, element } = await initScript(`Click this: [a]
+
+[a]:
+Passage a content`);
+    
+    const link = findLink(element, 'passage', 'a');
+    squiffyApi.clickLink(link);
+
+    let defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Click this: a');
+    let passageOutput = getPassageContent(element, '_default', 'a');
+    expect(passageOutput).toBe('Passage a content');
+    expect(element.innerHTML).toMatchSnapshot();
+
+    const updated = await compile(`Click this: [a]
+
+[a]:
+Updated passage content`);
+
+    squiffyApi.update(updated.story);
+
+    defaultOutput = getSectionContent(element, '_default');
+    expect(defaultOutput).toBe('Click this: a');
+
+    passageOutput = getPassageContent(element, '_default', 'a');
+    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');
+    squiffyApi.clickLink(link);
+
+    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');
+    squiffyApi.clickLink(link);
+
+    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();
 });

package/src/squiffy.runtime.ts

@@ -17,6 +17,7 @@ interface SquiffyApi {
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
     clickLink: (link: HTMLElement) => void;
+    update: (story: Story) => void;
 }
 
 // Previous versions of Squiffy had "squiffy", "get" and "set" as globals - we now pass these directly into JS functions.
@@ -63,6 +64,7 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
     let story: Story;
     let currentSection: Section;
     let currentSectionElement: HTMLElement;
+    let currentBlockOutputElement: HTMLElement;
     let scrollPosition = 0;
     let outputElement: HTMLElement;
     let settings: SquiffySettings;
@@ -103,7 +105,7 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
             set('_turncount', get('_turncount') + 1);
             passage = processLink(passage);
             if (passage) {
-                currentSectionElement?.appendChild(document.createElement('hr'));
+                newBlockOutputElement();
                 showPassage(passage);
             }
             const turnPassage = '@' + get('_turncount');
@@ -117,7 +119,6 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
             }
         }
         else if (section) {
-            currentSectionElement?.appendChild(document.createElement('hr'));
             disableLink(link);
             section = processLink(section);
             if (section) {
@@ -270,23 +271,23 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         labelElement.classList.add('fade-out');
     }
     
-    function go(section: string) {
+    function go(sectionName: string) {
         set('_transition', null);
-        newSection();
-        currentSection = story.sections[section];
+        newSection(sectionName);
+        currentSection = story.sections[sectionName];
         if (!currentSection) return;
-        set('_section', section);
-        setSeen(section);
+        set('_section', sectionName);
+        setSeen(sectionName);
         const master = story.sections[''];
         if (master) {
             run(master);
-            ui.write(master.text || '');
+            ui.write(master.text || '', "[[]]");
         }
         run(currentSection);
         // The JS might have changed which section we're in
-        if (get('_section') == section) {
+        if (get('_section') == sectionName) {
             set('_turncount', 0);
-            ui.write(currentSection.text || '');
+            ui.write(currentSection.text || '', `[[${sectionName}]]`);
             save();
         }
     }
@@ -323,16 +324,16 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
             const masterPassage = masterSection.passages[''];
             if (masterPassage) {
                 run(masterPassage);
-                ui.write(masterPassage.text || '');
+                ui.write(masterPassage.text || '', `[[]][]`);
             }
         }
         const master = currentSection.passages && currentSection.passages[''];
         if (master) {
             run(master);
-            ui.write(master.text || '');
+            ui.write(master.text || '', `[[${get("_section")}]][]`);
         }
         run(passage);
-        ui.write(passage.text || '');
+        ui.write(passage.text || '', `[[${get("_section")}]][${passageName}]`);
         save();
     }
     
@@ -376,9 +377,10 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         const output = get('_output');
         if (!output) return false;
         outputElement.innerHTML = output;
-        const element = document.getElementById(get('_output-section'));
-        if (!element) return false;
-        currentSectionElement = element;
+
+        currentSectionElement = outputElement.querySelector('.squiffy-output-section:last-child');
+        currentBlockOutputElement = outputElement.querySelector('.squiffy-output-block:last-child');
+
         currentSection = story.sections[get('_section')];
         const transition = get('_transition');
         if (transition) {
@@ -401,8 +403,14 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         if (!seenSections) return false;
         return (seenSections.indexOf(sectionName) > -1);
     }
+
+    function newBlockOutputElement() {
+        currentBlockOutputElement = document.createElement('div');
+        currentBlockOutputElement.classList.add('squiffy-output-block');
+        currentSectionElement?.appendChild(currentBlockOutputElement);
+    }
     
-    function newSection() {
+    function newSection(sectionName: string | null) {
         if (currentSectionElement) {
             disableLinks(currentSectionElement.querySelectorAll('.squiffy-link'));
             currentSectionElement.querySelectorAll('input').forEach(el => {
@@ -429,26 +437,32 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         const id = 'squiffy-section-' + sectionCount;
     
         currentSectionElement = document.createElement('div');
+        currentSectionElement.classList.add('squiffy-output-section');
         currentSectionElement.id = id;
+        if (sectionName) {
+            currentSectionElement.setAttribute('data-section', `${sectionName}`);
+        }
         outputElement.appendChild(currentSectionElement);
-    
-        set('_output-section', id);
+        newBlockOutputElement();
     }
     
     const ui = {
-        write: (text: string) => {
-            if (!currentSectionElement) return;
+        write: (text: string, source: string) => {
+            if (!currentBlockOutputElement) return;
             scrollPosition = outputElement.scrollHeight;
     
             const div = document.createElement('div');
-            currentSectionElement.appendChild(div);
+            if (source) {
+                div.setAttribute('data-source', source);
+            }
+            currentBlockOutputElement.appendChild(div);
             div.innerHTML = ui.processText(text);
     
             ui.scrollToEnd();
         },
         clearScreen: () => {
             outputElement.innerHTML = '';
-            newSection();
+            newSection(null);
         },
         scrollToEnd: () => {
             if (settings.scroll === 'element') {
@@ -661,6 +675,60 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         return [next, remaining];
     }
 
+    function getSectionContent(section: string) {
+        return outputElement.querySelectorAll(`[data-source='[[${section}]]']`);
+    }
+    
+    function getPassageContent(section: string, passage: string) {
+        return outputElement.querySelectorAll(`[data-source='[[${section}]][${passage}]']`);
+    }
+
+    function update(newStory: Story) {
+        // TODO: Re-disable clicked links after update
+
+        for (const existingSection of Object.keys(story.sections)) {
+            const elements = getSectionContent(existingSection);
+            if (elements.length) {
+                const newSection = newStory.sections[existingSection];
+                if (!newSection) {
+                    // section has been deleted
+                    for (const element of elements) {
+                        element.remove();
+                    }
+                }
+                else if (newSection.text && newSection.text != story.sections[existingSection].text) {
+                    // section has been updated
+                    for (const element of elements) {
+                        element.innerHTML = ui.processText(newSection.text);
+                    }
+                }
+            }
+
+            if (!story.sections[existingSection].passages) continue;
+
+            for (const existingPassage of Object.keys(story.sections[existingSection].passages)) {
+                const elements = getPassageContent(existingSection, existingPassage);
+                if (!elements.length) continue;
+
+                const newPassage = newStory.sections[existingSection]?.passages && newStory.sections[existingSection]?.passages[existingPassage];
+                if (!newPassage) {
+                    // passage has been deleted
+                    for (const element of elements) {
+                        element.remove();
+                    }
+                }
+                else if (newPassage.text && newPassage.text != story.sections[existingSection].passages[existingPassage].text) {
+                    // passage has been updated
+                    for (const element of elements) {
+                        element.innerHTML = ui.processText(newPassage.text);
+                    }
+                }
+            }
+        }
+
+        story = newStory;
+    }
+
     outputElement = options.element;
     story = options.story;
 
@@ -679,8 +747,8 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         outputElement.style.overflowY = 'auto';
     }
 
-    document.addEventListener('click', handleClick);
-    document.addEventListener('keypress', function (event) {
+    outputElement.addEventListener('click', handleClick);
+    outputElement.addEventListener('keypress', function (event) {
         if (event.key !== "Enter") return;
         handleClick(event);
     });
@@ -691,6 +759,7 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         restart: restart,
         get: get,
         set: set,
-        clickLink: handleLink
+        clickLink: handleLink,
+        update: update,
     };
 };