Update showcases and playground to Langium 3.0.0

core/package.json

@@ -5,7 +5,7 @@
   "description": "Bundling complex sources for hugo",
   "author": "TypeFox",
   "license": "MIT",
-  "private": true,  
+  "private": true,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -46,7 +46,7 @@
     "@types/react-dom": "~18.2.13",
     "@types/vscode": "~1.83.0",
     "typescript": "~5.2.2",
-    "vite": "~4.4.11"
+    "vite": "^4.5.2"
   },
   "dependencies": {
     "@codingame/monaco-vscode-keybindings-service-override": "~1.83.2",

hugo/assets/scripts/arithmetics/arithmetics.tsx

@@ -192,7 +192,6 @@ class App extends React.Component<{}, AppState> {
 userConfig = createUserConfig({
     languageId: 'arithmetics',
     code: examples[0],
-    htmlElement: document.getElementById('root')!,
     worker: '../../showcase/libs/worker/arithmeticsServerWorker.js',
     monarchGrammar: syntaxHighlighting
 });

hugo/assets/scripts/domainmodel/domainmodel.tsx

@@ -144,7 +144,6 @@ class App extends React.Component<{}, AppState> {
 userConfig = createUserConfig({
     languageId: 'domainmodel',
     code: example,
-    htmlElement: document.getElementById('root')!,
     worker: '../../showcase/libs/worker/domainmodelServerWorker.js',
     monarchGrammar: syntaxHighlighting
 });

hugo/assets/scripts/minilogo/minilogo.tsx

@@ -2,7 +2,7 @@ import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig }
 import { buildWorkerDefinition } from "monaco-editor-workers";
 import React, { createRef } from "react";
 import { createRoot } from "react-dom/client";
-import { Diagnostic, DocumentChangeResponse, LangiumAST } from "../langium-utils/langium-ast";
+import { Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
 import { ColorArgs, Command, MoveArgs, examples, syntaxHighlighting } from "./minilogo-tools";
 import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";
 
@@ -351,7 +351,6 @@ let code = url.searchParams.get("code");
 userConfig = createUserConfig({
   languageId: 'minilogo',
   code: code ? decompressFromEncodedURIComponent(code) : examples[0].code,
-  htmlElement: document.getElementById('root')!,
   worker: '../../showcase/libs/worker/minilogoServerWorker.js',
   monarchGrammar: syntaxHighlighting
 });

hugo/assets/scripts/sql/constants.ts

@@ -1,138 +1,3 @@
-import { monaco } from "langium-website-core/bundle";
-
-export const syntaxHighlighting: monaco.languages.IMonarchLanguage = {
-  tokenizer: {
-    initial: [
-      { regex: /x\'[A-Fa-f0-9]+\'/, action: { token: "string" } },
-      { regex: /"(\\.|[^"\\])*"|'(\\.|[^'\\])*'/, action: { token: "string" } },
-      { regex: /\`(\\.|\\\\|[^`\\])*\`/, action: { token: "string" } },
-      {
-        regex: /[_a-zA-Z][\w_]*/,
-        action: {
-          cases: {
-            "@keywords": { token: "keyword" },
-            "@default": { token: "ID" },
-          },
-        },
-      },
-      { regex: /\d+((\.\d+)?([eE][\-+]?\d+)?)?/, action: { token: "number" } },
-      { include: "@whitespace" },
-      {
-        regex: /@symbols/,
-        action: {
-          cases: {
-            "@operators": { token: "operator" },
-            "@default": { token: "" },
-          },
-        },
-      },
-    ],
-    whitespace: [
-      { regex: /\s+/, action: { token: "white" } },
-      { regex: /\/\*/, action: { token: "comment", next: "@comment" } },
-      { regex: /\-\-[^\n\r]*/, action: { token: "comment" } },
-      { regex: /\/\/[^\n\r]*/, action: { token: "comment" } },
-    ],
-    comment: [
-      { regex: /[^\/\*]+/, action: { token: "comment" } },
-      { regex: /\*\//, action: { token: "comment", next: "@pop" } },
-      { regex: /[\/\*]/, action: { token: "comment" } },
-    ],
-  },
-  keywords: [
-    "ALL",
-    "AND",
-    "AS",
-    "ASC",
-    "BETWEEN",
-    "BY",
-    "CASCADE",
-    "CAST",
-    "CATALOG",
-    "CONSTRAINT",
-    "CREATE",
-    "CURRENT",
-    "DATABASE",
-    "DELETE",
-    "DESC",
-    "DISTINCT",
-    "EXCEPT",
-    "FALSE",
-    "FETCH",
-    "FIRST",
-    "FOLLOWING",
-    "FOREIGN",
-    "FROM",
-    "FUNCTION",
-    "GROUP",
-    "HAVING",
-    "IN",
-    "INDEX",
-    "INTERSECT",
-    "IS",
-    "JOIN",
-    "KEY",
-    "LEFT",
-    "LIKE",
-    "LIMIT",
-    "MINUS",
-    "NEXT",
-    "NOT",
-    "NULL",
-    "OFFSET",
-    "ON",
-    "ONLY",
-    "OR",
-    "ORDER",
-    "OVER",
-    "PARTITION",
-    "PERCENT",
-    "PRECEDING",
-    "PRIMARY",
-    "RANGE",
-    "RECURSIVE",
-    "REFERENCES",
-    "REPLACE",
-    "RIGHT",
-    "ROW",
-    "ROWS",
-    "SCHEMA",
-    "SELECT",
-    "TABLE",
-    "TIES",
-    "TOP",
-    "TRUE",
-    "UNBOUNDED",
-    "UNION",
-    "UNIQUE",
-    "USING",
-    "WHERE",
-    "WITH",
-  ],
-  symbols: /%|\(|\)|\*|\+|,|\-|\.|\/|::|::\$|::%|;|<|<=|<>|=|>|>=|\|\|/,
-
-  operators: [
-    "%",
-    "*",
-    "+",
-    ",",
-    "-",
-    ".",
-    "/",
-    "::",
-    "::$",
-    "::%",
-    ";",
-    "<",
-    "<=",
-    "<>",
-    "=",
-    ">",
-    ">=",
-    "||",
-  ],
-};
-
 export const defaultText = `SELECT p.firstname, p.lastname
 FROM
   passenger p

hugo/assets/scripts/sql/language-server.ts

@@ -4,15 +4,14 @@
  * terms of the MIT License, which is available in the project root.
  ******************************************************************************/
 
-import { startLanguageServer, EmptyFileSystem } from "langium";
+import { EmptyFileSystem } from "langium";
+import { startLanguageServer } from "langium/lsp";
 import {
   createConnection,
   BrowserMessageReader,
   BrowserMessageWriter,
-} from "vscode-languageserver/browser";
-import { createSqlServices } from "langium-sql";
-import { MySqlDialectTypes } from "langium-sql/lib/dialects/mysql/data-types";
-import { DialectTypes } from "langium-sql/lib/sql-data-types";
+} from "vscode-languageserver/browser.js";
+import { DialectTypes, MySqlDialectTypes, createSqlServices } from "langium-sql";
 
 /* browser specific setup code */
 const messageReader = new BrowserMessageReader(self);

hugo/assets/scripts/sql/sql.tmLanguage.json

@@ -0,0 +1,71 @@
+{
+  "name": "sql",
+  "scopeName": "source.sql",
+  "fileTypes": [
+    ".sql"
+  ],
+  "patterns": [
+    {
+      "include": "#comments"
+    },
+    {
+      "name": "keyword.control.sql",
+      "match": "\\b([aA][lL][lL]|[aA][nN][dD]|[aA][sS]|[aA][sS][cC]|[bB][eE][tT][wW][eE][eE][nN]|[bB][yY]|[cC][aA][sS][cC][aA][dD][eE]|[cC][aA][sS][tT]|[cC][aA][tT][aA][lL][oO][gG]|[cC][oO][nN][sS][tT][rR][aA][iI][nN][tT]|[cC][rR][eE][aA][tT][eE]|[cC][uU][rR][rR][eE][nN][tT]|[dD][aA][tT][aA][bB][aA][sS][eE]|[dD][eE][lL][eE][tT][eE]|[dD][eE][sS][cC]|[dD][iI][sS][tT][iI][nN][cC][tT]|[eE][xX][cC][eE][pP][tT]|[fF][aA][lL][sS][eE]|[fF][eE][tT][cC][hH]|[fF][iI][rR][sS][tT]|[fF][oO][lL][lL][oO][wW][iI][nN][gG]|[fF][oO][rR][eE][iI][gG][nN]|[fF][rR][oO][mM]|[fF][uU][nN][cC][tT][iI][oO][nN]|[gG][rR][oO][uU][pP]|[hH][aA][vV][iI][nN][gG]|[iI][nN]|[iI][nN][dD][eE][xX]|[iI][nN][tT][eE][rR][sS][eE][cC][tT]|[iI][sS]|[jJ][oO][iI][nN]|[kK][eE][yY]|[lL][eE][fF][tT]|[lL][iI][kK][eE]|[lL][iI][mM][iI][tT]|[mM][iI][nN][uU][sS]|[nN][eE][xX][tT]|[nN][oO][tT]|[nN][uU][lL][lL]|[oO][fF][fF][sS][eE][tT]|[oO][nN]|[oO][nN][lL][yY]|[oO][rR]|[oO][rR][dD][eE][rR]|[oO][vV][eE][rR]|[pP][aA][rR][tT][iI][tT][iI][oO][nN]|[pP][eE][rR][cC][eE][nN][tT]|[pP][rR][eE][cC][eE][dD][iI][nN][gG]|[pP][rR][iI][mM][aA][rR][yY]|[rR][aA][nN][gG][eE]|[rR][eE][cC][uU][rR][sS][iI][vV][eE]|[rR][eE][fF][eE][rR][eE][nN][cC][eE][sS]|[rR][eE][pP][lL][aA][cC][eE]|[rR][iI][gG][hH][tT]|[rR][oO][wW]|[rR][oO][wW][sS]|[sS][cC][hH][eE][mM][aA]|[sS][eE][lL][eE][cC][tT]|[tT][aA][bB][lL][eE]|[tT][iI][eE][sS]|[tT][oO][pP]|[tT][rR][uU][eE]|[uU][nN][bB][oO][uU][nN][dD][eE][dD]|[uU][nN][iI][oO][nN]|[uU][nN][iI][qQ][uU][eE]|[uU][sS][iI][nN][gG]|[wW][hH][eE][rR][eE]|[wW][iI][tT][hH])\\b"
+    },
+    {
+      "name": "string.quoted.single.sql",
+      "begin": "'",
+      "end": "'",
+      "patterns": [
+        {
+          "include": "#string-character-escape"
+        }
+      ]
+    }
+  ],
+  "repository": {
+    "comments": {
+      "patterns": [
+        {
+          "name": "comment.block.sql",
+          "begin": "/\\*",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.comment.sql"
+            }
+          },
+          "end": "\\*/",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.comment.sql"
+            }
+          }
+        },
+        {
+          "begin": "--",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.whitespace.comment.leading.sql"
+            }
+          },
+          "end": "(?=$)",
+          "name": "comment.line.sql"
+        },
+        {
+          "begin": "//",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.whitespace.comment.leading.sql"
+            }
+          },
+          "end": "(?=$)",
+          "name": "comment.line.sql"
+        }
+      ]
+    },
+    "string-character-escape": {
+      "name": "constant.character.escape.sql",
+      "match": "\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}|u\\{[0-9A-Fa-f]+\\}|[0-2][0-7]{0,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.|$)"
+    }
+  }
+}

hugo/assets/scripts/sql/ui.tsx

@@ -2,13 +2,11 @@ import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig }
 import { buildWorkerDefinition } from "monaco-editor-workers";
 import React from "react";
 import { createRoot } from "react-dom/client";
-import {
-  DocumentChangeResponse,
-} from "../langium-utils/langium-ast";
 import {
   defaultText,
-  syntaxHighlighting,
 } from "./constants";
+import textMateGrammar from './sql.tmLanguage.json';
+import { DocumentChangeResponse } from "langium-ast-helper";
 
 addMonacoStyles('monaco-styles-helper');
 
@@ -88,17 +86,15 @@ class App extends React.Component<{}> {
             is a Monaco editor driven by our SQL language server. The current setup mimics <a className="text-emeraldLangium" href="https://www.mysql.com" target="_blank">MySQL</a>.
           </p>
           <h2 className="text-xl pt-4 underline">Features</h2>
-          <p className="pt-2">
-            <ul className="list-disc list-inside">
-              <li><strong>Schema-driven</strong>: Add a set of table definitions to spread out the world for your SELECT queries. The table definitions can be located in a different file of the same workspace. You can keep definitions and queries separated.</li>
-              <li><strong>Code completion</strong>: Press Ctrl + Space keys to trigger the completion directly. You will get suggestions for the current context.</li>
-              <li><strong>Syntax highlighting</strong>: to distinguish what are keywords, identifiers, numeric literals and for a better perception of the SQL syntax.</li>
-              <li><strong>Symbol search</strong>: Use Cmd or Ctrl + mouse click on a column name to find the definition of it or explore the places where a column is used.</li>
-              <li><strong>Fast feedback</strong> about contextual correctness: Whether referenced columns exist or types on certain operators are matching.</li>
-              <li><strong>Super-set approach</strong>: Any piece of any dialect that is missing can be added to the main grammar and be protected from other dialects using validations.</li>
-              <li><strong>Highly customizable</strong>: Any behavior or aspect that is missing for your specific use case can be easily overwritten.</li>
-            </ul>
-          </p>
+          <ul className="pt-2 list-disc list-inside">
+            <li><strong>Schema-driven</strong>: Add a set of table definitions to spread out the world for your SELECT queries. The table definitions can be located in a different file of the same workspace. You can keep definitions and queries separated.</li>
+            <li><strong>Code completion</strong>: Press Ctrl + Space keys to trigger the completion directly. You will get suggestions for the current context.</li>
+            <li><strong>Syntax highlighting</strong>: to distinguish what are keywords, identifiers, numeric literals and for a better perception of the SQL syntax.</li>
+            <li><strong>Symbol search</strong>: Use Cmd or Ctrl + mouse click on a column name to find the definition of it or explore the places where a column is used.</li>
+            <li><strong>Fast feedback</strong> about contextual correctness: Whether referenced columns exist or types on certain operators are matching.</li>
+            <li><strong>Super-set approach</strong>: Any piece of any dialect that is missing can be added to the main grammar and be protected from other dialects using validations.</li>
+            <li><strong>Highly customizable</strong>: Any behavior or aspect that is missing for your specific use case can be easily overwritten.</li>
+          </ul>
           <h2 className="text-xl pt-4 underline">About the given SQL document</h2>
           <p className="pt-2">
             The document contains the database schema of an airport. It is a copy of the Flughafen DB by Stefan Proell, Eva Zangerle, Wolfgang Gassler
@@ -115,9 +111,8 @@ class App extends React.Component<{}> {
 userConfig = createUserConfig({
   languageId: 'sql',
   code: defaultText,
-  htmlElement: document.getElementById('root')!,
   worker: '../../showcase/libs/worker/sqlServerWorker.js',
-  monarchGrammar: syntaxHighlighting
+  textmateGrammar: textMateGrammar
 });
 
 const element = document.getElementById("root") as HTMLElement;

hugo/assets/scripts/statemachine/statemachine.tsx

@@ -291,7 +291,6 @@ class StateMachineComponent extends React.Component<{
 const langiumGlobalConfig: UserConfig = createUserConfig({
   languageId: 'statemachine',
   code: defaultText,
-  htmlElement: document.getElementById('root')!,
   textmateGrammar: statemachineGrammar,
   worker: '../../showcase/libs/worker/statemachineServerWorker.js'
 });

hugo/content/playground/Tree.tsx

@@ -4,12 +4,11 @@
  * terms of the MIT License, which is available in the project root.
  ******************************************************************************/
 
-import { AstNode } from "langium";
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 import * as ReactDOM from "react-dom/client";
-import { preprocessAstNodeObject, PropertyNode, ValueNode } from "./preprocess";
+import { preprocessAstNodeObject, PropertyNode, ValueNode } from "./preprocess.js";
 import { clsx } from "clsx";
-import { AstNodeLocator } from "langium/lib/workspace/ast-node-locator";
+import { AstNode, AstNodeLocator } from "langium";
 
 export let treeRoot: ReactDOM.Root;