squiffy-runtime 6.0.0-alpha.14 → 6.0.0-alpha.17

package/src/state.ts

@@ -0,0 +1,106 @@
+import { Emitter, SquiffyEventMap } from "./events.js";
+
+export class State {
+    persist: boolean;
+    storyId: string;
+    onSet: (attribute: string, value: any) => void;
+    onSetInternal?: (attribute: string, oldValue: any, newValue: any) => void;
+    store: Record<string, any> = {};
+    emitter: Emitter<SquiffyEventMap>;
+
+    constructor(persist: boolean,
+                storyId: string,
+                onSet: (attribute: string, value: any) => void,
+                emitter: Emitter<SquiffyEventMap>,
+                onSetInternal?: (attribute: string, oldValue: any, newValue: any) => void) {
+        this.persist = persist;
+        this.storyId = storyId;
+        this.onSet = onSet;
+        this.emitter = emitter;
+        this.onSetInternal = onSetInternal;
+    }
+
+    private usePersistentStorage() {
+        return this.persist && window.localStorage && this.storyId;
+    }
+
+    set(attribute: string, value: any) {
+        this.setInternal(attribute, value, true);
+    }
+
+    setInternal(attribute: string, value: any, raiseEvents: boolean) {
+        if (typeof value === "undefined") value = true;
+
+        if (raiseEvents && this.onSetInternal) {
+            this.onSetInternal(attribute, this.get(attribute), structuredClone(value));
+        }
+
+        this.store[attribute] = structuredClone(value);
+
+        if (this.usePersistentStorage()) {
+            localStorage[this.storyId + "-" + attribute] = JSON.stringify(value);
+        }
+
+        if (raiseEvents) {
+            this.emitter.emit("set", { attribute, value });
+        }
+
+        this.onSet(attribute, value);
+    }
+
+    get(attribute: string): any {
+        if (attribute in this.store) {
+            return structuredClone(this.store[attribute]);
+        }
+
+        return null;
+    }
+
+    getStore() {
+        return structuredClone(this.store);
+    }
+
+    load() {
+        if (!this.usePersistentStorage()) {
+            return;
+        }
+
+        const keys = Object.keys(localStorage);
+        for (const key of keys) {
+            if (key.startsWith(this.storyId + "-")) {
+                const attribute = key.substring(this.storyId.length + 1);
+                this.store[attribute] = JSON.parse(localStorage[key]);
+            }
+        }
+    }
+
+    reset() {
+        this.store = {};
+
+        if (!this.usePersistentStorage()) {
+            return;
+        }
+
+        const keys = Object.keys(localStorage);
+        for (const key of keys) {
+            if (key.startsWith(this.storyId)) {
+                localStorage.removeItem(key);
+            }
+        }
+    }
+
+    setSeen(sectionName: string) {
+        let seenSections = this.get("_seen_sections");
+        if (!seenSections) seenSections = [];
+        if (seenSections.indexOf(sectionName) == -1) {
+            seenSections.push(sectionName);
+            this.set("_seen_sections", seenSections);
+        }
+    }
+
+    getSeen(sectionName: string) {
+        const seenSections = this.get("_seen_sections");
+        if (!seenSections) return false;
+        return (seenSections.indexOf(sectionName) > -1);
+    }
+}

package/src/textProcessor.ts

