@rohal12/spindle 0.58.0 → 0.59.1

package/src/components/macros/macro-args.ts

@@ -18,11 +18,11 @@ import { parseDelay } from '../../utils/parse-delay';
 import type { MacroArgs, ParameterDef } from '../../registry';
 import type { StoryState } from '../../store';
 import { noPassageError } from '../../runtime-errors';
+import { stringLiteralValue } from '../../js-lexer';
 import {
   endsWithOperator,
   isWhitespace,
   readQuoted,
-  readWholeJsString,
   readWholeQuoted,
   stripLooseQuotes,
   topLevelIndices,
@@ -30,6 +30,20 @@ import {
 
 type Span = [start: number, end: number];
 
+/**
+ * Where parseMacroArgs read each argument it set from text (not flags or
+ * separators), by parameter, options too: the start and end of its text in
+ * the raw arguments, quotes included.
+ */
+export type ArgSpans = Map<ParameterDef, Span>;
+
+/** Where a group's text is in the raw arguments, and the spans read so far. */
+interface Place {
+  /** The index in the raw arguments of the text being read. */
+  at: number;
+  spans: ArgSpans | undefined;
+}
+
 /** The terms of `src`: the runs of text between its depth-0 whitespace. */
 function terms(src: string): Span[] {
   const spans: Span[] = [];
@@ -64,7 +78,9 @@ export class MacroArgumentError extends Error {
   }
 }
 
-function readValue(param: ParameterDef, src: string): unknown {
+/** Read `src`, at `place`, as `param` says. */
+function readValue(param: ParameterDef, src: string, place: Place): unknown {
+  place.spans?.set(param, [place.at, place.at + src.length]);
   switch (param.type) {
     case 'string': {
       const value = readWholeQuoted(src);
@@ -80,7 +96,7 @@ function readValue(param: ParameterDef, src: string): unknown {
     case 'number':
       return Number(src);
     case 'options':
-      return readOptions(param.parameters ?? [], src);
+      return readOptions(param.parameters ?? [], src, place);
     default:
       return src;
   }
@@ -103,13 +119,15 @@ function matchAt(re: RegExp, src: string, pos: number): string | null {
 
 /**
  * Read keyword options (`goto "X" priority 5 once`). A keyword takes the
- * quoted string or digit run after it as its value; keywords that aren't
- * declared, and their values, are skipped. A keyword of a `string` parameter
- * must be followed by a quoted string.
+ * quoted string (with or without whitespace before it) or digit run after
+ * it as its value; keywords that aren't declared, and their values, are
+ * skipped. A keyword of a `string` parameter must be followed by a quoted
+ * string.
  */
 function readOptions(
   params: readonly ParameterDef[],
   src: string,
+  { at, spans }: Place,
 ): Record<string, unknown> {
   const options: Record<string, unknown> = {};
   let i = 0;
@@ -122,26 +140,28 @@ function readOptions(
     }
     i += key.length;
 
-    // A value is a quoted string or a digit run, after whitespace.
+    // A value is a quoted string, which may follow the keyword directly
+    // (`goto"Hall"`: a quote can't be part of one), or a digit run after
+    // whitespace.
     let val: string | undefined;
-    let quoted: ReturnType<typeof readQuoted> = null;
     let j = i;
     while (j < src.length && isWhitespace(src[j]!)) j++;
-    if (j > i) {
-      quoted = readQuoted(src, j);
-      const digits = quoted ? null : matchAt(DIGITS_RE, src, j);
-      if (quoted) {
-        val = quoted.value;
-        i = quoted.end;
-      } else if (digits) {
-        val = digits;
-        i = j + digits.length;
-      }
+    const quoted = readQuoted(src, j);
+    const digits = quoted || j === i ? null : matchAt(DIGITS_RE, src, j);
+    if (quoted) {
+      val = quoted.value;
+      i = quoted.end;
+    } else if (digits) {
+      val = digits;
+      i = j + digits.length;
     }
 
     const param = params.find((p) => p.name === key);
+    if (param && param.type !== 'flag' && val !== undefined) {
+      spans?.set(param, [at + j, at + i]);
+    }
     // A keyword that takes a string was given anything else, or nothing
-    if (param?.type === 'string' && (!quoted || val === undefined)) {
+    if (param?.type === 'string' && !quoted) {
       throw new MacroArgumentError(
         param,
         matchAt(WORD_OR_PUNCT_RE, src, j) ?? '',
@@ -158,21 +178,21 @@ function readOptions(
 const LEADING_OPERATOR_RE = /^(?:[-+*/&|^=<>?:,.]|%(?![A-Za-z_]))/;
 
 /**
- * The rest of `src` without the flag `word` as its last or first term, or
- * `null` if it has no such flag. Next to a binary operator the word is an
- * operand (`"a" + inline`), not a flag; the closing `/` of a regex literal
- * is not one.
+ * Where the rest of `src` is without the flag `word` as its last or first
+ * term, or `null` if it has no such flag. Next to a binary operator the
+ * word is an operand (`"a" + inline`), not a flag; the closing `/` of a
+ * regex literal is not one.
  */
-function takeFlag(src: string, word: string): string | null {
+function takeFlag(src: string, word: string): Span | null {
   const spans = terms(src);
   if (spans.length < 2) return null;
   if (slice(src, spans[spans.length - 1]!) === word) {
-    const rest = src.slice(0, spans[spans.length - 2]![1]);
-    if (!endsWithOperator(rest)) return rest;
+    const rest: Span = [0, spans[spans.length - 2]![1]];
+    if (!endsWithOperator(slice(src, rest))) return rest;
   }
   if (slice(src, spans[0]!) === word) {
-    const rest = src.slice(spans[1]![0]);
-    if (!LEADING_OPERATOR_RE.test(rest)) return rest;
+    const rest: Span = [spans[1]![0], src.length];
+    if (!LEADING_OPERATOR_RE.test(slice(src, rest))) return rest;
   }
   return null;
 }
@@ -211,17 +231,27 @@ const takesRest = (param: ParameterDef) =>
   param.type === 'passage' ||
   param.type === 'text';
 
-/** Read the parameters of one group from `src` (`null`: no text) into `args`. */
+/** The text of `src` without the whitespace around it, and where it is. */
+function trimmed(src: string, at: number): [text: string, at: number] {
+  const text = src.trim();
+  return [text, text ? at + src.indexOf(text) : at];
+}
+
+/**
+ * Read the parameters of one group from `src` (`null`: no text), which is
+ * at `at` in the raw arguments, into `args`.
+ */
 function readGroup(
   params: readonly ParameterDef[],
   src: string | null,
   args: Record<string, unknown>,
+  { at: srcAt, spans }: Place,
 ): void {
-  let text = src?.trim() ?? '';
+  let [text, at] = trimmed(src ?? '', srcAt);
   for (const flag of params.filter((p) => p.type === 'flag')) {
     const rest = src === null ? null : takeFlag(text, flag.name);
     args[flag.name] = rest !== null;
-    text = rest ?? text;
+    if (rest) [text, at] = trimmed(slice(text, rest), at + rest[0]);
   }
   const positional = params.filter((p) => p.type !== 'flag');
   if (positional.length === 0) return;
@@ -231,27 +261,29 @@ function readGroup(
     (p, i) => takesRest(p) && !positional.slice(i + 1).some(takesRest),
   );
   const restIndex = lastText < 0 ? positional.length - 1 : lastText;
-  const read = (param: ParameterDef, value: string) =>
-    value === '' ? unset(param) : readValue(param, value);
+  /** Read `param` from the text from `start` to `end`. */
+  const read = (param: ParameterDef, [start, end]: Span) =>
+    start === end
+      ? unset(param)
+      : readValue(param, text.slice(start, end), { at: at + start, spans });
 
   // One parameter reads the whole text: no need to split it.
   if (positional.length === 1) {
-    args[positional[0]!.name] = read(positional[0]!, text);
+    args[positional[0]!.name] = read(positional[0]!, [0, text.length]);
     return;
   }
 
-  const spans = terms(text);
+  const parts = terms(text);
   let from = 0;
-  let to = spans.length;
+  let to = parts.length;
   for (const param of positional.slice(0, restIndex)) {
-    args[param.name] =
-      from < to ? read(param, slice(text, spans[from++]!)) : unset(param);
+    args[param.name] = from < to ? read(param, parts[from++]!) : unset(param);
   }
   // Optional ones at the end: a term that doesn't have their form (a
   // `string` that isn't quoted) belongs to the rest, as in {meter $hp 100}
-  const readTrailing = (param: ParameterDef, value: string) => {
+  const readTrailing = (param: ParameterDef, span: Span) => {
     try {
-      return read(param, value);
+      return read(param, span);
     } catch (error) {
       if (error instanceof MacroArgumentError) return undefined;
       throw error;
@@ -259,17 +291,17 @@ function readGroup(
   };
   for (const param of positional.slice(restIndex + 1).reverse()) {
     const value =
-      from < to && !endsWithOperator(text.slice(0, spans[to - 1]![0]))
-        ? readTrailing(param, slice(text, spans[to - 1]!))
+      from < to && !endsWithOperator(text.slice(0, parts[to - 1]![0]))
+        ? readTrailing(param, parts[to - 1]!)
         : undefined;
     args[param.name] = value ?? unset(param);
     if (value !== undefined) to--;
+    // A term it didn't take
+    else spans?.delete(param);
   }
   const rest = positional[restIndex]!;
   args[rest.name] =
-    from < to
-      ? read(rest, text.slice(spans[from]![0], spans[to - 1]![1]))
-      : unset(rest);
+    from < to ? read(rest, [parts[from]![0], parts[to - 1]![1]]) : unset(rest);
 }
 
 /** The duration a timing macro ({repeat}, {type}, {timed}/{next}) waits. */
@@ -279,25 +311,33 @@ export const DELAY_PARAMETER = {
   required: true,
 } as const;
 
-/** Read `rawArgs` into the declared `parameters` (see above). */
+/**
+ * Read `rawArgs` into the declared `parameters` (see above). With `spans`,
+ * note there where each argument set was read.
+ */
 export function parseMacroArgs<const P extends readonly ParameterDef[]>(
   rawArgs: string,
   parameters: P,
+  spans?: ArgSpans,
 ): MacroArgs<P> {
   const args: Record<string, unknown> = {};
   // The text after the last separator read, null once one is missing
-  let rest: string | null = rawArgs.trim();
+  let [rest, restAt]: [string | null, number] = trimmed(rawArgs, 0);
   let groupStart = 0;
   parameters.forEach((separator, i) => {
     if (separator.type !== 'separator') return;
     const at = rest === null ? null : findSeparator(rest, separator.name);
     args[separator.name] = at !== null;
     const before = at ? rest!.slice(0, at[0]) : rest;
-    readGroup(parameters.slice(groupStart, i), before, args);
+    readGroup(parameters.slice(groupStart, i), before, args, {
+      at: restAt,
+      spans,
+    });
     rest = at ? rest!.slice(at[1]) : null;
+    if (at) restAt += at[1];
     groupStart = i + 1;
   });
-  readGroup(parameters.slice(groupStart), rest, args);
+  readGroup(parameters.slice(groupStart), rest, args, { at: restAt, spans });
   return args as MacroArgs<P>;
 }
 
@@ -308,13 +348,14 @@ export type PassageTarget =
 
 /**
  * Read a `passage` argument as written (`{goto "Hall"}`, `{goto $room}`): a
- * quoted string is the name its JavaScript literal has (`"\u0048all"` is
- * `Hall`), anything else an expression, whose value is the name when it
+ * string literal is the name JavaScript reads from it (`"\u0048all"` is
+ * `Hall`), anything else (a literal that is not well-formed too) an
+ * expression, whose value is the name when it
  * runs (see evaluatePassageName).
  */
 export function passageTarget(arg: string): PassageTarget {
   const expression = arg.trim();
-  const name = readWholeJsString(expression);
+  const name = stringLiteralValue(expression);
   return name === null
     ? { kind: 'expression', expression }
     : { kind: 'name', name };

package/src/components/macros/option-utils.ts

@@ -16,7 +16,7 @@ export function parseVarArgs(rawArgs: string): {
 
 /** The parameters of an `{option}` sub-macro: its value. */
 const OPTION_PARAMETERS = [
-  { name: 'value', type: 'string', required: true },
+  { name: 'value', type: 'string', holds: 'text', required: true },
 ] as const;
 
 /** The parameters of the built-in sub-macros that take arguments. */

package/src/index.tsx

@@ -17,6 +17,7 @@ import {
   extractDefaults,
 } from './story-variables';
 import { getMacro, getMacroRegistry, isSubMacro } from './registry';
+import { parameterLookup } from './code-check';
 import { getWidget } from './widgets/widget-registry';
 import {
   formatDiagnostic,
@@ -71,14 +72,11 @@ function markupErrors(
   only: (passage: MarkupPassage) => boolean,
 ): string[] {
   const macros = getMacroRegistry();
-  const parameters = new Map(
-    macros.map((m) => [m.name.toLowerCase(), m.parameters]),
-  );
   return validateMarkup(storyData.passages.values(), {
     isKnownMacro: (name) =>
       !!getMacro(name) || isSubMacro(name) || !!getWidget(name),
     macroNames: macros.map((m) => m.name),
-    parametersOf: (name) => parameters.get(name),
+    parametersOf: parameterLookup(macros),
     only,
   }).map(formatDiagnostic);
 }

package/src/js-lexer.ts

@@ -1122,6 +1122,25 @@ function regexEnd(src: string, start: number): number {
   return -1;
 }
 
+/**
+ * The value of `src` when it is exactly one `"…"` or `'…'` string literal,
+ * as JavaScript reads it (`"\u0048all"` is `Hall`, `"\1"` is U+0001 in
+ * the non-strict code passages run), otherwise `null`: other code, or a
+ * literal that is not well-formed (`"\u{110000}"`).
+ */
+export function stringLiteralValue(src: string): string | null {
+  if (src[0] !== '"' && src[0] !== "'") return null;
+  try {
+    const p = tokenizerAt(src, 0, 'expression');
+    p.nextToken();
+    return p.type === tt.string && p.end === src.length
+      ? (p.value as string)
+      : null;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Scan the `"…"` or `'…'` string literal opening at `start`. `end` is the
  * index just past its closing quote, or `src.length` when it is unterminated

package/src/markup/parse.ts

@@ -153,10 +153,24 @@ export function tokenizeMarkupTolerant(
 ): TolerantTokens {
   const tokens: Token[] = [];
   const errors: MarkupError[] = [];
+  // The code of a tag ends at a }: with none after it, the tag is unclosed
+  // without reading its code to the end of the source, which every
+  // unclosed tag would do again (#265).
+  const lastBrace = source.lastIndexOf('}');
+  const { closeBrace } = { ...defaultHooks, ...options.hooks };
   /** `text` shifted by `base`, tokenized: the tokens or the error. */
   const attempt = (text: string, base: number): Token[] | MarkupError => {
+    const hooks: Partial<MarkupHooks> = {
+      ...options.hooks,
+      closeBrace: (input, codeStart, lenientStart) =>
+        base + Math.min(codeStart, lenientStart) > lastBrace
+          ? -1
+          : closeBrace(input, codeStart, lenientStart),
+    };
     try {
-      return tokenizeMarkup(text, options).map((token) => shift(token, base));
+      return tokenizeMarkup(text, { ...options, hooks }).map((token) =>
+        shift(token, base),
+      );
     } catch (error) {
       if (!(error instanceof MarkupError)) throw error;
       return error;
@@ -199,7 +213,11 @@ export function tokenizeMarkupTolerant(
 
 /** `token` with its offsets moved `by` on. */
 function shift(token: Token, by: number): Token {
-  return by === 0
-    ? token
-    : { ...token, start: token.start + by, end: token.end + by };
+  if (by === 0) return token;
+  const moved = { ...token, start: token.start + by, end: token.end + by };
+  if (moved.type === 'link') {
+    moved.targetStart += by;
+    moved.targetEnd += by;
+  }
+  return moved;
 }

package/src/markup/spindle.peggy

@@ -32,16 +32,28 @@ const BRANCHING = new Set(['if', 'switch', 'timed']);
 const LINK_SEPARATORS = [['|', false], ['->', false], ['<-', true]];
 const NO_SELECTORS = {};
 
-function parseLink(inner) {
+/**
+ * A link's display text and target, from its text `inner` (at `at` in the
+ * input), with where the target is written.
+ */
+function parseLink(inner, at) {
+  /** The trimmed text from `start` to `end` of inner, and where it is. */
+  const part = (start, end) => {
+    const raw = inner.slice(start, end);
+    const value = raw.trim();
+    const from = at + start + (value ? raw.indexOf(value) : 0);
+    return { value, start: from, end: from + value.length };
+  };
   for (const [separator, targetFirst] of LINK_SEPARATORS) {
     const idx = inner.indexOf(separator);
     if (idx === -1) continue;
-    const before = inner.slice(0, idx).trim();
-    const after = inner.slice(idx + separator.length).trim();
-    return targetFirst ? { display: after, target: before } : { display: before, target: after };
+    const before = part(0, idx);
+    const after = part(idx + separator.length, inner.length);
+    const [display, target] = targetFirst ? [after, before] : [before, after];
+    return { display: display.value, target: target.value, targetStart: target.start, targetEnd: target.end };
   }
-  const trimmed = inner.trim();
-  return { display: trimmed, target: trimmed };
+  const whole = part(0, inner.length);
+  return { display: whole.value, target: whole.value, targetStart: whole.start, targetEnd: whole.end };
 }
 
 function quoteArg(value) {
@@ -106,7 +118,7 @@ function tokenOf(x) {
     case 'text':
       return { type: 'text', value: x.value, ...span };
     case 'link':
-      return withSelectors({ type: 'link', display: x.display, target: x.target, ...span }, x);
+      return withSelectors({ type: 'link', display: x.display, target: x.target, targetStart: x.targetStart, targetEnd: x.targetEnd, ...span }, x);
     case 'variable':
       return withSelectors({ type: 'variable', name: x.name, scope: x.scope, ...span }, x);
     case 'expression':
@@ -336,8 +348,8 @@ Literal
   / "[" { return lexeme('text', location(), { value: '[' }); }
 
 LinkLexeme
-  = &{ return !textMode; } "[[" s:Selectors inner:$LinkText "]]" {
-      return withSelectors(lexeme('link', location(), parseLink(inner)), s);
+  = &{ return !textMode; } "[[" s:Selectors at:Here inner:$LinkText "]]" {
+      return withSelectors(lexeme('link', location(), parseLink(inner, at)), s);
     }
   / &{ return !textMode; } "[[" { fail('Unclosed link: [[ without ]]', location()); }
 

package/src/markup/tokens.ts

@@ -58,6 +58,9 @@ export interface LinkToken extends Span, Selectors {
   type: 'link';
   display: string;
   target: string;
+  /** Where the target is written, from `targetStart` to `targetEnd`. */
+  targetStart: number;
+  targetEnd: number;
 }
 
 export interface MacroToken extends Span, Selectors {

package/src/markup/validate.ts

@@ -8,10 +8,13 @@
 import { lineColumn, MarkupError, parseMarkup, tokenizeMarkup } from './parse';
 import type { Token } from './tokens';
 import { parseWidgetDef } from '../widgets/widget-def';
-import { codeAndText, parseOrError, withParseCache } from '../code-check';
+import {
+  codeAndText,
+  parseOrError,
+  withParseCache,
+  type ParametersOf,
+} from '../code-check';
 import { CodeSyntaxError } from '../js-lexer';
-import type { ParameterDef } from '../registry';
-import { subMacroParameters } from '../components/macros/option-utils';
 
 /** A passage to validate. */
 export interface MarkupPassage {
@@ -59,12 +62,13 @@ export interface MarkupValidationOptions {
    */
   checkPassageNames?: boolean;
   /**
-   * The declared parameters of a macro, whose `expression` and `statements`
-   * arguments are checked as code and whose `text` and `string` arguments
-   * as markup (see code-check.ts). Without them only the code of `{$…}`,
-   * `{do}`, branch conditions and attributes is checked.
+   * The declared parameters of a macro (see parameterLookup in
+   * code-check.ts), whose `expression` and `statements` arguments are
+   * checked as code and whose `text` and `string` arguments as what they
+   * hold. Without them only the code of `{$…}`, `{do}`, branch conditions
+   * and attributes is checked.
    */
-  parametersOf?(name: string): readonly ParameterDef[] | undefined;
+  parametersOf?: ParametersOf;
 }
 
 /**
@@ -228,8 +232,7 @@ export function validateMarkup(
     }
   };
 
-  const parametersOf = (name: string) =>
-    options.parametersOf?.(name) ?? subMacroParameters(name);
+  const parametersOf: ParametersOf = options.parametersOf ?? (() => undefined);
 
   /**
    * Check `tokens`, the tokens of `src`, which starts at `base` in the

package/src/registry.ts

@@ -104,11 +104,36 @@ export const PARAMETER_TYPES = [
 
 export type ParameterType = (typeof PARAMETER_TYPES)[number];
 
+/**
+ * What the value of a `string` or `text` argument holds, for the check at
+ * story start and for tooling (see code-check.ts):
+ * - `markup`: markup the macro renders (`{button}`'s label): its markup
+ *   is checked.
+ * - `text`: plain text the macro uses as written (`{checkbox}`'s label).
+ * - `passage`: a passage name (`{watch}`'s `goto`): the passage must exist.
+ * - `expression`, `statements`: code (`{watch}`'s condition and `run`): it
+ *   is checked as code, and its variable references against the schema.
+ *
+ * Without it, the argument of a macro with `interpolate` holds `markup`,
+ * any other `text`.
+ */
+export const STRING_HOLDS = [
+  'markup',
+  'text',
+  'passage',
+  'expression',
+  'statements',
+] as const;
+
+export type StringHolds = (typeof STRING_HOLDS)[number];
+
 export interface ParameterDef {
   name: string;
   required?: boolean;
   description?: string;
   type: ParameterType;
+  /** What a `string` or `text` argument holds (see StringHolds). */
+  holds?: StringHolds;
   /** The options of an `options` parameter. */
   parameters?: readonly ParameterDef[];
 }
@@ -116,30 +141,62 @@ export interface ParameterDef {
 /**
  * Throw if a parameter `macro` declares (or an option of one) has no type,
  * or one that isn't a ParameterType: arguments are read by their type, and
- * there is no default.
+ * there is no default. Throw too if it declares what it `holds` wrongly.
  */
 export function checkParameterTypes(
   macro: string,
   parameters: readonly ParameterDef[],
 ): void {
+  const holdsFix =
+    `Give a \`string\` or \`text\` parameter one of ${STRING_HOLDS.join(', ')} ` +
+    'to hold (see docs/custom-macros.md#what-a-string-holds).';
   for (const param of parameters) {
     const type: unknown = param.type;
     if (!PARAMETER_TYPES.includes(type as ParameterType)) {
-      const problem =
+      throw parameterError(
+        macro,
+        param,
         type === undefined
           ? 'has no type'
-          : `has the unknown type ${JSON.stringify(type)}`;
-      throw new Error(
-        `spindle: The parameter "${param.name}" of the macro {${macro}} ${problem}. ` +
-          `Give it one of the types ${PARAMETER_TYPES.join(', ')} ` +
+          : `has the unknown type ${JSON.stringify(type)}`,
+        `Give it one of the types ${PARAMETER_TYPES.join(', ')} ` +
           '(see docs/custom-macros.md#parameter-types), ' +
           'or declare no parameters and read props.rawArgs.',
       );
     }
+    const holds: unknown = param.holds;
+    if (holds !== undefined && type !== 'string' && type !== 'text') {
+      throw parameterError(
+        macro,
+        param,
+        `is of the type ${type}, which holds what it is`,
+        holdsFix,
+      );
+    }
+    if (holds !== undefined && !STRING_HOLDS.includes(holds as StringHolds)) {
+      throw parameterError(
+        macro,
+        param,
+        `holds the unknown ${JSON.stringify(holds)}`,
+        holdsFix,
+      );
+    }
     if (param.parameters) checkParameterTypes(macro, param.parameters);
   }
 }
 
+/** The error for the parameter `param` of `macro`: what is wrong, and the fix. */
+function parameterError(
+  macro: string,
+  param: ParameterDef,
+  problem: string,
+  fix: string,
+): Error {
+  return new Error(
+    `spindle: The parameter "${param.name}" of the macro {${macro}} ${problem}. ${fix}`,
+  );
+}
+
 type ArgValue<T, D> = T extends 'flag' | 'separator'
   ? boolean
   : T extends 'names'

package/src/saves/storage.ts

@@ -315,7 +315,20 @@ function createIDBBackend(): StorageBackend {
       make: (store: IDBObjectStore) => IDBRequest<R>,
     ): Promise<R> => {
       const db = await openDB();
-      return idbReq(make(db.transaction(name, mode).objectStore(name)));
+      const tx = db.transaction(name, mode);
+      const result = idbReq(make(tx.objectStore(name)));
+      // A request can succeed and its transaction still roll back, so a
+      // write is done only when the transaction completes.
+      if (mode === 'readonly') return result;
+      const committed = new Promise<void>((resolve, reject) => {
+        tx.oncomplete = () => resolve();
+        tx.onabort = () =>
+          reject(
+            tx.error ?? new DOMException('Transaction aborted', 'AbortError'),
+          );
+      });
+      const [value] = await Promise.all([result, committed]);
+      return value;
     };
 
     return {