@rohal12/spindle 0.22.0 → 0.23.1

package/package.json

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

package/src/components/Passage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useEffect, useState } from 'preact/hooks';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
-import { renderNodes } from '../markup/render';
+import { renderNodes, NobrContext } from '../markup/render';
 import { useStoryStore } from '../store';
 import type { Passage as PassageData } from '../parser';
 import { sourceLocationOf } from '../utils/source-location';
@@ -89,7 +89,9 @@ export function Passage({ passage, dataTransition }: PassageProps) {
     }
   }, [doneReady, donePassage?.content]);
 
-  return (
+  const nobr = passage.tags.includes('nobr');
+
+  const inner = (
     <div
       class="passage"
       data-passage={passage.name}
@@ -102,4 +104,10 @@ export function Passage({ passage, dataTransition }: PassageProps) {
       {doneContent && <div hidden>{doneContent}</div>}
     </div>
   );
+
+  return nobr ? (
+    <NobrContext.Provider value={true}>{inner}</NobrContext.Provider>
+  ) : (
+    inner
+  );
 }

package/src/components/StoryInterface.tsx

@@ -1,7 +1,7 @@
 import { useStoryStore } from '../store';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
-import { renderInlineNodes } from '../markup/render';
+import { renderInlineNodes, NobrContext } from '../markup/render';
 
 const DEFAULT_MARKUP =
   '<header class="story-menubar">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}';
@@ -12,11 +12,17 @@ export function StoryInterface() {
   const overridePassage = storyData?.passages.get('StoryInterface');
   const markup =
     overridePassage !== undefined ? overridePassage.content : DEFAULT_MARKUP;
+  const nobr = overridePassage?.tags.includes('nobr') ?? false;
 
   try {
     const tokens = tokenize(markup);
     const ast = buildAST(tokens);
-    return <>{renderInlineNodes(ast)}</>;
+    const rendered = <>{renderInlineNodes(ast)}</>;
+    return nobr ? (
+      <NobrContext.Provider value={true}>{rendered}</NobrContext.Provider>
+    ) : (
+      rendered
+    );
   } catch (err) {
     return (
       <span class="error">

package/src/components/macros/For.tsx

@@ -8,6 +8,7 @@ import {
 import {
   LocalsValuesContext,
   LocalsUpdateContext,
+  NobrContext,
   renderNodes,
 } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
@@ -76,10 +77,12 @@ function ForIteration({
   }, []);
   const updater = useMemo(() => ({ update, getValues }), [update, getValues]);
 
+  const nobr = useContext(NobrContext);
+
   return (
     <LocalsUpdateContext.Provider value={updater}>
       <LocalsValuesContext.Provider value={localState}>
-        {renderNodes(children)}
+        {renderNodes(children, nobr ? { nobr: true } : undefined)}
       </LocalsValuesContext.Provider>
     </LocalsUpdateContext.Provider>
   );

package/src/components/macros/Include.tsx

@@ -1,6 +1,7 @@
 import { useStoryStore } from '../../store';
 import { tokenize } from '../../markup/tokenizer';
 import { buildAST } from '../../markup/ast';
+import { NobrContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 
 defineMacro({
@@ -33,10 +34,16 @@ defineMacro({
       );
     }
 
+    const nobr = passage.tags.includes('nobr');
     const tokens = tokenize(passage.content);
     const ast = buildAST(tokens);
-    const content = inline ? ctx.renderInlineNodes(ast) : ctx.renderNodes(ast);
+    const content = inline
+      ? ctx.renderInlineNodes(ast)
+      : ctx.renderNodes(ast, nobr ? { nobr: true } : undefined);
 
+    if (nobr) {
+      return ctx.wrap(ctx.h(NobrContext.Provider, { value: true }, content));
+    }
     return ctx.wrap(content);
   },
 });

package/src/components/macros/Nobr.tsx

@@ -1,8 +1,15 @@
 import { defineMacro } from '../../define-macro';
+import { NobrContext } from '../../markup/render';
 
 defineMacro({
   name: 'nobr',
   render({ children = [] }, ctx) {
-    return ctx.wrap(ctx.renderNodes(children, { nobr: true }));
+    return ctx.wrap(
+      ctx.h(
+        NobrContext.Provider,
+        { value: true },
+        ctx.renderNodes(children, { nobr: true }),
+      ),
+    );
   },
 });

package/src/components/macros/WidgetInvocation.tsx

@@ -8,6 +8,7 @@ import {
 import {
   LocalsValuesContext,
   LocalsUpdateContext,
+  NobrContext,
   renderNodes,
 } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
@@ -79,6 +80,7 @@ function WidgetBody({
   parentValues: Record<string, unknown>;
   ownKeys: Record<string, unknown>;
 }) {
+  const nobr = useContext(NobrContext);
   const [localState, setLocalState] = useState<Record<string, unknown>>(() => ({
     ...parentValues,
     ...ownKeys,
@@ -96,7 +98,7 @@ function WidgetBody({
   return (
     <LocalsUpdateContext.Provider value={updater}>
       <LocalsValuesContext.Provider value={localState}>
-        {renderNodes(body)}
+        {renderNodes(body, nobr ? { nobr: true } : undefined)}
       </LocalsValuesContext.Provider>
     </LocalsUpdateContext.Provider>
   );
@@ -108,10 +110,11 @@ export function WidgetInvocation({
   rawArgs,
 }: WidgetInvocationProps) {
   const parentValues = useContext(LocalsValuesContext);
+  const nobr = useContext(NobrContext);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
   if (params.length === 0 || !rawArgs) {
-    return <>{renderNodes(body)}</>;
+    return <>{renderNodes(body, nobr ? { nobr: true } : undefined)}</>;
   }
 
   const argExprs = splitArgs(rawArgs);

package/src/define-macro.ts

@@ -13,9 +13,11 @@ import { useInterpolate } from './hooks/use-interpolate';
 import { useMergedLocals } from './hooks/use-merged-locals';
 import {
   LocalsUpdateContext,
-  renderNodes,
+  NobrContext,
+  renderNodes as _renderNodes,
   renderInlineNodes,
 } from './markup/render';
+import type { ASTNode } from './markup/ast';
 import { executeMutation } from './execute-mutation';
 import { evaluate } from './expression';
 import { useStoryStore } from './store';
@@ -56,7 +58,7 @@ export interface MacroContext {
   wrap: (content: ComponentChildren) => VNode<any>;
   useAction: (opts: UseActionOptions) => string;
   h: typeof h;
-  renderNodes: typeof renderNodes;
+  renderNodes: typeof _renderNodes;
   renderInlineNodes: typeof renderInlineNodes;
   hooks: {
     useState: typeof useState;
@@ -102,6 +104,11 @@ export function defineMacro(config: MacroDefinition): void {
 
     // Always-on: cssClass + mutation
     const { update, getValues } = useContext(LocalsUpdateContext);
+    const nobr = useContext(NobrContext);
+    const renderNodes = nobr
+      ? (nodes: ASTNode[], options?: { nobr?: boolean }) =>
+          _renderNodes(nodes, { nobr: true, ...options })
+      : _renderNodes;
     const ctx: MacroContext = {
       collectText,
       sourceLocation: currentSourceLocation,

package/src/markup/render.tsx

@@ -1,4 +1,5 @@
 import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 import { VarDisplay } from '../components/macros/VarDisplay';
 import { WidgetInvocation } from '../components/macros/WidgetInvocation';
 import { getWidget } from '../widgets/widget-registry';
@@ -21,6 +22,7 @@ const defaultUpdater: LocalsUpdater = {
 
 export const LocalsValuesContext = createContext<Record<string, unknown>>({});
 export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
+export const NobrContext = createContext(false);
 
 /**
  * Convert an HTML string (from micromark) to Preact VNodes,
@@ -80,6 +82,7 @@ function convertDomNode(
 
 function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const resolve = useInterpolate();
+  const nobr = useContext(NobrContext);
   const attrs: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node.attributes)) {
     attrs[k] = resolve(v) ?? v;
@@ -87,7 +90,9 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   return h(
     node.tag,
     attrs,
-    node.children.length > 0 ? renderNodes(node.children) : undefined,
+    node.children.length > 0
+      ? renderNodes(node.children, nobr ? { nobr: true } : undefined)
+      : undefined,
   );
 }