Rewrite (#20)

Author: wirekang

.github/workflows/deploy-preview.yml

@@ -0,0 +1,28 @@
+name: deploy-preview
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run test
+      - run: npm run build
+        env:
+          VITE_BRANCH: ${{ github.ref_name }}
+          VITE_PREVIEW: 1
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_KYSELY_PLAYGROUND }}"
+          channelId: preview
+          expires: 7d
+          projectId: kysely-playground

.github/workflows/deploy.yml

@@ -1,37 +1,26 @@
-name: Deploy
+name: deploy
 on:
   push:
-    branches: [ "main" ]
-    paths-ignore:
-      - "README.md"
+    branches:
+      - main
   workflow_dispatch:
 jobs:
-  build:
+  build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/configure-pages@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - run: yarn install --frozen-lockfile
-      - run: yarn test
-      - run: yarn build
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run test
+      - run: npm run build
         env:
-          NODE_OPTIONS: "--max-old-space-size=8192"
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+          VITE_BRANCH: ${{ github.ref_name }}
+      - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          path: 'dist'
-  deploy:
-    runs-on: ubuntu-latest
-    needs: build
-    permissions:
-      pages: write
-      id-token: write
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - uses: actions/deploy-pages@v1
-        id: deployment
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_KYSELY_PLAYGROUND }}'
+          channelId: live
+          projectId: kysely-playground

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 .firebase/*
+stats.html

.prettierrc

@@ -1,7 +1,8 @@
 {
-  "printWidth": 120,
-  "semi": false,
+  "printWidth": 110,
+  "semi": true,
   "singleQuote": false,
   "arrowParens": "always",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "trailingComma": "all"
 }

README.md

@@ -1,46 +1,46 @@
 # [Kysely Playground](https://kyse.link/)
 
-| branch  | url                               |
-|---------|-----------------------------------|
-| main    | https://kyse.link                 |
 
-Playground for [Kysely](https://github.com/kysely-org/kysely).
+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.
 
-Provides vscode-like experiences including type checking and auto suggestions.  
-Supports built-in dialects(postgres, mysql, sqlite), last 20 kysely versions.
+## Guide
 
-You can test stuffs quickly, create issues with reproducing with playground.
+There are three panels in playground. From left to right, `type-editor`, `query-editor` and `result`.
 
-## Guide
+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"`. 
+Result of executions will be displayed in `result`.
+
+For advanced usage, you can import esm module directly from url:  
+```ts
+// @ts-ignore
+import isNumber from "https://esm.run/[email protected]/index.js"
+```
+
+
+
+## API
 
-The playground has 3 editor: `schema`, `query` and `sql`.
+### Set states
 
-Schema editor is the leftmost editor(in wide-enough screen).  
-You can declare global scope interface `DB` to help checking types related database schema. 
+`<origin>#r<encoded>`
 
-You can hide the editor by clicking `Schema` checkbox on header of playground.  
-If you want to let people focus on building query not schema, hide the schema editor before share.  
-The visibility of schema editor will be shared together.  
-(Type checking for schema still works even though it is hidden.)
+`<encoded>` = `encodeURIComponent(JSON.strinify(<state>))`
 
-If you want to disable the type checking for schema,
-check out
-[the example](https://kyse.link/?p=b&i=haFkqHBvc3RncmVzoXamMC4yNC4yoXPZSmRlY2xhcmUgZ2xvYmFsIHsKICBpbnRlcmZhY2UgREIgewogICAgW2tleTogc3RyaW5nXTogYW55CiAgfQp9CgpleHBvcnQge30KoXHZK2t5c2VseQogIC5zZWxlY3RGcm9tKCJhc2RmIikKICAuc2VsZWN0QWxsKCmhY8M=).
 
-To
-prevent [2669 error](https://stackoverflow.com/questions/57132428/augmentations-for-the-global-scope-can-only-be-directly-nested-in-external-modul),
-you should specify `export {}` if you import nothing in schema editor.
+`<state>` = [Type Definition](https://github.com/wirekang/kysely-playground/tree/main/src/lib/state/state.ts)
 
-The editor in the middle is the query editor.
+Example: `https://kyse.link#r%7Beditors%3A%7Btype%3A%22%22%2Cquery%3A%22%22%7D%7D`
 
-These are pre-defined variables you can use without import:
+### Override theme
 
-| variable | description                                             |
-|----------|---------------------------------------------------------|
-| `kysely` | an Kysely instance with DB interface from schema editor |
-| `db`     | alias for kysely                                        |
+`<origin>?theme=light`
 
-You can see the generated sql in the rightmost sql editor.  
-By default, the playground will show you the generated sql string as-is(with parameter placeholders).  
-You can generate sql with hard-coded parameter by turning on `More Options` -> `SQL Format` -> `inlineParameters`.  
-It is useful when you copy-paste the sql into database cli or DataGrip.  
+`<origin>?theme=dark`