@rohal12/spindle 0.28.4 → 0.29.0

package/package.json

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

package/src/components/macros/WidgetInvocation.tsx

@@ -9,6 +9,7 @@ import {
   LocalsValuesContext,
   LocalsUpdateContext,
   NobrContext,
+  WidgetChildrenContext,
   renderNodes,
 } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
@@ -19,6 +20,7 @@ interface WidgetInvocationProps {
   body: ASTNode[];
   params: string[];
   rawArgs?: string;
+  invocationChildren?: ASTNode[];
 }
 
 /**
@@ -110,13 +112,20 @@ export function WidgetInvocation({
   body,
   params,
   rawArgs,
+  invocationChildren,
 }: WidgetInvocationProps) {
   const parentValues = useContext(LocalsValuesContext);
   const nobr = useContext(NobrContext);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
+  const childrenValue = invocationChildren?.length ? invocationChildren : null;
+
   if (params.length === 0 || !rawArgs) {
-    return <>{renderNodes(body, { nobr, locals: parentValues })}</>;
+    return (
+      <WidgetChildrenContext.Provider value={childrenValue}>
+        {renderNodes(body, { nobr, locals: parentValues })}
+      </WidgetChildrenContext.Provider>
+    );
   }
 
   const argExprs = splitArgs(rawArgs);
@@ -137,10 +146,12 @@ export function WidgetInvocation({
   }
 
   return (
-    <WidgetBody
-      body={body}
-      parentValues={parentValues}
-      ownKeys={ownKeys}
-    />
+    <WidgetChildrenContext.Provider value={childrenValue}>
+      <WidgetBody
+        body={body}
+        parentValues={parentValues}
+        ownKeys={ownKeys}
+      />
+    </WidgetChildrenContext.Provider>
   );
 }

package/src/index.tsx

@@ -13,8 +13,9 @@ import {
   extractDefaults,
 } from './story-variables';
 import { tokenize } from './markup/tokenizer';
-import { buildAST } from './markup/ast';
+import { buildAST, registerBlockMacro } from './markup/ast';
 import { registerWidget } from './widgets/widget-registry';
+import { astContainsChildren } from './widgets/ast-scanner';
 import type { ASTNode } from './markup/ast';
 import './macros/register-builtins';
 import builtinCSS from './styles.css?inline';
@@ -122,7 +123,12 @@ function boot() {
               (t) =>
                 t.startsWith('$') || t.startsWith('_') || t.startsWith('@'),
             );
-          registerWidget(widgetName, node.children as ASTNode[], params);
+          const children = node.children as ASTNode[];
+          const isBlock = astContainsChildren(children);
+          registerWidget(widgetName, children, params, isBlock);
+          if (isBlock) {
+            registerBlockMacro(widgetName);
+          }
         }
       }
     }

package/src/markup/render.tsx

@@ -23,6 +23,7 @@ const defaultUpdater: LocalsUpdater = {
 export const LocalsValuesContext = createContext<Record<string, unknown>>({});
 export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
 export const NobrContext = createContext(false);
+export const WidgetChildrenContext = createContext<ASTNode[] | null>(null);
 
 /**
  * Convert an HTML string (from micromark) to Preact VNodes,
@@ -97,6 +98,14 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   );
 }
 
+function ChildrenSlot() {
+  const childrenAST = useContext(WidgetChildrenContext);
+  const nobr = useContext(NobrContext);
+  const locals = useContext(LocalsValuesContext);
+  if (!childrenAST || childrenAST.length === 0) return null;
+  return <>{renderNodes(childrenAST, { nobr, locals })}</>;
+}
+
 function renderMacro(node: MacroNode, key: number) {
   if (isSubMacro(node.name)) return null;
 
@@ -108,6 +117,7 @@ function renderMacro(node: MacroNode, key: number) {
         body={widget.body}
         params={widget.params}
         rawArgs={node.rawArgs}
+        invocationChildren={node.children}
       />
     );
   }
@@ -148,6 +158,9 @@ function renderSingleNode(
       return node.value;
 
     case 'variable':
+      if (node.scope === 'local' && node.name === 'children') {
+        return <ChildrenSlot key={key} />;
+      }
       return (
         <VarDisplay
           key={key}

package/src/widgets/ast-scanner.ts

@@ -0,0 +1,29 @@
+import type { ASTNode } from '../markup/ast';
+
+/**
+ * Recursively scan an AST node array for a VariableNode
+ * with scope 'local' and name 'children' (@children).
+ */
+export function astContainsChildren(nodes: ASTNode[]): boolean {
+  for (const node of nodes) {
+    if (
+      node.type === 'variable' &&
+      node.scope === 'local' &&
+      node.name === 'children'
+    ) {
+      return true;
+    }
+    if (node.type === 'html' && astContainsChildren(node.children)) {
+      return true;
+    }
+    if (node.type === 'macro') {
+      if (astContainsChildren(node.children)) return true;
+      if (node.branches) {
+        for (const branch of node.branches) {
+          if (astContainsChildren(branch.children)) return true;
+        }
+      }
+    }
+  }
+  return false;
+}

package/src/widgets/widget-registry.ts

@@ -3,6 +3,7 @@ import type { ASTNode } from '../markup/ast';
 interface WidgetEntry {
   body: ASTNode[];
   params: string[];
+  isBlock: boolean;
 }
 
 const widgets = new Map<string, WidgetEntry>();
@@ -11,14 +12,24 @@ export function registerWidget(
   name: string,
   bodyAST: ASTNode[],
   params: string[],
+  isBlock = false,
 ): void {
-  widgets.set(name.toLowerCase(), { body: bodyAST, params });
+  const filteredParams = params.filter((p) => p !== '@children');
+  widgets.set(name.toLowerCase(), {
+    body: bodyAST,
+    params: filteredParams,
+    isBlock,
+  });
 }
 
 export function getWidget(name: string): WidgetEntry | undefined {
   return widgets.get(name.toLowerCase());
 }
 
+export function isBlockWidget(name: string): boolean {
+  return widgets.get(name.toLowerCase())?.isBlock ?? false;
+}
+
 export function clearWidgets(): void {
   widgets.clear();
 }