@rohal12/spindle 0.9.0 → 0.11.0

package/src/expression.ts

@@ -37,13 +37,117 @@ const VAR_RE = /\$(\w+)/g;
 const TEMP_RE = /\b_(\w+)/g;
 const LOCAL_RE = /@(\w+)/g;
 
-function transform(expr: string): string {
-  return expr
+function transformSegment(segment: string): string {
+  return segment
     .replace(VAR_RE, 'variables["$1"]')
     .replace(TEMP_RE, 'temporary["$1"]')
     .replace(LOCAL_RE, 'locals["$1"]');
 }
 
+/**
+ * String-aware expression transformer. Walks the expression character by
+ * character so that variable sigils ($, _, @) inside string literals are
+ * left untouched while code — including expressions inside template-literal
+ * `${…}` interpolations — is transformed.
+ */
+function transform(expr: string): string {
+  let result = '';
+  let code = ''; // accumulates code characters to be transformed
+  let i = 0;
+
+  function flushCode() {
+    if (code) {
+      result += transformSegment(code);
+      code = '';
+    }
+  }
+
+  while (i < expr.length) {
+    const ch = expr.charAt(i);
+
+    // Single or double quoted string — skip entirely
+    if (ch === '"' || ch === "'") {
+      flushCode();
+      const quote = ch;
+      let str = quote;
+      i++;
+      while (i < expr.length) {
+        const c = expr.charAt(i);
+        if (c === '\\' && i + 1 < expr.length) {
+          str += c + expr.charAt(i + 1);
+          i += 2;
+        } else if (c === quote) {
+          str += quote;
+          i++;
+          break;
+        } else {
+          str += c;
+          i++;
+        }
+      }
+      result += str;
+      continue;
+    }
+
+    // Template literal — preserve literal parts, transform interpolations
+    if (ch === '`') {
+      flushCode();
+      result += '`';
+      i++;
+      while (i < expr.length) {
+        const c = expr.charAt(i);
+        if (c === '\\' && i + 1 < expr.length) {
+          result += c + expr.charAt(i + 1);
+          i += 2;
+        } else if (c === '$' && expr.charAt(i + 1) === '{') {
+          // Template interpolation — collect the inner expression and
+          // recursively transform it
+          result += '${';
+          i += 2;
+          let depth = 1;
+          let inner = '';
+          while (i < expr.length && depth > 0) {
+            const ic = expr.charAt(i);
+            if (ic === '{') {
+              depth++;
+              inner += ic;
+            } else if (ic === '}') {
+              depth--;
+              if (depth === 0) break;
+              inner += ic;
+            } else if (ic === '\\' && i + 1 < expr.length) {
+              inner += ic + expr.charAt(i + 1);
+              i++;
+            } else {
+              inner += ic;
+            }
+            i++;
+          }
+          result += transform(inner); // recursive transform
+          if (i < expr.length && expr.charAt(i) === '}') {
+            result += '}';
+            i++;
+          }
+        } else if (c === '`') {
+          result += '`';
+          i++;
+          break;
+        } else {
+          result += c;
+          i++;
+        }
+      }
+      continue;
+    }
+
+    // Regular code character
+    code += ch;
+    i++;
+  }
+  flushCode();
+  return result;
+}
+
 const preamble =
   'const {currentPassage,previousPassage,visited,hasVisited,hasVisitedAny,hasVisitedAll,rendered,hasRendered,hasRenderedAny,hasRenderedAll,random,randomInt}=__fns;';
 

package/src/hooks/use-interpolate.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'preact/hooks';
+import { useMergedLocals } from './use-merged-locals';
+import { hasInterpolation, interpolate } from '../interpolation';
+
+export function useInterpolate(): (
+  s: string | undefined,
+) => string | undefined {
+  const [variables, temporary, locals] = useMergedLocals();
+
+  return useCallback(
+    (s: string | undefined): string | undefined => {
+      if (s === undefined || !hasInterpolation(s)) return s;
+      return interpolate(s, variables, temporary, locals);
+    },
+    [variables, temporary, locals],
+  );
+}

package/src/index.tsx

@@ -99,7 +99,10 @@ function boot() {
           const widgetName = tokens2[0]!.replace(/["']/g, '');
           const params = tokens2
             .slice(1)
-            .filter((t) => t.startsWith('$') || t.startsWith('_'));
+            .filter(
+              (t) =>
+                t.startsWith('$') || t.startsWith('_') || t.startsWith('@'),
+            );
           registerWidget(widgetName, node.children as ASTNode[], params);
         }
       }

package/src/interpolation.ts

@@ -0,0 +1,44 @@
+const INTERP_RE = /\{(\$[\w.]+|_[\w.]+|@[\w.]+)\}/g;
+const INTERP_TEST = /\{[\$_@][\w.]+\}/;
+
+export function hasInterpolation(s: string): boolean {
+  return INTERP_TEST.test(s);
+}
+
+function resolveDotPath(root: unknown, parts: string[]): unknown {
+  let value = root;
+  for (let i = 1; i < parts.length; i++) {
+    if (value == null || typeof value !== 'object') return undefined;
+    value = (value as Record<string, unknown>)[parts[i]!];
+  }
+  return value;
+}
+
+export function interpolate(
+  template: string,
+  variables: Record<string, unknown>,
+  temporary: Record<string, unknown>,
+  locals: Record<string, unknown>,
+): string {
+  return template.replace(INTERP_RE, (_match, ref: string) => {
+    const prefix = ref[0]!;
+    const path = ref.slice(1);
+    const parts = path.split('.');
+    const root = parts[0]!;
+
+    let value: unknown;
+    if (prefix === '$') {
+      value = variables[root];
+    } else if (prefix === '_') {
+      value = temporary[root];
+    } else {
+      value = locals[root];
+    }
+
+    if (parts.length > 1) {
+      value = resolveDotPath(value, parts);
+    }
+
+    return value == null ? '' : String(value);
+  });
+}

package/src/markup/render.tsx

@@ -40,7 +40,9 @@ import { getWidget } from '../widgets/widget-registry';
 import { getMacro } from '../registry';
 import { markdownToHtml } from './markdown';
 import { h } from 'preact';
-import type { ASTNode, Branch, MacroNode } from './ast';
+import type { ASTNode, Branch, HtmlNode, MacroNode, VariableNode } from './ast';
+import { useStoryStore } from '../store';
+import { useInterpolate } from '../hooks/use-interpolate';
 
 export interface LocalsScope {
   values: Record<string, unknown>;
@@ -106,6 +108,19 @@ function convertDomNode(
   return null;
 }
 
+function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
+  const resolve = useInterpolate();
+  const attrs: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(node.attributes)) {
+    attrs[k] = resolve(v) ?? v;
+  }
+  return h(
+    node.tag,
+    attrs,
+    node.children.length > 0 ? renderNodes(node.children) : undefined,
+  );
+}
+
 function renderMacro(node: MacroNode, key: number) {
   switch (node.name) {
     case 'set':
@@ -381,17 +396,19 @@ function renderMacro(node: MacroNode, key: number) {
         />
       );
 
-    case 'timed':
+    case 'timed': {
+      const firstBranch = node.branches?.[0];
       return (
         <Timed
           key={key}
           rawArgs={node.rawArgs}
           children={node.children}
           branches={node.branches ?? EMPTY_BRANCHES}
-          className={node.className}
-          id={node.id}
+          className={node.className ?? firstBranch?.className}
+          id={node.id ?? firstBranch?.id}
         />
       );
+    }
 
     case 'repeat':
       return (
@@ -513,10 +530,11 @@ function renderSingleNode(
       return renderMacro(node, key);
 
     case 'html':
-      return h(
-        node.tag,
-        { key, ...node.attributes },
-        node.children.length > 0 ? renderNodes(node.children) : undefined,
+      return (
+        <HtmlNodeRenderer
+          key={key}
+          node={node}
+        />
       );
 
     default: {
@@ -536,6 +554,31 @@ export function renderInlineNodes(nodes: ASTNode[]): preact.ComponentChildren {
   return nodes.map((node, i) => renderSingleNode(node, i));
 }
 
+function hasUnclosedBacktick(s: string): boolean {
+  let count = 0;
+  for (let i = 0; i < s.length; i++) {
+    if (s[i] === '`') count++;
+  }
+  return count % 2 === 1;
+}
+
+function getVariableTextValue(node: VariableNode): string {
+  const state = useStoryStore.getState();
+  const parts = node.name.split('.');
+  const root = parts[0]!;
+
+  let value: unknown;
+  if (node.scope === 'variable') value = state.variables[root];
+  else if (node.scope === 'temporary') value = state.temporary[root];
+
+  for (let i = 1; i < parts.length; i++) {
+    if (value == null || typeof value !== 'object') return '';
+    value = (value as Record<string, unknown>)[parts[i]!];
+  }
+
+  return value == null ? '' : String(value);
+}
+
 /**
  * Render AST nodes with full CommonMark markdown support.
  *
@@ -563,7 +606,10 @@ export function renderNodes(nodes: ASTNode[]): preact.ComponentChildren {
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i]!;
     if (node.type === 'text') {
-      combined += node.value;
+      combined += node.value.replace(/^[ \t]{4,}/gm, ' ');
+    } else if (node.type === 'variable' && hasUnclosedBacktick(combined)) {
+      // Inline variable value to avoid placeholder inside code span
+      combined += getVariableTextValue(node);
     } else {
       const phIdx = components.length;
       components.push(renderSingleNode(node, i));

package/src/markup/tokenizer.ts

@@ -198,10 +198,32 @@ function parseSelectors(
   while (i < input.length && (input[i] === '.' || input[i] === '#')) {
     const prefix = input[i]!;
     i++; // skip the . or #
-    const nameStart = i;
-    while (i < input.length && /[a-zA-Z0-9_-]/.test(input[i]!)) i++;
-    if (i > nameStart) {
-      const name = input.slice(nameStart, i);
+    let name = '';
+    while (i < input.length) {
+      if (/[a-zA-Z0-9_-]/.test(input[i]!)) {
+        name += input[i];
+        i++;
+      } else if (
+        input[i] === '{' &&
+        (input[i + 1] === '$' || input[i + 1] === '_' || input[i + 1] === '@')
+      ) {
+        // Consume interpolation: {$var}, {_var}, {@var} (with optional dot paths)
+        const braceStart = i;
+        i += 2; // skip { and prefix
+        while (i < input.length && /[\w.]/.test(input[i]!)) i++;
+        if (i < input.length && input[i] === '}') {
+          i++; // skip }
+          name += input.slice(braceStart, i);
+        } else {
+          // Not a valid interpolation — stop
+          i = braceStart;
+          break;
+        }
+      } else {
+        break;
+      }
+    }
+    if (name) {
       if (prefix === '.') {
         classes.push(name);
       } else {
@@ -286,6 +308,15 @@ export function tokenize(input: string): Token[] {
   }
 
   while (i < input.length) {
+    // Handle escaped braces: \{ and \}
+    if (input[i] === '\\' && (input[i + 1] === '{' || input[i + 1] === '}')) {
+      flushText(i);
+      tokens.push({ type: 'text', value: input[i + 1]!, start: i, end: i + 2 });
+      i += 2;
+      textStart = i;
+      continue;
+    }
+
     // Check for [[ link
     if (input[i] === '[' && input[i + 1] === '[') {
       flushText(i);

package/src/utils/source-location.ts

@@ -0,0 +1,19 @@
+import type { Passage } from '../parser';
+import { useStoryStore } from '../store';
+
+/** Returns e.g. " (story.twee:5)" or "" if not available. */
+export function sourceLocationOf(passage: Passage): string {
+  const file = passage.metadata['data-source-file'];
+  const line = passage.metadata['data-source-line'];
+  if (!file) return '';
+  return line ? ` (${file}:${line})` : ` (${file})`;
+}
+
+/** Look up current passage from store and return its source location. */
+export function currentSourceLocation(): string {
+  const state = useStoryStore.getState();
+  if (!state.storyData) return '';
+  const passage = state.storyData.passages.get(state.currentPassage);
+  if (!passage) return '';
+  return sourceLocationOf(passage);
+}