{"version":3,"sources":["App.js","index.js"],"names":["App","useState","db","setDb","error","setError","useEffect","a","initSqlJs","locateFile","sqlWasm","SQL","Database","toString","SQLRepl","results","setResults","className","onChange","e","sql","exec","err","target","value","placeholder","map","i","columns","values","ResultsTable","columnName","row","rootElement","document","getElementById","ReactDOM","render","StrictMode"],"mappings":"oiBAOe,SAASA,IACtB,MAAoBC,mBAAS,MAA7B,mBAAOC,EAAP,KAAWC,EAAX,KACA,EAA0BF,mBAAS,MAAnC,mBAAOG,EAAP,KAAcC,EAAd,KAcA,OAZAC,oBAAS,sBAAC,4BAAAC,EAAA,+EAKYC,IAAU,CAAEC,WAAY,kBAAMC,OAL1C,OAKAC,EALA,OAMNR,EAAM,IAAIQ,EAAIC,UANR,gDAQNP,EAAS,EAAD,IARF,yDAUP,IAECD,EAAc,8BAAMA,EAAMS,aACpBX,EACE,cAACY,EAAD,CAASZ,GAAIA,IADJ,6CAQvB,SAASY,EAAT,GAA0B,IAAPZ,EAAM,EAANA,GACjB,EAA0BD,mBAAS,MAAnC,mBAAOG,EAAP,KAAcC,EAAd,KACA,EAA8BJ,mBAAS,IAAvC,mBAAOc,EAAP,KAAgBC,EAAhB,KAeA,OACE,sBAAKC,UAAU,MAAf,UACE,uDAEA,0BACEC,SAAU,SAACC,GAAD,OAlBhB,SAAcC,GACZ,IAGEJ,EAAWd,EAAGmB,KAAKD,IACnBf,EAAS,MACT,MAAOiB,GAEPjB,EAASiB,GACTN,EAAW,KASQK,CAAKF,EAAEI,OAAOC,QAC/BC,YAAY,6EAGd,qBAAKR,UAAU,QAAf,UAAyBb,GAAS,IAAIS,aAEtC,8BAGIE,EAAQW,KAAI,WAAsBC,GAAtB,IAAGC,EAAH,EAAGA,QAASC,EAAZ,EAAYA,OAAZ,OACV,cAACC,EAAD,CAAsBF,QAASA,EAASC,OAAQA,GAA7BF,WAY/B,SAASG,EAAT,GAA4C,IAApBF,EAAmB,EAAnBA,QAASC,EAAU,EAAVA,OAC/B,OACE,kCACE,gCACE,6BACGD,EAAQF,KAAI,SAACK,EAAYJ,GAAb,OACX,6BAAaI,GAAJJ,UAKf,gCAGIE,EAAOH,KAAI,SAACM,EAAKL,GAAN,OACT,6BACGK,EAAIN,KAAI,SAACF,EAAOG,GAAR,OACP,6BAAaH,GAAJG,OAFJA,WCtFrB,IAAMM,EAAcC,SAASC,eAAe,QAC5CC,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAACtC,EAAD,MAEFiC,K","file":"static/js/main.98996922.chunk.js","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport \"./styles.css\";\nimport initSqlJs from \"sql.js\";\n\n// Required to let webpack 4 know it needs to copy the wasm file to our assets\nimport sqlWasm from \"!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm\";\n\nexport default function App() {\n  const [db, setDb] = useState(null);\n  const [error, setError] = useState(null);\n\n  useEffect(async () => {\n    // sql.js needs to fetch its wasm file, so we cannot immediately instantiate the database\n    // without any configuration, initSqlJs will fetch the wasm files directly from the same path as the js\n    // see ../craco.config.js\n    try {\n      const SQL = await initSqlJs({ locateFile: () => sqlWasm });\n      setDb(new SQL.Database());\n    } catch (err) {\n      setError(err);\n    }\n  }, []);\n\n  if (error) return <pre>{error.toString()}</pre>;\n  else if (!db) return <pre>Loading...</pre>;\n  else return <SQLRepl db={db} />;\n}\n\n/**\n * A simple SQL read-eval-print-loop\n * @param {{db: import(\"sql.js\").Database}} props\n */\nfunction SQLRepl({ db }) {\n  const [error, setError] = useState(null);\n  const [results, setResults] = useState([]);\n\n  function exec(sql) {\n    try {\n      // The sql is executed synchronously on the UI thread.\n      // You may want to use a web worker here instead\n      setResults(db.exec(sql)); // an array of objects is returned\n      setError(null);\n    } catch (err) {\n      // exec throws an error when the SQL statement is invalid\n      setError(err);\n      setResults([]);\n    }\n  }\n\n  return (\n    <div className=\"App\">\n      <h1>React SQL interpreter</h1>\n\n      <textarea\n        onChange={(e) => exec(e.target.value)}\n        placeholder=\"Enter some SQL. No inspiration ? Try “select sqlite_version()”\"\n      ></textarea>\n\n      <pre className=\"error\">{(error || \"\").toString()}</pre>\n\n      <pre>\n        {\n          // results contains one object per select statement in the query\n          results.map(({ columns, values }, i) => (\n            <ResultsTable key={i} columns={columns} values={values} />\n          ))\n        }\n      </pre>\n    </div>\n  );\n}\n\n/**\n * Renders a single value of the array returned by db.exec(...) as a table\n * @param {import(\"sql.js\").QueryExecResult} props\n */\nfunction ResultsTable({ columns, values }) {\n  return (\n    <table>\n      <thead>\n        <tr>\n          {columns.map((columnName, i) => (\n            <td key={i}>{columnName}</td>\n          ))}\n        </tr>\n      </thead>\n\n      <tbody>\n        {\n          // values is an array of arrays representing the results of the query\n          values.map((row, i) => (\n            <tr key={i}>\n              {row.map((value, i) => (\n                <td key={i}>{value}</td>\n              ))}\n            </tr>\n          ))\n        }\n      </tbody>\n    </table>\n  );\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  rootElement\n);\n"],"sourceRoot":""}