feat: detect language with javascript

package.json

@@ -38,7 +38,7 @@
     "@angular/material": "15.2.5",
     "@angular/platform-browser": "15.2.5",
     "@codemirror/lang-javascript": "6.2.1",
-    "@codemirror/lang-python": "6.1.3",
+    "@codemirror/lang-python": "6.1.2",
     "@codemirror/lang-sql": "6.5.4",
     "@cortex-js/compute-engine": "0.12.2",
     "@duckdb/duckdb-wasm": "1.27.0",

src/app/notebook/cellTypes/CodeBlock.ts

@@ -38,13 +38,14 @@ export class CodeBlock extends InteractiveBlock {
   }
 
   private languageFactory(language: string): Language {
-    return match(language).with(
-      "javascript", () => new JavaScript(this.code, this.editorJsTool, this.cell)
-    )
+    return match(language)
+      .with("javascript", () => new JavaScriptMainThread(this.code, this.editorJsTool, this.cell))
       .with("python", () => new Python(this.code, this.editorJsTool, this.cell))
       .with("html", () => new Html(this.code, this.editorJsTool, this.cell))
       .with("sql", () => new Sql(this.code, this.editorJsTool, this.cell))
-      .with("javascript main thread", () => new JavaScriptMainThread(this.code, this.editorJsTool, this.cell))
+      .with(
+        "javascript webworker", () => new JavaScript(this.code, this.editorJsTool, this.cell)
+      )
       .otherwise(
       () => new JavaScript(this.code, this.editorJsTool,this.cell)
     );
@@ -284,6 +285,7 @@ export class CodeBlock extends InteractiveBlock {
     languagesSelect.classList.add('w100');
     languagesSelect.addEventListener('change', (event) => {
       this.language.destroyEditor();
+      this.clear();
       // @ts-ignore
       this.language = this.languageFactory(event.target?.value);
       this.loadLanguage();

src/app/notebook/cellTypes/languages/Sql.ts

@@ -4,17 +4,18 @@ import {sql} from "@codemirror/lang-sql";
 import { Observable, firstValueFrom, shareReplay } from "rxjs";
 // @ts-ignore
 import { gluesql } from 'gluesql';
+import { autocompletion, startCompletion, CompletionContext, CompletionResult } from "@codemirror/autocomplete";
 
 interface Gluesql {
-  loadIndexedDB: () => void; 
+  loadIndexedDB: () => void;
   query: (x: string) => Promise<string>;
 }
 /*
   TODO: Connect GlueSQL to RXDB, Dexie. However, they manage its version control.
 */
 const gluesqlInstance$ = new Observable<Gluesql>(subscriber => {
   gluesql("/assets/gluesql/gluesql_js_bg.wasm").then(async (db: Gluesql) => {
-    await db.loadIndexedDB();
+    db.loadIndexedDB();
     return db;
   }).then((db: Gluesql) => {
     subscriber.next(db);
@@ -24,6 +25,22 @@ const gluesqlInstance$ = new Observable<Gluesql>(subscriber => {
 
 // @ts-ignore
 globalThis.gluesqlConnection = () => firstValueFrom(gluesqlInstance$);
+function sqlAutocompleter(context: CompletionContext): CompletionResult | null {
+  let word = context.matchBefore(/\w*/)
+  if (!word || word.from == word.to && !context.explicit)
+    return null
+  return {
+    from: word.from,
+    options: [
+      {label: "CREATE", type: "create", apply: `CREATE TABLE table (
+    PersonID int,
+    LastName TEXT
+);`, detail: "create table"},
+      {label: "SELECT", type: "select", apply: "select * from table;", detail: "select table"},
+      {label: "INSERT", type: "insert", apply: `INSERT INTO table (column1, column2, column3) VALUES (value1, value2, value3);`, detail: "The INSERT INTO statement is used to insert new records in a table."}
+    ]
+  }
+}
 
 export class Sql extends Language {
   get name() {
@@ -34,11 +51,10 @@ export class Sql extends Language {
     super.dispatchShellRun();
     gluesqlInstance$.subscribe(instance => {
       instance.query(this.mostRecentCode).then((output: any) => {
-        console.log(output);
         if (output[output.length-1].rows) {
           // @ts-ignore
           globalThis.createTable(this.cell, {
-            type: 'render', 
+            type: 'render',
             displayedColumns: Object.keys(output[output.length-1].rows[0]),
             dataSource: output[output.length-1].rows
           });
@@ -53,8 +69,8 @@ export class Sql extends Language {
     });
     return true;
   }
-  
+
   override getExtensions(): Extension[] {
-    return [sql()];
+    return [sql(), autocompletion({ override: [sqlAutocompleter] })];
   }
 }

yarn.lock

@@ -1688,14 +1688,14 @@
     "@lezer/common" "^1.0.0"
     "@lezer/javascript" "^1.0.0"
 
-"@codemirror/lang-python@6.1.3":
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-6.1.3.tgz#47b8d9fb42eb4482317843e519c6c211accacb62"
-  integrity sha512-S9w2Jl74hFlD5nqtUMIaXAq9t5WlM0acCkyuQWUUSvZclk1sV+UfnpFiZzuZSG+hfEaOmxKR5UxY/Uxswn7EhQ==
+"@codemirror/lang-python@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-6.1.2.tgz#cabb57529679981f170491833dbf798576e7ab18"
+  integrity sha512-nbQfifLBZstpt6Oo4XxA2LOzlSp4b/7Bc5cmodG1R+Cs5PLLCTUvsMNWDnziiCfTOG/SW1rVzXq/GbIr6WXlcw==
   dependencies:
     "@codemirror/autocomplete" "^6.3.2"
-    "@codemirror/language" "^6.8.0"
-    "@lezer/python" "^1.1.4"
+    "@codemirror/language" "^6.0.0"
+    "@lezer/python" "^1.0.0"
 
 "@codemirror/lang-sql@6.5.4":
   version "6.5.4"
@@ -1720,7 +1720,7 @@
     "@lezer/lr" "^1.0.0"
     style-mod "^4.0.0"
 
-"@codemirror/language@^6.8.0", "@codemirror/language@^6.9.0":
+"@codemirror/language@^6.9.0":
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.9.1.tgz#97e2c3e44cf4ff152add865ed7ecec73868446a4"
   integrity sha512-lWRP3Y9IUdOms6DXuBpoWwjkR7yRmnS0hKYCbSfPz9v6Em1A1UCRujAkDiCrdYfs1Z0Eu4dGtwovNPStIfkgNA==
@@ -3002,7 +3002,7 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
-"@lezer/python@^1.1.4":
+"@lezer/python@^1.0.0":
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/@lezer/python/-/python-1.1.9.tgz#fae1991b242d0ea7c605189c2655063386d58763"
   integrity sha512-8Ua3p8NdICXR6qWvRCnCx5CI1B0DklZGNtRLwOrIS/OHecHIugRHZyr0NsaaQO2H2Nn34EPlRtltXIirLsry5Q==