@rohal12/spindle 0.15.0 → 0.16.1

package/src/components/macros/Stop.tsx

@@ -1,7 +1,9 @@
 import { useLayoutEffect, useContext } from 'preact/hooks';
 import { RepeatContext } from './Repeat';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-export function Stop() {
+export function Stop(_props: MacroProps) {
   const { stop } = useContext(RepeatContext);
 
   useLayoutEffect(() => {
@@ -10,3 +12,5 @@ export function Stop() {
 
   return null;
 }
+
+registerMacro('stop', Stop);

package/src/components/macros/StoryTitle.tsx

@@ -1,11 +1,8 @@
 import { useStoryStore } from '../../store';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface StoryTitleProps {
-  className?: string;
-  id?: string;
-}
-
-export function StoryTitle({ className, id }: StoryTitleProps) {
+export function StoryTitle({ className, id }: MacroProps) {
   const name = useStoryStore((s) => s.storyData?.name || '');
   const cls = className ? `story-title ${className}` : 'story-title';
 
@@ -18,3 +15,5 @@ export function StoryTitle({ className, id }: StoryTitleProps) {
     </span>
   );
 }
+
+registerMacro('story-title', StoryTitle);

package/src/components/macros/Switch.tsx

@@ -2,14 +2,11 @@ import { evaluate } from '../../expression';
 import { renderNodes } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { currentSourceLocation } from '../../utils/source-location';
+import { registerMacro, registerSubMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 import type { Branch } from '../../markup/ast';
 
-interface SwitchProps {
-  rawArgs: string;
-  branches: Branch[];
-}
-
-export function Switch({ rawArgs, branches }: SwitchProps) {
+export function Switch({ rawArgs, branches = [] }: MacroProps) {
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   let switchValue: unknown;
@@ -65,3 +62,7 @@ export function Switch({ rawArgs, branches }: SwitchProps) {
 
   return null;
 }
+
+registerMacro('switch', Switch);
+registerSubMacro('case');
+registerSubMacro('default');

package/src/components/macros/Textarea.tsx

@@ -1,11 +1,7 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
-
-interface TextareaProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
@@ -17,7 +13,7 @@ function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   return { varName, placeholder };
 }
 
-export function Textarea({ rawArgs, className, id }: TextareaProps) {
+export function Textarea({ rawArgs, className, id }: MacroProps) {
   const { varName, placeholder } = parseArgs(rawArgs);
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -48,3 +44,5 @@ export function Textarea({ rawArgs, className, id }: TextareaProps) {
     />
   );
 }
+
+registerMacro('textarea', Textarea);

package/src/components/macros/Textbox.tsx

@@ -1,11 +1,7 @@
 import { useStoryStore } from '../../store';
 import { useAction } from '../../hooks/use-action';
-
-interface TextboxProps {
-  rawArgs: string;
-  className?: string;
-  id?: string;
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
@@ -17,7 +13,7 @@ function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
   return { varName, placeholder };
 }
 
-export function Textbox({ rawArgs, className, id }: TextboxProps) {
+export function Textbox({ rawArgs, className, id }: MacroProps) {
   const { varName, placeholder } = parseArgs(rawArgs);
   const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
@@ -47,3 +43,5 @@ export function Textbox({ rawArgs, className, id }: TextboxProps) {
     />
   );
 }
+
+registerMacro('textbox', Textbox);

package/src/components/macros/Timed.tsx

@@ -2,37 +2,21 @@ import { useState, useEffect, useMemo } from 'preact/hooks';
 import { renderNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
 import { useInterpolate } from '../../hooks/use-interpolate';
-import type { ASTNode, Branch } from '../../markup/ast';
+import { registerMacro, registerSubMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface TimedProps {
-  rawArgs: string;
-  children: ASTNode[];
-  branches: Branch[];
-  className?: string;
-  id?: string;
-}
-
-export function Timed({
-  rawArgs,
-  children,
-  branches,
-  className,
-  id,
-}: TimedProps) {
+export function Timed({ branches = [] }: MacroProps) {
   const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  // Section 0 = initial children, sections 1..N = {next} branches
-  // Each section has its own delay
+  // For branching blocks, className/id from the opening tag goes on branches[0],
+  // so the component-level className/id is unused. Each branch carries its own.
   const sections = useMemo(() => {
-    const result: { delay: number; nodes: ASTNode[] }[] = [];
-    result.push({ delay: parseDelay(rawArgs), nodes: children });
-    for (const branch of branches) {
-      const delay = branch.rawArgs ? parseDelay(branch.rawArgs) : 0;
-      result.push({ delay, nodes: branch.children });
-    }
-    return result;
-  }, [rawArgs, children, branches]);
+    return branches.map((branch) => ({
+      delay: branch.rawArgs ? parseDelay(branch.rawArgs) : 0,
+      nodes: branch.children,
+      className: branch.className,
+      id: branch.id,
+    }));
+  }, [branches]);
 
   const [visibleIndex, setVisibleIndex] = useState(-1);
 
@@ -51,16 +35,22 @@ export function Timed({
 
   if (visibleIndex < 0) return null;
 
-  const content = renderNodes(sections[visibleIndex]!.nodes);
+  const section = sections[visibleIndex]!;
+  const content = renderNodes(section.nodes);
+  const sectionClass = resolve(section.className);
+  const sectionId = resolve(section.id);
 
-  if (className || id)
+  if (sectionClass || sectionId)
     return (
       <span
-        id={id}
-        class={className}
+        id={sectionId}
+        class={sectionClass}
       >
         {content}
       </span>
     );
   return <>{content}</>;
 }
+
+registerMacro('timed', Timed);
+registerSubMacro('next');

package/src/components/macros/Type.tsx

@@ -2,16 +2,10 @@ import { useState, useEffect, useRef } from 'preact/hooks';
 import { renderInlineNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
 import { useInterpolate } from '../../hooks/use-interpolate';
-import type { ASTNode } from '../../markup/ast';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface TypeProps {
-  rawArgs: string;
-  children: ASTNode[];
-  className?: string;
-  id?: string;
-}
-
-export function Type({ rawArgs, children, className, id }: TypeProps) {
+export function Type({ rawArgs, children = [], className, id }: MacroProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
@@ -78,3 +72,5 @@ export function Type({ rawArgs, children, className, id }: TypeProps) {
     </span>
   );
 }
+
+registerMacro('type', Type);

package/src/components/macros/Unset.tsx

@@ -1,11 +1,9 @@
 import { useRef } from 'preact/hooks';
 import { useStoryStore } from '../../store';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface UnsetProps {
-  rawArgs: string;
-}
-
-export function Unset({ rawArgs }: UnsetProps) {
+export function Unset({ rawArgs }: MacroProps) {
   const ran = useRef(false);
 
   if (!ran.current) {
@@ -26,3 +24,5 @@ export function Unset({ rawArgs }: UnsetProps) {
 
   return null;
 }
+
+registerMacro('unset', Unset);

package/src/components/macros/Widget.tsx

@@ -1,11 +1,7 @@
 import { useLayoutEffect } from 'preact/hooks';
 import { registerWidget } from '../../widgets/widget-registry';
-import type { ASTNode } from '../../markup/ast';
-
-interface WidgetProps {
-  rawArgs: string;
-  children: ASTNode[];
-}
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
 /**
  * Parse widget definition args: "WidgetName" or "WidgetName" $param1 $param2
@@ -17,7 +13,7 @@ function parseWidgetDef(rawArgs: string): { name: string; params: string[] } {
   return { name, params };
 }
 
-export function Widget({ rawArgs, children }: WidgetProps) {
+export function Widget({ rawArgs, children = [] }: MacroProps) {
   const { name, params } = parseWidgetDef(rawArgs);
 
   useLayoutEffect(() => {
@@ -26,3 +22,5 @@ export function Widget({ rawArgs, children }: WidgetProps) {
 
   return null;
 }
+
+registerMacro('widget', Widget);

package/src/index.tsx

@@ -14,6 +14,7 @@ import { tokenize } from './markup/tokenizer';
 import { buildAST } from './markup/ast';
 import { registerWidget } from './widgets/widget-registry';
 import type { ASTNode } from './markup/ast';
+import './macros/register-builtins';
 import './styles.css';
 
 function renderErrors(root: HTMLElement, errors: string[]) {

package/src/macros/register-builtins.ts

@@ -0,0 +1,35 @@
+// Import all built-in macro components to trigger their self-registration.
+import '../components/macros/Set';
+import '../components/macros/Print';
+import '../components/macros/Computed';
+import '../components/macros/Meter';
+import '../components/macros/If';
+import '../components/macros/For';
+import '../components/macros/Do';
+import '../components/macros/Button';
+import '../components/macros/MacroLink';
+import '../components/macros/Switch';
+import '../components/macros/Timed';
+import '../components/macros/Repeat';
+import '../components/macros/Stop';
+import '../components/macros/Type';
+import '../components/macros/Widget';
+import '../components/macros/StoryTitle';
+import '../components/macros/Back';
+import '../components/macros/Forward';
+import '../components/macros/Restart';
+import '../components/macros/QuickSave';
+import '../components/macros/QuickLoad';
+import '../components/macros/SettingsButton';
+import '../components/macros/Saves';
+import '../components/macros/Include';
+import '../components/macros/Goto';
+import '../components/macros/Unset';
+import '../components/macros/Textbox';
+import '../components/macros/Numberbox';
+import '../components/macros/Textarea';
+import '../components/macros/Checkbox';
+import '../components/macros/Radiobutton';
+import '../components/macros/Listbox';
+import '../components/macros/Cycle';
+import '../components/macros/PassageDisplay';