@rohal12/spindle 0.13.0 → 0.15.0

package/package.json

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

package/src/components/macros/Button.tsx

@@ -1,8 +1,7 @@
 import { useContext } from 'preact/hooks';
-import { renderInlineNodes, LocalsContext } from '../../markup/render';
+import { renderInlineNodes, LocalsUpdateContext } from '../../markup/render';
 import { collectText } from '../../utils/extract-text';
 import { useAction } from '../../hooks/use-action';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
@@ -19,11 +18,11 @@ export function Button({ rawArgs, children, className, id }: ButtonProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
-  const scope = useContext(LocalsContext);
+  const { update, getValues } = useContext(LocalsUpdateContext);
 
   const handleClick = () => {
     try {
-      executeMutation(rawArgs, stripLocalsPrefix(scope.values), scope.update);
+      executeMutation(rawArgs, getValues(), update);
     } catch (err) {
       console.error(
         `spindle: Error in {button ${rawArgs}}${currentSourceLocation()}:`,

package/src/components/macros/Do.tsx

@@ -1,28 +1,21 @@
 import { useLayoutEffect, useContext } from 'preact/hooks';
 import type { ASTNode } from '../../markup/ast';
-import { LocalsContext } from '../../markup/render';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
+import { LocalsUpdateContext } from '../../markup/render';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
+import { collectText } from '../../utils/extract-text';
 
 interface DoProps {
   children: ASTNode[];
 }
 
-/**
- * Concatenate text children into a single JS string for execution.
- */
-function collectText(nodes: ASTNode[]): string {
-  return nodes.map((n) => (n.type === 'text' ? n.value : '')).join('');
-}
-
 export function Do({ children }: DoProps) {
   const code = collectText(children);
-  const scope = useContext(LocalsContext);
+  const { update, getValues } = useContext(LocalsUpdateContext);
 
   useLayoutEffect(() => {
     try {
-      executeMutation(code, stripLocalsPrefix(scope.values), scope.update);
+      executeMutation(code, getValues(), update);
     } catch (err) {
       console.error(`spindle: Error in {do}${currentSourceLocation()}:`, err);
     }

package/src/components/macros/For.tsx

@@ -1,7 +1,16 @@
-import { useContext, useState, useCallback } from 'preact/hooks';
+import {
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useMemo,
+} from 'preact/hooks';
 import { evaluate } from '../../expression';
-import { LocalsContext, renderNodes } from '../../markup/render';
-import type { LocalsScope } from '../../markup/render';
+import {
+  LocalsValuesContext,
+  LocalsUpdateContext,
+  renderNodes,
+} from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { currentSourceLocation } from '../../utils/source-location';
@@ -43,7 +52,11 @@ function parseForArgs(rawArgs: string): {
     );
   }
 
-  return { itemVar, indexVar, listExpr };
+  return {
+    itemVar: itemVar.slice(1),
+    indexVar: indexVar ? indexVar.slice(1) : null,
+    listExpr,
+  };
 }
 
 function ForIteration({
@@ -63,16 +76,21 @@ function ForIteration({
     ...initialValues,
   }));
 
+  const valuesRef = useRef(localState);
+  valuesRef.current = localState;
+
+  const getValues = useCallback(() => valuesRef.current, []);
   const update = useCallback((key: string, value: unknown) => {
     setLocalState((prev) => ({ ...prev, [key]: value }));
   }, []);
-
-  const scope: LocalsScope = { values: localState, update };
+  const updater = useMemo(() => ({ update, getValues }), [update, getValues]);
 
   return (
-    <LocalsContext.Provider value={scope}>
-      {renderNodes(children)}
-    </LocalsContext.Provider>
+    <LocalsUpdateContext.Provider value={updater}>
+      <LocalsValuesContext.Provider value={localState}>
+        {renderNodes(children)}
+      </LocalsValuesContext.Provider>
+    </LocalsUpdateContext.Provider>
   );
 }
 
@@ -80,7 +98,7 @@ export function For({ rawArgs, children, className, id }: ForProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
-  const parentScope = useContext(LocalsContext);
+  const parentValues = useContext(LocalsValuesContext);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   let parsed: ReturnType<typeof parseForArgs>;
@@ -130,7 +148,7 @@ export function For({ rawArgs, children, className, id }: ForProps) {
     return (
       <ForIteration
         key={i}
-        parentValues={parentScope.values}
+        parentValues={parentValues}
         ownKeys={ownKeys}
         initialValues={{}}
         children={children}

package/src/components/macros/MacroLink.tsx

@@ -1,8 +1,7 @@
 import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import type { ASTNode } from '../../markup/ast';
-import { LocalsContext } from '../../markup/render';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
+import { LocalsUpdateContext } from '../../markup/render';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
@@ -81,11 +80,11 @@ export function MacroLink({
   className = resolve(className);
   id = resolve(id);
   const { display, passage } = parseArgs(rawArgs);
-  const scope = useContext(LocalsContext);
+  const { update, getValues } = useContext(LocalsUpdateContext);
 
   const handleClick = (e: Event) => {
     e.preventDefault();
-    executeChildren(children, stripLocalsPrefix(scope.values), scope.update);
+    executeChildren(children, getValues(), update);
     if (passage) {
       useStoryStore.getState().navigate(passage);
     }
@@ -98,7 +97,7 @@ export function MacroLink({
     label: display,
     target: passage ?? undefined,
     perform: () => {
-      executeChildren(children, stripLocalsPrefix(scope.values), scope.update);
+      executeChildren(children, getValues(), update);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }

package/src/components/macros/Set.tsx

@@ -1,6 +1,5 @@
 import { useRef, useContext } from 'preact/hooks';
-import { LocalsContext } from '../../markup/render';
-import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
+import { LocalsUpdateContext } from '../../markup/render';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
 
@@ -9,14 +8,14 @@ interface SetProps {
 }
 
 export function Set({ rawArgs }: SetProps) {
-  const scope = useContext(LocalsContext);
+  const { update, getValues } = useContext(LocalsUpdateContext);
   const ran = useRef(false);
 
   if (!ran.current) {
     ran.current = true;
 
     try {
-      executeMutation(rawArgs, stripLocalsPrefix(scope.values), scope.update);
+      executeMutation(rawArgs, getValues(), update);
     } catch (err) {
       console.error(
         `spindle: Error in {set ${rawArgs}}${currentSourceLocation()}:`,

package/src/components/macros/VarDisplay.tsx

@@ -1,6 +1,6 @@
 import { useStoryStore } from '../../store';
 import { useContext } from 'preact/hooks';
-import { LocalsContext } from '../../markup/render';
+import { LocalsValuesContext } from '../../markup/render';
 import { useInterpolate } from '../../hooks/use-interpolate';
 
 interface VarDisplayProps {
@@ -14,7 +14,7 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
   const resolve = useInterpolate();
   className = resolve(className);
   id = resolve(id);
-  const localsScope = useContext(LocalsContext);
+  const localsValues = useContext(LocalsValuesContext);
   const parts = name.split('.');
   const root = parts[0]!;
   const storeValue = useStoryStore((s) =>
@@ -27,8 +27,7 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
 
   let value: unknown;
   if (scope === 'local') {
-    const key = `@${root}`;
-    value = key in localsScope.values ? localsScope.values[key] : undefined;
+    value = root in localsValues ? localsValues[root] : undefined;
   } else {
     value = storeValue;
   }

package/src/components/macros/WidgetInvocation.tsx

@@ -1,6 +1,15 @@
-import { useContext, useState, useCallback } from 'preact/hooks';
-import { LocalsContext, renderNodes } from '../../markup/render';
-import type { LocalsScope } from '../../markup/render';
+import {
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useMemo,
+} from 'preact/hooks';
+import {
+  LocalsValuesContext,
+  LocalsUpdateContext,
+  renderNodes,
+} from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { evaluate } from '../../expression';
 import type { ASTNode } from '../../markup/ast';
@@ -75,16 +84,21 @@ function WidgetBody({
     ...ownKeys,
   }));
 
+  const valuesRef = useRef(localState);
+  valuesRef.current = localState;
+
+  const getValues = useCallback(() => valuesRef.current, []);
   const update = useCallback((key: string, value: unknown) => {
     setLocalState((prev) => ({ ...prev, [key]: value }));
   }, []);
-
-  const scope: LocalsScope = { values: localState, update };
+  const updater = useMemo(() => ({ update, getValues }), [update, getValues]);
 
   return (
-    <LocalsContext.Provider value={scope}>
-      {renderNodes(body)}
-    </LocalsContext.Provider>
+    <LocalsUpdateContext.Provider value={updater}>
+      <LocalsValuesContext.Provider value={localState}>
+        {renderNodes(body)}
+      </LocalsValuesContext.Provider>
+    </LocalsUpdateContext.Provider>
   );
 }
 
@@ -93,7 +107,7 @@ export function WidgetInvocation({
   params,
   rawArgs,
 }: WidgetInvocationProps) {
-  const parentScope = useContext(LocalsContext);
+  const parentValues = useContext(LocalsValuesContext);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   if (params.length === 0 || !rawArgs) {
@@ -114,13 +128,13 @@ export function WidgetInvocation({
         value = undefined;
       }
     }
-    ownKeys[param] = value;
+    ownKeys[param.startsWith('@') ? param.slice(1) : param] = value;
   }
 
   return (
     <WidgetBody
       body={body}
-      parentValues={parentScope.values}
+      parentValues={parentValues}
       ownKeys={ownKeys}
     />
   );

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

@@ -1,27 +1,10 @@
 import { useContext, useMemo } from 'preact/hooks';
 import { useStoryStore } from '../store';
-import { LocalsContext } from '../markup/render';
+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>,
@@ -30,9 +13,9 @@ export function useMergedLocals(): readonly [
 ] {
   const variables = useStoryStore((s) => s.variables);
   const temporary = useStoryStore((s) => s.temporary);
-  const scope = useContext(LocalsContext);
+  const localsValues = useContext(LocalsValuesContext);
 
   return useMemo(() => {
-    return [variables, temporary, stripLocalsPrefix(scope.values)] as const;
-  }, [variables, temporary, scope.values]);
+    return [variables, temporary, localsValues] as const;
+  }, [variables, temporary, localsValues]);
 }

package/src/markup/render.tsx

@@ -44,17 +44,18 @@ 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>;
+export interface LocalsUpdater {
   update: (key: string, value: unknown) => void;
+  getValues: () => Record<string, unknown>;
 }
 
-const defaultLocalsScope: LocalsScope = {
-  values: {},
+const defaultUpdater: LocalsUpdater = {
   update: () => {},
+  getValues: () => ({}),
 };
 
-export const LocalsContext = createContext<LocalsScope>(defaultLocalsScope);
+export const LocalsValuesContext = createContext<Record<string, unknown>>({});
+export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
 
 const EMPTY_BRANCHES: Branch[] = [];