npm - squiffy-runtime - Versions diffs - 6.0.0-alpha.1 → 6.0.0-alpha.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/events.d.ts +15 -0
package/dist/events.js +35 -0
package/dist/squiffy.runtime.d.ts +2 -0
package/dist/squiffy.runtime.js +529 -0
package/dist/squiffy.runtime.test.d.ts +1 -0
package/dist/squiffy.runtime.test.js +320 -0
package/dist/textProcessor.d.ts +15 -0
package/dist/textProcessor.js +165 -0
package/dist/types.d.ts +54 -0
package/dist/types.js +1 -0
package/dist/utils.d.ts +2 -0
package/dist/utils.js +14 -0
package/package.json +20 -6
package/src/__snapshots__/squiffy.runtime.test.ts.snap +104 -0
package/src/events.ts +42 -0
package/src/squiffy.runtime.test.ts +413 -0
package/src/squiffy.runtime.ts +203 -304
package/src/textProcessor.ts +177 -0
package/src/types.ts +78 -0
package/src/utils.ts +14 -0
package/tsconfig.json +5 -1

package/dist/squiffy.runtime.test.js ADDED Viewed

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

package/dist/textProcessor.d.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/dist/utils.d.ts ADDED Viewed

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

package/dist/utils.js ADDED Viewed

@@ -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];
+}

package/package.json CHANGED Viewed

@@ -1,15 +1,29 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.1",
-  "main": "squiffy.runtime.js",
+  "version": "6.0.0-alpha.11",
+  "type": "module",
+  "main": "dist/squiffy.runtime.js",
+  "types": "dist/squiffy.runtime.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc"
+    "dev": "vitest",
+    "test": "vitest --run",
+    "build": "tsc",
+    "prepublishOnly": "npm run build && npm run test"
   },
   "author": "Alex Warren",
+  "contributors": [
+    "CrisisSDK",
+    "mrangel",
+    "Luis Felipe Morales"
+  ],
   "license": "MIT",
   "description": "",
-  "dependencies": {
-    "typescript": "^5.6.2"
+  "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "global-jsdom": "^25.0.0",
+    "jsdom": "^25.0.0",
+    "squiffy-compiler": "^6.0.0-alpha.3",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1"
   }
 }