From 2a23b3f8c604d6206ac9e0aa6b834e2e48c8e1ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Tue, 16 Apr 2024 19:33:42 -0300
Subject: [PATCH 1/9] feat(playground): base layout

---
 docs/.vitepress/config.ts            |  1 +
 docs/.vitepress/theme/Playground.vue | 29 ++++++++++++++++++++++++++++
 docs/.vitepress/theme/index.js       |  2 ++
 docs/.vitepress/theme/styles.css     | 18 +++++++++++++++++
 docs/package-lock.json               |  8 ++++++++
 docs/package.json                    |  4 +++-
 docs/src/playground/index.md         |  7 +++++++
 7 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vitepress/theme/Playground.vue
 create mode 100644 docs/src/playground/index.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 4d2adeea1..a749d6440 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
     editLinkText: 'Edit this page on GitHub',
     lastUpdated: 'Last Updated',
     nav: [
+      { text: 'Playground', link: '/playground/' },
       { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
       {
         text: 'F.A.Q.',
diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
new file mode 100644
index 000000000..b3194c0ab
--- /dev/null
+++ b/docs/.vitepress/theme/Playground.vue
@@ -0,0 +1,29 @@
+<script>
+import Split from 'split.js';
+
+export default {
+  mounted() {
+    Split(['#editor', '#output']);
+  },
+};
+</script>
+
+<template>
+  <div class="playground split">
+    <div id="editor">
+      Editor
+    </div>
+
+    <div id="output">
+      Output
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.playground {
+  width: 100vw;
+  height: 100vh;
+  padding-top: var(--header-height);
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 87655944d..e0576cc38 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -2,6 +2,7 @@ import defaultTheme from 'vitepress/theme';
 import Layout from './Layout.vue';
 import { createDialect } from './dialect';
 import SqlOutput from './SqlOutput.vue';
+import Playground from './Playground.vue';
 import './styles.css';
 
 // @todo: hack, vite.config.ts define option seem not to work
@@ -16,5 +17,6 @@ export default {
   enhanceApp({ app }) {
     createDialect(app);
     app.component('SqlOutput', SqlOutput);
+    app.component('Playground', Playground);
   },
 };
diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css
index d8b2d89f0..963201995 100644
--- a/docs/.vitepress/theme/styles.css
+++ b/docs/.vitepress/theme/styles.css
@@ -122,3 +122,21 @@ a.header-anchor {
 .language-sql code {
   color: #ccc;
 }
+
+.split {
+  display: flex;
+  flex-direction: row;
+}
+.gutter {
+  background-color: var(--c-divider);
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
+.gutter.gutter-vertical {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+  cursor: row-resize;
+}
+.gutter.gutter-horizontal {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+  cursor: col-resize;
+}
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 64b2a887c..0de917eb7 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -8,6 +8,9 @@
       "name": "@knex/documentation",
       "version": "0.1.0",
       "license": "MIT",
+      "dependencies": {
+        "split.js": "^1.6.5"
+      },
       "devDependencies": {
         "knex": "^2.4.0",
         "typescript": "^4.6.3",
@@ -1132,6 +1135,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split.js": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
+      "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
diff --git a/docs/package.json b/docs/package.json
index 506261900..22438c448 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,7 +13,9 @@
     "typescript": "^4.6.3",
     "vitepress": "^0.22.4"
   },
-  "dependencies": {},
+  "dependencies": {
+    "split.js": "^1.6.5"
+  },
   "author": {
     "name": "Tim Griesser",
     "web": "https://github.com/tgriesser"
diff --git a/docs/src/playground/index.md b/docs/src/playground/index.md
new file mode 100644
index 000000000..c0736e852
--- /dev/null
+++ b/docs/src/playground/index.md
@@ -0,0 +1,7 @@
+---
+title: Playground
+sidebar: false
+customLayout: true
+---
+
+<Playground />

From 3fd9e68d0824719cecfe6299eb66d9161f301397 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Tue, 16 Apr 2024 22:00:17 -0300
Subject: [PATCH 2/9] feat(playground): monaco editor

---
 docs/.vitepress/theme/Playground.vue |  70 ++++++++++++++--
 docs/.vitepress/theme/index.js       |   6 ++
 docs/.vitepress/theme/styles.css     |   1 +
 docs/package-lock.json               | 117 +++++++++++++++++++--------
 docs/package.json                    |   3 +-
 5 files changed, 155 insertions(+), 42 deletions(-)

diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
index b3194c0ab..79fc8543e 100644
--- a/docs/.vitepress/theme/Playground.vue
+++ b/docs/.vitepress/theme/Playground.vue
@@ -8,15 +8,73 @@ export default {
 };
 </script>
 
+<script setup>
+import { shallowRef } from 'vue';
+import { useDialect } from './dialect';
+
+const { dialect } = useDialect();
+const editorRef = shallowRef();
+const outputRef = shallowRef();
+
+const code = `// Knex code\nknex("table").select()\n`;
+const sql = `--- generated SQL code\nselect\n  *\nfrom\n  "table"\n`;
+
+const editorOptions = {
+  scrollBeyondLastLine: false,
+  wordWrap: 'on',
+};
+
+const outputEditorOptions = {
+  readOnly: true,
+  scrollBeyondLastLine: false,
+  wordWrap: 'on',
+};
+
+function handleMountEditor(editor) {
+  editorRef.value = editor;
+}
+
+function handleMountOutput(editor) {
+  outputRef.value = editor;
+}
+
+function onChange(value) {
+  let output = '--- generated SQL code\n';
+
+  try {
+    console.log({ dialect: dialect.value });
+
+    output += eval(value).toQuery();
+  } catch (err) {
+    output = `--- ${err?.toString() ?? err}\n`;
+  }
+
+  outputRef.value.setValue(output);
+}
+</script>
+
 <template>
   <div class="playground split">
-    <div id="editor">
-      Editor
-    </div>
+    <vue-monaco-editor
+      id="editor"
+      language="typescript"
+      theme="vs-dark"
+      v-model:value="code"
+      :options="editorOptions"
+      :saveViewState="false"
+      @mount="handleMountEditor"
+      @change="onChange"
+    />
 
-    <div id="output">
-      Output
-    </div>
+    <vue-monaco-editor
+      id="output"
+      language="sql"
+      theme="vs-dark"
+      v-model:value="sql"
+      :options="outputEditorOptions"
+      :saveViewState="false"
+      @mount="handleMountOutput"
+    />
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index e0576cc38..78a6efc1b 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,3 +1,4 @@
+import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor';
 import defaultTheme from 'vitepress/theme';
 import Layout from './Layout.vue';
 import { createDialect } from './dialect';
@@ -18,5 +19,10 @@ export default {
     createDialect(app);
     app.component('SqlOutput', SqlOutput);
     app.component('Playground', Playground);
+    app.use(VueMonacoEditorPlugin, {
+      paths: {
+        vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs',
+      },
+    });
   },
 };
diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css
index 963201995..3a1462bbd 100644
--- a/docs/.vitepress/theme/styles.css
+++ b/docs/.vitepress/theme/styles.css
@@ -131,6 +131,7 @@ a.header-anchor {
   background-color: var(--c-divider);
   background-repeat: no-repeat;
   background-position: 50%;
+  flex-shrink: 0;
 }
 .gutter.gutter-vertical {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 0de917eb7..552d18027 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -9,10 +9,11 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
+        "@guolao/vue-monaco-editor": "^1.5.1",
         "split.js": "^1.6.5"
       },
       "devDependencies": {
-        "knex": "^2.4.0",
+        "knex": "^3.1.0",
         "typescript": "^4.6.3",
         "vitepress": "^0.22.4"
       }
@@ -195,7 +196,6 @@
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
       "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -267,11 +267,40 @@
         "node": ">=12"
       }
     },
+    "node_modules/@guolao/vue-monaco-editor": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@guolao/vue-monaco-editor/-/vue-monaco-editor-1.5.1.tgz",
+      "integrity": "sha512-nhbQHDAwsxrdH/yitcrBgAkN8Cae0IEiYe/M3LWK8bSJRfapkbMyfTHE6Gcxsxa/6efSUZAPDo8dJWBDx5GZyA==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0",
+        "vue-demi": "latest"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.7.1",
+        "monaco-editor": ">=0.43.0",
+        "vue": "^2.6.14 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
     },
     "node_modules/@vitejs/plugin-vue": {
       "version": "2.3.4",
@@ -290,7 +319,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.19.tgz",
       "integrity": "sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.9",
         "@vue/shared": "3.4.19",
@@ -303,7 +331,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz",
       "integrity": "sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-core": "3.4.19",
         "@vue/shared": "3.4.19"
@@ -313,7 +340,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz",
       "integrity": "sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.9",
         "@vue/compiler-core": "3.4.19",
@@ -330,7 +356,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.19.tgz",
       "integrity": "sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.4.19",
         "@vue/shared": "3.4.19"
@@ -340,7 +365,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.19.tgz",
       "integrity": "sha512-+VcwrQvLZgEclGZRHx4O2XhyEEcKaBi50WbxdVItEezUf4fqRh838Ix6amWTdX0CNb/b6t3Gkz3eOebfcSt+UA==",
-      "dev": true,
       "dependencies": {
         "@vue/shared": "3.4.19"
       }
@@ -349,7 +373,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.19.tgz",
       "integrity": "sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==",
-      "dev": true,
       "dependencies": {
         "@vue/reactivity": "3.4.19",
         "@vue/shared": "3.4.19"
@@ -359,7 +382,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.19.tgz",
       "integrity": "sha512-IyZzIDqfNCF0OyZOauL+F4yzjMPN2rPd8nhqPP2N1lBn3kYqJpPHHru+83Rkvo2lHz5mW+rEeIMEF9qY3PB94g==",
-      "dev": true,
       "dependencies": {
         "@vue/runtime-core": "3.4.19",
         "@vue/shared": "3.4.19",
@@ -370,7 +392,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.19.tgz",
       "integrity": "sha512-eAj2p0c429RZyyhtMRnttjcSToch+kTWxFPHlzGMkR28ZbF1PDlTcmGmlDxccBuqNd9iOQ7xPRPAGgPVj+YpQw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.4.19",
         "@vue/shared": "3.4.19"
@@ -382,8 +403,7 @@
     "node_modules/@vue/shared": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz",
-      "integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==",
-      "dev": true
+      "integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
     },
     "node_modules/algoliasearch": {
       "version": "4.22.1",
@@ -425,8 +445,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -449,7 +468,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -834,8 +852,7 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -909,9 +926,9 @@
       }
     },
     "node_modules/knex": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/knex/-/knex-2.5.1.tgz",
-      "integrity": "sha512-z78DgGKUr4SE/6cm7ku+jHvFT0X97aERh/f0MUKAKgFnwCYBEW4TFBqtHWFYiJFid7fMrtpZ/gxJthvz5mEByA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/knex/-/knex-3.1.0.tgz",
+      "integrity": "sha512-GLoII6hR0c4ti243gMs5/1Rb3B+AjwMOfjYm97pu0FOQa7JH56hgBxYf5WK2525ceSbBY1cjeZ9yk99GPMB6Kw==",
       "dev": true,
       "dependencies": {
         "colorette": "2.0.19",
@@ -923,7 +940,7 @@
         "getopts": "2.3.0",
         "interpret": "^2.2.0",
         "lodash": "^4.17.21",
-        "pg-connection-string": "2.6.1",
+        "pg-connection-string": "2.6.2",
         "rechoir": "^0.8.0",
         "resolve-from": "^5.0.0",
         "tarn": "^3.0.2",
@@ -933,7 +950,7 @@
         "knex": "bin/cli.js"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=16"
       },
       "peerDependenciesMeta": {
         "better-sqlite3": {
@@ -969,7 +986,6 @@
       "version": "0.30.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
       "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -977,6 +993,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.47.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.47.0.tgz",
+      "integrity": "sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -987,7 +1009,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1008,22 +1029,20 @@
       "dev": true
     },
     "node_modules/pg-connection-string": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.1.tgz",
-      "integrity": "sha512-w6ZzNu6oMmIzEAYVw+RLK0+nqHPt8K3ZnknKi+g48Ak2pr3dtljJW3o+D/n2zzCG07Zoe9VOX3aiKpj+BN0pjg==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.2.tgz",
+      "integrity": "sha512-ch6OwaeaPYcova4kKZ15sbJ2hKb/VP48ZD2gE7i1J+L4MspCtBMAx8nMgz7bksc7IojCIIWuEhHibSMFH8m8oA==",
       "dev": true
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
       "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -1130,7 +1149,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1140,6 +1158,11 @@
       "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
       "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -1174,7 +1197,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -1244,7 +1267,6 @@
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz",
       "integrity": "sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.4.19",
         "@vue/compiler-sfc": "3.4.19",
@@ -1260,6 +1282,31 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/docs/package.json b/docs/package.json
index 22438c448..217a28f47 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,11 +9,12 @@
     "serve": "vitepress serve ."
   },
   "devDependencies": {
-    "knex": "^2.4.0",
+    "knex": "^3.1.0",
     "typescript": "^4.6.3",
     "vitepress": "^0.22.4"
   },
   "dependencies": {
+    "@guolao/vue-monaco-editor": "^1.5.1",
     "split.js": "^1.6.5"
   },
   "author": {

From 14825c0e3e3d81e6838b057914ae9f8f6ff8f586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Tue, 16 Apr 2024 23:40:58 -0300
Subject: [PATCH 3/9] feat(playground): knex types integration

---
 docs/.vitepress/config.ts            |  29 +-
 docs/.vitepress/theme/Playground.vue |  30 +-
 docs/package-lock.json               | 409 +++++++++++++++++++++++++--
 docs/package.json                    |  13 +-
 4 files changed, 459 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a749d6440..366d6a78d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,4 +1,6 @@
+import path from 'node:path';
 import { defineConfig } from 'vitepress';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 import KnexDialectsPlugins from './knexDialects';
 
 export default defineConfig({
@@ -40,7 +42,32 @@ export default defineConfig({
     },
   },
   vite: {
-    plugins: [KnexDialectsPlugins()],
+    plugins: [
+      KnexDialectsPlugins(),
+      viteStaticCopy({
+        targets: [
+          {
+            src: path.resolve(
+              path.join(__dirname, '..', 'node_modules', 'knex', 'types')
+            ),
+            dest: 'playground-assets',
+          },
+        ],
+      }),
+    ],
+    define: {
+      process: {
+        env: {},
+      },
+    },
+    build: {
+      target: ['es2020'],
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        target: 'es2020',
+      },
+    },
   },
 });
 
diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
index 79fc8543e..e7828b90e 100644
--- a/docs/.vitepress/theme/Playground.vue
+++ b/docs/.vitepress/theme/Playground.vue
@@ -9,7 +9,8 @@ export default {
 </script>
 
 <script setup>
-import { shallowRef } from 'vue';
+import Knex from 'knex';
+import { shallowRef, watch } from 'vue';
 import { useDialect } from './dialect';
 
 const { dialect } = useDialect();
@@ -32,17 +33,42 @@ const outputEditorOptions = {
 
 function handleMountEditor(editor) {
   editorRef.value = editor;
+
+  fetch('/playground-assets/types/index.d.ts')
+    .then((res) => res.text())
+    .then((typeRes) => {
+      const mappedTypes = typeRes
+        .replace(/^import .*$/gmu, '')
+        .replace(/[^ ]export /gu, ' ')
+        .replace(
+          'declare function knex<TRecord extends {} = any, TResult = unknown[]>(\n  config: Knex.Config | string\n): Knex<TRecord, TResult>;',
+          'declare const knex: Knex.Client & (<TRecord extends {} = any, TResult = unknown[]>(config: Knex.Config | string) => Knex<TRecord, TResult>);'
+        );
+
+      // @ts-ignore
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
+        mappedTypes,
+        'knex.d.ts'
+      );
+    })
+    .catch(() => {
+      window.location.reload();
+    });
 }
 
 function handleMountOutput(editor) {
   outputRef.value = editor;
 }
 
+watch(dialect, () => {
+  onChange(editorRef.value.getValue());
+});
+
 function onChange(value) {
   let output = '--- generated SQL code\n';
 
   try {
-    console.log({ dialect: dialect.value });
+    const knex = Knex({ client: dialect.value });
 
     output += eval(value).toQuery();
   } catch (err) {
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 552d18027..089abc07f 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -10,11 +10,13 @@
       "license": "MIT",
       "dependencies": {
         "@guolao/vue-monaco-editor": "^1.5.1",
+        "fs-browser-stub": "^1.0.1",
         "split.js": "^1.6.5"
       },
       "devDependencies": {
         "knex": "^3.1.0",
         "typescript": "^4.6.3",
+        "vite-plugin-static-copy": "^0.6.0",
         "vitepress": "^0.22.4"
       }
     },
@@ -302,17 +304,39 @@
         "monaco-editor": ">= 0.21.0 < 1"
       }
     },
-    "node_modules/@vitejs/plugin-vue": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
-      "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
       },
-      "peerDependencies": {
-        "vite": "^2.5.10",
-        "vue": "^3.2.25"
+      "engines": {
+        "node": ">= 8"
       }
     },
     "node_modules/@vue/compiler-core": {
@@ -427,6 +451,67 @@
         "@algolia/transporter": "4.22.1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/colorette": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
@@ -854,6 +939,62 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-browser-stub": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fs-browser-stub/-/fs-browser-stub-1.0.1.tgz",
+      "integrity": "sha512-l5HJDvzLmHOBZ0KZwvRKtipPHrA6eFWGvsuGTbQDzHRoIXXfMpOEuYVtlugGWHQHlsnFqw6xLR0kTPDXYTZwxw=="
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -892,6 +1033,24 @@
       "integrity": "sha512-5eDf9fuSXwxBL6q5HX+dhDj+dslFGWzU5thZ9kNKUkcPtaPdatmUFKwHFrLb/uf/WpA4BHET+AX3Scl56cAjpA==",
       "dev": true
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
     "node_modules/hasown": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
@@ -913,6 +1072,18 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@@ -925,6 +1096,48 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/knex": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/knex/-/knex-3.1.0.tgz",
@@ -993,6 +1206,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/monaco-editor": {
       "version": "0.47.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.47.0.tgz",
@@ -1022,6 +1257,15 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -1039,10 +1283,22 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -1060,7 +1316,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1085,6 +1341,38 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/rechoir": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
@@ -1123,6 +1411,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "2.77.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.3.tgz",
@@ -1138,6 +1436,29 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/search-insights": {
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.13.0.tgz",
@@ -1146,9 +1467,9 @@
       "peer": true
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1193,6 +1514,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
@@ -1206,10 +1539,19 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/vite": {
-      "version": "2.9.17",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.17.tgz",
-      "integrity": "sha512-XxcRzra6d7xrKXH66jZUgb+srThoPu+TLJc06GifUyKq9JmjHkc1Numc8ra0h56rju2jfVWw3B3fs5l3OFMvUw==",
+      "version": "2.9.18",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.18.tgz",
+      "integrity": "sha512-sAOqI5wNM9QvSEE70W3UGMdT8cyEn0+PmJMTFvTB8wB0YbYUWw3gUbY62AOyrXosGieF2htmeLATvNxpv/zNyQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
@@ -1243,6 +1585,24 @@
         }
       }
     },
+    "node_modules/vite-plugin-static-copy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.6.0.tgz",
+      "integrity": "sha512-KfNhy33p//M5Fq1RcZU+H+1KVagXR9JbAy6KIE8IiWj2j3wRtRPoyh8TYJvVgC+adyKj3Y+KiGUf0GwjI9JHtg==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^10.1.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12.2"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.14"
+      }
+    },
     "node_modules/vitepress": {
       "version": "0.22.4",
       "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-0.22.4.tgz",
@@ -1263,6 +1623,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/vitepress/node_modules/@vitejs/plugin-vue": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
+      "integrity": "sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.5.10",
+        "vue": "^3.2.25"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz",
diff --git a/docs/package.json b/docs/package.json
index 217a28f47..04f5f6541 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,15 +11,26 @@
   "devDependencies": {
     "knex": "^3.1.0",
     "typescript": "^4.6.3",
+    "vite-plugin-static-copy": "^0.6.0",
     "vitepress": "^0.22.4"
   },
   "dependencies": {
     "@guolao/vue-monaco-editor": "^1.5.1",
+    "fs-browser-stub": "^1.0.1",
     "split.js": "^1.6.5"
   },
   "author": {
     "name": "Tim Griesser",
     "web": "https://github.com/tgriesser"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "browser": {
+    "crypto": false,
+    "fs": "fs-browser-stub",
+    "os": false,
+    "path": false,
+    "stream": false,
+    "timers": false,
+    "tty": false
+  }
 }

From 6dd49e01fa07fc8863ba1a969a75649ba8053edb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Wed, 17 Apr 2024 19:06:19 -0300
Subject: [PATCH 4/9] feat(playground): add sql formatter

---
 docs/.vitepress/theme/Playground.vue | 21 +++++++
 docs/package-lock.json               | 93 +++++++++++++++++++++++++++-
 docs/package.json                    |  3 +-
 3 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
index e7828b90e..f4db0f31e 100644
--- a/docs/.vitepress/theme/Playground.vue
+++ b/docs/.vitepress/theme/Playground.vue
@@ -11,8 +11,21 @@ export default {
 <script setup>
 import Knex from 'knex';
 import { shallowRef, watch } from 'vue';
+import * as sqlFormatter from "sql-formatter";
 import { useDialect } from './dialect';
 
+const formatter = {
+  pg: "postgresql",
+  pgnative: "postgresql",
+  mysql: "mysql",
+  mysql2: "mysql",
+  cockroachdb: "postgresql",
+  redshift: "redshift",
+  sqlite3: "sqlite",
+  oracledb: "plsql",
+  mssql: "tsql",
+};
+
 const { dialect } = useDialect();
 const editorRef = shallowRef();
 const outputRef = shallowRef();
@@ -71,6 +84,14 @@ function onChange(value) {
     const knex = Knex({ client: dialect.value });
 
     output += eval(value).toQuery();
+
+    try {
+      output = sqlFormatter.format(output, {
+        language: formatter[dialect.value],
+      });
+    } catch (e) {
+      output += `\n--- sqlFormatter failed to run: ${e?.toString() ?? e}\n`;
+    }
   } catch (err) {
     output = `--- ${err?.toString() ?? err}\n`;
   }
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 089abc07f..d21d3ec89 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -11,7 +11,8 @@
       "dependencies": {
         "@guolao/vue-monaco-editor": "^1.5.1",
         "fs-browser-stub": "^1.0.1",
-        "split.js": "^1.6.5"
+        "split.js": "^1.6.5",
+        "sql-formatter": "^15.3.0"
       },
       "devDependencies": {
         "knex": "^3.1.0",
@@ -464,6 +465,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -549,6 +555,11 @@
         }
       }
     },
