yarn-spinner-runner-ts 0.1.4 → 0.1.5-a

package/eslint.config.cjs

@@ -1,39 +1,39 @@
-// ESLint v9 flat config
-const js = require("@eslint/js");
-const tsParser = require("@typescript-eslint/parser");
-const tsPlugin = require("@typescript-eslint/eslint-plugin");
-
-module.exports = [
-  {
-    ignores: ["dist/**", "node_modules/**", "examples/**", "src/examples/**", "src/tests/**"],
-  },
-  {
-    files: ["src/**/*.ts", "src/**/*.tsx"],
-    languageOptions: {
-      parser: tsParser,
-      ecmaVersion: "latest",
-      sourceType: "module",
-      globals: {
-        console: "readonly",
-        window: "readonly",
-        setTimeout: "readonly",
-        clearTimeout: "readonly",
-        setInterval: "readonly",
-        clearInterval: "readonly",
-        requestAnimationFrame: "readonly",
-      },
-    },
-    plugins: {
-      "@typescript-eslint": tsPlugin,
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...tsPlugin.configs.recommended.rules,
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "no-console": ["warn", { allow: ["warn", "error", "assert", "log"] }],
-    },
-  },
-];
-
-
+// ESLint v9 flat config
+const js = require("@eslint/js");
+const tsParser = require("@typescript-eslint/parser");
+const tsPlugin = require("@typescript-eslint/eslint-plugin");
+
+module.exports = [
+  {
+    ignores: ["dist/**", "node_modules/**", "examples/**", "src/examples/**", "src/tests/**"],
+  },
+  {
+    files: ["src/**/*.ts", "src/**/*.tsx"],
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        console: "readonly",
+        window: "readonly",
+        setTimeout: "readonly",
+        clearTimeout: "readonly",
+        setInterval: "readonly",
+        clearInterval: "readonly",
+        requestAnimationFrame: "readonly",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tsPlugin.configs.recommended.rules,
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "no-console": ["warn", { allow: ["warn", "error", "assert", "log"] }],
+    },
+  },
+];
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yarn-spinner-runner-ts",
-  "version": "0.1.4",
+  "version": "0.1.5-a",
   "private": false,
   "description": "TypeScript parser, compiler, and runtime for Yarn Spinner 3.x with React adapter [NPM package](https://www.npmjs.com/package/yarn-spinner-runner-ts)",
   "license": "MIT",
@@ -37,20 +37,20 @@
     "js-yaml": "^4.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.12.0",
-    "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.7.4",
+    "@types/js-yaml": "^4.0.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@eslint/js": "^9.12.0",
     "@typescript-eslint/parser": "^8.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.12.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
     "typescript": "^5.6.3",
-    "vite": "^5.4.3",
-    "vitest": "^4.0.7"
+    "vite": "^5.4.3"
   }
 }
+

package/src/compile/compiler.ts

@@ -72,7 +72,7 @@ export function compile(doc: YarnDocument, opts: CompileOptions = {}): IRProgram
             }
             block.push({
               op: "options",
-              options: s.options.map((o: Option) => ({ text: o.text, tags: ensureLineId(o.tags), css: (o as any).css, markup: o.markup, block: emitBlock(o.body) })),
+              options: s.options.map((o: Option) => ({ text: o.text, tags: ensureLineId(o.tags), css: (o as any).css, markup: o.markup, condition: o.condition, block: emitBlock(o.body) })),
             });
             break;
           }
@@ -141,7 +141,7 @@ export function compile(doc: YarnDocument, opts: CompileOptions = {}): IRProgram
                 }
                 block.push({
                   op: "options",
-                  options: s.options.map((o: Option) => ({ text: o.text, tags: ensureLineId(o.tags), css: (o as any).css, markup: o.markup, block: emitBlock(o.body) })),
+                  options: s.options.map((o: Option) => ({ text: o.text, tags: ensureLineId(o.tags), css: (o as any).css, markup: o.markup, condition: o.condition, block: emitBlock(o.body) })),
                 });
                 break;
               }

package/src/compile/ir.ts

