@rohal12/spindle 0.59.14 → 0.59.15

package/package.json

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

package/src/class-registry.ts

@@ -2,14 +2,48 @@
 
 import { parse, stringify } from 'devalue';
 import { hasOwn } from './utils/namespace';
-import { extraKeys } from './utils/value-kinds';
+import { extraKeys, mapEntries, setMembers } from './utils/value-kinds';
 
 type Constructor = new (...args: any[]) => any;
 
 const registry = new Map<string, Constructor>();
 const ctorToName = new Map<Constructor, string>();
 
+/**
+ * Built-ins whose instances hold their value in internal slots that a save
+ * cannot rebuild: a registered class cannot extend them. (Array, Map, Set,
+ * Date, RegExp and Error can be extended, see classData.)
+ */
+const UNSUPPORTED_BASES: readonly Constructor[] = [
+  ArrayBuffer,
+  DataView,
+  Object.getPrototypeOf(Int8Array) as Constructor, // every typed array
+  URL,
+  URLSearchParams,
+  Number,
+  String,
+  Boolean,
+  Promise,
+  WeakMap,
+  WeakSet,
+  Function,
+] as Constructor[];
+
+/**
+ * Register `ctor` as `name`, so that its instances keep their class through
+ * copies, history and saves. Throws for a class extending a built-in whose
+ * instances cannot be saved (see UNSUPPORTED_BASES).
+ */
 export function registerClass(name: string, ctor: Constructor): void {
+  const base =
+    typeof ctor === 'function'
+      ? UNSUPPORTED_BASES.find((b) => ctor.prototype instanceof b)
+      : undefined;
+  if (base) {
+    throw new TypeError(
+      `spindle: Cannot register class "${name}": it extends ${base.name}, whose instances cannot be saved (a registered class may extend Array, Map, Set, Date, RegExp or Error)`,
+    );
+  }
   registry.set(name, ctor);
   ctorToName.set(ctor, name);
 }
