diff --git a/apps/postgres-new/components/ide.tsx b/apps/postgres-new/components/ide.tsx index 2ad94a17..c943e82d 100644 --- a/apps/postgres-new/components/ide.tsx +++ b/apps/postgres-new/components/ide.tsx @@ -2,21 +2,19 @@ import { Editor } from '@monaco-editor/react' import { ParseResult } from 'libpg-query/wasm' -import { FileCode, MessageSquareMore, Sprout, Workflow } from 'lucide-react' +import { FileCode, MessageSquareMore, Workflow } from 'lucide-react' import { PropsWithChildren, useEffect, useState } from 'react' -import { format } from 'sql-formatter' import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs' import { useMessagesQuery } from '~/data/messages/messages-query' import { useAsyncMemo } from '~/lib/hooks' import { tabsSchema, TabValue } from '~/lib/schema' -import { assertDefined, isMigrationStatement } from '~/lib/sql-util' +import { assertDefined, formatSql, isMigrationStatement } from '~/lib/sql-util' import { ToolInvocation } from '~/lib/tools' import { useBreakpoint } from '~/lib/use-breakpoint' import { cn } from '~/lib/utils' -import { useApp } from './app-provider' import SchemaGraph from './schema/graph' -import { useWorkspace } from './workspace' import { buttonVariants } from './ui/button' +import { useWorkspace } from './workspace' const initialMigrationSql = '-- Migrations will appear here as you chat with AI\n' const initialSeedSql = '-- Seeds will appear here as you chat with AI\n' @@ -80,13 +78,7 @@ export default function IDE({ children, className }: IDEProps) { const migrationSql = await deparse(filteredAst) - const formattedSql = format(migrationSql, { - language: 'postgresql', - keywordCase: 'lower', - identifierCase: 'lower', - dataTypeCase: 'lower', - functionCase: 'lower', - }) + const formattedSql = formatSql(migrationSql) ?? sql const withSemicolon = formattedSql.endsWith(';') ? formattedSql : `${formattedSql};` @@ -189,14 +181,11 @@ export default function IDE({ children, className }: IDEProps) { monaco.languages.registerDocumentFormattingEditProvider('pgsql', { async provideDocumentFormattingEdits(model) { const currentCode = editor.getValue() - const formattedCode = format(currentCode, { - language: 'postgresql', - keywordCase: 'lower', - }) + const formattedCode = formatSql(currentCode) return [ { range: model.getFullModelRange(), - text: formattedCode, + text: formattedCode ?? currentCode, }, ] }, @@ -233,14 +222,11 @@ export default function IDE({ children, className }: IDEProps) { monaco.languages.registerDocumentFormattingEditProvider('pgsql', { async provideDocumentFormattingEdits(model) { const currentCode = editor.getValue() - const formattedCode = format(currentCode, { - language: 'postgresql', - keywordCase: 'lower', - }) + const formattedCode = formatSql(currentCode) return [ { range: model.getFullModelRange(), - text: formattedCode, + text: formattedCode ?? currentCode, }, ] }, diff --git a/apps/postgres-new/components/tools/csv-export.tsx b/apps/postgres-new/components/tools/csv-export.tsx index 09e29fc8..f1e130d3 100644 --- a/apps/postgres-new/components/tools/csv-export.tsx +++ b/apps/postgres-new/components/tools/csv-export.tsx @@ -1,8 +1,8 @@ import { m } from 'framer-motion' import { Download } from 'lucide-react' import { useMemo } from 'react' -import { format } from 'sql-formatter' import { loadFile } from '~/lib/files' +import { formatSql } from '~/lib/sql-util' import { ToolInvocation } from '~/lib/tools' import { downloadFile } from '~/lib/util' import CodeAccordion from '../code-accordion' @@ -14,17 +14,7 @@ export type CsvExportProps = { export default function CsvExport({ toolInvocation }: CsvExportProps) { const { sql } = toolInvocation.args - const formattedSql = useMemo( - () => - format(sql, { - language: 'postgresql', - keywordCase: 'lower', - identifierCase: 'lower', - dataTypeCase: 'lower', - functionCase: 'lower', - }), - [sql] - ) + const formattedSql = useMemo(() => formatSql(sql), [sql]) if (!('result' in toolInvocation)) { return null @@ -37,7 +27,7 @@ export default function CsvExport({ toolInvocation }: CsvExportProps) { ) @@ -45,7 +35,7 @@ export default function CsvExport({ toolInvocation }: CsvExportProps) { return ( <> - + @@ -10,17 +10,7 @@ export type CsvExportProps = { export default function CsvImport({ toolInvocation }: CsvExportProps) { const { sql } = toolInvocation.args - const formattedSql = useMemo( - () => - format(sql, { - language: 'postgresql', - keywordCase: 'lower', - identifierCase: 'lower', - dataTypeCase: 'lower', - functionCase: 'lower', - }), - [sql] - ) + const formattedSql = useMemo(() => formatSql(sql), [sql]) if (!('result' in toolInvocation)) { return null @@ -33,11 +23,11 @@ export default function CsvImport({ toolInvocation }: CsvExportProps) { ) } - return + return } diff --git a/apps/postgres-new/components/tools/executed-sql.tsx b/apps/postgres-new/components/tools/executed-sql.tsx index e97e3194..cb9cfe08 100644 --- a/apps/postgres-new/components/tools/executed-sql.tsx +++ b/apps/postgres-new/components/tools/executed-sql.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react' -import { format } from 'sql-formatter' +import { formatSql } from '~/lib/sql-util' import { ToolInvocation } from '~/lib/tools' import CodeAccordion from '../code-accordion' @@ -10,17 +10,7 @@ export type ExecutedSqlProps = { export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) { const { sql } = toolInvocation.args - const formattedSql = useMemo( - () => - format(sql, { - language: 'postgresql', - keywordCase: 'lower', - identifierCase: 'lower', - dataTypeCase: 'lower', - functionCase: 'lower', - }), - [sql] - ) + const formattedSql = useMemo(() => formatSql(sql), [sql]) if (!('result' in toolInvocation)) { return null @@ -33,11 +23,11 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) { ) } - return + return } diff --git a/apps/postgres-new/lib/hooks.ts b/apps/postgres-new/lib/hooks.ts index 38737b45..befcd25b 100644 --- a/apps/postgres-new/lib/hooks.ts +++ b/apps/postgres-new/lib/hooks.ts @@ -168,6 +168,7 @@ export function useAsyncMemo( }) .catch((err) => { if (!hasBeenCancelled.current) { + setValue(undefined) setError(err) } }) diff --git a/apps/postgres-new/lib/sql-util.ts b/apps/postgres-new/lib/sql-util.ts index 14b18460..bab16110 100644 --- a/apps/postgres-new/lib/sql-util.ts +++ b/apps/postgres-new/lib/sql-util.ts @@ -1,4 +1,5 @@ import { A_Const, A_Expr, ColumnRef, Node, RawStmt } from 'libpg-query/wasm' +import { format } from 'sql-formatter' export function isQueryStatement(stmt: RawStmt) { return stmt.stmt && unwrapQueryStatement(stmt.stmt) !== undefined @@ -507,3 +508,17 @@ export function parseConstant(constant: A_Const) { throw new AssertionError(`Constant values must be a string, integer, or float`) } } + +export function formatSql(sql: string) { + try { + return format(sql, { + language: 'postgresql', + keywordCase: 'lower', + identifierCase: 'lower', + dataTypeCase: 'lower', + functionCase: 'lower', + }) + } catch (err) { + return undefined + } +} diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json index 45ef309c..15b733c3 100644 --- a/apps/postgres-new/package.json +++ b/apps/postgres-new/package.json @@ -62,7 +62,7 @@ "rehype-katex": "^7.0.0", "remark-gfm": "^4.0.0", "remark-math": "^6.0.0", - "sql-formatter": "^15.3.1", + "sql-formatter": "^15.4.5", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", "web-streams-polyfill": "^4.0.0", diff --git a/package-lock.json b/package-lock.json index efb0fa42..85591eb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -130,7 +130,7 @@ "rehype-katex": "^7.0.0", "remark-gfm": "^4.0.0", "remark-math": "^6.0.0", - "sql-formatter": "^15.3.1", + "sql-formatter": "^15.4.5", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", "web-streams-polyfill": "^4.0.0", @@ -12552,7 +12552,9 @@ "license": "BSD-3-Clause" }, "node_modules/sql-formatter": { - "version": "15.3.2", + "version": "15.4.5", + "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.4.5.tgz", + "integrity": "sha512-dxYn0OzEmB19/9Y+yh8bqD8kJx2S/4pOTM4QLKxQDh7K6lp1Sx9MhmiF9RUJHSVjfV72KihW5R1h6Kecy6O5qA==", "license": "MIT", "dependencies": { "argparse": "^2.0.1",