@@ -22,7 +22,7 @@ export type IRInstruction =
   | { op: "command"; content: string }
   | { op: "jump"; target: string }
   | { op: "detour"; target: string }
-  | { op: "options"; options: Array<{ text: string; tags?: string[]; css?: string; markup?: MarkupParseResult; block: IRInstruction[] }> }
+  | { op: "options"; options: Array<{ text: string; tags?: string[]; css?: string; markup?: MarkupParseResult; condition?: string; block: IRInstruction[] }> }
   | { op: "if"; branches: Array<{ condition: string | null; block: IRInstruction[] }> }
   | { op: "once"; id: string; block: IRInstruction[] };
 

package/src/markup/parser.ts

@@ -1,6 +1,7 @@
-import type { MarkupParseResult, MarkupSegment, MarkupValue, MarkupWrapper } from "./types.js";
-
-const DEFAULT_HTML_TAGS = new Set(["b", "em", "small", "strong", "sub", "sup", "ins", "del", "mark"]);
+import type { MarkupParseResult, MarkupSegment, MarkupValue, MarkupWrapper } from "./types.js";
+
+const DEFAULT_HTML_TAGS = new Set(["b", "em", "small", "strong", "sub", "sup", "ins", "del", "mark", "br"]);
+const SELF_CLOSING_TAGS = new Set(["br"]);
 
 interface StackEntry {
   name: string;
@@ -125,8 +126,9 @@ export function parseMarkup(input: string): MarkupParseResult {
       rest = rest.slice(attrMatch[0].length).trim();
     }
 
-    return { kind, name, properties };
-  };
+    const finalKind: ParsedTag["kind"] = kind === "self" || SELF_CLOSING_TAGS.has(name) ? "self" : kind;
+    return { kind: finalKind, name, properties };
+  };
 
   const parseAttributeValue = (raw: string): MarkupValue => {
     const trimmed = raw.trim();
@@ -142,20 +144,20 @@ export function parseMarkup(input: string): MarkupParseResult {
     return trimmed;
   };
 
-  const handleSelfClosing = (tag: ParsedTag) => {
-    const wrapper: MarkupWrapper = {
-      name: tag.name,
-      type: DEFAULT_HTML_TAGS.has(tag.name) ? "default" : "custom",
-      properties: tag.properties,
-    };
-    const position = chars.length;
-    pushSegment({
-      start: position,
-      end: position,
-      wrappers: [wrapper],
-      selfClosing: true,
-    });
-  };
+  const handleSelfClosing = (tag: ParsedTag) => {
+    const wrapper: MarkupWrapper = {
+      name: tag.name,
+      type: DEFAULT_HTML_TAGS.has(tag.name) ? "default" : "custom",
+      properties: tag.properties,
+    };
+    const position = chars.length;
+    pushSegment({
+      start: position,
+      end: position,
+      wrappers: [wrapper],
+      selfClosing: true,
+    });
+  };
 
   let i = 0;
   while (i < input.length) {
@@ -215,30 +217,38 @@ export function parseMarkup(input: string): MarkupParseResult {
         continue;
       }
 
-      if (parsed.kind === "self") {
-        handleSelfClosing(parsed);
-        i = closeIndex + 1;
-        continue;
-      }
-
-      // closing tag
-      if (stack.length === 0) {
-        appendLiteral(originalText);
-        i = closeIndex + 1;
-        continue;
-      }
-      const top = stack[stack.length - 1];
-      if (top.name === parsed.name) {
-        flushCurrentSegment();
-        stack.pop();
-        i = closeIndex + 1;
-        continue;
-      }
-      // mismatched closing; treat as literal
-      appendLiteral(originalText);
-      i = closeIndex + 1;
-      continue;
-    }
+      if (parsed.kind === "self") {
+        handleSelfClosing(parsed);
+        i = closeIndex + 1;
+        continue;
+      }
+
+      // closing tag
+      if (stack.length === 0) {
+        if (SELF_CLOSING_TAGS.has(parsed.name)) {
+          i = closeIndex + 1;
+          continue;
+        }
+        appendLiteral(originalText);
+        i = closeIndex + 1;
+        continue;
+      }
+      const top = stack[stack.length - 1];
+      if (top.name === parsed.name) {
+        flushCurrentSegment();
+        stack.pop();
+        i = closeIndex + 1;
+        continue;
+      }
+      if (SELF_CLOSING_TAGS.has(parsed.name)) {
+        i = closeIndex + 1;
+        continue;
+      }
+      // mismatched closing; treat as literal
+      appendLiteral(originalText);
+      i = closeIndex + 1;
+      continue;
+    }
 
     appendChar(char);
     i += 1;

