From aa5f7e6a9edfee718916218de8986df2c6b75ad6 Mon Sep 17 00:00:00 2001
From: Derek <derekmd@hotmail.com>
Date: Sat, 25 Jul 2020 15:54:12 -0400
Subject: [PATCH] Remove unused code when formatting SQL

Telescope's QueryWatcher always stores
an empty array for query parameter
bindings. This causes issues in NPM
package "sql-formatter" when the query
has MySQL session variables referenced
with an '@' character.

sql-formatter's generic SQL syntax handling
will treat the '@' character the same as a
'?' placeholder. 'SELECT @foo := id ...'
without bindings will cause @foo to be
replaced with JavaScript 'undefined' rather
than being left as-is.

1. stop passing the bindings empty array
   to the .format() method since the
   argument is never used.
2. instead of referencing the generic
   'sqlFormatter.format()' public API,
   pull in the exact implementation of
   StandardSqlFormatter. Three other
   SQL dialect implementations were being
   unnecessarily bundled into Telescope's
   app.js distribution. This will shrink
   app.js' file size.
3. remove unused <query-preview> Vue
   component props 'entry' and 'batch'
   since query data is being injected
   through the the slot scope.
---
 resources/js/screens/queries/preview.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/resources/js/screens/queries/preview.vue b/resources/js/screens/queries/preview.vue
index f176a6d1e..91b76aa6f 100644
--- a/resources/js/screens/queries/preview.vue
+++ b/resources/js/screens/queries/preview.vue
@@ -1,24 +1,16 @@
 <script type="text/ecmascript-6">
-    import _ from 'lodash';
-    import sqlFormatter from "sql-formatter";
     import hljs from 'highlight.js/lib/highlight';
     import sql from 'highlight.js/lib/languages/sql';
+    import StandardSqlFormatter from 'sql-formatter/src/languages/StandardSqlFormatter';
 
     export default {
         data(){
             return {
-                entry: null,
-                batch: [],
+                sqlFormatter: new StandardSqlFormatter({}),
             };
         },
 
         methods:{
-            formatSQL(sql, params) {
-                return sqlFormatter.format(sql, {
-                    params: _.map(params, param => _.isString(param) ? '"'+param+'"' : param)
-                });
-            },
-
             highlightSQL() {
                 this.$nextTick(() => {
                     hljs.registerLanguage('sql', sql);
@@ -64,7 +56,7 @@
             <div class="card mt-5">
                 <div class="card-header"><h5>Query</h5></div>
 
-                <pre class="code-bg p-4 mb-0 text-white" ref="sqlcode">{{formatSQL(slotProps.entry.content.sql, slotProps.entry.content.bindings)}}</pre>
+                <pre class="code-bg p-4 mb-0 text-white" ref="sqlcode">{{sqlFormatter.format(slotProps.entry.content.sql)}}</pre>
             </div>
         </div>
     </preview-screen>