@rohal12/spindle 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/components/App.tsx

@@ -1,11 +1,10 @@
 import { useEffect } from 'preact/hooks';
 import { useStoryStore } from '../store';
-import { Passage } from './Passage';
 import { StoryInterface } from './StoryInterface';
 
 export function App() {
-  const currentPassage = useStoryStore((s) => s.currentPassage);
   const storyData = useStoryStore((s) => s.storyData);
+  const currentPassage = useStoryStore((s) => s.currentPassage);
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
@@ -25,29 +24,5 @@ export function App() {
     return <div class="loading">Loading...</div>;
   }
 
-  const passage = storyData.passages.get(currentPassage);
-  if (!passage) {
-    return (
-      <div class="error">
-        Error: Passage &ldquo;{currentPassage}&rdquo; not found.
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <header class="story-menubar">
-        <StoryInterface />
-      </header>
-      <div
-        id="story"
-        class="story"
-      >
-        <Passage
-          passage={passage}
-          key={currentPassage}
-        />
-      </div>
-    </>
-  );
+  return <StoryInterface />;
 }

package/src/components/StoryInterface.tsx

@@ -1,11 +1,10 @@
-import { useMemo } from 'preact/hooks';
 import { useStoryStore } from '../store';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderNodes } from '../markup/render';
 
 const DEFAULT_MARKUP =