package/src/model/ast.ts

@@ -73,6 +73,7 @@ export interface Option {
   tags?: string[];
   css?: string; // Custom CSS style for option
   markup?: MarkupParseResult;
+  condition?: string;
 }
 
 export interface IfBlock {

package/src/parse/lexer.ts

@@ -34,24 +34,24 @@ export function lex(input: string): Token[] {
     const indent = raw.match(/^[ \t]*/)?.[0] ?? "";
     const content = raw.slice(indent.length);
 
-    // Manage indentation tokens only within node bodies
-    if (!inHeaders) {
-      const prev = indentStack[indentStack.length - 1];
-      if (indent.length > prev) {
-        indentStack.push(indent.length);
-        push("INDENT", "", lineNum, 1);
-      } else if (indent.length < prev) {
-        while (indentStack.length && indent.length < indentStack[indentStack.length - 1]) {
-          indentStack.pop();
-          push("DEDENT", "", lineNum, 1);
-        }
-      }
-    }
-
-    if (content.trim() === "") {
-      push("EMPTY", "", lineNum, 1);
-      continue;
-    }
+    if (content.trim() === "") {
+      push("EMPTY", "", lineNum, 1);
+      continue;
+    }
+
+    // Manage indentation tokens only within node bodies and on non-empty lines
+    if (!inHeaders) {
+      const prev = indentStack[indentStack.length - 1];
+      if (indent.length > prev) {
+        indentStack.push(indent.length);
+        push("INDENT", "", lineNum, 1);
+      } else if (indent.length < prev) {
+        while (indentStack.length && indent.length < indentStack[indentStack.length - 1]) {
+          indentStack.pop();
+          push("DEDENT", "", lineNum, 1);
+        }
+      }
+    }
 
     if (content === "---") {
       inHeaders = false;

package/src/parse/parser.ts

@@ -215,24 +215,26 @@ class Parser {
     // One or more OPTION lines, with bodies under INDENT
     while (this.at("OPTION")) {
       const raw = this.take("OPTION").text;
-      const { cleanText: textWithAttrs, tags } = this.extractTags(raw);
-      const { text: textWithoutCss, css } = this.extractCss(textWithAttrs);
-      const markup = parseMarkup(textWithoutCss);
-      let body: Statement[] = [];
-      if (this.at("INDENT")) {
-        this.take("INDENT");
-        body = this.parseStatementsUntil("DEDENT");
+      const { cleanText: textWithAttrs, tags } = this.extractTags(raw);
+      const { text: textWithCondition, css } = this.extractCss(textWithAttrs);
+      const { text: optionText, condition } = this.extractOptionCondition(textWithCondition);
+      const markup = parseMarkup(optionText);
+      let body: Statement[] = [];
+      if (this.at("INDENT")) {
+        this.take("INDENT");
+        body = this.parseStatementsUntil("DEDENT");
         this.take("DEDENT");
         while (this.at("EMPTY")) this.i++;
       }
-      options.push({
-        type: "Option",
-        text: markup.text,
-        body,
-        tags,
-        css,
-        markup: this.normalizeMarkup(markup),
-      });
+      options.push({
+        type: "Option",
+        text: markup.text,
+        body,
+        tags,
+        css,
+        markup: this.normalizeMarkup(markup),
+        condition,
+      });
       // Consecutive options belong to the same group; break on non-OPTION
       while (this.at("EMPTY")) this.i++;
     }
@@ -283,15 +285,24 @@ class Parser {
     return { cleanText: input };
   }
 
-  private extractCss(input: string): { text: string; css?: string } {
-    const cssMatch = input.match(/\s*&css\{([^}]*)\}\s*$/);
-    if (cssMatch) {
-      const css = cssMatch[1].trim();
-      const text = input.replace(cssMatch[0], "").trimEnd();
+  private extractCss(input: string): { text: string; css?: string } {
+    const cssMatch = input.match(/\s*&css\{([^}]*)\}\s*$/);
+    if (cssMatch) {
+      const css = cssMatch[1].trim();
+      const text = input.replace(cssMatch[0], "").trimEnd();
       return { text, css };
     }
-    return { text: input };
-  }
+    return { text: input };
+  }
+
+  private extractOptionCondition(input: string): { text: string; condition?: string } {
+    const match = input.match(/\s\[\s*if\s+([^\]]+)\]\s*$/i);
+    if (match) {
+      const text = input.slice(0, match.index).trimEnd();
+      return { text, condition: match[1].trim() };
+    }
+    return { text: input };
+  }
 
   private parseStatementsUntilStop(shouldStop: () => boolean): Statement[] {
     const out: Statement[] = [];

package/src/react/DialogueExample.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useMemo } from "react";
 import { parseYarn } from "../parse/parser.js";
 import { compile } from "../compile/compiler.js";
-import { useYarnRunner } from "./useYarnRunner.js";
 import { DialogueView } from "./DialogueView.js";
 import { parseScenes } from "../scene/parser.js";
 import type { SceneCollection } from "../scene/types.js";
@@ -9,11 +8,12 @@ import type { SceneCollection } from "../scene/types.js";
 const DEFAULT_YARN = `title: Start
 scene: scene1
 ---
-Narrator: [wave]hello[/wave] [b]hello[/b]  baarter
-Narrator: Welcome to yarn-spinner-ts!
+<< declare $hasBadge = false >>
+Narrator: Welcome to [b]yarn-spinner-ts[/b], {$playerName}!
+Narrator: Current street cred: {$reputation}
 npc: This is a dialogue system powered by Yarn Spinner.
 Narrator: Click anywhere to continue, or choose an option below.
--> Start the adventure &css{backgroundColor: #4a9eff; color: white;}
+-> Start the adventure &css{backgroundColor: #4a9eff; color: white;} [if $hasBadge]
     Narrator: Great! Let's begin your journey.
     <<jump NextScene>>
 -> Learn more &css{backgroundColor: #2ecc71; color: red;}
@@ -47,7 +47,7 @@ actors:
 export function DialogueExample() {
   const [yarnText] = useState(DEFAULT_YARN);
   const [error, setError] = useState<string | null>(null);
-  const enableTypingAnimation = true;
+  const enableTypingAnimation = false;
   
   const scenes: SceneCollection = useMemo(() => {
     try {
@@ -69,13 +69,10 @@ export function DialogueExample() {
     }
   }, [yarnText]);
 
-  const { result, advance } = useYarnRunner(
-    program || { nodes: {}, enums: {} },
-    {
-      startAt: "Start",
-      variables: {},
-    }
-  );
+  const customFunctions = useMemo(() => ({
+    greet: () => {console.log('test')},
+    double: (num: unknown) => Number(num) * 2
+  }), []);
 
   return (
     <div
@@ -106,9 +103,10 @@ export function DialogueExample() {
         )}
 
         <DialogueView 
-          result={result} 
-          onAdvance={advance} 
+          program={program || { nodes: {}, enums: {} }}
+          startNode="Start"
           scenes={scenes}
+          variables={{ playerName: "V", reputation: 3 }}
           enableTypingAnimation={enableTypingAnimation}
           showTypingCursor={true}
           typingSpeed={20}
@@ -117,6 +115,10 @@ export function DialogueExample() {
           autoAdvanceDelay={2000}
           actorTransitionDuration={1000} 
           pauseBeforeAdvance={enableTypingAnimation ? 1000 : 0}
+          onStoryEnd={(info) => {
+            console.log('Story ended with variables:', info.variables);
+          }}
+          functions={customFunctions}
         />
       </div>
     </div>