Toggle sidebar

\n\t\t\t\t\t\t\tSomething went wrong\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tThe application encountered an unexpected error. Please try\n\t\t\t\t\t\t\trefreshing the page.\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\tError Details\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t{this.state.error.message}\n\t\t\t\t\t\t\t\t\t{\"\\n\\n\"}\n\t\t\t\t\t\t\t\t\t{this.state.error.stack}\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

window.location.reload()}\n\t\t\t\t\t\t\tclassName=\"mt-4 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md transition-colors\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tRefresh Page\n\t\t\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t{/* Sidebar */}\n\t\t\t\t{isSidebarOpen && (\n\t\t\t\t\t

\n\t\t\t\t\t\t{isLoadingSchema ? (\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tLoading schema...\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)}\n\t\t\t\t\t

\n\t\t\t\t)}\n\n\t\t\t\t{/* Main content area */}\n\t\t\t\t

\n\t\t\t\t\t{/* Editor section - fixed height */}\n\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t

\n\n\t\t\t\t\t{/* Results section - takes remaining space */}\n\t\t\t\t\t

\n\t\t\t\t\t\t{error && (\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{result && }\n\t\t\t\t\t\t{!error && !result && (\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tRun a query to see results here\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n",[],[204,319],{"_103":328,"_95":329,"_154":330,"_156":205,"_157":139,"_158":331,"_160":161,"_105":332,"_99":333,"_163":177,"_165":334,"_166":22,"_167":-5,"_168":335,"_98":336},"59f62f60-c1c6-11f0-9a2c-42dde27851f2","index.html","66816ac0-c1bb-11f0-b3a1-42dde27851f2",189,["D",1763171810529],3,"\n\n\n \n \n SQLite Explorer\n\n \n \n \n \n\n \n \n \n\n \n \n\n\n

\n \n\n\n",[],[204,329],{"_103":338,"_95":339,"_154":340,"_156":205,"_157":139,"_158":341,"_160":22,"_105":342,"_99":32,"_163":223,"_165":343,"_166":22,"_167":-5,"_168":344,"_98":345},"cd229164-c1bb-11f0-b487-42dde27851f2","main.tsx","cd229286-c1bb-11f0-b487-42dde27851f2",149,["D",1763167279233],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\n\nif (root) {\n ReactDOM.createRoot(root).render(\n \n \n \n );\n} else {\n console.error(\"Root element not found\");\n}\n",[],[204,339],[204],{"_103":348,"_95":349,"_154":350,"_156":-5,"_157":139,"_158":351,"_160":22,"_105":352,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":353,"_98":408},"b34c5836-9968-11f0-8cb1-0224a6c84d84","scripts","b34c58ea-9968-11f0-8cb1-0224a6c84d84",99,["D",1758733541215],[354,363,372,381,390,399],{"_103":355,"_95":356,"_154":357,"_156":350,"_157":139,"_158":358,"_160":22,"_105":359,"_99":119,"_163":223,"_165":360,"_166":22,"_167":-5,"_168":361,"_98":362},"b36f81bc-9968-11f0-8fcf-0224a6c84d84","download.ts","4a71cf14-9966-11f0-b76e-0224a6c84d84",102,["D",1758733541417],"console.log(\"download script loaded!\");\n\nimport { identify } from \"https://esm.sh/sql-query-identifier@2.7.0\";\n\nconst editor = document.getElementById(\"editordiv\");\nconst csvBtn = document.getElementById(\"download-csv\");\nconst jsonBtn = document.getElementById(\"download-json\");\n\nfunction selectStatementFromPosition(statements, pos) {\n\tfor (const statement of statements) {\n\t\tif (statement.end + 1 >= pos) return statement;\n\t}\n\treturn undefined;\n}\n\nfunction getCode(): string {\n\t// @ts-expect-error needed\n\tconst code = editor.code;\n\n\tconst statements = identify(code, {\n\t\tdialect: \"sqlite\",\n\t\tstrict: false,\n\t});\n\n\t// @ts-expect-error needed\n\tconst position = editor.view.state.selection.main.head;\n\tconst statement = selectStatementFromPosition(statements, position);\n\n\tif (!statement) {\n\t\treturn \"\";\n\t}\n\n\treturn statement.text;\n}\n\ncsvBtn.addEventListener(\"click\", () => {\n\tconsole.log(\"csv clicked\");\n\tconst query = getCode();\n\tglobalThis.location.href = `/download/csv?query=${encodeURIComponent(query)}`;\n});\n\njsonBtn.addEventListener(\"click\", () => {\n\tconsole.log(\"json clicked\");\n\tconst query = getCode();\n\tglobalThis.location.href = `/download/json?query=${encodeURIComponent(query)}`;\n});\n",[],[349,356],{"_103":364,"_95":365,"_154":366,"_156":350,"_157":139,"_158":367,"_160":22,"_105":368,"_99":176,"_163":223,"_165":369,"_166":22,"_167":-5,"_168":370,"_98":371},"b3846d8e-9968-11f0-8fcf-0224a6c84d84","enable-buttons.tsx","a35d42a6-98f4-11f0-a542-0224a6c84d84",105,["D",1758733541545],"console.log(\"button enable script loaded!\");\n\nconst editor = document.getElementById(\"editordiv\");\nconst csvBtn = document.getElementById(\"download-csv\");\nconst jsonBtn = document.getElementById(\"download-json\");\nconst runBtn = document.getElementById(\"run\");\n\nconst buttons = [csvBtn, jsonBtn, runBtn];\n\nfunction checkForText() {\n\t// @ts-expect-error needed\n\tif (editor.view.state.doc.toString().trim() === \"\") {\n\t\tbuttons.forEach((btn: HTMLButtonElement) => {\n\t\t\tbtn.disabled = true;\n\t\t});\n\t} else {\n\t\tbuttons.forEach((btn: HTMLButtonElement) => {\n\t\t\tbtn.disabled = false;\n\t\t});\n\t}\n}\n\neditor.addEventListener(\"code-change\", () => {\n\t// @ts-expect-error needed\n\tif (editor.view.state.doc.toString().trim() === \"\") {\n\t\tbuttons.forEach((btn: HTMLButtonElement) => {\n\t\t\tbtn.disabled = true;\n\t\t});\n\t} else {\n\t\tbuttons.forEach((btn: HTMLButtonElement) => {\n\t\t\tbtn.disabled = false;\n\t\t});\n\t}\n});\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\t// Initial check\n\tcheckForText();\n});\n",[],[349,365],{"_103":373,"_95":374,"_154":375,"_156":350,"_157":139,"_158":376,"_160":22,"_105":377,"_99":176,"_163":223,"_165":378,"_166":22,"_167":-5,"_168":379,"_98":380},"b361d152-9968-11f0-b0b8-0224a6c84d84","get-code.tsx","a4526268-98f4-11f0-9dc3-0224a6c84d84",100,["D",1758733541354],"console.log(\"getCode() function loaded\");\n\nimport htmx from \"https://esm.sh/htmx.org\";\nimport { identify } from \"https://esm.sh/sql-query-identifier@2.7.0\";\n\nfunction selectStatementFromPosition(statements, pos) {\n\tfor (const statement of statements) {\n\t\tif (statement.end + 1 >= pos) return statement;\n\t}\n\treturn undefined;\n}\n\nfunction getCode() {\n\tconst editor = htmx.find(\"#editordiv\");\n\t// @ts-expect-error needed\n\tconst code = editor.code;\n\n\tconst statements = identify(code, {\n\t\tdialect: \"sqlite\",\n\t\tstrict: false,\n\t});\n\t// @ts-expect-error needed\n\tconst position = editor.view.state.selection.main.head;\n\tconst statement = selectStatementFromPosition(statements, position);\n\n\tif (!statement) {\n\t\treturn \"\";\n\t}\n\n\treturn statement.text;\n}\n\nglobalThis.getCode = getCode;\n\nexport const getCodeScript = undefined;\n",[],[349,374],{"_103":382,"_95":383,"_154":384,"_156":350,"_157":139,"_158":385,"_160":22,"_105":386,"_99":119,"_163":223,"_165":387,"_166":22,"_167":-5,"_168":388,"_98":389},"b368a86a-9968-11f0-99ba-0224a6c84d84","resize.tsx","5cd5bcce-9966-11f0-8788-0224a6c84d84",101,["D",1758733541396],"console.log(\"resizing script loaded!\");\n\nconst resizable = (resizer) => {\n\tconst direction = resizer.getAttribute(\"data-direction\") || \"horizontal\";\n\tconst prevSibling = resizer.previousElementSibling;\n\tconst nextSibling = resizer.nextElementSibling;\n\n\tlet x = 0;\n\tlet y = 0;\n\tlet prevSiblingHeight = 0;\n\tlet prevSiblingWidth = 0;\n\n\tconst mouseDownHandler = (e) => {\n\t\tconst parent = e.currentTarget.parentElement;\n\t\tconst direction = parent.getAttribute(\"data-direction\") || \"horizontal\";\n\n\t\tconsole.log(\"Resizing direction:\", direction);\n\n\t\tx = e.clientX;\n\t\ty = e.clientY;\n\t\tconst rect = prevSibling.getBoundingClientRect();\n\t\tprevSiblingHeight = rect.height;\n\t\tprevSiblingWidth = rect.width;\n\n\t\tdocument.addEventListener(\"mousemove\", mouseMoveHandler);\n\t\tdocument.addEventListener(\"mouseup\", mouseUpHandler);\n\t};\n\n\tconst mouseMoveHandler = (e) => {\n\t\tconst dx = e.clientX - x;\n\t\tconst dy = e.clientY - y;\n\n\t\tswitch (direction) {\n\t\t\tcase \"vertical\": {\n\t\t\t\tconst h =\n\t\t\t\t\t((prevSiblingHeight + dy) * 100) /\n\t\t\t\t\tresizer.parentNode.getBoundingClientRect().height;\n\t\t\t\tprevSibling.style.height = `${h}%`;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tconst w =\n\t\t\t\t\t((prevSiblingWidth + dx) * 100) /\n\t\t\t\t\tresizer.parentNode.getBoundingClientRect().width;\n\t\t\t\tprevSibling.style.width = `${w}%`;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tconst cursor = direction === \"horizontal\" ? \"col-resize\" : \"row-resize\";\n\t\tresizer.style.cursor = cursor;\n\t\tdocument.body.style.cursor = cursor;\n\n\t\tprevSibling.style.userSelect = \"none\";\n\t\tprevSibling.style.pointerEvents = \"none\";\n\n\t\tnextSibling.style.userSelect = \"none\";\n\t\tnextSibling.style.pointerEvents = \"none\";\n\t};\n\n\tconst mouseUpHandler = () => {\n\t\tresizer.style.removeProperty(\"cursor\");\n\t\tdocument.body.style.removeProperty(\"cursor\");\n\n\t\tprevSibling.style.removeProperty(\"user-select\");\n\t\tprevSibling.style.removeProperty(\"pointer-events\");\n\n\t\tnextSibling.style.removeProperty(\"user-select\");\n\t\tnextSibling.style.removeProperty(\"pointer-events\");\n\n\t\tdocument.removeEventListener(\"mousemove\", mouseMoveHandler);\n\t\tdocument.removeEventListener(\"mouseup\", mouseUpHandler);\n\t};\n\n\tresizer\n\t\t.querySelector(\".handle\")\n\t\t.addEventListener(\"mousedown\", mouseDownHandler);\n};\n\ndocument.querySelectorAll(\".resizer\").forEach((ele) => {\n\tresizable(ele);\n});\n",[],[349,383],{"_103":391,"_95":392,"_154":393,"_156":350,"_157":139,"_158":394,"_160":22,"_105":395,"_99":176,"_163":223,"_165":396,"_166":22,"_167":-5,"_168":397,"_98":398},"b375a15a-9968-11f0-b0b8-0224a6c84d84","save-query.tsx","a254413e-98f4-11f0-a109-0224a6c84d84",103,["D",1758733541408],"console.log(\"table selection script loaded!\");\n\nif (typeof Deno === \"undefined\") {\n\tconst tables = document.querySelectorAll(\".tables-list-item\");\n\tconst editor = document.getElementById(\"editordiv\");\n\n\ttables.forEach((table) => {\n\t\ttable.addEventListener(\"click\", () => {\n\t\t\tconst tableName = table.id;\n\n\t\t\tlet statement: string; // = `SELECT * FROM ${tableName}`;\n\t\t\tif (localStorage.getItem(`saved-${tableName}`) !== null) {\n\t\t\t\tstatement = localStorage.getItem(`saved-${tableName}`);\n\t\t\t} else {\n\t\t\t\tstatement = `SELECT * FROM ${tableName}`;\n\t\t\t}\n\n\t\t\teditor.innerText = statement;\n\t\t});\n\t});\n}\n\nexport const saveQueryScript = undefined;\n",[],[349,392],{"_103":400,"_95":401,"_154":402,"_156":350,"_157":139,"_158":403,"_160":22,"_105":404,"_99":119,"_163":223,"_165":405,"_166":22,"_167":-5,"_168":406,"_98":407},"b3d23762-9968-11f0-8a61-0224a6c84d84","table-select.tsx","4a6d7af4-9966-11f0-a6a4-0224a6c84d84",115,["D",1758733541429],"console.log(\"table selection script loaded!\");\n\nif (typeof Deno === \"undefined\") {\n\tconst tables = document.querySelectorAll(\".tables-list-item\");\n\tconst editor = document.getElementById(\"editordiv\");\n\n\ttables.forEach((table) => {\n\t\ttable.addEventListener(\"click\", () => {\n\t\t\tconst tableName = table.id;\n\n\t\t\tlet statement: string; // = `SELECT * FROM ${tableName}`;\n\t\t\tif (localStorage.getItem(`saved-${tableName}`) !== null) {\n\t\t\t\tstatement = localStorage.getItem(`saved-${tableName}`);\n\t\t\t} else {\n\t\t\t\tstatement = `SELECT * FROM ${tableName}`;\n\t\t\t}\n\n\t\t\t// @ts-expect-error needed\n\t\t\teditor.code = statement;\n\t\t});\n\t});\n}\n\nexport const tableSelectScript = undefined;\n",[],[349,401],[349],{"_103":410,"_95":411,"_154":412,"_156":-5,"_157":139,"_158":413,"_160":161,"_105":414,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":415,"_98":443},"664aeffe-c1bb-11f0-984e-42dde27851f2","shared","664af0b2-c1bb-11f0-984e-42dde27851f2",126,["D",1763167106768],[416,425,434],{"_103":417,"_95":418,"_154":419,"_156":412,"_157":139,"_158":420,"_160":22,"_105":421,"_99":32,"_163":223,"_165":422,"_166":22,"_167":-5,"_168":423,"_98":424},"66b3bc32-c1bb-11f0-984e-42dde27851f2","exportHelpers.ts","66b3bcdc-c1bb-11f0-984e-42dde27851f2",143,["D",1763167107450],"import { Parser } from \"https://esm.sh/@json2csv/plainjs\";\nimport type { QueryResult } from \"./types.ts\";\n\nexport const sqlToJSON = (result: QueryResult) => {\n const { columns, rows } = result;\n\n return rows.map((row) =>\n columns.reduce((obj, col, index) => {\n obj[col] = row[index];\n return obj;\n }, {} as Record)\n );\n};\n\nexport const sqlToCSV = (result: QueryResult): string => {\n try {\n const { columns } = result;\n const records = sqlToJSON(result);\n return new Parser({ fields: columns }).parse(records);\n } catch (error) {\n return error instanceof Error ? error.message : \"Unknown error occurred\";\n }\n};\n",[],[411,418],{"_103":426,"_95":427,"_154":428,"_156":412,"_157":139,"_158":429,"_160":22,"_105":430,"_99":32,"_163":223,"_165":431,"_166":22,"_167":-5,"_168":432,"_98":433},"66b6e178-c1bb-11f0-815e-42dde27851f2","sqlHelpers.ts","66b6e236-c1bb-11f0-815e-42dde27851f2",144,["D",1763167107462],"import { identify } from \"https://esm.sh/sql-query-identifier@2.7.0\";\nimport type { ParsedStatement } from \"./types.ts\";\n\n/**\n * Parse SQL code into individual statements with their positions\n */\nexport function parseSQLStatements(code: string): ParsedStatement[] {\n return identify(code, {\n dialect: \"sqlite\",\n strict: false,\n });\n}\n\n/**\n * Select the SQL statement at a given cursor position\n */\nexport function selectStatementFromPosition(\n statements: ParsedStatement[],\n position: number\n): ParsedStatement | undefined {\n for (const statement of statements) {\n if (statement.end + 1 >= position) {\n return statement;\n }\n }\n return undefined;\n}\n\n/**\n * Get the SQL statement at the current cursor position\n * If no statement found, returns empty string\n */\nexport function getStatementAtPosition(\n code: string,\n cursorPosition: number\n): string {\n const statements = parseSQLStatements(code);\n const statement = selectStatementFromPosition(statements, cursorPosition);\n return statement?.text || \"\";\n}\n\n/**\n * Generate a default SELECT query for a table or view\n */\nexport function generateDefaultQuery(name: string, type: \"table\" | \"view\"): string {\n return `SELECT * FROM ${name} LIMIT 100;`;\n}\n",[],[411,427],{"_103":435,"_95":436,"_154":437,"_156":412,"_157":139,"_158":438,"_160":22,"_105":439,"_99":32,"_163":223,"_165":440,"_166":22,"_167":-5,"_168":441,"_98":442},"66b04f0c-c1bb-11f0-99b9-42dde27851f2","types.ts","66b04fc0-c1bb-11f0-99b9-42dde27851f2",142,["D",1763167107431],"// Shared TypeScript types for SQLite Explorer\n\nexport type SchemaItemType = \"table\" | \"view\";\n\nexport interface SchemaItem {\n name: string;\n type: SchemaItemType;\n}\n\nexport interface QueryResult {\n columns: string[];\n rows: any[][];\n}\n\nexport interface QueryResponse {\n success: boolean;\n data?: QueryResult;\n error?: string;\n}\n\nexport interface SchemaResponse {\n tables: SchemaItem[];\n views: SchemaItem[];\n}\n\nexport interface ParsedStatement {\n start: number;\n end: number;\n text: string;\n type: string;\n}\n",[],[411,436],[411],{"_103":445,"_95":446,"_154":447,"_156":-5,"_157":139,"_158":448,"_160":22,"_105":449,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":450,"_98":459},"a03eeb4c-98f4-11f0-8eaa-0224a6c84d84","sqliteExplorerApp","e3f0bc5c-7472-49d5-86e8-1eec14ba9a56",5,["D",1758683687630],[451],{"_103":452,"_95":339,"_154":453,"_156":447,"_157":139,"_158":454,"_160":22,"_105":455,"_99":119,"_163":196,"_165":456,"_166":22,"_167":-5,"_168":457,"_98":458},"18c828c2-9967-11f0-a386-0224a6c84d84","a0945fc8-98f4-11f0-bb98-0224a6c84d84",96,["D",1758732852403],"/** @jsxImportSource npm:hono/jsx **/\n\nimport { modifyFetchHandler } from \"https://esm.town/v/andreterron/codeOnValTown?v=50\";\nimport { iframeHandler } from \"https://esm.town/v/nbbaier/iframeHandler\";\nimport { resetStyle } from \"https://esm.town/v/nbbaier/resetStyle\";\nimport {\n\tEditorSection,\n\tSeparator,\n\tTable,\n\tTablesList,\n} from \"https://esm.town/v/nbbaier/sqliteStudioComponents\";\nimport { sqliteStyle } from \"https://esm.town/v/nbbaier/sqliteStyle\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Hono } from \"npm:hono\";\nimport type { FC } from \"npm:hono/jsx\";\nimport { jsxRenderer } from \"npm:hono/jsx-renderer\";\nimport papa from \"npm:papaparse\";\n\nconst HTML: FC = ({ children }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tSQLite Explorer\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t\t\tSomething went wrong\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tSQLite Explorer\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tSQLite Explorer\n\t\t\t\t\t\t

nbbaier

sqliteExplorerReact