{"version":3,"sources":["welcome.tsx","App.tsx","reportWebVitals.ts","index.tsx"],"names":["WelcomeButtonAndModal","hasSeenWelcome","localStorage","getItem","useState","show","setShow","className","href","onClick","Modal","onHide","setItem","size","Header","closeButton","Title","Body","Alert","variant","uuidv4","replace","c","r","Math","random","toString","keyForId","id","App","splitHash","window","location","hash","split","length","setId","useEffect","history","replaceState","initialLoad","setInitialLoad","isLoading","setLoading","error","setError","v","Definition","Script","Input","Key","script","setScript","definition","setDefinition","input","setInput","output","setOutput","a","fetch","resp","json","j","get","values","JSON","parse","Id","method","headers","body","stringify","console","log","executionOutput","t","Output","newId","cause","execute","showCaveats","setShowCaveats","defaultOptions","mode","theme","lineNumbers","lineWrapping","foldGutter","gutters","extraKeys","Navbar","bg","Brand","target","Nav","Button","disabled","Container","fluid","Row","Col","Card","value","onBeforeChange","editor","data","options","onChange","Badge","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.8906af06.chunk.js","sourcesContent":["import React, {useState} from \"react\";\nimport Button from \"react-bootstrap/Button\";\nimport Modal from \"react-bootstrap/Modal\";\nimport Alert from \"react-bootstrap/Alert\";\n\nexport function WelcomeButtonAndModal() {\n    const hasSeenWelcome = localStorage.getItem(\"hasSeenWelcome\") === \"true\";\n    // const hasSeenWelcome = false;\n    const [show, setShow] = useState(!hasSeenWelcome);\n\n    const handleClose = () => {\n        localStorage.setItem(\"hasSeenWelcome\", \"true\");\n        setShow(false);\n    }\n    const handleShow = () => setShow(true);\n\n    return (\n        <>\n            <a className={\"nav-item nav-link topnav-link\"} href=\"#\" onClick={handleShow}>Welcome</a>\n            <Modal show={show} onHide={handleClose} size={\"lg\"}>\n                <Modal.Header closeButton>\n                    <Modal.Title>Welcome to <code>stepfn.dev</code></Modal.Title>\n                </Modal.Header>\n                <Modal.Body>\n                    <Alert variant={\"warning\"}>\n                        This site is very much a work-in-progress - and I'm seeking\n                        help from the open source community! The code is all on GitHub\n                        if you want to help out.\n                    </Alert>\n                    <h3>What</h3>\n                    <p>\n                        <code>stepfn.dev</code> is intended to be like JSFiddle, JS Bin,\n                        et al - but for AWS Step Functions.\n                    </p>\n                    <h3>How</h3>\n                    <p>\n                        There are four panels available.\n                        </p>\n                    <p>\n                        Top-left is where you write your state machine definition.\n                    </p>\n                    <p>\n                        Top-right is where you can write Javascript to simulate Lambda\n                        functions. <code>Parameter.FunctionName</code> is where you specify\n                        the JS function name to execute in a <code>Task</code> state.\n                    </p>\n                    <p>\n                        Bottom-left is where you write input to be passed to an\n                        execution of the Step Function.\n                    </p>\n                    <p>\n                        Finally, bottom-right is where output from executions of\n                        your Step Function will appear.\n                    </p>\n                    <p>\n                        You can either click the <mark>Execute</mark> button or\n                        press <kbd>Cmd</kbd>+<kbd>Enter</kbd> on the keyboard to execute your Step\n                        Function.\n                    </p>\n\n                    <h3>Why</h3>\n                    <p>\n                        I built this site for <s>two</s> three reasons:\n                    </p>\n                    <ol className={\"list-group list-group-flush\"}>\n                        <li className={\"list-group-item\"}>\n                            Iterating on AWS Step Functions felt like it was\n                            harder than necessary. You'd need multiple tabs\n                            open, create functions, roles, copy and paste ARNs\n                            and click a lot of buttons. I thought I could try\n                            improve on that experience.\n                        </li>\n                        <li className={\"list-group-item\"}>\n                            Collaborating on those step functions was tricky,\n                            to the point of not bothering when it came to seeking\n                            help on Twitter, Stack Overflow, etc. I thought\n                            a website like this one might make it easier to share\n                            functions for discussion.\n                        </li>\n                        <li className={\"list-group-item\"}>\n                            I haven't made a frontend website since the days\n                            of Microsoft FrontPage and I really needed the\n                            practice - and <b>your</b> help to improve it.\n                        </li>\n                    </ol>\n                    <p>\n                        This welcome message will only display the first time you visit\n                        the site. To see it again, click the <mark>Welcome</mark> button in\n                        the nav bar.\n                    </p>\n                </Modal.Body>\n            </Modal>\n        </>\n    );\n}\n","import React, {useEffect, useState} from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'codemirror/lib/codemirror.css';\nimport 'codemirror/theme/blackboard.css';\nimport 'codemirror/addon/fold/foldcode'\nimport 'codemirror/addon/fold/foldgutter.css'\nimport 'codemirror/addon/fold/foldgutter'\nimport 'codemirror/addon/fold/brace-fold'\nimport {Controlled} from 'react-codemirror2';\nimport 'codemirror/mode/javascript/javascript';\nimport Container from 'react-bootstrap/Container';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport Button from 'react-bootstrap/Button';\nimport Navbar from 'react-bootstrap/Navbar';\nimport Nav from 'react-bootstrap/Nav';\nimport Card from 'react-bootstrap/Card';\nimport Modal from 'react-bootstrap/Modal';\nimport Badge from 'react-bootstrap/Badge';\nimport {ExclamationCircle, Github, Plus, Play, Pause} from 'react-bootstrap-icons';\nimport './App.css';\nimport {WelcomeButtonAndModal} from \"./welcome\";\nimport StepFunctions from './Step-Functions.svg';\n\nfunction uuidv4() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\n        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\n\nfunction keyForId(id: string): string | null {\n    return localStorage.getItem(`key:${id}`);\n}\n\nfunction App() {\n    const splitHash = window.location.hash.split(\"/sfn/\");\n    const [id, setId] = useState(splitHash.length == 2 ? splitHash[1] : \"\");\n    // let hashnoop = false;\n    // window.addEventListener(\"hashchange\", () => {\n    //     if (!hashnoop) {\n    //         debugger;\n    //         const splitHash = window.location.hash.split(\"/sfn/\");\n    //         setId(splitHash.length == 2 ? splitHash[1] : \"\");\n    //     }\n    // });\n\n    useEffect(() => {\n        // hashnoop = true;\n        window.history.replaceState(null, '', `#/sfn/${id}`);\n        // hashnoop = false;\n    }, [id]);\n\n    const [initialLoad, setInitialLoad] = useState(true);\n    const [isLoading, setLoading] = useState(false);\n    const [error, setError] = useState(false);\n\n    let v: Values = {\n        Definition: \"\",\n        Script: \"\",\n        Input: `{}`,\n        Key: uuidv4()\n    }\n    if (id === \"\") {\n        v = defaultValues();\n    }\n    const [script, setScript] = useState(v.Script);\n    const [definition, setDefinition] = useState(v.Definition);\n    const [input, setInput] = useState(v.Input);\n    const [output, setOutput] = useState(\"// Upon execution, the step function's output will appear here\");\n\n    useEffect(() => {\n        if (initialLoad && id !== \"\") {\n            const get = async () => {\n                const resp = await fetch(`https://api.stepfn.dev/sfn?id=${id}`);\n                const j = await resp.json();\n                setScript(j.Script);\n                setDefinition(j.Definition);\n                setInput(j.Input);\n            }\n\n            get();\n            setInitialLoad(false);\n        }\n    }, [initialLoad]);\n\n    useEffect(() => {\n        if (isLoading) {\n            const execute = async () => {\n                const values = {\n                    Script: script,\n                    Definition: definition,\n                    Input: JSON.parse(input),\n                    Id: id,\n                    Key: keyForId(id) ?? uuidv4()\n                };\n\n                const resp = await fetch(\"https://api.stepfn.dev/execute\", {\n                    method: \"POST\",\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify(values)\n                });\n\n                setLoading(false);\n\n                const j = await resp.json();\n                console.log(j);\n                try {\n                    const executionOutput = JSON.parse(j.output);\n                    const t = JSON.stringify(executionOutput.Output, null, 2);\n                    setOutput(t);\n                    setError(false);\n\n                    const newId = executionOutput.Id;\n                    if (newId !== id) {\n                        localStorage.setItem(`key:${newId}`, values.Key);\n                        setId(newId);\n                    }\n                } catch {\n                    setError(true);\n                    setOutput(j.cause);\n                }\n            }\n\n            execute();\n        }\n    }, [isLoading, definition, input, script, id]);\n\n    const [showCaveats, setShowCaveats] = useState(false);\n\n    const handleClose = () => setShowCaveats(false);\n    const handleShow = () => setShowCaveats(true);\n\n    const defaultOptions = {\n        mode: 'javascript',\n        theme: 'blackboard',\n        lineNumbers: true,\n        lineWrapping: true,\n        foldGutter: true,\n        gutters: [\"CodeMirror-linenumbers\", \"CodeMirror-foldgutter\"],\n        extraKeys: {\n            \"Cmd-Enter\": () => setLoading(true)\n        }\n    };\n    return (\n        <div className=\"App\">\n            <Navbar className={\"flex-wrap\"} bg={\"light\"}>\n                <Navbar.Brand><code>stepfn.dev</code></Navbar.Brand>\n                <div className={\"mr-auto navbar-nav\"}>\n                    <WelcomeButtonAndModal/>\n                    <a className={\"nav-item nav-link topnav-link\"} href=\"#\" onClick={handleShow}>Known issues</a>\n                    <a className={\"nav-item nav-link topnav-link\"} target=\"_blank\" href=\"https://github.com/stepfn-dev/stepfn.dev\"><Github/></a>\n                </div>\n                <Nav className={\"flex-wrap\"}>\n                      <Button variant={\"outline-primary\"} className={\"m-1\"}><Plus/> Step Function</Button>\n                      <Button\n                            className={\"m-1\"}\n                            variant=\"primary\"\n                            disabled={isLoading}\n                            onClick={!isLoading ? () => setLoading(true) : () => {\n                            }}\n                        >\n                            {isLoading ? <><Pause></Pause>Running </> : <><Play></Play> Run </>}\n                      </Button>\n                      <Button className={\"m-1\"} variant={\"outline-info\"}>Share</Button>\n                </Nav>\n            </Navbar>\n            <Modal show={showCaveats} onHide={handleClose}>\n                <Modal.Header closeButton>\n                    <Modal.Title>Known Issues <ExclamationCircle/></Modal.Title>\n                </Modal.Header>\n                <Modal.Body>\n                    <ul className={\"list-group list-group-flush\"}>\n                        <li className={\"list-group-item\"}>\n                            The <mark>New Step Function</mark> and <mark>Share…</mark> buttons don't yet work.\n                        </li>\n                        <li className={\"list-group-item\"}>\n                            Only <code>arn:aws:states:::lambda:invoke</code> resources are supported,\n                            i.e. <code>\"Resource\": \"&lt;lambda function arn&gt;\"</code> is not supported.\n                        </li>\n                        <li className={\"list-group-item\"}>\n                            Error handling is mostly non-existent right now.\n                        </li>\n                        <li className={\"list-group-item\"}>\n                            I need a lot of help with the frontend, in case you hadn't noticed.\n                        </li>\n                    </ul>\n                </Modal.Body>\n            </Modal>\n            <Container fluid>\n                <Row className={\"mt-3\"}>\n                    <Col>\n                        <Card>\n                            <Card.Header>Definition</Card.Header>\n                            <Controlled\n                                className={\"editor\"}\n                                value={definition}\n                                onBeforeChange={(editor, data, value) => {\n                                    setDefinition(value);\n                                }}\n                                options={defaultOptions}\n                                onChange={(editor, data, value) => {\n                                }}\n                            />\n                        </Card>\n                    </Col>\n                    <Col>\n                        <Card>\n                            <Card.Header>Script</Card.Header>\n                            <Controlled\n                                className={\"editor\"}\n                                value={script}\n                                options={defaultOptions}\n                                onBeforeChange={(editor, data, value) => {\n                                    setScript(value);\n                                }}\n                                onChange={(editor, data, value) => {\n                                }}\n                            />\n                        </Card>\n                    </Col>\n                </Row>\n                <Row className={\"mt-3 bottom\"}>\n                    <Col>\n                        <Card>\n                            <Card.Header>Execution Input</Card.Header>\n                            <Controlled\n                                className={\"editor\"}\n                                value={input}\n                                options={defaultOptions}\n                                onBeforeChange={(editor, data, value) => {\n                                    setInput(value);\n                                }}\n                                onChange={(editor, data, value) => {\n                                }}\n                            />\n                        </Card>\n                    </Col>\n                    <Col>\n                        <Card>\n                            <Card.Header>Execution Output {error &&\n                            <Badge variant={\"danger\"}>Error</Badge>}</Card.Header>\n                            <Controlled\n                                className={\"editor\"}\n                                value={output}\n                                options={defaultOptions}\n                                onBeforeChange={(editor, data, value) => {\n                                    setOutput(value);\n                                }}\n                                onChange={(editor, data, value) => {\n                                }}\n                            />\n                        </Card>\n                    </Col>\n                </Row>\n            </Container>\n        </div>\n    );\n}\n\ninterface Values {\n    Script: string;\n    Definition: string;\n    Input: string;\n    Id?: string;\n    Key: string;\n}\n\nfunction defaultValues(): Values {\n    return {\n        Key: uuidv4(),\n        Input: `{\"a\": 55, \"b\": 66}`,\n        Script: `\n// This function is referenced in the definition on the left using \"FunctionName\": \"sum\"\nconst sum = input => input.First + input.Second;\n\n// Likewise, this function is referenced in the definition on the left using \"FunctionName\": \"unix\"\nfunction unix(input) {\n    return Date.now();\n}        \n        `,\n        Definition: `\n{\n  \"StartAt\": \"First Unix date\",\n  \"States\": {\n    \"First Unix date\": {\n      \"Type\": \"Task\",\n      \"Resource\": \"arn:aws:states:::lambda:invoke\",\n      \"Parameters\": {\n        \"Payload.$\": \"$\",\n        \"FunctionName\": \"unix\"\n      },\n      \"ResultSelector\": {\n        \"First.$\": \"$.Payload\"\n      },\n      \"Next\": \"Second Unix date\"\n    },\n    \"Second Unix date\": {\n      \"Type\": \"Task\",\n      \"Resource\": \"arn:aws:states:::lambda:invoke\",\n      \"Parameters\": {\n        \"Payload.$\": \"$\",\n        \"FunctionName\": \"unix\"\n      },\n      \"ResultPath\": \"$.Second\",\n      \"Next\": \"Refactor\"\n    },\n    \"Refactor\": {\n      \"Type\": \"Pass\",\n      \"Parameters\": {\n        \"First.$\": \"$.First\",\n        \"Second.$\": \"$.Second.Payload\"\n      },\n      \"Next\": \"Sum them\"\n    },\n    \"Sum them\": {\n      \"Type\": \"Task\",\n      \"Resource\": \"arn:aws:states:::lambda:invoke\",\n      \"Parameters\": {\n        \"Payload.$\": \"$\",\n        \"FunctionName\": \"sum\"\n      },\n      \"ResultSelector\": {\n        \"Sum.$\": \"$.Payload\"\n      },\n      \"ResultPath\": \"$.Sum\",\n      \"End\": true\n    }\n  }\n}        \n        `\n    }\n}\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}