Merge pull request #92 from h-sphere/feat/comments-and-more-coloring

feat: Comments and SQL syntax coloring

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.27.0 (2025-02-17)
+- Better syntax highlighting! Now it highlights SQL query parts
+- Support for comments. You can now add comments like `--` and `/* */` to you queries
+
 # 0.26.0 (2025-02-16)
 - Better language parser! Reworked from the ground up, now SQLSeal uses Ohm.js parser which works much better and opens much more possibilities (like syntax highlighting also introduced in this version).
 - Syntax highlighting! Your SQLSeal text is now being highlighted helping you spot potential syntax issues quickly. The highlighting will be iterated on so please join discussion on our Discord!

docs/.vitepress/config.mts

@@ -29,6 +29,7 @@ export default defineConfig({
           { text: 'Demo Vault', link: '/demo-vault' },
           { text: 'Changing Render Methods', link: '/changing-render-method'},
           { text: 'Using properties', link: '/using-properties' },
+          { text: 'Comments', link: '/comments' },
           { text: 'Query Vault Content', link: '/query-vault-content' },
           { text: 'Query Markdown Tables', link: '/query-markdown-tables'},
           { text: 'Inline codeblocks', link: '/inline-codeblocks' },

docs/.vitepress/theme/components/Stats.vue

@@ -6,17 +6,17 @@ const stats = [
     icon: '📥'
   },
   {
-    number: '39+',
+    number: '48+',
     label: 'Releases',
     icon: '📦'
   },
   {
-    number: '51+',
+    number: '64+',
     label: 'GitHub Stars',
     icon: '⭐'
   },
   {
-    number: '48+',
+    number: '50+',
     label: 'Discord Members',
     icon: '🤝'
   }

docs/comments.md

@@ -0,0 +1,25 @@
+# Comments
+You can add comments to document your query. This can help you document your thought process and make it easier to share additional information when sharing your query with other. You can also use comments to disable (comment out) specific parts of your query you don't want to use at the moment but want to preserve for later.
+SQLSeal supports 2 types of comments:
+- SQL style `--` comment which comments everything until the end of the line
+- Block comment `/* */` which comments everything between opening `/*` mark and `*/` closing mark
+
+
+```sqlseal
+TABLE a = file(file.csv)
+-- TABLE b = file(file2.csv)
+
+/*
+GRID
+NO REFRESH
+*/
+
+SELECT *
+FROM a
+-- WHERE value > 5
+```
+
+In the example above:
+- Table b is not being loaded - that line is commented out
+- GRID and NO REFRESH are disabled and will take no effect
+- `WHERE value > 5` is disabled - there will be no filtering

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "sqlseal",
 	"name": "SQLSeal",
-	"version": "0.26.0",
+	"version": "0.27.0",
 	"minAppVersion": "0.15.0",
 	"description": "Use SQL in your notes to query your vault files and CSV content.",
 	"author": "hypersphere",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlseal",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "A plugin for Obsidian that allows you to run SQL queries on your notes.",
   "main": "main.js",
   "scripts": {

src/editorExtension/syntaxHighlight.ts

@@ -22,6 +22,9 @@ const markDecorations = {
   blockView: Decoration.mark({ class: 'cm-sqlseal-block-view' }),
   blockTable: Decoration.mark({ class: 'cm-sqlseal-block-table' }),
   identifier: Decoration.mark({ class: 'cm-sqlseal-identifier' }),
+  literal: Decoration.mark({ class: 'cm-sqlseal-literal' }),
+  parameter: Decoration.mark({ class: 'cm-sqlseal-parameter' }),
+  comment: Decoration.mark({ class: 'cm-sqlseal-comment' }),
   keyword: Decoration.mark({ class: 'cm-sqlseal-keyword' }),
   function: Decoration.mark({ class: 'cm-sqlseal-function' }),
   error: Decoration.mark({ class: "cm-sql-error" })

src/grammar/parser.ts

@@ -41,7 +41,10 @@ export const SQLSealLangDefinition = (views: ViewDefinition[]) => {
             character =                (alnum | "." | "-" | space | "_")
             viewClassNames =           restLine
             restLine =                 " " (~nl character)* nl
-            blank = space* nl   
+            blank = space* nl
+            comment =                  "/*" (~"*/" any)* "*/" -- multiline
+            |                          #("--" (~nl any)*) nl  -- singleline
+            space += comment
         }
 `
 }

src/utils/traceWalker.ts

@@ -1,7 +1,8 @@
 import * as ohm from 'ohm-js'
+import { parse, show, cstVisitor, Literal } from 'sql-parser-cst';
 
 interface Trace {
-    bindings: Array<{ children: Array<{matchLength: number}>}>
+    bindings: Array<{ children: Array<{ matchLength: number }> }>
     children: Array<Trace>
     expr: ohm.Seq
     input: string
@@ -33,7 +34,8 @@ const nodes = new Map([
     ['digit', { terminal: true, type: 'identifier' }],
     ['tableDefinitionClosing', { terminal: true, type: 'function' }],
     ['selectKeyword', { terminal: true, type: 'keyword' }],
-    ['viewClassNames', { terminal: true, type: 'identifier' }]
+    ['viewClassNames', { terminal: true, type: 'identifier' }],
+    ['comment', { terminal: true, type: 'comment' }]
 ])
 
 interface Decorator {
@@ -66,7 +68,13 @@ export const traceWalker = (trace: Trace, depth: number = 0): Decorator[] => {
                         end: trace.pos1 + len
                     })
                 } catch (e) { }
-                
+
+            }
+
+            if (trace.displayString === 'SelectStmt') {
+                try {
+                    parseStatement(trace, results)
+                } catch (e) { }
             }
 
             if (node.terminal) {
@@ -76,4 +84,69 @@ export const traceWalker = (trace: Trace, depth: number = 0): Decorator[] => {
     }
     results.push(...trace.children.map(c => traceWalker(c, depth + 1)).flat())
     return results
+}
+
+
+const parseStatement = (trace: Trace, results: Array<Decorator>) => {
+    console.log('SELECT STMT',)
+    const cst = parse(trace.input.substring(trace.pos1, trace.pos2), {
+        dialect: 'sqlite',
+        includeSpaces: true,
+        includeComments: true,
+        includeNewlines: true,
+        includeRange: true,
+        acceptUnsupportedGrammar: true,
+        paramTypes: ['@name']
+    })
+
+    const offset = trace.pos1
+
+    const literal = (x: Literal) => {
+        results.push({
+            type: 'literal',
+            start: offset + x.range![0],
+            end: offset + x.range![1]
+        })
+    }
+
+    const visitor = cstVisitor({
+        blob_literal: literal,
+        date_literal: literal,
+        json_literal: literal,
+        null_literal: literal,
+        time_literal: literal,
+        jsonb_literal: literal,
+        number_literal: literal,
+        string_literal: literal,
+        boolean_literal: literal,
+        numeric_literal: literal,
+        datetime_literal: literal,
+        interval_literal: literal,
+        timestamp_literal: literal,
+        bignumeric_literal: literal,
+        identifier: (identifier) => {
+            results.push({
+                type: 'function',
+                start: offset + identifier.range![0],
+                end: offset + identifier.range![1]
+            })
+        },
+        keyword: (keyword) => {
+            results.push({
+                type: 'keyword',
+                start: offset + keyword.range![0],
+                end: offset + keyword.range![1]
+            })
+        },
+        parameter: (vari) => {
+            results.push({
+                type: 'parameter',
+                start: offset + vari.range![0],
+                end: offset + vari.range![1]
+            })
+        }
+    })
+
+    visitor(cst)
+
 }

styles.css

@@ -196,15 +196,40 @@
     color: #2c0e9b;
 }
 
+.cm-sqlseal-parameter {
+    color: #2c0e9b;
+}
+
+.cm-sqlseal-comment {
+    color: #7a7a7a;
+    font-style: italic;
+}
+
 .cm-sqlseal-keyword {
     color: var(--color);
     font-weight: bold;
 }
 
+.cm-sqlseal-literal {
+    color: red;
+}
+
 .theme-dark .cm-sqlseal-block-query {
     --color: #5eff6a;
 }
 
+.theme-dark .cm-sqlseal-comment {
+    color: #898787;
+}
+
+.theme-dark .cm-sqlseal-parameter {
+    color: #ed222c;
+}
+
+.theme-dark .cm-sqlseal-literal {
+    color: yellow;
+}
+
 .theme-dark .cm-sqlseal-block-view {
     --color: #e945ff;
 }

versions.json

@@ -47,5 +47,6 @@
 	"0.24.1": "0.15.0",
 	"0.24.2": "0.15.0",
 	"0.25.0": "0.15.0",
-	"0.26.0": "0.15.0"
+	"0.26.0": "0.15.0",
+	"0.27.0": "0.15.0"
 }