@@ -48,8 +82,9 @@ export function clearRegistry(): void {
 //
 // - `c:<name>`: an instance of the class registered as <name>, with its own
 //   enumerable keys (and, for Error subclasses, its message and cause); for
-//   a subclass of Array, Map or Set, `[kind, contents, keys]`: the kind of
-//   collection, its elements (Map entries as pairs) and its other own
+//   a subclass of Array, Map, Set, Date or RegExp, `[kind, contents, keys]`:
+//   the built-in it extends, what that holds (elements, Map entries as
+//   pairs, the time, or the source, flags and lastIndex) and its other own
 //   enumerable keys;
 // - `E:<name>`: a built-in error (Error, TypeError, ..., AggregateError),
 //   with its message, cause, errors and own enumerable keys (not its stack);
@@ -155,18 +190,24 @@ function ownData(
   return data;
 }
 
-/** The kinds of collection a registered class may extend. */
-const COLLECTION_KINDS = {
+/**
+ * The built-ins a registered class may extend whose value is not in its
+ * keys, saved as their kind (see classData).
+ */
+const BUILTIN_KINDS = {
   Array: Array as unknown as Constructor,
   Map: Map as Constructor,
   Set: Set as Constructor,
+  Date: Date as Constructor,
+  RegExp: RegExp as Constructor,
 };
-type CollectionKind = keyof typeof COLLECTION_KINDS;
+type BuiltinKind = keyof typeof BUILTIN_KINDS;
 
 /**
  * The saved form of a registered class instance: its own data (see
- * ownData), or for a collection its kind, elements and extra keys, read
- * with the built-in methods, which a subclass may override (#391).
+ * ownData), or for a subclass of a built-in kind (see BUILTIN_KINDS) its
+ * kind, contents and extra keys, read with the built-in methods, which a
+ * subclass may override (#391, #393).
  */
 function classData(value: object): unknown {
   const extra = () => ownData(value, extraKeys(value));
@@ -179,10 +220,18 @@ function classData(value: object): unknown {
     return ['Array', items, extra()];
   }
   if (value instanceof Map) {
-    return ['Map', Array.from(Map.prototype.entries.call(value)), extra()];
+    return ['Map', Array.from(mapEntries(value)), extra()];
   }
   if (value instanceof Set) {
-    return ['Set', Array.from(Set.prototype.values.call(value)), extra()];
+    return ['Set', Array.from(setMembers(value)), extra()];
+  }
+  if (value instanceof Date) {
+    return ['Date', Date.prototype.getTime.call(value), extra()];
+  }
+  if (value instanceof RegExp) {
+    const source = Reflect.get(RegExp.prototype, 'source', value) as string;
+    const flags = Reflect.get(RegExp.prototype, 'flags', value) as string;
+    return ['RegExp', [source, flags, value.lastIndex], extra()];
   }
   return ownData(value);
 }
@@ -241,33 +290,64 @@ function reducers(): Record<string, (value: unknown) => unknown> {
 }
 
 /**
- * The collection of a registered class that a `[kind, contents, keys]`
- * list holds (see classData). A cycle through the collection revives it
- * before its list is complete (devalue holds unread parts as holes), so the
- * collection is kept per list and filled with what the list holds so far.
+ * The RegExp of a `[source, flags, lastIndex]` list (an `R` entry, or the
+ * contents of a RegExp subclass), or undefined if the list is malformed.
+ */
+function newRegExp(data: unknown): RegExp | undefined {
+  if (
+    !Array.isArray(data) ||
+    typeof data[0] !== 'string' ||
+    typeof data[1] !== 'string' ||
+    !Number.isSafeInteger(data[2])
+  ) {
+    return undefined;
+  }
+  const re = new RegExp(data[0], data[1]);
+  re.lastIndex = data[2] as number;
+  return re;
+}
+
+/**
+ * A new Date or RegExp holding `contents` (see classData), or undefined if
+ * they are malformed.
+ */
+function newAtomic(kind: 'Date' | 'RegExp', contents: unknown) {
+  if (kind === 'RegExp') return newRegExp(contents);
+  return typeof contents === 'number' ? new Date(contents) : undefined;
+}
+
+/**
+ * The built-in of a registered class that a `[kind, contents, keys]` list
+ * holds (see classData). A cycle through a collection revives it before its
+ * list is complete (devalue holds unread parts as holes), so the instance
+ * is kept per list and filled with what the list holds so far. (The
+ * contents of a Date or RegExp hold no objects, so they are complete.)
  */
 const collections = new WeakMap<unknown[], object>();
-function reviveCollection(name: string, ctor: Constructor, list: unknown[]) {
+function reviveBuiltin(name: string, ctor: Constructor, list: unknown[]) {
   const [kind, contents, keys] = list;
   const base =
-    typeof kind === 'string' && hasOwn(COLLECTION_KINDS, kind)
-      ? COLLECTION_KINDS[kind as CollectionKind]
+    typeof kind === 'string' && hasOwn(BUILTIN_KINDS, kind)
+      ? BUILTIN_KINDS[kind as BuiltinKind]
       : undefined;
+  const atomic = kind === 'Date' || kind === 'RegExp';
   if (
     list.length !== 3 ||
     !base ||
     !(ctor.prototype instanceof base) ||
-    (hasOwn(list, 1) && !Array.isArray(contents)) ||
+    (!atomic && hasOwn(list, 1) && !Array.isArray(contents)) ||
     (hasOwn(list, 2) && !isPlainData(keys))
   ) {
     throw malformedClass(name);
   }
   let made = collections.get(list);
   if (!made) {
-    made = Object.setPrototypeOf(new base(), ctor.prototype) as object;
+    const value = atomic ? newAtomic(kind, contents) : (new base() as object);
+    if (!value) throw malformedClass(name);
+    made = Object.setPrototypeOf(value, ctor.prototype) as object;
     collections.set(list, made);
   }
-  if (Array.isArray(contents)) fillCollection(made, contents);
+  if (!atomic && Array.isArray(contents)) fillCollection(made, contents);
   if (isPlainData(keys)) {
     for (const key of Object.keys(keys)) defineData(made, key, keys[key]);
   }
@@ -300,7 +380,7 @@ function fillCollection(made: object, contents: unknown[]): void {
 function reviveClass(name: string) {
   return (data: Record<string, unknown> | unknown[]): unknown => {
     if (Array.isArray(data)) {
-      return reviveCollection(name, registeredCtor(name), data);
+      return reviveBuiltin(name, registeredCtor(name), data);
     }
     if (!isPlainData(data)) {
       // Already revived: a cycle through the instance revives it twice
@@ -308,10 +388,8 @@ function reviveClass(name: string) {
       throw malformedClass(name);
     }
     const ctor = registeredCtor(name);
-    // A plain object cannot be made a collection (see classData)
-    if (
-      Object.values(COLLECTION_KINDS).some((c) => ctor.prototype instanceof c)
-    ) {
+    // A plain object cannot be made a built-in (see classData)
+    if (Object.values(BUILTIN_KINDS).some((c) => ctor.prototype instanceof c)) {
       throw malformedClass(name);
     }
     Object.setPrototypeOf(data, ctor.prototype as object);
@@ -391,16 +469,8 @@ function reviverFor(key: string | symbol) {
   if (key === KEYS_TAG) return reviveKeyed;
   if (key === REGEXP_TAG) {
     return (data: unknown) => {
-      if (
-        !Array.isArray(data) ||
-        typeof data[0] !== 'string' ||
-        typeof data[1] !== 'string' ||
-        !Number.isSafeInteger(data[2])
-      ) {
-        throw new TypeError('spindle: Malformed regular expression');
-      }
-      const re = new RegExp(data[0], data[1]);
-      re.lastIndex = data[2] as number;
+      const re = newRegExp(data);
+      if (!re) throw new TypeError('spindle: Malformed regular expression');
       return re;
     };
   }

package/src/components/Passage.tsx

@@ -7,7 +7,12 @@ import {
 } from 'preact/hooks';
 import { parseMarkup } from '../markup/parse';
 import type { ASTNode } from '../markup/ast';
-import { renderNodes, NobrContext } from '../markup/render';
+import {
+  renderNodes,
+  NobrContext,
+  ViewScopeContext,
+  useViewScope,
+} from '../markup/render';
 import { useStoryFields } from '../hooks/use-story-fields';
 import type { Passage as PassageData } from '../parser';
 import { sourceLocationOf } from '../utils/source-location';
@@ -130,20 +135,23 @@ export function Passage({
   }, [passage.name, navigationId]);
 
   const nobr = passage.tags.includes('nobr');
+  const viewScope = useViewScope();
 
   const inner = (
-    <div
-      ref={elRef}
-      class="passage"
-      data-passage={passage.name}
-      data-tags={passage.tags.join(' ')}
-      data-transition={dataTransition}
-    >
-      {headerContent && <div class="passage-header">{headerContent}</div>}
-      {content}
-      {footerContent && <div class="passage-footer">{footerContent}</div>}
-      {doneContent && <div hidden>{doneContent}</div>}
-    </div>
+    <ViewScopeContext.Provider value={viewScope}>
+      <div
+        ref={elRef}
+        class="passage"
+        data-passage={passage.name}
+        data-tags={passage.tags.join(' ')}
+        data-transition={dataTransition}
+      >
+        {headerContent && <div class="passage-header">{headerContent}</div>}
+        {content}
+        {footerContent && <div class="passage-footer">{footerContent}</div>}
+        {doneContent && <div hidden>{doneContent}</div>}
+      </div>
+    </ViewScopeContext.Provider>
   );
 
   return nobr ? (

package/src/components/PassageDialog.tsx

@@ -1,7 +1,12 @@
 import { createContext } from 'preact';
 import { useCallback, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
 import { parseMarkup } from '../markup/parse';
-import { renderNodes, NobrContext } from '../markup/render';
+import {
+  renderNodes,
+  NobrContext,
+  ViewScopeContext,
+  useViewScope,
+} from '../markup/render';
 import { useStoryFields } from '../hooks/use-story-fields';
 import { emitFromRender } from '../event-emitter';
 import { useModalFocus } from '../hooks/use-modal-focus';
@@ -66,6 +71,7 @@ export function PassageDialog({
   }, [markup, nobr]);
 
   const panelRef = useRef<HTMLDivElement>(null);
+  const viewScope = useViewScope();
 
   // Focus into the dialog, trap Tab, Escape to close, restore focus on close.
   // Declared before the dialogrender effect so handlers can move focus.
@@ -113,7 +119,11 @@ export function PassageDialog({
               ✕
             </button>
           )}
-          <div class="dialog-body">{content}</div>
+          <div class="dialog-body">
+            <ViewScopeContext.Provider value={viewScope}>
+              {content}
+            </ViewScopeContext.Provider>
+          </div>
         </div>
       </div>
     </DialogCloseContext.Provider>

package/src/components/macros/Radiobutton.tsx

@@ -1,4 +1,5 @@
 import { defineMacro } from '../../define-macro';
+import { ViewScopeContext } from '../../markup/render';
 import { VARIABLE_PARAMETER, useVariableAction } from './input-macro';
 
 defineMacro({
@@ -12,6 +13,8 @@ defineMacro({
   render(_props, ctx) {
     const radioValue = ctx.args.value ?? '';
     const label = ctx.args.label ?? '';
+    // One group per variable in each view (see ViewScopeContext)
+    const view = ctx.hooks.useContext(ViewScopeContext);
 
     useVariableAction(ctx, {
       type: 'radiobutton',
@@ -27,7 +30,7 @@ defineMacro({
       >
         <input
           type="radio"
-          name={`radio-${ctx.varName}`}
+          name={view ? `radio-${view}-${ctx.varName}` : `radio-${ctx.varName}`}
           checked={ctx.value === radioValue}
           onChange={() => ctx.setValue!(radioValue)}
         />

package/src/execute-mutation.ts

@@ -26,6 +26,7 @@ import {
 } from './structural';
 import { getByPath, setByPath } from './utils/object-path';
 import { asNamespace, hasOwn } from './utils/namespace';
+import { mapEntries, setMembers } from './utils/value-kinds';
 
 type NamespaceName = keyof VariableNamespaces;
 
@@ -150,11 +151,11 @@ function deeplyFrozen(value: unknown, seen = new Set<object>()): boolean {
   seen.add(value);
   // What a Map or Set holds is not in its properties (#388)
   if (value instanceof Map) {
-    for (const [key, entry] of value) {
+    for (const [key, entry] of mapEntries(value)) {
       if (!deeplyFrozen(key, seen) || !deeplyFrozen(entry, seen)) return false;
     }
   } else if (value instanceof Set) {
-    for (const member of value) {
+    for (const member of setMembers(value)) {
       if (!deeplyFrozen(member, seen)) return false;
     }
   }

package/src/markup/render.tsx

@@ -1,5 +1,5 @@
 import { createContext, type RefObject } from 'preact';
-import { useContext, useLayoutEffect, useRef } from 'preact/hooks';
+import { useContext, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { VarDisplay } from '../components/macros/VarDisplay';
 import { ExprDisplay } from '../components/macros/ExprDisplay';
 import { WidgetInvocation } from '../components/macros/WidgetInvocation';
@@ -58,6 +58,22 @@ export const InlineContext = createContext(false);
  */
 export const RawTextContext = createContext(false);
 
+/**
+ * The view content is rendered in: '' for the story interface, and an id of
+ * its own for each passage and dialog on display (see useViewScope). The
+ * radiobuttons of a variable form a native group within their view only:
+ * one group across views would let a dialog's checked button uncheck the
+ * passage's when it mounts (#396).
+ */
+export const ViewScopeContext = createContext('');
+
+let viewScopes = 0;
+
+/** A new view scope (see ViewScopeContext), kept while mounted. */
+export function useViewScope(): string {
+  return useState(() => `v${++viewScopes}`)[0];
+}
+
 /**
  * True inside an `<svg>` element. SVG attributes are case-sensitive and have
  * no live form properties, so they are set as written (see splitAttributes).

package/src/markup/spindle.peggy

@@ -31,6 +31,11 @@ const BRANCH_PARENT = { elseif: 'if', else: 'if', case: 'switch', default: 'swit
 const BRANCHING = new Set(['if', 'switch', 'timed']);
 const LINK_SEPARATORS = [['|', false], ['->', false], ['<-', true]];
 const NO_SELECTORS = {};
+/**
+ * A CommonMark email autolink, `<` an address `>` (without braces, which
+ * are markup), as markdown reads one.
+ */
+const EMAIL_AUTOLINK = /^<[a-zA-Z0-9.!#$%&'*+/=?^_`|~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*>$/;
 
 /**
  * A link's display text and target, from its text `inner` (at `at` in the
@@ -235,6 +240,7 @@ Item
   / Escape
   / Comment
   / LinkLexeme
+  / EmailAutolink
   / HtmlElement
   / VoidCloser
   / Value
@@ -294,6 +300,7 @@ TokenItem
   / Escape
   / Comment
   / LinkLexeme
+  / EmailAutolink
   / &{ return !textMode; } tag:HtmlOpen { return tag; }
   / &{ return !textMode; } tag:HtmlClose { return VOID_TAGS.has(tag.lower) ? null : tag; }
   / Value
@@ -429,6 +436,15 @@ MacroName
 
 // -------------------------------------------------------------------- HTML
 
+/**
+ * An email autolink (`<support@example.com>`), text that markdown makes a
+ * link: not an element `<support>` with an attribute `@example.com` (#395).
+ */
+EmailAutolink
+  = value:$("<" [a-zA-Z0-9.!#$%&'*+/=?^_`|~-]+ "@" [a-zA-Z0-9.-]+ ">")
+    &{ return EMAIL_AUTOLINK.test(value); }
+    { return lexeme('text', location(), { value }); }
+
 /** A redundant closer of a void element (</br>), which is dropped. */
 VoidCloser
   = &{ return !textMode; } tag:HtmlClose &{ return VOID_TAGS.has(tag.lower); } { return null; }

package/src/store.ts

@@ -444,6 +444,16 @@ function startVariables(defaults: Record<string, unknown>): Namespace {
   return initialVars;
 }
 
+/**
+ * Fresh transient variables from their declared defaults (init, restart,
+ * load). Transients are never saved, so an instance of an unregistered
+ * class (an engine, a library object) is kept as it is, as mutation code
+ * keeps it (#321): a copy would lose its class and methods (#398).
+ */
+function freshTransients(defaults: Record<string, unknown>): Namespace {
+  return createNamespace(deepClone(defaults, { keepUnregistered: true }));
+}
+
 /**
  * Enter the start passage with `variables`, as the only history moment
  * (init, restart). Call it inside a store update.
@@ -457,7 +467,7 @@ function enterStart(
   state.currentPassage = passage;
   state.navigationId++;
   state.variables = variables;
-  state.transient = createNamespace(deepClone(transientDefaults));
+  state.transient = freshTransients(transientDefaults);
   state.temporary = createNamespace();
   state.history = [{ passage, timestamp: Date.now() }];
   state.historyIndex = 0;
@@ -1719,7 +1729,7 @@ export const useStoryStore = create<StoryState>()(
         state.visitCounts = createCounts(payload.visitCounts);
         state.renderCounts = createCounts(payload.renderCounts);
         state.temporary = createNamespace();
-        state.transient = createNamespace(deepClone(get().transientDefaults));
+        state.transient = freshTransients(get().transientDefaults);
       });
 
       // The watchers of the loaded game (a payload without any, from an