@@ -1,181 +1,76 @@
-import { startsWith, rotate } from "./utils.js";
-import { Section } from "./types.js";
+import * as marked from "marked";
+import Handlebars from "handlebars";
+import { Section, Story } from "./types.js";
+import { State } from "./state.js";
 
 export class TextProcessor {
-    get: (attribute: string) => any;
-    set: (attribute: string, value: any) => void;
-    story: any;
+    story: Story;
+    state: State;
     getCurrentSection: () => Section;
-    seen: (section: string) => boolean;
-    processAttributes: (attributes: string[]) => void;
+    handlebars: typeof Handlebars;
 
-    constructor (get: (attribute: string) => any,
-                 set: (attribute: string, value: any) => void,
-                 story: any, currentSection: () => Section,
-                 seen: (section: string) => boolean,
-                 processAttributes: (attributes: string[]) => void) {
-        this.get = get;
-        this.set = set;
+    constructor (story: Story,
+                 state: State,
+                 currentSection: () => Section) {
         this.story = story;
+        this.state = state;
         this.getCurrentSection = currentSection;
-        this.seen = seen;
-        this.processAttributes = processAttributes;
-    }
-
-    process(text: string, data: any) {
-        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: string, data: any) {
-        const currentSection = this.getCurrentSection();
-        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 (currentSection.passages && text in currentSection.passages) {
-            console.log("Found passage");
-            return this.process(currentSection.passages[text].text || '', data);
-        } else if (text in this.story.sections) {
-            console.log("Found section");
-            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: string, data: any) {
-        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;
+        this.handlebars = Handlebars.create();
+
+        this.handlebars.registerHelper("embed", (name: string) => {
+            const currentSection = this.getCurrentSection();
+            if (currentSection.passages && name in currentSection.passages) {
+                return this.process(currentSection.passages[name].text || "", true);
+            } else if (name in this.story.sections) {
+                return this.process(this.story.sections[name].text || "", true);
             }
-
-            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);
+        });
+
+        this.handlebars.registerHelper("seen", (name: string) => this.state.getSeen(name));
+        this.handlebars.registerHelper("get", (attribute: string) => this.state.get(attribute));
+        this.handlebars.registerHelper("and", (...args) => args.slice(0,-1).every(Boolean));
+        this.handlebars.registerHelper("or",  (...args) => args.slice(0,-1).some(Boolean));
+        this.handlebars.registerHelper("not", (v) => !v);
+        this.handlebars.registerHelper("eq",  (a,b) => a == b);
+        this.handlebars.registerHelper("ne",  (a,b) => a != b);
+        this.handlebars.registerHelper("gt",  (a,b) => a >  b);
+        this.handlebars.registerHelper("lt",  (a,b) => a <  b);
+        this.handlebars.registerHelper("gte", (a,b) => a >= b);
+        this.handlebars.registerHelper("lte", (a,b) => a <= b);
+        this.handlebars.registerHelper("array", function (...args) {
+            args.pop(); // remove last argument - options
+            return args;
+        });
+
+        const addAdditionalParameters = (options: any) => {
+            let result = "";
+            const setters = options.hash.set as string || "";
+            if (setters) {
+                result += ` data-set='${JSON.stringify(setters.split(",").map(s => s.trim()))}'`;
             }
-        }
-
-        const textResult = result ? this.process(text, data) : '';
-
-        data.lastIf = result;
-        return textResult;
-    }
-
-    processTextCommand_Else(section: string, data: any) {
-        if (!('lastIf' in data) || data.lastIf) return '';
-        const text = section.substring(5);
-        return this.process(text, data);
+            return result;
+        };
+
+        this.handlebars.registerHelper("section", (section: string, options) => {
+            const text = options.hash.text as string || section;
+            return new Handlebars.SafeString(`<a class="squiffy-link link-section" data-section="${section}"${addAdditionalParameters(options)} role="link" tabindex="0">${text}</a>`);
+        });
+
+        this.handlebars.registerHelper("passage", (passage: string, options) => {
+            const text = options.hash.text as string || passage;
+            return new Handlebars.SafeString(`<a class="squiffy-link link-passage" data-passage="${passage}"${addAdditionalParameters(options)} role="link" tabindex="0">${text}</a>`);
+        });
     }
 
-    processTextCommand_Label(section: string, data: any) {
-        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>';
-    }
+    process(text: string, inline: boolean) {
+        const template = this.handlebars.compile(text);
+        text = template(this.state.getStore());
 
-    processTextCommand_Rotate(type: string, section: string) {
-        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);
+        if (inline) {
+            return marked.parseInline(text, { async: false }).trim();
         }
-        // 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]);
+        else {
+            return marked.parse(text, { async: false }).trim();
         }
-        return '<a class="squiffy-link" data-' + type + '="' + rotation[1] + '" data-attribute="' + attribute + '" role="link">' + rotation[0] + '</a>';
     }
 }

package/src/types.plugins.ts

@@ -0,0 +1,41 @@
+import type { HelperDelegate } from "handlebars";
+import { SquiffyEventHandler, SquiffyEventMap } from "./events.js";
+import { Animation } from "./animation.js";
+
+export interface SquiffyPlugin {
+    name: string;
+    init(host: PluginHost): void | Promise<void>;
+    onWrite?(el: HTMLElement): void;
+    onLoad?(): void;
+}
+
+export interface HandleLinkResult {
+    disableLink?: boolean;
+}
+
+export interface PluginHost {
+    outputElement: HTMLElement;
+    registerHelper(name: string, helper: HelperDelegate): void;
+    registerLinkHandler(type: string, handler: (el: HTMLElement) => HandleLinkResult): void;
+    get(attribute: string): any;
+    set(attribute: string, value: any): void;
+    getSectionText(name: string): string | null;
+    getPassageText(name: string): string | null;
+    processText: (text: string, inline: boolean) => string;
+    addTransition: (fn: () => Promise<void>) => void;
+    animation: Animation;
+    on<E extends keyof SquiffyEventMap>(
+        event: E,
+        handler: SquiffyEventHandler<E>
+    ): () => void; // returns unsubscribe
+
+    off<E extends keyof SquiffyEventMap>(
+        event: E,
+        handler: SquiffyEventHandler<E>
+    ): void;
+
+    once<E extends keyof SquiffyEventMap>(
+        event: E,
+        handler: SquiffyEventHandler<E>
+    ): () => void;
+}

package/src/types.ts

@@ -1,4 +1,4 @@
-import {SquiffyEventHandler, SquiffyEventMap} from "./events.js";
+import { SquiffyEventHandler, SquiffyEventMap } from "./events.js";
 
 export interface SquiffyInitOptions {
     element: HTMLElement;
@@ -15,11 +15,13 @@ export interface SquiffySettings {
 }
 
 export interface SquiffyApi {
+    begin: () => Promise<void>;
     restart: () => void;
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
-    clickLink: (link: HTMLElement) => boolean;
+    clickLink: (link: HTMLElement) => Promise<boolean>;
     update: (story: Story) => void;
+    goBack: () => void;
 
     on<E extends keyof SquiffyEventMap>(
         event: E,
@@ -58,6 +60,7 @@ export interface Story {
     ) => void)[];
     start: string;
     id?: string | null;
+    uiJsIndex?: number;
     sections: Record<string, Section>;
 }
 

package/src/updater.ts

@@ -0,0 +1,77 @@
+import { Story } from "./types.js";
+
+export function updateStory(oldStory: Story,
+                            newStory: Story,
+                            outputElement: HTMLElement,
+                            ui: any,
+                            disableLink: (link: Element) => void) {
+
+    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);
+        }
+    }
+
+    for (const existingSection of Object.keys(oldStory.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 != oldStory.sections[existingSection].text) {
+                // section has been updated
+                for (const element of elements) {
+                    updateElementTextPreservingDisabledPassageLinks(element, ui.processText(newSection.text, false));
+                }
+            }
+        }
+
+        if (!oldStory.sections[existingSection].passages) continue;
+
+        for (const existingPassage of Object.keys(oldStory.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 parentOutputPassage = element.closest(".squiffy-output-passage");
+                    parentOutputPassage.remove();
+                }
+            }
+            else if (newPassage.text && newPassage.text != oldStory.sections[existingSection].passages[existingPassage].text) {
+                // passage has been updated
+                for (const element of elements) {
+                    updateElementTextPreservingDisabledPassageLinks(element, ui.processText(newPassage.text, false));
+                }
+            }
+        }
+    }
+}

package/src/utils.ts

@@ -1,14 +1,17 @@
-export function startsWith(string: string, prefix: string) {
-    return string.substring(0, prefix.length) === prefix;
-}
+export function fadeReplace(element: HTMLElement, text: string): Promise<void> {
+    return new Promise((resolve) => {
+        element.addEventListener("transitionend", function () {
+            element.innerHTML = text;
 
-export function rotate(options: string, current: string | null) {
-    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];
+            element.addEventListener("transitionend", function () {
+                element.classList.remove("fade-in");
+                resolve();
+            }, { once: true });
+
+            element.classList.remove("fade-out");
+            element.classList.add("fade-in");
+        }, { once: true });
+
+        element.classList.add("fade-out");
+    });
 }

package/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+    build: {
+        target: "es2020",
+        sourcemap: true,
+        minify: "esbuild",
+
+        lib: {
+            entry: "src/squiffy.runtime.ts",
+            name: "squiffyRuntime"
+        },
+
+        rollupOptions: {
+            output: [
+                {
+                    format: "es",
+                    entryFileNames: "squiffy.runtime.js"
+                },
+                {
+                    format: "iife",
+                    name: "squiffyRuntime",
+                    entryFileNames: "squiffy.runtime.global.js"
+                }
+            ]
+        }
+    },
+
+    plugins: [
+        dts({
+            entryRoot: "src",
+            outDir: "dist"
+        })
+    ]
+});

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    test: {
+        globals: true,
+        environment: "jsdom",
+        setupFiles: "./vitest.setup.ts",
+    },
+});

package/vitest.setup.ts

@@ -0,0 +1,16 @@
+import cssEscape from "css.escape";
+
+declare global {
+    interface CSS {
+        escape(value: string): string;
+    }
+}
+
+const g = globalThis as any;
+
+if (!g.CSS) g.CSS = {};
+if (typeof g.CSS.escape !== "function") {
+    g.CSS.escape = cssEscape;
+}
+
+export {};

package/dist/events.js

@@ -1,35 +0,0 @@
-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);
-                }
-            });
-        });
-    }
-}