-  '{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}';
+  '<header class="story-menubar">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}';
 
 export function StoryInterface() {
   const storyData = useStoryStore((s) => s.storyData);
@@ -14,19 +13,15 @@ export function StoryInterface() {
   const markup =
     overridePassage !== undefined ? overridePassage.content : DEFAULT_MARKUP;
 
-  const content = useMemo(() => {
-    try {
-      const tokens = tokenize(markup);
-      const ast = buildAST(tokens);
-      return renderNodes(ast);
-    } catch (err) {
-      return (
-        <span class="error">
-          Error in StoryInterface: {(err as Error).message}
-        </span>
-      );
-    }
-  }, [markup]);
-
-  return <>{content}</>;
+  try {
+    const tokens = tokenize(markup);
+    const ast = buildAST(tokens);
+    return <>{renderNodes(ast)}</>;
+  } catch (err) {
+    return (
+      <span class="error">
+        Error in StoryInterface: {(err as Error).message}
+      </span>
+    );
+  }
 }

package/src/components/macros/PassageDisplay.tsx

@@ -0,0 +1,33 @@
+import { useStoryStore } from '../../store';
+import { Passage } from '../Passage';
+
+interface PassageDisplayProps {
+  className?: string;
+  id?: string;
+}
+
+export function PassageDisplay({ className, id }: PassageDisplayProps) {
+  const currentPassage = useStoryStore((s) => s.currentPassage);
+  const storyData = useStoryStore((s) => s.storyData);
+
+  const passage = storyData?.passages.get(currentPassage);
+  if (!passage) {
+    return (
+      <div class="error">
+        Error: Passage &ldquo;{currentPassage}&rdquo; not found.
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id={id ?? 'story'}
+      class={className ?? 'story'}
+    >
+      <Passage
+        passage={passage}
+        key={currentPassage}
+      />
+    </div>
+  );
+}

package/src/components/macros/Widget.tsx

@@ -7,11 +7,23 @@ interface WidgetProps {
   children: ASTNode[];
 }
 
+/**
+ * Parse widget definition args: "WidgetName" or "WidgetName" $param1 $param2
+ */
+function parseWidgetDef(rawArgs: string): { name: string; params: string[] } {
+  const tokens = rawArgs.trim().split(/\s+/);
+  const name = tokens[0]!.replace(/["']/g, '');
+  const params = tokens
+    .slice(1)
+    .filter((t) => t.startsWith('$') || t.startsWith('_'));
+  return { name, params };
+}
+
 export function Widget({ rawArgs, children }: WidgetProps) {
-  const name = rawArgs.trim().replace(/["']/g, '');
+  const { name, params } = parseWidgetDef(rawArgs);
 
   useLayoutEffect(() => {
-    registerWidget(name, children);
+    registerWidget(name, children, params);
   }, []);
 
   return null;

package/src/components/macros/WidgetInvocation.tsx

@@ -0,0 +1,97 @@
+import { useContext } from 'preact/hooks';
+import { LocalsContext, renderNodes } from '../../markup/render';
+import { useMergedLocals } from '../../hooks/use-merged-locals';
+import { evaluate } from '../../expression';
+import type { ASTNode } from '../../markup/ast';
+
+interface WidgetInvocationProps {
+  body: ASTNode[];
+  params: string[];
+  rawArgs?: string;
+}
+
+/**
+ * Split rawArgs by commas, respecting parentheses, brackets, braces, and strings.
+ */
+function splitArgs(raw: string): string[] {
+  const args: string[] = [];
+  let current = '';
+  let depth = 0;
+  let inString: string | null = null;
+
+  for (let i = 0; i < raw.length; i++) {
+    const ch = raw[i]!;
+
+    if (inString) {
+      current += ch;
+      if (ch === inString && raw[i - 1] !== '\\') inString = null;
+      continue;
+    }
+
+    if (ch === '"' || ch === "'" || ch === '`') {
+      inString = ch;
+      current += ch;
+      continue;
+    }
+
+    if (ch === '(' || ch === '[' || ch === '{') {
+      depth++;
+      current += ch;
+      continue;
+    }
+
+    if (ch === ')' || ch === ']' || ch === '}') {
+      depth--;
+      current += ch;
+      continue;
+    }
+
+    if (ch === ',' && depth === 0) {
+      args.push(current.trim());
+      current = '';
+      continue;
+    }
+
+    current += ch;
+  }
+
+  const last = current.trim();
+  if (last) args.push(last);
+  return args;
+}
+
+export function WidgetInvocation({
+  body,
+  params,
+  rawArgs,
+}: WidgetInvocationProps) {
+  const parentLocals = useContext(LocalsContext);
+  const [mergedVars, mergedTemps] = useMergedLocals();
+
+  if (params.length === 0 || !rawArgs) {
+    return <>{renderNodes(body)}</>;
+  }
+
+  const argExprs = splitArgs(rawArgs);
+  const locals: Record<string, unknown> = { ...parentLocals };
+
+  for (let i = 0; i < params.length; i++) {
+    const param = params[i]!;
+    const expr = argExprs[i];
+    let value: unknown;
+    if (expr !== undefined) {
+      try {
+        value = evaluate(expr, mergedVars, mergedTemps);
+      } catch {
+        value = undefined;
+      }
+    }
+    locals[param] = value;
+  }
+
+  return (
+    <LocalsContext.Provider value={locals}>
+      {renderNodes(body)}
+    </LocalsContext.Provider>
+  );
+}

package/src/index.tsx

@@ -95,8 +95,12 @@ function boot() {
       const widgetAST = buildAST(widgetTokens);
       for (const node of widgetAST) {
         if (node.type === 'macro' && node.name === 'widget' && node.rawArgs) {
-          const widgetName = node.rawArgs.trim().replace(/["']/g, '');
-          registerWidget(widgetName, node.children as ASTNode[]);
+          const tokens2 = node.rawArgs.trim().split(/\s+/);
+          const widgetName = tokens2[0]!.replace(/["']/g, '');
+          const params = tokens2
+            .slice(1)
+            .filter((t) => t.startsWith('$') || t.startsWith('_'));
+          registerWidget(widgetName, node.children as ASTNode[], params);
         }
       }
     }
@@ -111,6 +115,18 @@ function boot() {
     }
   });
 
+  // Warn if StoryInterface passage exists but doesn't contain {passage}
+  const storyInterfacePassage = storyData.passages.get('StoryInterface');
+  if (
+    storyInterfacePassage &&
+    !storyInterfacePassage.content.includes('{passage}')
+  ) {
+    console.warn(
+      'spindle: StoryInterface passage does not contain {passage}. ' +
+        'The current passage will not be displayed.',
+    );
+  }
+
   const root = document.getElementById('root');
   if (!root) {
     throw new Error('spindle: No <div id="root"> element found.');

package/src/markup/render.tsx

@@ -32,8 +32,10 @@ import { Repeat } from '../components/macros/Repeat';
 import { Stop } from '../components/macros/Stop';
 import { Type } from '../components/macros/Type';
 import { Widget } from '../components/macros/Widget';
+import { WidgetInvocation } from '../components/macros/WidgetInvocation';
 import { Computed } from '../components/macros/Computed';
 import { Meter } from '../components/macros/Meter';
+import { PassageDisplay } from '../components/macros/PassageDisplay';
 import { getWidget } from '../widgets/widget-registry';
 import { getMacro } from '../registry';
 import { markdownToHtml } from './markdown';
@@ -132,6 +134,15 @@ function renderMacro(node: MacroNode, key: number) {
         />
       );
 
+    case 'passage':
+      return (
+        <PassageDisplay
+          key={key}
+          className={node.className}
+          id={node.id}
+        />
+      );
+
     case 'if':
       return (
         <If
@@ -415,9 +426,16 @@ function renderMacro(node: MacroNode, key: number) {
 
     default: {
       // Check widget registry for user-defined widgets
-      const widgetAST = getWidget(node.name);
-      if (widgetAST) {
-        return <>{renderNodes(widgetAST)}</>;
+      const widget = getWidget(node.name);
+      if (widget) {
+        return (
+          <WidgetInvocation
+            key={key}
+            body={widget.body}
+            params={widget.params}
+            rawArgs={node.rawArgs}
+          />
+        );
       }
 
       // Check component registry for custom macros

package/src/widgets/widget-registry.ts

@@ -1,12 +1,21 @@
 import type { ASTNode } from '../markup/ast';
 
-const widgets = new Map<string, ASTNode[]>();
+interface WidgetEntry {
+  body: ASTNode[];
+  params: string[];
+}
+
+const widgets = new Map<string, WidgetEntry>();
 
-export function registerWidget(name: string, bodyAST: ASTNode[]): void {
-  widgets.set(name.toLowerCase(), bodyAST);
+export function registerWidget(
+  name: string,
+  bodyAST: ASTNode[],
+  params: string[],
+): void {
+  widgets.set(name.toLowerCase(), { body: bodyAST, params });
 }
 
-export function getWidget(name: string): ASTNode[] | undefined {
+export function getWidget(name: string): WidgetEntry | undefined {
   return widgets.get(name.toLowerCase());
 }