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

package/dist/events.d.ts

@@ -0,0 +1,15 @@
+type LinkType = 'section' | 'passage' | 'rotate' | 'sequence';
+export type SquiffyEventMap = {
+    linkClick: {
+        linkType: LinkType;
+    };
+};
+export type SquiffyEventHandler<E extends keyof SquiffyEventMap> = (payload: SquiffyEventMap[E]) => void;
+export declare class Emitter<Events extends Record<string, any>> {
+    private listeners;
+    on<E extends keyof Events>(event: E, handler: (p: Events[E]) => void): () => void;
+    off<E extends keyof Events>(event: E, handler: (p: Events[E]) => void): void;
+    once<E extends keyof Events>(event: E, handler: (p: Events[E]) => void): () => void;
+    emit<E extends keyof Events>(event: E, payload: Events[E]): void;
+}
+export {};

package/dist/events.js

@@ -0,0 +1,35 @@
+export class Emitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event))
+            this.listeners.set(event, new Set());
+        this.listeners.get(event).add(handler);
+        return () => this.off(event, handler);
+    }
+    off(event, handler) {
+        this.listeners.get(event)?.delete(handler);
+    }
+    once(event, handler) {
+        const off = this.on(event, (payload) => {
+            off();
+            handler(payload);
+        });
+        return off;
+    }
+    emit(event, payload) {
+        // Fire handlers asynchronously so the runtime isn't blocked by user code.
+        queueMicrotask(() => {
+            this.listeners.get(event)?.forEach(h => {
+                try {
+                    h(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/dist/squiffy.runtime.d.ts

@@ -1,51 +1,2 @@
-export interface SquiffyInitOptions {
-    element: HTMLElement;
-    story: Story;
-    scroll?: string;
-    persist?: boolean;
-    onSet?: (attribute: string, value: any) => void;
-}
-export interface SquiffySettings {
-    scroll: string;
-    persist: boolean;
-    onSet: (attribute: string, value: any) => void;
-}
-export interface SquiffyApi {
-    restart: () => void;
-    get: (attribute: string) => any;
-    set: (attribute: string, value: any) => void;
-    clickLink: (link: HTMLElement) => boolean;
-    update: (story: Story) => void;
-}
-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>;
-}
-export interface Section {
-    text?: string;
-    clear?: boolean;
-    attributes?: string[];
-    jsIndex?: number;
-    passages?: Record<string, Passage>;
-    passageCount?: number;
-}
-export interface Passage {
-    text?: string;
-    clear?: boolean;
-    attributes?: string[];
-    jsIndex?: number;
-}
+import { SquiffyApi, SquiffyInitOptions } from './types.js';
 export declare const init: (options: SquiffyInitOptions) => SquiffyApi;
-export {};

package/dist/squiffy.runtime.js

@@ -1,3 +1,6 @@
+import { startsWith, rotate } from "./utils.js";
+import { TextProcessor } from './textProcessor.js';
+import { Emitter } from './events.js';
 export const init = (options) => {
     let story;
     let currentSection;
@@ -7,6 +10,8 @@ export const init = (options) => {
     let outputElement;
     let settings;
     let storageFallback = {};
+    let textProcessor;
+    const emitter = new Emitter();
     function set(attribute, value) {
         if (typeof value === 'undefined')
             value = true;
@@ -58,6 +63,7 @@ export const init = (options) => {
                     showPassage('@last');
                 }
             }
+            emitter.emit('linkClick', { linkType: 'passage' });
             return true;
         }
         if (section) {
@@ -65,6 +71,7 @@ export const init = (options) => {
             if (section) {
                 go(section);
             }
+            emitter.emit('linkClick', { linkType: 'section' });
             return true;
         }
         if (rotateOrSequenceAttr) {
@@ -80,6 +87,7 @@ export const init = (options) => {
                 set(attribute, result[0]);
             }
             save();
+            emitter.emit('linkClick', { linkType: rotateAttr ? 'rotate' : 'sequence' });
             return true;
         }
         return false;
@@ -408,184 +416,16 @@ export const init = (options) => {
             }
         },
         processText: (text) => {
-            function process(text, data) {
-                let containsUnprocessedSection = false;
-                const open = text.indexOf('{');
-                let close;
-                if (open > -1) {
-                    let nestCount = 1;
-                    let searchStart = open + 1;
-                    let finished = false;
-                    while (!finished) {
-                        const nextOpen = text.indexOf('{', searchStart);
-                        const nextClose = text.indexOf('}', searchStart);
-                        if (nextClose > -1) {
-                            if (nextOpen > -1 && nextOpen < nextClose) {
-                                nestCount++;
-                                searchStart = nextOpen + 1;
-                            }
-                            else {
-                                nestCount--;
-                                searchStart = nextClose + 1;
-                                if (nestCount === 0) {
-                                    close = nextClose;
-                                    containsUnprocessedSection = true;
-                                    finished = true;
-                                }
-                            }
-                        }
-                        else {
-                            finished = true;
-                        }
-                    }
-                }
-                if (containsUnprocessedSection) {
-                    const section = text.substring(open + 1, close);
-                    const value = processTextCommand(section, data);
-                    text = text.substring(0, open) + value + process(text.substring(close + 1), data);
-                }
-                return (text);
-            }
-            function processTextCommand(text, data) {
-                if (startsWith(text, 'if ')) {
-                    return processTextCommand_If(text, data);
-                }
-                else if (startsWith(text, 'else:')) {
-                    return processTextCommand_Else(text, data);
-                }
-                else if (startsWith(text, 'label:')) {
-                    return processTextCommand_Label(text, data);
-                }
-                else if (/^rotate[: ]/.test(text)) {
-                    return processTextCommand_Rotate('rotate', text);
-                }
-                else if (/^sequence[: ]/.test(text)) {
-                    return processTextCommand_Rotate('sequence', text);
-                }
-                else if (currentSection.passages && text in currentSection.passages) {
-                    return process(currentSection.passages[text].text || '', data);
-                }
-                else if (text in story.sections) {
-                    return process(story.sections[text].text || '', data);
-                }
-                else if (startsWith(text, '@') && !startsWith(text, '@replace')) {
-                    processAttributes(text.substring(1).split(","));
-                    return "";
-                }
-                return get(text);
-            }
-            function processTextCommand_If(section, data) {
-                const command = section.substring(3);
-                const colon = command.indexOf(':');
-                if (colon == -1) {
-                    return ('{if ' + command + '}');
-                }
-                const text = command.substring(colon + 1);
-                let condition = command.substring(0, colon);
-                condition = condition.replace("<", "&lt;");
-                const operatorRegex = /([\w ]*)(=|&lt;=|&gt;=|&lt;&gt;|&lt;|&gt;)(.*)/;
-                const match = operatorRegex.exec(condition);
-                let result = false;
-                if (match) {
-                    const lhs = get(match[1]);
-                    const op = match[2];
-                    let rhs = match[3];
-                    if (startsWith(rhs, '@'))
-                        rhs = get(rhs.substring(1));
-                    if (op == '=' && lhs == rhs)
-                        result = true;
-                    if (op == '&lt;&gt;' && lhs != rhs)
-                        result = true;
-                    if (op == '&gt;' && lhs > rhs)
-                        result = true;
-                    if (op == '&lt;' && lhs < rhs)
-                        result = true;
-                    if (op == '&gt;=' && lhs >= rhs)
-                        result = true;
-                    if (op == '&lt;=' && lhs <= rhs)
-                        result = true;
-                }
-                else {
-                    let checkValue = true;
-                    if (startsWith(condition, 'not ')) {
-                        condition = condition.substring(4);
-                        checkValue = false;
-                    }
-                    if (startsWith(condition, 'seen ')) {
-                        result = (seen(condition.substring(5)) == checkValue);
-                    }
-                    else {
-                        let value = get(condition);
-                        if (value === null)
-                            value = false;
-                        result = (value == checkValue);
-                    }
-                }
-                const textResult = result ? process(text, data) : '';
-                data.lastIf = result;
-                return textResult;
-            }
-            function processTextCommand_Else(section, data) {
-                if (!('lastIf' in data) || data.lastIf)
-                    return '';
-                const text = section.substring(5);
-                return process(text, data);
-            }
-            function processTextCommand_Label(section, data) {
-                const command = section.substring(6);
-                const eq = command.indexOf('=');
-                if (eq == -1) {
-                    return ('{label:' + command + '}');
-                }
-                const text = command.substring(eq + 1);
-                const label = command.substring(0, eq);
-                return '<span class="squiffy-label-' + label + '">' + process(text, data) + '</span>';
-            }
-            function processTextCommand_Rotate(type, section) {
-                let options;
-                let attribute = '';
-                if (section.substring(type.length, type.length + 1) == ' ') {
-                    const colon = section.indexOf(':');
-                    if (colon == -1) {
-                        return '{' + section + '}';
-                    }
-                    options = section.substring(colon + 1);
-                    attribute = section.substring(type.length + 1, colon);
-                }
-                else {
-                    options = section.substring(type.length + 1);
-                }
-                // TODO: Check - previously there was no second parameter here
-                const rotation = rotate(options.replace(/"/g, '&quot;').replace(/'/g, '&#39;'), null);
-                if (attribute) {
-                    set(attribute, rotation[0]);
-                }
-                return '<a class="squiffy-link" data-' + type + '="' + rotation[1] + '" data-attribute="' + attribute + '" role="link">' + rotation[0] + '</a>';
-            }
             const data = {
                 fulltext: text
             };
-            return process(text, data);
+            return textProcessor.process(text, data);
         },
         transition: function (f) {
             set('_transition', f.toString());
             f();
         },
     };
-    function startsWith(string, prefix) {
-        return string.substring(0, prefix.length) === prefix;
-    }
-    function rotate(options, current) {
-        const colon = options.indexOf(':');
-        if (colon == -1) {
-            return [options, current];
-        }
-        const next = options.substring(0, colon);
-        let remaining = options.substring(colon + 1);
-        if (current)
-            remaining += ':' + current;
-        return [next, remaining];
-    }
     function safeQuerySelector(name) {
         return name.replace(/'/g, "\\'");
     }
@@ -674,6 +514,7 @@ export const init = (options) => {
             return;
         handleClick(event);
     });
+    textProcessor = new TextProcessor(get, set, story, ui, seen, processAttributes);
     begin();
     return {
         restart: restart,
@@ -681,5 +522,8 @@ export const init = (options) => {
         set: set,
         clickLink: handleLink,
         update: update,
+        on: (e, h) => emitter.on(e, h),
+        off: (e, h) => emitter.off(e, h),
+        once: (e, h) => emitter.once(e, h),
     };
 };

package/dist/squiffy.runtime.test.js

@@ -1,4 +1,4 @@
-import { expect, test, beforeEach, afterEach } from 'vitest';
+import { expect, test, beforeEach, afterEach, vi } from 'vitest';
 import fs from 'fs/promises';
 import globalJsdom from 'global-jsdom';
 import { init } from './squiffy.runtime.js';
@@ -18,7 +18,6 @@ const html = `
 `;
 const compile = async (script) => {
     const compileResult = await squiffyCompile({
-        scriptBaseFilename: "filename.squiffy", // TODO: This shouldn't be required
         script: script,
     });
     if (!compileResult.success) {
@@ -34,7 +33,6 @@ const compile = async (script) => {
     };
 };
 const initScript = async (script) => {
-    globalJsdom(html);
     const element = document.getElementById('squiffy');
     if (!element) {
         throw new Error('Element not found');
@@ -64,7 +62,7 @@ const getTestOutput = () => {
 };
 let cleanup;
 beforeEach(() => {
-    cleanup = globalJsdom();
+    cleanup = globalJsdom(html);
 });
 afterEach(() => {
     cleanup();
@@ -83,11 +81,18 @@ test('Click a section link', async () => {
     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');
@@ -99,12 +104,19 @@ test('Click a passage link', async () => {
     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 = `

package/dist/textProcessor.d.ts

@@ -0,0 +1,15 @@
+export declare class TextProcessor {
+    get: (attribute: string) => any;
+    set: (attribute: string, value: any) => void;
+    story: any;
+    currentSection: any;
+    seen: (section: string) => boolean;
+    processAttributes: (attributes: string[]) => void;
+    constructor(get: (attribute: string) => any, set: (attribute: string, value: any) => void, story: any, currentSection: any, seen: (section: string) => boolean, processAttributes: (attributes: string[]) => void);
+    process(text: string, data: any): string;
+    processTextCommand(text: string, data: any): any;
+    processTextCommand_If(section: string, data: any): string;
+    processTextCommand_Else(section: string, data: any): string;
+    processTextCommand_Label(section: string, data: any): string;
+    processTextCommand_Rotate(type: string, section: string): string;
+}

package/dist/textProcessor.js

@@ -0,0 +1,165 @@
+import { startsWith, rotate } from "./utils.js";
+export class TextProcessor {
+    constructor(get, set, story, currentSection, seen, processAttributes) {
+        this.get = get;
+        this.set = set;
+        this.story = story;
+        this.currentSection = currentSection;
+        this.seen = seen;
+        this.processAttributes = processAttributes;
+    }
+    process(text, data) {
+        let containsUnprocessedSection = false;
+        const open = text.indexOf('{');
+        let close;
+        if (open > -1) {
+            let nestCount = 1;
+            let searchStart = open + 1;
+            let finished = false;
+            while (!finished) {
+                const nextOpen = text.indexOf('{', searchStart);
+                const nextClose = text.indexOf('}', searchStart);
+                if (nextClose > -1) {
+                    if (nextOpen > -1 && nextOpen < nextClose) {
+                        nestCount++;
+                        searchStart = nextOpen + 1;
+                    }
+                    else {
+                        nestCount--;
+                        searchStart = nextClose + 1;
+                        if (nestCount === 0) {
+                            close = nextClose;
+                            containsUnprocessedSection = true;
+                            finished = true;
+                        }
+                    }
+                }
+                else {
+                    finished = true;
+                }
+            }
+        }
+        if (containsUnprocessedSection) {
+            const section = text.substring(open + 1, close);
+            const value = this.processTextCommand(section, data);
+            text = text.substring(0, open) + value + this.process(text.substring(close + 1), data);
+        }
+        return (text);
+    }
+    processTextCommand(text, data) {
+        if (startsWith(text, 'if ')) {
+            return this.processTextCommand_If(text, data);
+        }
+        else if (startsWith(text, 'else:')) {
+            return this.processTextCommand_Else(text, data);
+        }
+        else if (startsWith(text, 'label:')) {
+            return this.processTextCommand_Label(text, data);
+        }
+        else if (/^rotate[: ]/.test(text)) {
+            return this.processTextCommand_Rotate('rotate', text);
+        }
+        else if (/^sequence[: ]/.test(text)) {
+            return this.processTextCommand_Rotate('sequence', text);
+        }
+        else if (this.currentSection.passages && text in this.currentSection.passages) {
+            return this.process(this.currentSection.passages[text].text || '', data);
+        }
+        else if (text in this.story.sections) {
+            return this.process(this.story.sections[text].text || '', data);
+        }
+        else if (startsWith(text, '@') && !startsWith(text, '@replace')) {
+            this.processAttributes(text.substring(1).split(","));
+            return "";
+        }
+        return this.get(text);
+    }
+    processTextCommand_If(section, data) {
+        const command = section.substring(3);
+        const colon = command.indexOf(':');
+        if (colon == -1) {
+            return ('{if ' + command + '}');
+        }
+        const text = command.substring(colon + 1);
+        let condition = command.substring(0, colon);
+        condition = condition.replace("<", "&lt;");
+        const operatorRegex = /([\w ]*)(=|&lt;=|&gt;=|&lt;&gt;|&lt;|&gt;)(.*)/;
+        const match = operatorRegex.exec(condition);
+        let result = false;
+        if (match) {
+            const lhs = this.get(match[1]);
+            const op = match[2];
+            let rhs = match[3];
+            if (startsWith(rhs, '@'))
+                rhs = this.get(rhs.substring(1));
+            if (op == '=' && lhs == rhs)
+                result = true;
+            if (op == '&lt;&gt;' && lhs != rhs)
+                result = true;
+            if (op == '&gt;' && lhs > rhs)
+                result = true;
+            if (op == '&lt;' && lhs < rhs)
+                result = true;
+            if (op == '&gt;=' && lhs >= rhs)
+                result = true;
+            if (op == '&lt;=' && lhs <= rhs)
+                result = true;
+        }
+        else {
+            let checkValue = true;
+            if (startsWith(condition, 'not ')) {
+                condition = condition.substring(4);
+                checkValue = false;
+            }
+            if (startsWith(condition, 'seen ')) {
+                result = (this.seen(condition.substring(5)) == checkValue);
+            }
+            else {
+                let value = this.get(condition);
+                if (value === null)
+                    value = false;
+                result = (value == checkValue);
+            }
+        }
+        const textResult = result ? this.process(text, data) : '';
+        data.lastIf = result;
+        return textResult;
+    }
+    processTextCommand_Else(section, data) {
+        if (!('lastIf' in data) || data.lastIf)
+            return '';
+        const text = section.substring(5);
+        return this.process(text, data);
+    }
+    processTextCommand_Label(section, data) {
+        const command = section.substring(6);
+        const eq = command.indexOf('=');
+        if (eq == -1) {
+            return ('{label:' + command + '}');
+        }
+        const text = command.substring(eq + 1);
+        const label = command.substring(0, eq);
+        return '<span class="squiffy-label-' + label + '">' + this.process(text, data) + '</span>';
+    }
+    processTextCommand_Rotate(type, section) {
+        let options;
+        let attribute = '';
+        if (section.substring(type.length, type.length + 1) == ' ') {
+            const colon = section.indexOf(':');
+            if (colon == -1) {
+                return '{' + section + '}';
+            }
+            options = section.substring(colon + 1);
+            attribute = section.substring(type.length + 1, colon);
+        }
+        else {
+            options = section.substring(type.length + 1);
+        }
+        // TODO: Check - previously there was no second parameter here
+        const rotation = rotate(options.replace(/"/g, '&quot;').replace(/'/g, '&#39;'), null);
+        if (attribute) {
+            this.set(attribute, rotation[0]);
+        }
+        return '<a class="squiffy-link" data-' + type + '="' + rotation[1] + '" data-attribute="' + attribute + '" role="link">' + rotation[0] + '</a>';
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+import { SquiffyEventHandler, SquiffyEventMap } from "./events.js";
+export interface SquiffyInitOptions {
+    element: HTMLElement;
+    story: Story;
+    scroll?: string;
+    persist?: boolean;
+    onSet?: (attribute: string, value: any) => void;
+}
+export interface SquiffySettings {
+    scroll: string;
+    persist: boolean;
+    onSet: (attribute: string, value: any) => void;
+}
+export interface SquiffyApi {
+    restart: () => void;
+    get: (attribute: string) => any;
+    set: (attribute: string, value: any) => void;
+    clickLink: (link: HTMLElement) => boolean;
+    update: (story: Story) => void;
+    on<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): () => void;
+    off<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): void;
+    once<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): () => void;
+}
+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>;
+}
+export interface Section {
+    text?: string;
+    clear?: boolean;
+    attributes?: string[];
+    jsIndex?: number;
+    passages?: Record<string, Passage>;
+    passageCount?: number;
+}
+export interface Passage {
+    text?: string;
+    clear?: boolean;
+    attributes?: string[];
+    jsIndex?: number;
+}
+export {};

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function startsWith(string: string, prefix: string): boolean;
+export declare function rotate(options: string, current: string | null): string[];

package/dist/utils.js

@@ -0,0 +1,14 @@
+export function startsWith(string, prefix) {
+    return string.substring(0, prefix.length) === prefix;
+}
+export function rotate(options, current) {
+    const colon = options.indexOf(':');
+    if (colon == -1) {
+        return [options, current];
+    }
+    const next = options.substring(0, colon);
+    let remaining = options.substring(colon + 1);
+    if (current)
+        remaining += ':' + current;
+    return [next, remaining];
+}