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

package/src/react/useYarnRunner.tsx

@@ -1,47 +1,102 @@
-import { useState, useCallback, useRef } from "react";
-import { YarnRunner, type RunnerOptions } from "../runtime/runner.js";
-import type { IRProgram } from "../compile/ir.js";
-import type { RuntimeResult } from "../runtime/results.js";
-
-export function useYarnRunner(
-  program: IRProgram,
-  options: RunnerOptions
-): {
-  result: RuntimeResult | null;
-  advance: (optionIndex?: number) => void;
-  runner: YarnRunner;
-} {
-  const runnerRef = useRef<YarnRunner | null>(null);
-  const [result, setResult] = useState<RuntimeResult | null>(null);
-  const optionsRef = useRef(options);
-
-  // Update runner if functions change
-  if (
-    runnerRef.current &&
-    JSON.stringify(optionsRef.current.functions) !== JSON.stringify(options.functions)
-  ) {
-    runnerRef.current = new YarnRunner(program, options);
-    setResult(runnerRef.current.currentResult);
-    optionsRef.current = options;
-  }
-
-  // Initialize runner if not exists
-  if (!runnerRef.current) {
-    runnerRef.current = new YarnRunner(program, options);
-    setResult(runnerRef.current.currentResult);
-    optionsRef.current = options;
-  }
-
-  const runner = runnerRef.current;
-
-  const advance = useCallback(
-    (optionIndex?: number) => {
-      runner.advance(optionIndex);
-      setResult(runner.currentResult);
-    },
-    [runner]
-  );
-
-  return { result, advance, runner };
-}
+import { useState, useCallback, useRef, useEffect } from "react";
+import { YarnRunner, type RunnerOptions } from "../runtime/runner.js";
+import type { IRProgram } from "../compile/ir.js";
+import type { RuntimeResult } from "../runtime/results.js";
+
+function haveFunctionsChanged(
+  prev: RunnerOptions["functions"],
+  next: RunnerOptions["functions"]
+): boolean {
+  const prevFns = prev ?? {};
+  const nextFns = next ?? {};
+
+  const prevKeys = Object.keys(prevFns);
+  const nextKeys = Object.keys(nextFns);
+
+  if (prevKeys.length !== nextKeys.length) {
+    return true;
+  }
+
+  for (const key of prevKeys) {
+    if (!Object.prototype.hasOwnProperty.call(nextFns, key) || prevFns[key] !== nextFns[key]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function haveVariablesChanged(
+  prev: RunnerOptions["variables"],
+  next: RunnerOptions["variables"]
+): boolean {
+  const prevVars = prev ?? {};
+  const nextVars = next ?? {};
+  return JSON.stringify(prevVars) !== JSON.stringify(nextVars);
+}
+
+export function useYarnRunner(
+  program: IRProgram,
+  options: RunnerOptions
+): {
+  result: RuntimeResult | null;
+  advance: (optionIndex?: number) => void;
+  runner: YarnRunner;
+} {
+  const runnerRef = useRef<YarnRunner | null>(null);
+  const optionsRef = useRef(options);
+  const programRef = useRef(program);
+  const [result, setResult] = useState<RuntimeResult | null>(() => {
+    const runner = new YarnRunner(program, options);
+    runnerRef.current = runner;
+    optionsRef.current = options;
+    programRef.current = program;
+    return runner.currentResult;
+  });
+
+  useEffect(() => {
+    const prevProgram = programRef.current;
+    const prevOptions = optionsRef.current;
+
+    const programChanged = prevProgram !== program;
+    const functionsChanged = haveFunctionsChanged(prevOptions?.functions, options.functions);
+    const startNodeChanged = prevOptions?.startAt !== options.startAt;
+    const variablesChanged = haveVariablesChanged(prevOptions?.variables, options.variables);
+    const handlersChanged =
+      prevOptions?.handleCommand !== options.handleCommand ||
+      prevOptions?.commandHandler !== options.commandHandler ||
+      prevOptions?.onStoryEnd !== options.onStoryEnd;
+
+    if (
+      !runnerRef.current ||
+      programChanged ||
+      functionsChanged ||
+      startNodeChanged ||
+      variablesChanged ||
+      handlersChanged
+    ) {
+      const runner = new YarnRunner(program, options);
+      runnerRef.current = runner;
+      setResult(runner.currentResult);
+    }
+
+    programRef.current = program;
+    optionsRef.current = options;
+  }, [program, options]);
+
+  const advance = useCallback((optionIndex?: number) => {
+    const runner = runnerRef.current;
+    if (!runner) {
+      return;
+    }
+    runner.advance(optionIndex);
+    setResult(runner.currentResult);
+  }, []);
+
+  return {
+    result,
+    advance,
+    runner: runnerRef.current as YarnRunner,
+  };
+}
 

package/src/tests/dialogue_view.test.tsx

@@ -0,0 +1,26 @@
+import { test } from "node:test";
+import { ok } from "node:assert";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { parseYarn } from "../parse/parser.js";
+import { compile } from "../compile/compiler.js";
+import { DialogueView } from "../react/DialogueView.js";
+
+test("DialogueView renders initial variables provided via props", () => {
+  const yarn = `
+title: Start
+---
+Narrator: Hello {$playerName}!
+===`;
+
+  const program = compile(parseYarn(yarn));
+
+  const html = renderToStaticMarkup(
+    <DialogueView program={program} startNode="Start" variables={{ playerName: "V" }} />
+  );
+
+  ok(
+    html.includes("Hello V"),
+    "Expected rendered dialogue to include the interpolated variable value from props"
+  );
+});

package/src/tests/markup.test.ts

@@ -43,6 +43,23 @@ test("parseMarkup handles self-closing tags", () => {
   );
 });
 
+test("parseMarkup handles br line breaks", () => {
+  const result = parseMarkup("Line one[br]Line two[/br][br/]Line three");
+  strictEqual(result.text, "Line one\nLine two\nLine three");
+
+  const brSegments = result.segments.filter(
+    (segment) => segment.selfClosing && segment.wrappers.some((wrapper) => wrapper.name === "br")
+  );
+
+  strictEqual(brSegments.length, 2);
+  ok(
+    brSegments.every((segment) =>
+      segment.wrappers.some((wrapper) => wrapper.name === "br" && wrapper.type === "default")
+    ),
+    "Expected br wrappers to use default HTML type"
+  );
+});
+
 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]");
@@ -59,4 +76,3 @@ function findSegment(result: MarkupParseResult, target: string) {
     return text === target;
   });
 }
-