@rohal12/spindle 0.23.0 → 0.24.0

package/package.json

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

package/src/components/App.tsx

@@ -1,11 +1,13 @@
 import { useEffect } from 'preact/hooks';
 import { useStoryStore } from '../store';
+import { NobrContext } from '../markup/render';
 import { StoryInterface } from './StoryInterface';
 import { TriggerDialogHost } from './TriggerDialogHost';
 
 export function App() {
   const storyData = useStoryStore((s) => s.storyData);
   const currentPassage = useStoryStore((s) => s.currentPassage);
+  const nobr = useStoryStore((s) => s.nobr);
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
@@ -25,10 +27,16 @@ export function App() {
     return <div class="loading">Loading...</div>;
   }
 
-  return (
+  const content = (
     <>
       <StoryInterface />
       <TriggerDialogHost />
     </>
   );
+
+  return nobr ? (
+    <NobrContext.Provider value={true}>{content}</NobrContext.Provider>
+  ) : (
+    content
+  );
 }

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/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/index.tsx

@@ -17,7 +17,7 @@ import { buildAST } from './markup/ast';
 import { registerWidget } from './widgets/widget-registry';
 import type { ASTNode } from './markup/ast';
 import './macros/register-builtins';
-import './styles.css';
+import builtinCSS from './styles.css?inline';
 
 function renderErrors(root: HTMLElement, errors: string[]) {
   root.innerHTML = '';
@@ -42,6 +42,12 @@ function renderErrors(root: HTMLElement, errors: string[]) {
 function boot() {
   const storyData = parseStoryData();
 
+  // Inject built-in styles with an id so they can be disabled at runtime
+  const builtinStyle = document.createElement('style');
+  builtinStyle.id = 'spindle-styles';
+  builtinStyle.textContent = builtinCSS;
+  document.head.appendChild(builtinStyle);
+
   // Install Story API before author script runs
   installStoryAPI();
 

package/src/store.ts

@@ -205,6 +205,7 @@ export interface StoryState {
   loadError: string | null;
   transitionConfig: TransitionConfig | null;
   nextTransition: TransitionConfig | null;
+  nobr: boolean;
 
   setMaxHistory: (limit: number) => void;
   init: (
@@ -249,6 +250,7 @@ export const useStoryStore = create<StoryState>()(
     loadError: null,
     transitionConfig: null,
     nextTransition: null,
+    nobr: false,
 
     setMaxHistory: (limit: number) => {
       set((state) => {

package/src/story-api.ts

@@ -73,6 +73,8 @@ export interface StoryAPI {
     callbackOrOptions: (() => void) | WatchOptions,
   ): () => void;
   unwatch(name: string): void;
+  setNobr(enabled: boolean): void;
+  setCSS(enabled: boolean): void;
   setTransition(config: TransitionConfig | null): void;
   setNextTransition(config: TransitionConfig | null): void;
   random(): number;
@@ -284,6 +286,15 @@ function createStoryAPI(): StoryAPI {
       removeTrigger(name);
     },
 
+    setNobr(enabled: boolean): void {
+      useStoryStore.setState({ nobr: enabled });
+    },
+
+    setCSS(enabled: boolean): void {
+      const el = document.getElementById('spindle-styles');
+      if (el) (el as HTMLStyleElement).disabled = !enabled;
+    },
+
     setTransition(config: TransitionConfig | null): void {
       useStoryStore.getState().setTransition(config);
     },

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />