yarn-spinner-runner-ts 0.1.4 → 0.1.5

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>