sfn-diagram-react 0.5.0 → 0.7.0

package/README.md

@@ -15,7 +15,7 @@ npm install sfn-diagram-react sfn-diagram
 pnpm add sfn-diagram-react sfn-diagram
 ```
 
-`react` and `sfn-diagram` are peer dependencies. `sfn-diagram >= 1.6.0` is required — earlier versions don't have the options this package forwards (`collapse`, `catchHandling`, `showVariables`, `generateHtml`, and `edgeOverrides`' qualified-id form).
+`react` and `sfn-diagram` are peer dependencies. `sfn-diagram >= 1.7.0` is required — earlier versions don't have the options this package forwards (`collapse`, `catchHandling`, `showVariables`, `generateHtml`, `edgeOverrides`' qualified-id form, and `layout`/`theme` on the Mermaid path).
 
 ## Usage
 
@@ -62,12 +62,12 @@ JSON string of either. In the browser, pass the JSON string.
 overlaying an execution onto a diff. Combining them calls `onError` and renders `null`,
 the same way any other invalid input is handled.
 
-**`format="mermaid"` combined with `history` ignores every other diagram option** —
-`catchHandling`, `collapse`, `edgeStyle`, `showVariables`, and the rest. Core's
-Mermaid execution-overlay function (`generateMermaidExecution`) accepts only the ASL
-definition, `history`, `layout`, and `theme`; unlike the plain Mermaid path
-(`generateMermaid`), which honours the full option set. The SVG execution overlay is
-unaffected — it honours every option.
+**`format="mermaid"` combined with `history` honours the same options as plain
+`format="mermaid"`** — `catchHandling`, `collapse`, `showVariables`, `layout` and
+`theme` — with sfn-diagram 1.10 or later. Earlier versions of core's Mermaid
+execution-overlay function (`generateMermaidExecution`) accept only the ASL definition,
+`history`, `layout`, and `theme`, and ignore the rest. The SVG execution overlay
+honours every option.
 
 ### Interactive viewer (`format="html"`)
 
@@ -83,8 +83,9 @@ Consequences worth knowing:
   wrapper with a fixed aspect ratio).
 - `onStateClick` does not fire from inside it — clicks inside a sandboxed iframe never
   reach the parent document's event handlers.
-- `history` cannot be combined with `format="html"` — core's `generateHtml` accepts
-  neither `history` nor a diff. Combining them calls `onError` and renders `null`.
+- `history` cannot be combined with `format="html"` yet — core's `generateHtml` accepts
+  `history` and `diff` overlays since sfn-diagram 1.8, but this hook does not wire them
+  up. Combining them calls `onError` and renders `null`.
 
 ```tsx
 <SfnDiagram definition={definition} format="html" style={{ height: 600, width: '100%' }} />
@@ -108,9 +109,9 @@ coloured (green / yellow / red) instead of the machine's normal styling.
   for either combination. Combining them calls `onError` and renders `null`.
 - The **SVG diff** (`generateDiff`) honours every diagram option this package forwards
   (`collapse`, `catchHandling`, `showIcons`, and the rest).
