diff --git a/packages/playground-next/.gitignore b/packages/playground-next/.gitignore new file mode 100644 index 00000000..997409cb --- /dev/null +++ b/packages/playground-next/.gitignore @@ -0,0 +1,17 @@ +# Next.js +.next/ +out/ + +# Build +build/ +dist/ + +# Dependencies +node_modules/ + +# Debug +npm-debug.log* +.pnpm-debug.log* + +# Local env +.env*.local diff --git a/packages/playground-next/README.md b/packages/playground-next/README.md new file mode 100644 index 00000000..e3ad4eef --- /dev/null +++ b/packages/playground-next/README.md @@ -0,0 +1,25 @@ +# Polyglot SQL Playground (Next.js) + +A Next.js + Turbopack playground that mirrors GrowthBook's structure. Demonstrates `@polyglot-sql/sdk` via `playground-shared` (top-level import, like GrowthBook's shared package). + +## Setup + +From the polyglot repo root: + +```bash +pnpm install +pnpm --filter @polyglot-sql/playground-next run dev +``` + +Open http://localhost:3000. + +## Structure (mirrors GrowthBook) + +- **FormatDemo** – Loaded with `ssr: false`; imports from `playground-shared/sql` (top-level SDK import like GrowthBook) +- **playground-shared** – Wraps `@polyglot-sql/sdk`; `formatWithPolyglot` throws if format is undefined (top-level await issue) + +## Configuration + +- Next.js 16 with Turbopack +- Pages Router +- `transpilePackages: ["@polyglot-sql/sdk", "playground-shared"]` diff --git a/packages/playground-next/components/FormatDemo.tsx b/packages/playground-next/components/FormatDemo.tsx new file mode 100644 index 00000000..967e289d --- /dev/null +++ b/packages/playground-next/components/FormatDemo.tsx @@ -0,0 +1,104 @@ +import { + initPolyglotFormat, + formatWithPolyglot, +} from "playground-shared/sql"; +import { useState, useEffect, useCallback } from "react"; + +const DEFAULT_SQL = `select u.id,u.name,u.email,count(o.id) as order_count from users u left join orders o on u.id=o.user_id where u.active=true group by u.id,u.name,u.email limit 50;`; + +export default function FormatDemo() { + const [sql, setSql] = useState(DEFAULT_SQL); + const [output, setOutput] = useState(""); + const [initDone, setInitDone] = useState(false); + + useEffect(() => { + initPolyglotFormat().then(() => setInitDone(true)); + }, []); + + const handleFormat = useCallback(() => { + setOutput(""); + try { + const result = formatWithPolyglot(sql, "postgresql"); + setOutput(result ?? ""); + } catch (e) { + setOutput(String(e)); + } + }, [sql]); + + return ( +
+

Polyglot SQL Playground

+ +
+