https://github.com/wirekang/kysely-playground
Playground for kysely, a type-safe sql builder.
https://github.com/wirekang/kysely-playground
kysely playground sql sql-builder typescript
Last synced: 4 months ago
JSON representation
Playground for kysely, a type-safe sql builder.
- Host: GitHub
- URL: https://github.com/wirekang/kysely-playground
- Owner: wirekang
- Created: 2022-12-27T02:59:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-09T14:43:05.000Z (almost 2 years ago)
- Last Synced: 2024-06-10T11:42:33.994Z (almost 2 years ago)
- Topics: kysely, playground, sql, sql-builder, typescript
- Language: TypeScript
- Homepage: https://kyse.link/
- Size: 7.01 MB
- Stars: 133
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Kysely Playground](https://kyse.link/)
Playground for [Kysely](https://github.com/kysely-org/kysely),
with vscode-like experiences including type checking and auto suggestions.
Supports built-in dialects, various versions and unrealeased branches.
## Guide
There are three panels in playground. From left to right, `type-editor`, `query-editor` and `result`.
In `type-editor` you can declare any kind of typescript types.
For Kysely's type-safety and autocompletion to work, `Database` type must be declared with `export`.
If you don't familiar with Kysely, checkout [the official guide](https://kysely.dev/docs/getting-started#types) for more information about database types.
In `query-editor` you can write the query.
`db` is pre-defined Kysely instance with `Database` type from `type-editor`.
You can import any other types from `type-editor`: `import {..} from "type-editor"`.
For advanced usage, you can set the result of `db.*.execute()` by setting `$playground.result`:
```ts
$playground.result = { rows: [{id:3},{id:4}] };
$playground.log(await db.selectFrom('person').select("id").execute())
// [{id:3},{id:4}]
```
[Playground Link](https://kyse.link/#cN4IgpgJglgLg9gJwM4gFyhgTwA5jSEAGhAEcBXMBTfAEmwBsBDTAcwTjIDsIA6BMJGXowABAF4RwEewDuSVCIDaUqBAUBmEQF9CkkaoUAWbQF1tAbgA6nOk1bsuvenBYAKRjMawREAEY8kMHowAGMYADF2AFtXSxBcZDhOOIBKAKDQmFiQVVSeMAAPULIYMFcUlKtOEB0QaEZgsPxsOCQYNgEiEABrTED6anQQLFx8GEYWLs5GKLxUEAAGHgAmAHYVmuIAC1UwABUcOZgECi0gA)
For more advanced usage, you can import esm module directly from url:
```ts
// @ts-ignore
import isNumber from "https://esm.run/is-number@7.0.0/index.js"
```
[Playground Link](https://kyse.link/#cN4IgpgJglgLg9gJwM4gFyhgTwA5jSEAGhAEcBXMBTfAehoAIABGJAWigHMA7RMAHS5QAttkQx6UJADkyQgEaV6AMwRwh9PiAAWMGNiSo6YJEIB0CMlxqTWXWQoSMA7KYAMb61whgAHqYBWSJoA3AIAJNgANgCGmByqlhCmkXAcABSSMvKUaQDMAJSEEtL2OZrRmvn5oVwgAL7E0NGRYADGMPiiSDDxxkQgANaYSGCR1OggWLj4MNEc-VzRQnioIO4ATC7r9cRaUN4AKjgrMBZgdUA)
## API
You can embed the playground in your site. See [kysely.dev](https://kysely.dev/docs/examples/SELECT/a-single-column)
### URL Fragment
Set initial [State](https://github.com/wirekang/kysely-playground/tree/main/src/lib/state/state.ts) via url fragment.
```js
const state = {
dialect: "postgres",
editors: {
type: "// type editor contents",
query: "// query editor contents",
},
}
const fragment = "r" + encodedURIComponent(JSON.stringify(state))
const url = "https://kyse.link" + fragment
```
### SearchParams
There are some extra flags mostly for iframe.
Note that when user opens a new tab by 'open-in-new-tab' button, all SearchParams are removed.
| key | value | description |
|--|--|--|
| open | any | show floating 'open-in-new-tab' button
| theme | 'light' \| 'dark' | override theme
| nomore | any | hide 'More' button
| notheme | any | hide 'switch-theme' button
| nohotkey | any | disable all hotkeys
Example: `https://kyse.link?theme=dark&open=1&theme=dark`