sfn-diagram-react 0.1.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -78
- package/package.json +81 -79
package/README.md
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
# sfn-diagram-react
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/sfn-diagram-react)
|
|
4
|
-
[](https://github.com/yusufaf/sfn-diagram/blob/main/LICENSE)
|
|
5
|
-
|
|
6
|
-
React component for rendering [AWS Step Functions](https://aws.amazon.com/step-functions/) ASL definitions as diagrams, built on top of [`sfn-diagram`](https://www.npmjs.com/package/sfn-diagram).
|
|
7
|
-
|
|
8
|
-
The core is DOM-free, so `<SfnDiagram>` renders the SVG (or Mermaid code) with no browser-only dependencies.
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm install sfn-diagram-react sfn-diagram
|
|
14
|
-
# or
|
|
15
|
-
pnpm add sfn-diagram-react sfn-diagram
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
`react` and `sfn-diagram` are peer dependencies.
|
|
19
|
-
|
|
20
|
-
## Usage
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
import { SfnDiagram } from 'sfn-diagram-react'
|
|
24
|
-
|
|
25
|
-
const definition = {
|
|
26
|
-
StartAt: 'Hello',
|
|
27
|
-
States: {
|
|
28
|
-
Hello: { Type: 'Pass', Next: 'World' },
|
|
29
|
-
World: { Type: 'Succeed' },
|
|
30
|
-
},
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export function Diagram() {
|
|
34
|
-
return (
|
|
35
|
-
<SfnDiagram
|
|
36
|
-
definition={definition}
|
|
37
|
-
layout="TB"
|
|
38
|
-
theme="light"
|
|
39
|
-
onError={(error) => console.error(error)}
|
|
40
|
-
/>
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
`definition` accepts either an ASL object or a JSON string.
|
|
46
|
-
|
|
47
|
-
### Execution overlay
|
|
48
|
-
|
|
49
|
-
Pass an execution's `history` to overlay a real run onto the diagram: states are
|
|
50
|
-
coloured by outcome (succeeded / failed / caught / not-reached), the taken path is
|
|
51
|
-
emphasized, and per-state duration and retry counts are annotated.
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
// historyJson: output of `aws stepfunctions get-execution-history`, as a JSON string
|
|
55
|
-
<SfnDiagram definition={definition} history={historyJson} />
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
`history` accepts a `GetExecutionHistory` events array, the raw command output, or a
|
|
59
|
-
JSON string of either. In the browser, pass the JSON string.
|
|
60
|
-
|
|
61
|
-
## Props
|
|
62
|
-
|
|
63
|
-
| Prop | Type | Default | Description |
|
|
64
|
-
| --- | --- | --- | --- |
|
|
65
|
-
| `definition` | `object \| string` | — (required) | ASL definition as an object or JSON string |
|
|
66
|
-
| `format` | `'svg' \| 'mermaid'` | `'svg'` | Render an SVG diagram or emit Mermaid code |
|
|
67
|
-
| `history` | `HistoryEvent[] \| GetExecutionHistoryCommandOutput \| string` | — | Execution history; when set, renders an execution overlay |
|
|
68
|
-
| `layout` | `'TB' \| 'LR' \| 'RL' \| 'BT'` | `'TB'` | Graph layout direction |
|
|
69
|
-
| `theme` | `'light' \| 'dark' \| CustomTheme` | `'light'` | Diagram theme |
|
|
70
|
-
| `onError` | `(error: Error) => void` | — | Called when the definition fails to parse/render |
|
|
71
|
-
| `className` | `string` | — | Applied to the wrapper element |
|
|
72
|
-
| `style` | `React.CSSProperties` | — | Applied to the wrapper element |
|
|
73
|
-
|
|
74
|
-
When the definition is invalid the component renders `null` and (if provided) calls `onError`.
|
|
75
|
-
|
|
76
|
-
## License
|
|
77
|
-
|
|
78
|
-
MIT
|
|
1
|
+
# sfn-diagram-react
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/sfn-diagram-react)
|
|
4
|
+
[](https://github.com/yusufaf/sfn-diagram/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
React component for rendering [AWS Step Functions](https://aws.amazon.com/step-functions/) ASL definitions as diagrams, built on top of [`sfn-diagram`](https://www.npmjs.com/package/sfn-diagram).
|
|
7
|
+
|
|
8
|
+
The core is DOM-free, so `<SfnDiagram>` renders the SVG (or Mermaid code) with no browser-only dependencies. Not on React (or on React 18, which can't set object props on custom elements)? [`<sfn-diagram>`](https://sfn.yusufaf.dev/ecosystem/web-component/) is a framework-agnostic custom element shipped from `sfn-diagram/element` — no extra package.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install sfn-diagram-react sfn-diagram
|
|
14
|
+
# or
|
|
15
|
+
pnpm add sfn-diagram-react sfn-diagram
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`react` and `sfn-diagram` are peer dependencies.
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { SfnDiagram } from 'sfn-diagram-react'
|
|
24
|
+
|
|
25
|
+
const definition = {
|
|
26
|
+
StartAt: 'Hello',
|
|
27
|
+
States: {
|
|
28
|
+
Hello: { Type: 'Pass', Next: 'World' },
|
|
29
|
+
World: { Type: 'Succeed' },
|
|
30
|
+
},
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function Diagram() {
|
|
34
|
+
return (
|
|
35
|
+
<SfnDiagram
|
|
36
|
+
definition={definition}
|
|
37
|
+
layout="TB"
|
|
38
|
+
theme="light"
|
|
39
|
+
onError={(error) => console.error(error)}
|
|
40
|
+
/>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
`definition` accepts either an ASL object or a JSON string.
|
|
46
|
+
|
|
47
|
+
### Execution overlay
|
|
48
|
+
|
|
49
|
+
Pass an execution's `history` to overlay a real run onto the diagram: states are
|
|
50
|
+
coloured by outcome (succeeded / failed / caught / not-reached), the taken path is
|
|
51
|
+
emphasized, and per-state duration and retry counts are annotated.
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
// historyJson: output of `aws stepfunctions get-execution-history`, as a JSON string
|
|
55
|
+
<SfnDiagram definition={definition} history={historyJson} />
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
`history` accepts a `GetExecutionHistory` events array, the raw command output, or a
|
|
59
|
+
JSON string of either. In the browser, pass the JSON string.
|
|
60
|
+
|
|
61
|
+
## Props
|
|
62
|
+
|
|
63
|
+
| Prop | Type | Default | Description |
|
|
64
|
+
| --- | --- | --- | --- |
|
|
65
|
+
| `definition` | `object \| string` | — (required) | ASL definition as an object or JSON string |
|
|
66
|
+
| `format` | `'svg' \| 'mermaid'` | `'svg'` | Render an SVG diagram or emit Mermaid code |
|
|
67
|
+
| `history` | `HistoryEvent[] \| GetExecutionHistoryCommandOutput \| string` | — | Execution history; when set, renders an execution overlay |
|
|
68
|
+
| `layout` | `'TB' \| 'LR' \| 'RL' \| 'BT'` | `'TB'` | Graph layout direction |
|
|
69
|
+
| `theme` | `'light' \| 'dark' \| CustomTheme` | `'light'` | Diagram theme |
|
|
70
|
+
| `onError` | `(error: Error) => void` | — | Called when the definition fails to parse/render |
|
|
71
|
+
| `className` | `string` | — | Applied to the wrapper element |
|
|
72
|
+
| `style` | `React.CSSProperties` | — | Applied to the wrapper element |
|
|
73
|
+
|
|
74
|
+
When the definition is invalid the component renders `null` and (if provided) calls `onError`.
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,79 +1,81 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "sfn-diagram-react",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "React component for AWS Step Functions ASL diagrams",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"sideEffects": false,
|
|
7
|
-
"main": "./dist/index.cjs",
|
|
8
|
-
"module": "./dist/index.js",
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
|
-
"exports": {
|
|
11
|
-
".": {
|
|
12
|
-
"import": {
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"default": "./dist/index.js"
|
|
15
|
-
},
|
|
16
|
-
"require": {
|
|
17
|
-
"types": "./dist/index.d.cts",
|
|
18
|
-
"default": "./dist/index.cjs"
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
"files": [
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"validate
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
"@
|
|
67
|
-
"@
|
|
68
|
-
"@
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "sfn-diagram-react",
|
|
3
|
+
"version": "0.4.0",
|
|
4
|
+
"description": "React component for AWS Step Functions ASL diagrams",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"main": "./dist/index.cjs",
|
|
8
|
+
"module": "./dist/index.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"import": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"default": "./dist/index.js"
|
|
15
|
+
},
|
|
16
|
+
"require": {
|
|
17
|
+
"types": "./dist/index.d.cts",
|
|
18
|
+
"default": "./dist/index.cjs"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"engines": {
|
|
26
|
+
"node": ">=20"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsdown",
|
|
30
|
+
"dev": "tsdown --watch",
|
|
31
|
+
"test": "vitest run",
|
|
32
|
+
"typecheck": "tsc --noEmit",
|
|
33
|
+
"lint": "eslint .",
|
|
34
|
+
"prepublishOnly": "pnpm run build && pnpm run validate",
|
|
35
|
+
"validate": "pnpm run validate:publint && pnpm run validate:types",
|
|
36
|
+
"validate:publint": "publint",
|
|
37
|
+
"validate:types": "attw --pack ."
|
|
38
|
+
},
|
|
39
|
+
"keywords": [
|
|
40
|
+
"aws",
|
|
41
|
+
"step-functions",
|
|
42
|
+
"react",
|
|
43
|
+
"diagram",
|
|
44
|
+
"asl",
|
|
45
|
+
"state-machine",
|
|
46
|
+
"visualization",
|
|
47
|
+
"svg",
|
|
48
|
+
"mermaid"
|
|
49
|
+
],
|
|
50
|
+
"author": "Yusuf Afzal",
|
|
51
|
+
"license": "MIT",
|
|
52
|
+
"repository": {
|
|
53
|
+
"type": "git",
|
|
54
|
+
"url": "git+https://github.com/yusufaf/sfn-diagram.git",
|
|
55
|
+
"directory": "packages/sfn-diagram-react"
|
|
56
|
+
},
|
|
57
|
+
"bugs": {
|
|
58
|
+
"url": "https://github.com/yusufaf/sfn-diagram/issues"
|
|
59
|
+
},
|
|
60
|
+
"homepage": "https://github.com/yusufaf/sfn-diagram/tree/main/packages/sfn-diagram-react#readme",
|
|
61
|
+
"peerDependencies": {
|
|
62
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
63
|
+
"sfn-diagram": "^1.1.1"
|
|
64
|
+
},
|
|
65
|
+
"devDependencies": {
|
|
66
|
+
"@arethetypeswrong/cli": "^0.18.2",
|
|
67
|
+
"@testing-library/jest-dom": "^6.6.0",
|
|
68
|
+
"@testing-library/react": "^16.0.0",
|
|
69
|
+
"@types/react": "^18.3.0",
|
|
70
|
+
"@types/react-dom": "^18.3.0",
|
|
71
|
+
"jsdom": "^26.0.0",
|
|
72
|
+
"publint": "^0.3.16",
|
|
73
|
+
"react": "^18.3.0",
|
|
74
|
+
"react-dom": "^18.3.0",
|
|
75
|
+
"sfn-diagram": "workspace:*",
|
|
76
|
+
"tsdown": "^0.21.7",
|
|
77
|
+
"typescript": "^5.9.2",
|
|
78
|
+
"vite": "^6.3.0",
|
|
79
|
+
"vitest": "^3.2.6"
|
|
80
|
+
}
|
|
81
|
+
}
|