yarn-spinner-runner-ts 0.1.2 → 0.1.3

package/src/react/TypingText.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useRef } from "react";
+import type { MarkupParseResult } from "../markup/types.js";
+import { MarkupRenderer } from "./MarkupRenderer.js";
+
+export interface TypingTextProps {
+  text: string;
+  markup?: MarkupParseResult;
+  typingSpeed?: number;
+  showCursor?: boolean;
+  cursorCharacter?: string;
+  cursorBlinkDuration?: number;
+  cursorClassName?: string;
+  className?: string;
+  onComplete?: () => void;
+  disabled?: boolean;
+}
+
+export function TypingText({
+  text,
+  markup,
+  typingSpeed = 100,
+  showCursor = true,
+  cursorCharacter = "|",
+  cursorBlinkDuration = 530,
+  cursorClassName = "",
+  className = "",
+  onComplete,
+  disabled = false,
+}: TypingTextProps) {
+  const [displayedLength, setDisplayedLength] = useState(disabled ? text.length : 0);
+  const [cursorVisible, setCursorVisible] = useState(true);
+  const cursorIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onCompleteRef = useRef(onComplete);
+  
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+
+  // Handle cursor blinking
+  useEffect(() => {
+    if (!showCursor || disabled) {
+      return;
+    }
+    cursorIntervalRef.current = setInterval(() => {
+      setCursorVisible((prev) => !prev);
+    }, cursorBlinkDuration);
+    return () => {
+      if (cursorIntervalRef.current) {
+        clearInterval(cursorIntervalRef.current);
+      }
+    };
+  }, [showCursor, cursorBlinkDuration, disabled]);
+
+  // Handle typing animation
+  useEffect(() => {
+    if (disabled) {
+      setDisplayedLength(text.length);
+      if (onCompleteRef.current && text.length > 0) {
+        onCompleteRef.current();
+      }
+      return;
+    }
+
+    // Reset when text changes
+    setDisplayedLength(0);
+
+    if (text.length === 0) {
+      if (onCompleteRef.current) {
+        onCompleteRef.current();
+      }
+      return;
+    }
+
+    let index = 0;
+    const typeNextCharacter = () => {
+      if (index < text.length) {
+        index += 1;
+        setDisplayedLength(index);
+        if (typingSpeed <= 0) {
+          requestAnimationFrame(typeNextCharacter);
+        } else {
+          typingTimeoutRef.current = setTimeout(typeNextCharacter, typingSpeed);
+        }
+      } else if (onCompleteRef.current) {
+        onCompleteRef.current();
+      }
+    };
+
+    if (typingSpeed <= 0) {
+      requestAnimationFrame(typeNextCharacter);
+    } else {
+      typingTimeoutRef.current = setTimeout(typeNextCharacter, typingSpeed);
+    }
+
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, [text, disabled, typingSpeed]);
+
+  const visibleLength = markup ? Math.min(displayedLength, markup.text.length) : Math.min(displayedLength, text.length);
+
+  return (
+    <span className={className}>
+      <span>
+        {markup ? (
+          <MarkupRenderer text={text} markup={markup} length={visibleLength} />
+        ) : (
+          text.slice(0, visibleLength)
+        )}
+      </span>
+      {showCursor && !disabled && (
+        <span
+          className={`yd-typing-cursor ${cursorClassName}`}
+          style={{
+            opacity: cursorVisible ? 1 : 0,
+            transition: `opacity ${cursorBlinkDuration / 2}ms ease-in-out`,
+          }}
+        >
+          {cursorCharacter}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/react/dialogue.css

@@ -43,19 +43,32 @@
 }
 
 /* Actor image */
-.yd-actor {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  max-height: 70%;
-  max-width: 40%;
-  object-fit: contain;
-  z-index: 1;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 1;
-  pointer-events: none;
-}
+.yd-actor {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: 70%;
+  max-width: 40%;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity var(--yd-actor-transition, 0.35s) ease-in-out;
+  pointer-events: none;
+  z-index: 1;
+  will-change: opacity;
+}
+
+.yd-actor--current {
+  z-index: 2;
+}
+
+.yd-actor--previous {
+  z-index: 1;
+}
+
+.yd-actor--visible {
+  opacity: 1;
+}
 
 /* Dialogue box container */
 .yd-dialogue-box {

package/src/runtime/results.ts

@@ -1,8 +1,10 @@
+import type { MarkupParseResult } from "../markup/types.js";
 export type TextResult = {
   type: "text";
   text: string;
   speaker?: string;
   tags?: string[];
+  markup?: MarkupParseResult;
   nodeCss?: string; // Node-level CSS from &css{} header
   scene?: string; // Scene name from node header
   isDialogueEnd: boolean;
@@ -10,7 +12,7 @@ export type TextResult = {
 
 export type OptionsResult = {
   type: "options";
-  options: { text: string; tags?: string[]; css?: string }[];
+  options: { text: string; tags?: string[]; css?: string; markup?: MarkupParseResult }[];
   nodeCss?: string; // Node-level CSS from &css{} header
   scene?: string; // Scene name from node header
   isDialogueEnd: boolean;

package/src/runtime/runner.ts

@@ -1,4 +1,5 @@
 import type { IRProgram, IRInstruction, IRNode, IRNodeGroup } from "../compile/ir";
+import type { MarkupParseResult, MarkupSegment, MarkupWrapper } from "../markup/types.js";
 import type { RuntimeResult } from "./results.js";
 import { ExpressionEvaluator } from "./evaluator.js";
 import { CommandHandler, parseCommand } from "./commands.js";
@@ -205,15 +206,152 @@ export class YarnRunner {
     this.step();
   }
 
-  private interpolate(text: string): string {
-    return text.replace(/\{([^}]+)\}/g, (_m, expr) => {
+  private interpolate(text: string, markup?: MarkupParseResult): { text: string; markup?: MarkupParseResult } {
+    const evaluateExpression = (expr: string): string => {
       try {
-        const val = this.evaluator.evaluateExpression(String(expr));
-        return String(val ?? "");
+        const value = this.evaluator.evaluateExpression(expr.trim());
+        if (value === null || value === undefined) {
+          return "";
+        }
+        return String(value);
       } catch {
         return "";
       }
-    });
+    };
+
+    if (!markup) {
+      const interpolated = text.replace(/\{([^}]+)\}/g, (_m, expr) => evaluateExpression(expr));
+      return { text: interpolated };
+    }
+
+    const segments = markup.segments.filter((segment) => !segment.selfClosing);
+    const getWrappersAt = (index: number): MarkupWrapper[] => {
+      for (const segment of segments) {
+        if (segment.start <= index && index < segment.end) {
+          return segment.wrappers.map((wrapper) => ({
+            name: wrapper.name,
+            type: wrapper.type,
+            properties: { ...wrapper.properties },
+          }));
+        }
+      }
+      if (segments.length === 0) {
+        return [];
+      }
+      if (index > 0) {
+        return getWrappersAt(index - 1);
+      }
+      return segments[0].wrappers.map((wrapper) => ({
+        name: wrapper.name,
+        type: wrapper.type,
+        properties: { ...wrapper.properties },
+      }));
+    };
+
+    const resultChars: string[] = [];
+    const newSegments: MarkupSegment[] = [];
+    let currentSegment: MarkupSegment | null = null;
+
+    const wrappersEqual = (a: MarkupWrapper[], b: MarkupWrapper[]) => {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        const wa = a[i];
+        const wb = b[i];
+        if (wa.name !== wb.name || wa.type !== wb.type) return false;
+        const keysA = Object.keys(wa.properties);
+        const keysB = Object.keys(wb.properties);
+        if (keysA.length !== keysB.length) return false;
+        for (const key of keysA) {
+          if (wa.properties[key] !== wb.properties[key]) return false;
+        }
+      }
+      return true;
+    };
+
+    const flushSegment = () => {
+      if (currentSegment) {
+        newSegments.push(currentSegment);
+        currentSegment = null;
+      }
+    };
+
+    const appendCharWithWrappers = (char: string, wrappers: MarkupWrapper[]) => {
+      const index = resultChars.length;
+      resultChars.push(char);
+      const wrappersCopy = wrappers.map((wrapper) => ({
+        name: wrapper.name,
+        type: wrapper.type,
+        properties: { ...wrapper.properties },
+      }));
+      if (currentSegment && wrappersEqual(currentSegment.wrappers, wrappersCopy)) {
+        currentSegment.end = index + 1;
+      } else {
+        flushSegment();
+        currentSegment = { start: index, end: index + 1, wrappers: wrappersCopy };
+      }
+    };
+
+    const appendStringWithWrappers = (value: string, wrappers: MarkupWrapper[]) => {
+      if (!value) {
+        flushSegment();
+        return;
+      }
+      for (const ch of value) {
+        appendCharWithWrappers(ch, wrappers);
+      }
+    };
+
+    let i = 0;
+    while (i < text.length) {
+      const char = text[i];
+      if (char === '{') {
+        const close = text.indexOf('}', i + 1);
+        if (close === -1) {
+          appendCharWithWrappers(char, getWrappersAt(Math.max(0, Math.min(i, text.length - 1))));
+          i += 1;
+          continue;
+        }
+        const expr = text.slice(i + 1, close);
+        const evaluated = evaluateExpression(expr);
+        const wrappers = getWrappersAt(Math.max(0, Math.min(i, text.length - 1)));
+        appendStringWithWrappers(evaluated, wrappers);
+        i = close + 1;
+        continue;
+      }
+      appendCharWithWrappers(char, getWrappersAt(i));
+      i += 1;
+    }
+
+    flushSegment();
+    const interpolatedText = resultChars.join('');
+    const normalizedMarkup = this.normalizeMarkupResult({ text: interpolatedText, segments: newSegments });
+    return { text: interpolatedText, markup: normalizedMarkup };
+  }
+
+  private normalizeMarkupResult(result: MarkupParseResult): MarkupParseResult | undefined {
+    if (!result) return undefined;
+    if (result.segments.length === 0) {
+      return undefined;
+    }
+    const hasFormatting = result.segments.some(
+      (segment) => segment.wrappers.length > 0 || segment.selfClosing
+    );
+    if (!hasFormatting) {
+      return undefined;
+    }
+    return {
+      text: result.text,
+      segments: result.segments.map((segment) => ({
+        start: segment.start,
+        end: segment.end,
+        wrappers: segment.wrappers.map((wrapper) => ({
+          name: wrapper.name,
+          type: wrapper.type,
+          properties: { ...wrapper.properties },
+        })),
+        selfClosing: segment.selfClosing,
+      })),
+    };
   }
 
   private resumeBlock(): boolean {
@@ -229,9 +367,11 @@ export class YarnRunner {
         return true;
       }
       switch (ins.op) {
-        case "line":
-          this.emit({ type: "text", text: this.interpolate(ins.text), speaker: ins.speaker, tags: ins.tags, isDialogueEnd: false });
+        case "line": {
+          const { text: interpolatedText, markup: interpolatedMarkup } = this.interpolate(ins.text, ins.markup);
+          this.emit({ type: "text", text: interpolatedText, speaker: ins.speaker, tags: ins.tags, markup: interpolatedMarkup, isDialogueEnd: false });
           return true;
+        }
         case "command": {
           try {
             const parsed = parseCommand(ins.content);
@@ -244,7 +384,7 @@ export class YarnRunner {
           return true;
         }
         case "options": {
-          this.emit({ type: "options", options: ins.options.map((o) => ({ text: o.text, tags: o.tags })), isDialogueEnd: false });
+          this.emit({ type: "options", options: ins.options.map((o) => ({ text: o.text, tags: o.tags, markup: o.markup })), isDialogueEnd: false });
           return true;
         }
         case "if": {
@@ -294,9 +434,11 @@ export class YarnRunner {
       }
       this.ip++;
       switch (ins.op) {
-        case "line":
-          this.emit({ type: "text", text: this.interpolate(ins.text), speaker: ins.speaker, tags: ins.tags, nodeCss: resolved.css, scene: resolved.scene, isDialogueEnd: this.lookaheadIsEnd() });
+        case "line": {
+          const { text: interpolatedText, markup: interpolatedMarkup } = this.interpolate(ins.text, ins.markup);
+          this.emit({ type: "text", text: interpolatedText, speaker: ins.speaker, tags: ins.tags, markup: interpolatedMarkup, nodeCss: resolved.css, scene: resolved.scene, isDialogueEnd: this.lookaheadIsEnd() });
           return;
+        }
         case "command": {
           try {
             const parsed = parseCommand(ins.content);
@@ -327,7 +469,7 @@ export class YarnRunner {
           continue;
         }
         case "options": {
-          this.emit({ type: "options", options: ins.options.map((o: { text: string; tags?: string[]; css?: string }) => ({ text: o.text, tags: o.tags, css: o.css })), nodeCss: resolved.css, scene: resolved.scene, isDialogueEnd: this.lookaheadIsEnd() });
+          this.emit({ type: "options", options: ins.options.map((o: { text: string; tags?: string[]; css?: string; markup?: MarkupParseResult }) => ({ text: o.text, tags: o.tags, css: o.css, markup: o.markup })), nodeCss: resolved.css, scene: resolved.scene, isDialogueEnd: this.lookaheadIsEnd() });
           return;
         }
         case "if": {
@@ -368,10 +510,12 @@ export class YarnRunner {
       const ins = tempNode.instructions[idx++];
       if (!ins) break;
       switch (ins.op) {
-        case "line":
-          this.emit({ type: "text", text: ins.text, speaker: ins.speaker, isDialogueEnd: false });
+        case "line": {
+          const { text: interpolatedText, markup: interpolatedMarkup } = this.interpolate(ins.text, ins.markup);
+          this.emit({ type: "text", text: interpolatedText, speaker: ins.speaker, markup: interpolatedMarkup, isDialogueEnd: false });
           restore();
           return;
+        }
         case "command":
           try {
             const parsed = parseCommand(ins.content);
@@ -384,7 +528,7 @@ export class YarnRunner {
           restore();
           return;
         case "options":
-          this.emit({ type: "options", options: ins.options.map((o) => ({ text: o.text })), isDialogueEnd: false });
+          this.emit({ type: "options", options: ins.options.map((o) => ({ text: o.text, markup: o.markup })), isDialogueEnd: false });
           // Maintain context that options belong to main node at ip-1
           restore();
           return;

package/src/tests/markup.test.ts

@@ -0,0 +1,62 @@
+import { test } from "node:test";
+import { strictEqual, ok } from "node:assert";
+import { parseMarkup } from "../markup/parser.js";
+import type { MarkupParseResult } from "../markup/types.js";
+
+test("parseMarkup handles default HTML tags", () => {
+  const result = parseMarkup("This is [b]bold[/b] and [em]emphasized[/em].");
+
+  strictEqual(result.text, "This is bold and emphasized.");
+  const bold = findSegment(result, "bold");
+  ok(bold, "Expected bold segment");
+  strictEqual(bold.wrappers.length, 1);
+  strictEqual(bold.wrappers[0].name, "b");
+  strictEqual(bold.wrappers[0].type, "default");
+
+  const em = findSegment(result, "emphasized");
+  ok(em, "Expected em segment");
+  strictEqual(em.wrappers[0].name, "em");
+  strictEqual(em.wrappers[0].type, "default");
+});
+
+test("parseMarkup exposes custom tags with properties", () => {
+  const result = parseMarkup("Say [wave speed=2 tone=\"high\"]hello[/wave]!");
+  strictEqual(result.text, "Say hello!");
+
+  const segment = findSegment(result, "hello");
+  ok(segment, "Expected wave segment");
+  const wrapper = segment.wrappers.find((w) => w.name === "wave");
+  ok(wrapper, "Expected wave wrapper");
+  strictEqual(wrapper.type, "custom");
+  strictEqual(wrapper.properties.speed, 2);
+  strictEqual(wrapper.properties.tone, "high");
+});
+
+test("parseMarkup handles self-closing tags", () => {
+  const result = parseMarkup("[pause length=500/] Ready.");
+  strictEqual(result.text, " Ready.");
+  ok(
+    result.segments.some(
+      (seg) => seg.selfClosing && seg.wrappers.some((wrapper) => wrapper.name === "pause")
+    ),
+    "Expected self closing pause marker"
+  );
+});
+
+test("parseMarkup respects nomarkup blocks and escaping", () => {
+  const result = parseMarkup(`[nomarkup][b] raw [/b][/nomarkup] and \\[escaped\\]`);
+  strictEqual(result.text, "[b] raw [/b] and [escaped]");
+  ok(
+    result.segments.every((segment) => segment.wrappers.length === 0),
+    "Expected no wrappers when using nomarkup and escaping"
+  );
+});
+
+function findSegment(result: MarkupParseResult, target: string) {
+  return result.segments.find((segment) => {
+    if (segment.selfClosing) return false;
+    const text = result.text.slice(segment.start, segment.end);
+    return text === target;
+  });
+}
+

package/src/tests/nodes_lines.test.ts

@@ -1,5 +1,5 @@
 import { test } from "node:test";
-import { strictEqual } from "node:assert";
+import { strictEqual, ok } from "node:assert";
 import { parseYarn, compile, YarnRunner } from "../index.js";
 
 test("nodes and lines delivery", () => {
@@ -25,3 +25,37 @@ Narrator: Line two
 });
 
 
+
+
+test("markup parsing propagates to runtime", () => {
+  const script = `
+title: Start
+---
+Narrator: Plain [b]bold[/b] [wave speed=2]custom[/wave]
+===
+  `;
+
+  const doc = parseYarn(script);
+  const ir = compile(doc);
+  const runner = new YarnRunner(ir, { startAt: "Start" });
+
+  const result = runner.currentResult;
+  ok(result && result.type === "text", "Expected text result with markup");
+  ok(result?.markup, "Expected markup data to be present");
+  const markup = result!.markup!;
+  strictEqual(markup.text, "Plain bold custom");
+
+  const boldSegment = markup.segments.find((segment) =>
+    segment.wrappers.some((wrapper) => wrapper.name === "b" && wrapper.type === "default")
+  );
+  ok(boldSegment, "Expected bold segment");
+  strictEqual(markup.text.slice(boldSegment!.start, boldSegment!.end), "bold");
+
+  const customSegment = markup.segments.find((segment) =>
+    segment.wrappers.some((wrapper) => wrapper.name === "wave" && wrapper.type === "custom")
+  );
+  ok(customSegment, "Expected custom segment");
+  const waveWrapper = customSegment!.wrappers.find((wrapper) => wrapper.name === "wave");
+  ok(waveWrapper);
+  strictEqual(waveWrapper!.properties.speed, 2);
+});

package/src/tests/options.test.ts

@@ -1,5 +1,5 @@
 import { test } from "node:test";
-import { strictEqual } from "node:assert";
+import { strictEqual, ok } from "node:assert";
 import { parseYarn, compile, YarnRunner } from "../index.js";
 
 test("options selection", () => {
@@ -32,3 +32,41 @@ Narrator: Choose one
 });
 
 
+
+
+test("option markup is exposed", () => {
+  const script = `
+title: Start
+---
+Narrator: Choose
+-> [b]Bold[/b]
+    Narrator: Bold
+-> [wave intensity=5]Custom[/wave]
+    Narrator: Custom
+===
+  `;
+
+  const doc = parseYarn(script);
+  const ir = compile(doc);
+  const runner = new YarnRunner(ir, { startAt: "Start" });
+
+  runner.advance(); // move to options
+  const result = runner.currentResult;
+  ok(result && result.type === "options", "Expected options result");
+  const options = result!.options;
+  ok(options[0].markup, "Expected markup on first option");
+  ok(options[1].markup, "Expected markup on second option");
+  const boldMarkup = options[0].markup!;
+  strictEqual(boldMarkup.text, "Bold");
+  ok(
+    boldMarkup.segments.some((segment) =>
+      segment.wrappers.some((wrapper) => wrapper.name === "b" && wrapper.type === "default")
+    ),
+    "Expected bold wrapper"
+  );
+  const customWrapper = options[1].markup!.segments
+    .flatMap((segment) => segment.wrappers)
+    .find((wrapper) => wrapper.name === "wave");
+  ok(customWrapper, "Expected custom wrapper on second option");
+  strictEqual(customWrapper!.properties.intensity, 5);
+});