@rohal12/spindle 0.13.0 → 0.14.0

package/package.json

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

package/src/components/macros/Button.tsx

@@ -1,5 +1,5 @@
 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';
@@ -19,11 +19,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, stripLocalsPrefix(getValues()), update);
     } catch (err) {
       console.error(
         `spindle: Error in {button ${rawArgs}}${currentSourceLocation()}:`,

package/src/components/macros/Do.tsx

@@ -1,28 +1,22 @@
 import { useLayoutEffect, useContext } from 'preact/hooks';
 import type { ASTNode } from '../../markup/ast';
-import { LocalsContext } from '../../markup/render';
+import { LocalsUpdateContext } from '../../markup/render';
 import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 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, stripLocalsPrefix(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';
@@ -63,16 +72,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 +94,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 +144,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,7 +1,7 @@
 import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import type { ASTNode } from '../../markup/ast';
-import { LocalsContext } from '../../markup/render';
+import { LocalsUpdateContext } from '../../markup/render';
 import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { executeMutation } from '../../execute-mutation';
@@ -81,11 +81,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, stripLocalsPrefix(getValues()), update);
     if (passage) {
       useStoryStore.getState().navigate(passage);
     }
@@ -98,7 +98,7 @@ export function MacroLink({
     label: display,
     target: passage ?? undefined,
     perform: () => {
-      executeChildren(children, stripLocalsPrefix(scope.values), scope.update);
+      executeChildren(children, stripLocalsPrefix(getValues()), update);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }

package/src/components/macros/Set.tsx

@@ -1,5 +1,5 @@
 import { useRef, useContext } from 'preact/hooks';
-import { LocalsContext } from '../../markup/render';
+import { LocalsUpdateContext } from '../../markup/render';
 import { stripLocalsPrefix } from '../../hooks/use-merged-locals';
 import { executeMutation } from '../../execute-mutation';
 import { currentSourceLocation } from '../../utils/source-location';
@@ -9,14 +9,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, stripLocalsPrefix(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) =>
@@ -28,7 +28,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 = key in localsValues ? localsValues[key] : 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) {
@@ -120,7 +134,7 @@ export function WidgetInvocation({
   return (
     <WidgetBody
       body={body}
-      parentValues={parentScope.values}
+      parentValues={parentValues}
       ownKeys={ownKeys}
     />
   );

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

@@ -1,6 +1,6 @@
 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
@@ -30,9 +30,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, stripLocalsPrefix(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[] = [];