+    "node_modules/discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ=="
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1027,6 +1038,17 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-stdin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/getopts": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/getopts/-/getopts-2.3.0.tgz",
@@ -1234,6 +1256,11 @@
       "integrity": "sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==",
       "peer": true
     },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1257,6 +1284,32 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nearley": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
+      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
+      "dependencies": {
+        "commander": "^2.19.0",
+        "moo": "^0.5.0",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6"
+      },
+      "bin": {
+        "nearley-railroad": "bin/nearley-railroad.js",
+        "nearley-test": "bin/nearley-test.js",
+        "nearley-unparse": "bin/nearley-unparse.js",
+        "nearleyc": "bin/nearleyc.js"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://nearley.js.org/#give-to-nearley"
+      }
+    },
+    "node_modules/nearley/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -1361,6 +1414,23 @@
         }
       ]
     },
+    "node_modules/railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A=="
+    },
+    "node_modules/randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "dependencies": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1411,6 +1481,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -1479,6 +1557,19 @@
       "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
       "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
     },
+    "node_modules/sql-formatter": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.3.0.tgz",
+      "integrity": "sha512-1aDYVEX+dwOSCkRYns4HEGupRZoaivcsNpU4IzR+MVC+cWFYK9/dce7pr4aId4+ED2iK9PNs3j1Vdf8C+SIvDg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "get-stdin": "=8.0.0",
+        "nearley": "^2.20.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.cjs"
+      }
+    },
     "node_modules/state-local": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
