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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yarn-spinner-runner-ts",
-  "version": "0.1.4-a",
+  "version": "0.1.4-c",
   "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",

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,23 @@ 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) => {
+    if (tag.name === "br") {
+      appendChar("\n");
+    }
+    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 +220,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/react/DialogueExample.tsx

@@ -8,8 +8,8 @@ import type { SceneCollection } from "../scene/types.js";
 const DEFAULT_YARN = `title: Start
 scene: scene1
 ---
-Narrator: {greet()}
-Narrator: Welcome to [b]yarn-spinner-ts[/b]!
+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;}
@@ -46,7 +46,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 {
@@ -101,12 +101,13 @@ export function DialogueExample() {
           </div>
         )}
 
-        <DialogueView 
-          program={program || { nodes: {}, enums: {} }}
-          startNode="Start"
-          scenes={scenes}
-          enableTypingAnimation={enableTypingAnimation}
-          showTypingCursor={true}
+        <DialogueView 
+          program={program || { nodes: {}, enums: {} }}
+          startNode="Start"
+          scenes={scenes}
+          variables={{ playerName: "V", reputation: 3 }}
+          enableTypingAnimation={enableTypingAnimation}
+          showTypingCursor={true}
           typingSpeed={20}
           cursorCharacter="$"
           autoAdvanceAfterTyping={true}