-- The **Mermaid diff** (`generateMermaidDiff`) accepts only the two definitions — every
-  other prop (`layout`, `theme`, `collapse`, …) is silently ignored in `format="mermaid"`
-  diff mode.
+- The **Mermaid diff** ignores every prop except the two definitions (`layout`, `theme`,
+  `collapse`, …) in `format="mermaid"` diff mode: this package doesn't forward them to
+  `generateMermaidDiff` yet (#393), although core accepts them since sfn-diagram 1.10.
 
 ### `onStateClick`
 
@@ -198,8 +199,8 @@ ones (`className`, `onError`, `onStateClick`, `style`, `title`). Errors are retu
 | `theme` | `'light' \| 'dark' \| CustomTheme` | `'light'` | svg, mermaid | Diagram theme. |
 | `title` | `string` | `'Step Functions diagram'` | html only | Accessible title for the rendered iframe. |
 
-¹ Ignored when `format="mermaid"` is combined with `history` — see
-[Execution overlay](#execution-overlay). Applies normally to plain `format="mermaid"`
+¹ Ignored when `format="mermaid"` is combined with `history` on sfn-diagram before 1.10 —
+see [Execution overlay](#execution-overlay). Applies normally to plain `format="mermaid"`
 (no `history`). `format="mermaid"` diff mode (the `before` prop) is a separate
 carve-out with its own rule — see [Diff mode](#diff-mode).
 

package/dist/index.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
 let sfn_diagram = require("sfn-diagram");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/useSfnDiagram.ts
+// src/useSfnDiagram.ts
 function toAslString(params) {
 	const { definition } = params;
 	return typeof definition === "string" ? definition : JSON.stringify(definition);
@@ -153,8 +153,7 @@ function useSfnDiagram(params) {
 		theme
 	]);
 }
-//#endregion
-//#region src/SfnDiagram.tsx
+// src/SfnDiagram.tsx
 const SfnDiagram = (0, react.forwardRef)(function SfnDiagram({ className, onError, onStateClick, style, title = "Step Functions diagram", ...diagramParams }, ref) {
 	const result = useSfnDiagram(diagramParams);
 	(0, react.useImperativeHandle)(ref, () => ({ getSvg: () => result.type === "svg" ? result.svg : null }), [result]);
@@ -183,7 +182,7 @@ const SfnDiagram = (0, react.forwardRef)(function SfnDiagram({ className, onErro
 	});
 	if (result.type === "html") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
 		className,
-		sandbox: "allow-scripts",
+		sandbox: "allow-downloads allow-scripts",
 		srcDoc: result.html,
 		style,
 		title
@@ -195,6 +194,5 @@ const SfnDiagram = (0, react.forwardRef)(function SfnDiagram({ className, onErro
 		style
 	});
 });
-//#endregion
 exports.SfnDiagram = SfnDiagram;
 exports.useSfnDiagram = useSfnDiagram;

package/dist/index.d.cts

@@ -1,18 +1,18 @@
 
 import { DiagramOptions, DiffOutput, ExecutionHistoryInput, ExecutionOutput, HtmlOutput, MermaidDiffOutput, MermaidExecutionOutput, MermaidOutput, SvgOutput } from "sfn-diagram";
-//#region src/useSfnDiagram.d.ts
 interface UseSfnDiagramParams extends Pick<DiagramOptions, 'catchHandling' | 'collapse' | 'edgeOverrides' | 'edgeStyle' | 'iconPosition' | 'iconSize' | 'layout' | 'nodeOverrides' | 'showIcons' | 'showVariables' | 'theme'> {
   /**
    * When set, `definition` is treated as the *after* side of a diff and `before`
    * as the *original* side: the rendered diagram highlights added, modified, and
    * removed states rather than the plain machine. Accepts an ASL object or a
-   * JSON string. Cannot be combined with `history` or `format="html"` - core has
-   * no diff API for either combination.
+   * JSON string. Cannot be combined with `history` (core's SVG and Mermaid diff
+   * functions take no history) or with `format="html"` (core's `generateHtml`
+   * accepts a diff since sfn-diagram 1.8, but this hook does not wire it up yet).
    *
-   * The Mermaid diff (`generateMermaidDiff`) ignores every option in this
-   * type's `Pick<DiagramOptions, ...>` list - `layout`, `theme`, and the rest -
-   * since core's diff-specific function accepts only the two definitions. The
-   * SVG diff honours them.
+   * The Mermaid diff ignores every option in this type's `Pick<DiagramOptions, ...>`
+   * list - `layout`, `theme`, and the rest: this hook doesn't forward them to
+   * `generateMermaidDiff` yet (#393), although core accepts them since sfn-diagram
+   * 1.10. The SVG diff honours them.
    */
   before?: object | string;
   definition: object | string;
@@ -80,8 +80,6 @@ type SfnDiagramResult = {
  * ```
  */
 export declare function useSfnDiagram(params: UseSfnDiagramParams): SfnDiagramResult;
-//#endregion
-//#region src/SfnDiagram.d.ts
 interface SfnDiagramProps extends UseSfnDiagramParams {
   className?: string;
   onError?: (error: Error) => void;
@@ -120,5 +118,4 @@ interface SfnDiagramHandle {
   getSvg(): string | null;
 }
 export declare const SfnDiagram: import("react").ForwardRefExoticComponent<SfnDiagramProps & import("react").RefAttributes<SfnDiagramHandle>>;
-//#endregion
 export type { OnStateClickParams, SfnDiagramHandle, SfnDiagramProps, SfnDiagramResult, UseSfnDiagramParams };

package/dist/index.d.ts

@@ -1,18 +1,18 @@
 
 import { DiagramOptions, DiffOutput, ExecutionHistoryInput, ExecutionOutput, HtmlOutput, MermaidDiffOutput, MermaidExecutionOutput, MermaidOutput, SvgOutput } from "sfn-diagram";
-//#region src/useSfnDiagram.d.ts
 interface UseSfnDiagramParams extends Pick<DiagramOptions, 'catchHandling' | 'collapse' | 'edgeOverrides' | 'edgeStyle' | 'iconPosition' | 'iconSize' | 'layout' | 'nodeOverrides' | 'showIcons' | 'showVariables' | 'theme'> {
   /**
    * When set, `definition` is treated as the *after* side of a diff and `before`
    * as the *original* side: the rendered diagram highlights added, modified, and
    * removed states rather than the plain machine. Accepts an ASL object or a
-   * JSON string. Cannot be combined with `history` or `format="html"` - core has
-   * no diff API for either combination.
+   * JSON string. Cannot be combined with `history` (core's SVG and Mermaid diff
+   * functions take no history) or with `format="html"` (core's `generateHtml`
+   * accepts a diff since sfn-diagram 1.8, but this hook does not wire it up yet).
    *
-   * The Mermaid diff (`generateMermaidDiff`) ignores every option in this
-   * type's `Pick<DiagramOptions, ...>` list - `layout`, `theme`, and the rest -
-   * since core's diff-specific function accepts only the two definitions. The
-   * SVG diff honours them.
+   * The Mermaid diff ignores every option in this type's `Pick<DiagramOptions, ...>`
+   * list - `layout`, `theme`, and the rest: this hook doesn't forward them to
+   * `generateMermaidDiff` yet (#393), although core accepts them since sfn-diagram
+   * 1.10. The SVG diff honours them.
    */
   before?: object | string;
   definition: object | string;
@@ -80,8 +80,6 @@ type SfnDiagramResult = {
  * ```
  */
 export declare function useSfnDiagram(params: UseSfnDiagramParams): SfnDiagramResult;
-//#endregion
-//#region src/SfnDiagram.d.ts
 interface SfnDiagramProps extends UseSfnDiagramParams {
   className?: string;
   onError?: (error: Error) => void;
@@ -120,5 +118,4 @@ interface SfnDiagramHandle {
   getSvg(): string | null;
 }
 export declare const SfnDiagram: import("react").ForwardRefExoticComponent<SfnDiagramProps & import("react").RefAttributes<SfnDiagramHandle>>;
-//#endregion
 export type { OnStateClickParams, SfnDiagramHandle, SfnDiagramProps, SfnDiagramResult, UseSfnDiagramParams };

package/dist/index.js

@@ -2,7 +2,7 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { generateDiff, generateExecution, generateHtml, generateMermaid, generateMermaidDiff, generateMermaidExecution, generateSvg } from "sfn-diagram";
 import { jsx } from "react/jsx-runtime";
-//#region src/useSfnDiagram.ts
+// src/useSfnDiagram.ts
 function toAslString(params) {
 	const { definition } = params;
 	return typeof definition === "string" ? definition : JSON.stringify(definition);
@@ -152,8 +152,7 @@ function useSfnDiagram(params) {
 		theme
 	]);
 }
-//#endregion
-//#region src/SfnDiagram.tsx
+// src/SfnDiagram.tsx
 const SfnDiagram = forwardRef(function SfnDiagram({ className, onError, onStateClick, style, title = "Step Functions diagram", ...diagramParams }, ref) {
 	const result = useSfnDiagram(diagramParams);
 	useImperativeHandle(ref, () => ({ getSvg: () => result.type === "svg" ? result.svg : null }), [result]);
@@ -182,7 +181,7 @@ const SfnDiagram = forwardRef(function SfnDiagram({ className, onError, onStateC
 	});
 	if (result.type === "html") return /* @__PURE__ */ jsx("iframe", {
 		className,
-		sandbox: "allow-scripts",
+		sandbox: "allow-downloads allow-scripts",
 		srcDoc: result.html,
 		style,
 		title
@@ -194,5 +193,4 @@ const SfnDiagram = forwardRef(function SfnDiagram({ className, onError, onStateC
 		style
 	});
 });
-//#endregion
 export { SfnDiagram, useSfnDiagram };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sfn-diagram-react",
-    "version": "0.5.0",
+    "version": "0.7.0",
     "description": "React component for AWS Step Functions ASL diagrams",
     "type": "module",
     "sideEffects": false,
@@ -64,22 +64,22 @@
     "homepage": "https://sfn.yusufaf.dev/ecosystem/react/",
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
-        "sfn-diagram": "^1.6.0"
+        "sfn-diagram": "^1.7.0"
     },
     "devDependencies": {
         "@arethetypeswrong/cli": "^0.18.5",
         "@testing-library/jest-dom": "^7.0.1",
         "@testing-library/react": "^16.0.0",
-        "@types/react": "^18.3.0",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
         "jsdom": "^26.0.0",
-        "publint": "^0.3.16",
-        "react": "^18.3.0",
-        "react-dom": "^18.3.0",
+        "publint": "^0.3.25",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1",
         "sfn-diagram": "workspace:*",
-        "tsdown": "^0.23.0",
-        "typescript": "^5.9.2",
-        "vite": "^8.3.0",
-        "vitest": "^4.1.11"
+        "tsdown": "^0.23.1",
+        "typescript": "^6.0.3",
+        "vite": "^8.3.5",
+        "vitest": "^4.1.12"
     }
 }