diff --git a/docs/package.json b/docs/package.json
index 04f5f6541..2ae427fb7 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,7 +17,8 @@
   "dependencies": {
     "@guolao/vue-monaco-editor": "^1.5.1",
     "fs-browser-stub": "^1.0.1",
-    "split.js": "^1.6.5"
+    "split.js": "^1.6.5",
+    "sql-formatter": "^15.3.0"
   },
   "author": {
     "name": "Tim Griesser",

From 4d6efe1774a379f3bd4c0820c4c6a30611449571 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Wed, 17 Apr 2024 19:17:22 -0300
Subject: [PATCH 5/9] feat(playground): use vue refs

---
 docs/.vitepress/theme/Playground.vue | 37 ++++++++++++----------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
index f4db0f31e..a2d9f45e3 100644
--- a/docs/.vitepress/theme/Playground.vue
+++ b/docs/.vitepress/theme/Playground.vue
@@ -10,28 +10,28 @@ export default {
 
 <script setup>
 import Knex from 'knex';
-import { shallowRef, watch } from 'vue';
-import * as sqlFormatter from "sql-formatter";
+import { ref, shallowRef, watch } from 'vue';
+import * as sqlFormatter from 'sql-formatter';
 import { useDialect } from './dialect';
 
 const formatter = {
-  pg: "postgresql",
-  pgnative: "postgresql",
-  mysql: "mysql",
-  mysql2: "mysql",
-  cockroachdb: "postgresql",
-  redshift: "redshift",
-  sqlite3: "sqlite",
-  oracledb: "plsql",
-  mssql: "tsql",
+  pg: 'postgresql',
+  pgnative: 'postgresql',
+  mysql: 'mysql',
+  mysql2: 'mysql',
+  cockroachdb: 'postgresql',
+  redshift: 'redshift',
+  sqlite3: 'sqlite',
+  oracledb: 'plsql',
+  mssql: 'tsql',
 };
 
 const { dialect } = useDialect();
 const editorRef = shallowRef();
 const outputRef = shallowRef();
 
-const code = `// Knex code\nknex("table").select()\n`;
-const sql = `--- generated SQL code\nselect\n  *\nfrom\n  "table"\n`;
+const code = ref('// Knex code\nknex("table").select()\n');
+const sql = ref('--- generated SQL code\nselect\n  *\nfrom\n  `table`\n');
 
 const editorOptions = {
   scrollBeyondLastLine: false,
@@ -73,17 +73,13 @@ function handleMountOutput(editor) {
   outputRef.value = editor;
 }
 
-watch(dialect, () => {
-  onChange(editorRef.value.getValue());
-});
-
-function onChange(value) {
+watch([code, dialect], () => {
   let output = '--- generated SQL code\n';
 
   try {
     const knex = Knex({ client: dialect.value });
 
-    output += eval(value).toQuery();
+    output += eval(code.value).toQuery();
 
     try {
       output = sqlFormatter.format(output, {
@@ -97,7 +93,7 @@ function onChange(value) {
   }
 
   outputRef.value.setValue(output);
-}
+});
 </script>
 
 <template>
@@ -110,7 +106,6 @@ function onChange(value) {
       :options="editorOptions"
       :saveViewState="false"
       @mount="handleMountEditor"
-      @change="onChange"
     />
 
     <vue-monaco-editor

From 683916e90935832a748014acee543fe9e59c076e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Wed, 17 Apr 2024 22:23:31 -0300
Subject: [PATCH 6/9] feat(playground): shareable url

---
 docs/.vitepress/theme/Playground.vue | 35 +++++++++++++++++-----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
index a2d9f45e3..d50e14e9b 100644
--- a/docs/.vitepress/theme/Playground.vue
+++ b/docs/.vitepress/theme/Playground.vue
@@ -10,7 +10,7 @@ export default {
 
 <script setup>
 import Knex from 'knex';
-import { ref, shallowRef, watch } from 'vue';
+import { ref, watch } from 'vue';
 import * as sqlFormatter from 'sql-formatter';
 import { useDialect } from './dialect';
 
@@ -27,11 +27,8 @@ const formatter = {
 };
 
 const { dialect } = useDialect();
-const editorRef = shallowRef();
-const outputRef = shallowRef();
-
-const code = ref('// Knex code\nknex("table").select()\n');
-const sql = ref('--- generated SQL code\nselect\n  *\nfrom\n  `table`\n');
+const sql = ref('');
+const code = ref('');
 
 const editorOptions = {
   scrollBeyondLastLine: false,
@@ -44,8 +41,17 @@ const outputEditorOptions = {
   wordWrap: 'on',
 };
 
-function handleMountEditor(editor) {
-  editorRef.value = editor;
+function handleMountEditor() {
+  code.value = (() => {
+    const hash = location.hash.slice(1);
+    const code = '// Knex code\nknex("table").select()\n';
+
+    try {
+      return hash ? decodeURIComponent(atob(hash)) || code : code;
+    } catch {
+      return code;
+    }
+  })();
 
   fetch('/playground-assets/types/index.d.ts')
     .then((res) => res.text())
@@ -69,10 +75,6 @@ function handleMountEditor(editor) {
     });
 }
 
-function handleMountOutput(editor) {
-  outputRef.value = editor;
-}
-
 watch([code, dialect], () => {
   let output = '--- generated SQL code\n';
 
@@ -92,7 +94,13 @@ watch([code, dialect], () => {
     output = `--- ${err?.toString() ?? err}\n`;
   }
 
-  outputRef.value.setValue(output);
+  sql.value = output;
+
+  window.history.replaceState(
+    null,
+    '',
+    `#${btoa(encodeURIComponent(code.value))}`
+  );
 });
 </script>
 
@@ -115,7 +123,6 @@ watch([code, dialect], () => {
       v-model:value="sql"
       :options="outputEditorOptions"
       :saveViewState="false"
-      @mount="handleMountOutput"
     />
   </div>
 </template>

From ff56012d6d0c135036afef995f2eb67f4bea7893 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Douglas=20Gad=C3=AAlha?= <dgadelha@live.com>
Date: Wed, 17 Apr 2024 23:17:09 -0300
Subject: [PATCH 7/9] feat(playground): responsiveness

---
 docs/.vitepress/theme/Playground.vue | 52 ++++++++++++++++++----------
 docs/.vitepress/theme/breakpoint.js  | 28 +++++++++++++++
 docs/.vitepress/theme/styles.css     |  5 +++
 3 files changed, 67 insertions(+), 18 deletions(-)
 create mode 100644 docs/.vitepress/theme/breakpoint.js

diff --git a/docs/.vitepress/theme/Playground.vue b/docs/.vitepress/theme/Playground.vue
index d50e14e9b..0125fa2e2 100644
--- a/docs/.vitepress/theme/Playground.vue
+++ b/docs/.vitepress/theme/Playground.vue
@@ -1,35 +1,48 @@
-<script>
-import Split from 'split.js';
-
-export default {
-  mounted() {
-    Split(['#editor', '#output']);
-  },
-};
-</script>
-
 <script setup>
 import Knex from 'knex';
-import { ref, watch } from 'vue';
 import * as sqlFormatter from 'sql-formatter';
+import Split from 'split.js';
+import { computed, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { useBreakpoints } from './breakpoint';
 import { useDialect } from './dialect';
 
 const formatter = {
-  pg: 'postgresql',
-  pgnative: 'postgresql',
+  cockroachdb: 'postgresql',
+  mssql: 'tsql',
   mysql: 'mysql',
   mysql2: 'mysql',
-  cockroachdb: 'postgresql',
+  oracledb: 'plsql',
+  pg: 'postgresql',
+  pgnative: 'postgresql',
   redshift: 'redshift',
   sqlite3: 'sqlite',
-  oracledb: 'plsql',
-  mssql: 'tsql',
 };
 
 const { dialect } = useDialect();
+const { type } = useBreakpoints();
+const isVertical = computed(() => ['xs', 'sm'].includes(type.value));
+
+const split = shallowRef();
 const sql = ref('');
 const code = ref('');
 
+onMounted(() => {
+  split.value = Split(['#editor', '#output'], {
+    direction: isVertical.value ? 'vertical' : 'horizontal',
+    sizes: [50, 50],
+  });
+});
+
+watch(isVertical, () => {
+  split.value?.destroy(false, false);
+
+  split.value = Split(['#editor', '#output'], {
+    direction: isVertical.value ? 'vertical' : 'horizontal',
+    sizes: [50, 50],
+  });
+});
+
 const editorOptions = {
   scrollBeyondLastLine: false,
   wordWrap: 'on',
@@ -94,7 +107,7 @@ watch([code, dialect], () => {
     output = `--- ${err?.toString() ?? err}\n`;
   }
 
-  sql.value = output;
+  sql.value = `${output}\n`;
 
   window.history.replaceState(
     null,
@@ -105,7 +118,10 @@ watch([code, dialect], () => {
 </script>
 
 <template>
-  <div class="playground split">
+  <div
+    class="playground split"
+    :class="{ 'split-vertical': isVertical, 'split-horizontal': !isVertical }"
+  >
     <vue-monaco-editor
       id="editor"
       language="typescript"
diff --git a/docs/.vitepress/theme/breakpoint.js b/docs/.vitepress/theme/breakpoint.js
new file mode 100644
index 000000000..65954ecd4
--- /dev/null
+++ b/docs/.vitepress/theme/breakpoint.js
@@ -0,0 +1,28 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+/**
+ * @ref https://stackoverflow.com/a/63944126
+ */
+export function useBreakpoints() {
+  let windowWidth = ref(window.innerWidth);
+
+  const onWidthChange = () => (windowWidth.value = window.innerWidth);
+  onMounted(() => window.addEventListener('resize', onWidthChange));
+  onUnmounted(() => window.removeEventListener('resize', onWidthChange));
+
+  /**
+   * @ref https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints
+   */
+  const type = computed(() => {
+    if (windowWidth.value < 576) return 'xs';
+    if (windowWidth.value >= 576 && windowWidth.value < 768) return 'sm';
+    if (windowWidth.value >= 768 && windowWidth.value < 992) return 'md';
+    if (windowWidth.value >= 992 && windowWidth.value < 1200) return 'lg';
+    if (windowWidth.value >= 1200 && windowWidth.value < 1400) return 'xl';
+    else return 'xxl'; // Fires when windowWidth.value >= 1400
+  });
+
+  const width = computed(() => windowWidth.value);
+
+  return { width, type };
+}
diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css
index 3a1462bbd..b11507689 100644
--- a/docs/.vitepress/theme/styles.css
+++ b/docs/.vitepress/theme/styles.css
@@ -125,6 +125,11 @@ a.header-anchor {
 
 .split {
   display: flex;
+}
+.split-vertical {
+  flex-direction: column;
+}
+.split-horizontal {
   flex-direction: row;
 }
 .gutter {

From b55e5792ceabc041b81a0c654038b8a06746bbdd Mon Sep 17 00:00:00 2001
From: Raz Luvaton <16746759+rluvaton@users.noreply.github.com>
Date: Tue, 23 Apr 2024 23:47:45 +0300
Subject: [PATCH 8/9] add createDarkMode

---
 docs/.vitepress/theme/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 78a6efc1b..57249ed6b 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -2,6 +2,7 @@ import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor';
 import defaultTheme from 'vitepress/theme';
 import Layout from './Layout.vue';
 import { createDialect } from './dialect';
+import { createDarkMode } from './dark-mode';
 import SqlOutput from './SqlOutput.vue';
 import Playground from './Playground.vue';
 import './styles.css';
@@ -17,6 +18,7 @@ export default {
 
   enhanceApp({ app }) {
     createDialect(app);
+    createDarkMode(app);
     app.component('SqlOutput', SqlOutput);
     app.component('Playground', Playground);
     app.use(VueMonacoEditorPlugin, {

From 74f282bde82d6f2c23c0255266a7e38520e2f370 Mon Sep 17 00:00:00 2001
From: Raz Luvaton <16746759+rluvaton@users.noreply.github.com>
Date: Tue, 23 Apr 2024 23:48:21 +0300
Subject: [PATCH 9/9] Create dark-mode.js

---
 docs/.vitepress/theme/dark-mode.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 docs/.vitepress/theme/dark-mode.js

diff --git a/docs/.vitepress/theme/dark-mode.js b/docs/.vitepress/theme/dark-mode.js
new file mode 100644
index 000000000..9d60fdba7
--- /dev/null
+++ b/docs/.vitepress/theme/dark-mode.js
@@ -0,0 +1,27 @@
+import { ref, computed, inject } from 'vue';
+
+export function createDarkMode(app) {
+  const prefersDark = ref(false);
+  const setting = ref('auto');
+
+  const isDark = computed(
+    () =>
+      setting.value === 'dark' ||
+      (prefersDark.value && setting.value !== 'light')
+  );
+  const toggleDark = () => {
+    setting.value = setting.value === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('color-scheme', setting.value);
+  };
+
+  prefersDark.value =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  setting.value = localStorage.getItem('color-scheme') || 'auto';
+
+  app.provide('is-dark', { isDark, toggleDark });
+}
+
+export function useDarkMode() {
+  return inject('is-dark');
+}