@rohal12/spindle 0.14.0 → 0.16.0

package/src/components/macros/Set.tsx

@@ -1,14 +1,11 @@
 import { useRef, useContext } from 'preact/hooks';
 import { LocalsUpdateContext } from '../../markup/render';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface SetProps {
-  rawArgs: string;
-}
-
-export function Set({ rawArgs }: SetProps) {
+export function Set({ rawArgs }: MacroProps) {
   const { update, getValues } = useContext(LocalsUpdateContext);
   const ran = useRef(false);
 
@@ -16,7 +13,7 @@ export function Set({ rawArgs }: SetProps) {
     ran.current = true;
 
     try {
-      executeMutation(rawArgs, stripLocalsPrefix(getValues()), update);
+      executeMutation(rawArgs, getValues(), update);
     } catch (err) {
       console.error(
         `spindle: Error in {set ${rawArgs}}${currentSourceLocation()}:`,
@@ -28,3 +25,5 @@ export function Set({ rawArgs }: SetProps) {
 
   return null;
 }
+
+registerMacro('set', Set);

package/src/components/macros/SettingsButton.tsx

@@ -1,13 +1,10 @@
 import { useState } from 'preact/hooks';
 import { settings } from '../../settings';
 import { SettingsDialog } from '../SettingsDialog';
+import { registerMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
 
-interface SettingsButtonProps {
-  className?: string;
-  id?: string;
-}
-
-export function SettingsButton({ className, id }: SettingsButtonProps) {
+export function SettingsButton({ className, id }: MacroProps) {
   const [open, setOpen] = useState(false);
 
   if (!settings.hasAny()) return null;
@@ -27,3 +24,5 @@ export function SettingsButton({ className, id }: SettingsButtonProps) {
     </>
   );
 }
+
+registerMacro('settings', SettingsButton);

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,26 +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';
-
-interface TimedProps {
-  rawArgs: string;
-  children: ASTNode[];
-  branches: Branch[];
-  className?: string;
-  id?: string;
-}
+import { registerMacro, registerSubMacro } from '../../registry';
+import type { MacroProps } from '../../registry';
+import type { ASTNode } from '../../markup/ast';
 
 export function Timed({
   rawArgs,
-  children,
-  branches,
+  children = [],
+  branches = [],
   className,
   id,
-}: TimedProps) {
+}: MacroProps) {
   const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
+  const firstBranch = branches[0];
+  className = resolve(className ?? firstBranch?.className);
+  id = resolve(id ?? firstBranch?.id);
   // Section 0 = initial children, sections 1..N = {next} branches
   // Each section has its own delay
   const sections = useMemo(() => {
@@ -64,3 +59,6 @@ export function Timed({
     );
   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/VarDisplay.tsx

@@ -27,8 +27,7 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
 
   let value: unknown;
   if (scope === 'local') {
-    const key = `@${root}`;
-    value = key in localsValues ? localsValues[key] : undefined;
+    value = root in localsValues ? localsValues[root] : undefined;
   } else {
     value = storeValue;
   }

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/components/macros/WidgetInvocation.tsx

@@ -128,7 +128,7 @@ export function WidgetInvocation({
         value = undefined;
       }
     }
-    ownKeys[param] = value;
+    ownKeys[param.startsWith('@') ? param.slice(1) : param] = value;
   }
 
   return (

package/src/execute-mutation.ts

@@ -26,7 +26,7 @@ export function executeMutation(
   }
   for (const key of Object.keys(localsClone)) {
     if (localsClone[key] !== mergedLocals[key]) {
-      scopeUpdate(`@${key}`, localsClone[key]);
+      scopeUpdate(key, localsClone[key]);
     }
   }
 }

package/src/hooks/use-merged-locals.ts

@@ -3,25 +3,8 @@ import { useStoryStore } from '../store';
 import { LocalsValuesContext } from '../markup/render';
 
 /**
- * Strip `@` prefix from locals scope values so they can be passed
- * directly to evaluate/execute.
- */
-export function stripLocalsPrefix(
-  values: Record<string, unknown>,
-): Record<string, unknown> {
-  const locals: Record<string, unknown> = {};
-  for (const [key, val] of Object.entries(values)) {
-    if (key.startsWith('@')) {
-      locals[key.slice(1)] = val;
-    }
-  }
-  return locals;
-}
-
-/**
- * Return store variables, temporary, and @-prefixed locals from context.
- * Locals use `@` prefix keys internally; the returned locals dict has
- * the prefix stripped so it can be passed directly to evaluate/execute.
+ * Return store variables, temporary, and locals from context.
+ * All three dicts use unprefixed keys suitable for evaluate/execute.
  */
 export function useMergedLocals(): readonly [
   Record<string, unknown>,
@@ -33,6 +16,6 @@ export function useMergedLocals(): readonly [
   const localsValues = useContext(LocalsValuesContext);
 
   return useMemo(() => {
-    return [variables, temporary, stripLocalsPrefix(localsValues)] as const;
+    return [variables, temporary, localsValues] as const;
   }, [variables, temporary, localsValues]);
 }

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';