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

package/src/squiffy.runtime.ts

@@ -1,4 +1,4 @@
-interface SquiffyInitOptions {
+export interface SquiffyInitOptions {
     element: HTMLElement;
     story: Story;
     scroll?: string,
@@ -6,26 +6,45 @@ interface SquiffyInitOptions {
     onSet?: (attribute: string, value: any) => void,
 }
 
-interface SquiffySettings {
+export interface SquiffySettings {
     scroll: string,
     persist: boolean,
     onSet: (attribute: string, value: any) => void,
 }
 
-interface SquiffyApi {
+export interface SquiffyApi {
     restart: () => void;
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
+    clickLink: (link: HTMLElement) => boolean;
+    update: (story: Story) => void;
 }
 
-interface Story {
-    js: (() => void)[];
+// Previous versions of Squiffy had "squiffy", "get" and "set" as globals - we now pass these directly into JS functions.
+// We may tidy up this API at some point, though that would be a breaking change.
+interface SquiffyJsFunctionApi {
+    get: (attribute: string) => any;
+    set: (attribute: string, value: any) => void;
+    ui: {
+        transition: (f: any) => void;
+    };
+    story: {
+        go: (section: string) => void;
+    };
+}
+
+export interface Story {
+    js: ((
+            squiffy: SquiffyJsFunctionApi,
+            get: (attribute: string) => any,
+            set: (attribute: string, value: any) => void
+        ) => void)[];
     start: string;
     id?: string | null;
     sections: Record<string, Section>;
 }
 
-interface Section {
+export interface Section {
     text?: string;
     clear?: boolean;
     attributes?: string[],
@@ -34,7 +53,7 @@ interface Section {
     passageCount?: number;
 }
 
-interface Passage {
+export interface Passage {
     text?: string;
     clear?: boolean;
     attributes?: string[];
@@ -45,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;
@@ -73,68 +93,72 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         return JSON.parse(result);
     }
     
-    function initLinkHandler() {
-        function handleLink(link: HTMLElement) {
-            if (link.classList.contains('disabled')) return;
-            let passage = link.getAttribute('data-passage');
-            let section = link.getAttribute('data-section');
-            const rotateAttr = link.getAttribute('data-rotate');
-            const sequenceAttr = link.getAttribute('data-sequence');
-            const rotateOrSequenceAttr = rotateAttr || sequenceAttr;
+    function handleLink(link: HTMLElement): boolean {
+        const outputSection = link.closest('.squiffy-output-section');
+        if (outputSection !== currentSectionElement) return false;
+
+        if (link.classList.contains('disabled')) return false;
+
+        let passage = link.getAttribute('data-passage');
+        let section = link.getAttribute('data-section');
+        const rotateAttr = link.getAttribute('data-rotate');
+        const sequenceAttr = link.getAttribute('data-sequence');
+        const rotateOrSequenceAttr = rotateAttr || sequenceAttr;
+        if (passage) {
+            disableLink(link);
+            set('_turncount', get('_turncount') + 1);
+            passage = processLink(passage);
             if (passage) {
-                disableLink(link);
-                set('_turncount', get('_turncount') + 1);
-                passage = processLink(passage);
-                if (passage) {
-                    currentSectionElement?.appendChild(document.createElement('hr'));
-                    showPassage(passage);
-                }
-                const turnPassage = '@' + get('_turncount');
-                if (currentSection.passages) {
-                    if (turnPassage in currentSection.passages) {
-                        showPassage(turnPassage);
-                    }
-                    if ('@last' in currentSection.passages && get('_turncount') >= (currentSection.passageCount || 0)) {
-                        showPassage('@last');
-                    }
-                }
+                newBlockOutputElement();
+                showPassage(passage);
             }
-            else if (section) {
-                currentSectionElement?.appendChild(document.createElement('hr'));
-                disableLink(link);
-                section = processLink(section);
-                if (section) {
-                    go(section);
+            const turnPassage = '@' + get('_turncount');
+            if (currentSection.passages) {
+                if (turnPassage in currentSection.passages) {
+                    showPassage(turnPassage);
                 }
-            }
-            else if (rotateOrSequenceAttr) {
-                const result = rotate(rotateOrSequenceAttr, rotateAttr ? link.innerText : '');
-                link.innerHTML = result[0]!.replace(/&quot;/g, '"').replace(/&#39;/g, '\'');
-                const dataAttribute = rotateAttr ? 'data-rotate' : 'data-sequence';
-                link.setAttribute(dataAttribute, result[1] || '');
-                if (!result[1]) {
-                    disableLink(link);
-                }
-                const attribute = link.getAttribute('data-attribute');
-                if (attribute) {
-                    set(attribute, result[0]);
+                if ('@last' in currentSection.passages && get('_turncount') >= (currentSection.passageCount || 0)) {
+                    showPassage('@last');
                 }
-                save();
             }
+
+            return true;
         }
-    
-        function handleClick(event: Event) {
-            const target = event.target as HTMLElement;
-            if (target.classList.contains('squiffy-link')) {
-                handleLink(target);
+        
+        if (section) {
+            section = processLink(section);
+            if (section) {
+                go(section);
             }
+
+            return true;
+        }
+        
+        if (rotateOrSequenceAttr) {
+            const result = rotate(rotateOrSequenceAttr, rotateAttr ? link.innerText : '');
+            link.innerHTML = result[0]!.replace(/&quot;/g, '"').replace(/&#39;/g, '\'');
+            const dataAttribute = rotateAttr ? 'data-rotate' : 'data-sequence';
+            link.setAttribute(dataAttribute, result[1] || '');
+            if (!result[1]) {
+                disableLink(link);
+            }
+            const attribute = link.getAttribute('data-attribute');
+            if (attribute) {
+                set(attribute, result[0]);
+            }
+            save();
+            
+            return true;
+        }
+
+        return false;
+    }
+
+    function handleClick(event: Event) {
+        const target = event.target as HTMLElement;
+        if (target.classList.contains('squiffy-link')) {
+            handleLink(target);
         }
-    
-        document.addEventListener('click', handleClick);
-        document.addEventListener('keypress', function (event) {
-            if (event.key !== "Enter") return;
-            handleClick(event);
-        });
     }
     
     function disableLink(link: Element) {
@@ -142,10 +166,6 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         link.setAttribute('tabindex', '-1');
     }
     
-    function disableLinks(links: NodeListOf<Element>) {
-        links.forEach(disableLink);
-    }
-    
     function begin() {
         if (!load()) {
             go(story.start);
@@ -260,23 +280,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();
         }
     }
@@ -289,7 +309,17 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
             processAttributes(section.attributes.map(line => line.replace(/^random\s*:\s*(\w+)\s*=\s*(.+)/i, (line, attr, options) => (options = options.split("|")) ? attr + " = " + options[Math.floor(Math.random() * options.length)] : line)));
         }
         if (section.jsIndex !== undefined) {
-            story.js[section.jsIndex]();
+            const squiffy = {
+                get: get,
+                set: set,
+                ui: {
+                    transition: ui.transition,
+                },
+                story: {
+                    go: go,
+                },
+            };
+            story.js[section.jsIndex](squiffy, get, set);
         }
     }
     
@@ -297,22 +327,24 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         let passage = currentSection.passages && currentSection.passages[passageName];
         const masterSection = story.sections[''];
         if (!passage && masterSection && masterSection.passages) passage = masterSection.passages[passageName];
-        if (!passage) return;
+        if (!passage) {
+            throw `No passage named ${passageName} in the current section or master section`;
+        }
         setSeen(passageName);
         if (masterSection && masterSection.passages) {
             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();
     }
     
@@ -356,9 +388,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) {
@@ -381,10 +414,15 @@ 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 => {
                 const attribute = el.getAttribute('data-attribute') || el.id;
                 if (attribute) set(attribute, el.value);
@@ -409,26 +447,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') {
@@ -641,6 +685,82 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         return [next, remaining];
     }
 
+    function safeQuerySelector(name: string) {
+        return name.replace(/'/g, "\\'");
+    }
+
+    function getSectionContent(section: string) {
+        return outputElement.querySelectorAll(`[data-source='[[${safeQuerySelector(section)}]]']`);
+    }
+
+    function getPassageContent(section: string, passage: string) {
+        return outputElement.querySelectorAll(`[data-source='[[${safeQuerySelector(section)}]][${safeQuerySelector(passage)}]']`);
+    }
+
+    function updateElementTextPreservingDisabledPassageLinks(element: Element, text: string) {
+        // Record which passage links are disabled
+        const disabledPassages = Array.from(element
+            .querySelectorAll("a.link-passage.disabled"))
+            .map((el: HTMLElement) => el.getAttribute("data-passage"));
+
+        element.innerHTML = text;
+
+        // Re-disable links that were disabled before the update
+        for (const passage of disabledPassages) {
+            const link = element.querySelector(`a.link-passage[data-passage="${passage}"]`);
+            if (link) disableLink(link);
+        }
+    }
+
+    function update(newStory: Story) {
+        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) {
+                        const parentOutputSection = element.closest('.squiffy-output-section');
+                        parentOutputSection.remove();
+                    }
+                }
+                else if (newSection.text && newSection.text != story.sections[existingSection].text) {
+                    // section has been updated
+                    for (const element of elements) {
+                        updateElementTextPreservingDisabledPassageLinks(element, 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) {
+                        const parentOutputBlock = element.closest('.squiffy-output-block');
+                        parentOutputBlock.remove();
+                    }
+                }
+                else if (newPassage.text && newPassage.text != story.sections[existingSection].passages[existingPassage].text) {
+                    // passage has been updated
+                    for (const element of elements) {
+                        updateElementTextPreservingDisabledPassageLinks(element, newPassage.text);
+                    }
+                }
+            }
+        }
+
+        story = newStory;
+        currentSectionElement = outputElement.querySelector('.squiffy-output-section:last-child');
+        const sectionName = currentSectionElement.getAttribute('data-section');
+        currentSection = story.sections[sectionName];
+    }
+
     outputElement = options.element;
     story = options.story;
 
@@ -659,12 +779,19 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         outputElement.style.overflowY = 'auto';
     }
 
-    initLinkHandler();
+    outputElement.addEventListener('click', handleClick);
+    outputElement.addEventListener('keypress', function (event) {
+        if (event.key !== "Enter") return;
+        handleClick(event);
+    });
+    
     begin();
 
     return {
         restart: restart,
         get: get,
         set: set,
+        clickLink: handleLink,
+        update: update,
     };
 };

package/tsconfig.json

@@ -7,7 +7,11 @@
       "noFallthroughCasesInSwitch": true,
       "skipLibCheck": true,
       "outDir": "dist",
+      "declaration": true,
+      "module": "NodeNext",
+      "moduleResolution": "nodenext",
+      "allowSyntheticDefaultImports": true
     },
-    "include": ["src/squiffy.runtime.ts"]
+    "include": ["src/*.ts"]
 }