Update to latest monaco-editor-wrapper and monaco-editor-react (#196)

* Update to latest monaco-editor-wrapper and monaco-editor-react
* Implemented review comments

.gitignore

@@ -1,10 +1,4 @@
 /public/
-/hugo/resources/
-/hugo/static/css/
-hugo/static/libs
-hugo/static/showcase/
-hugo/static/libs/
-hugo/static/playground/
 node_modules/
 .DS_Store
 .hugo_build.lock

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible Node.js debug attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+          "type": "chrome",
+          "request": "launch",
+          "name": "Launch Chrome",
+          "url": "http://localhost:1313",
+          "webRoot": "${workspaceFolder}"
+      }
+    ]
+}

README.md

@@ -4,7 +4,7 @@ This repository contains the assets required to build the Langium website and do
 
 Our setup uses TailwindCSS to build the styles which are then copied into the Hugo installation, from which our website is finally built.
 
-Please look into the sub folders [hugo/](hugo/README.md) and [tailwind/](tailwind/README.md).
+Please look into the sub folders [core/](core/README.md) [hugo/](hugo/README.md) and [tailwind/](tailwind/README.md).
 
 You can find the `showcase/` folder [here](hugo/content/showcase).
 

core/.gitignore

@@ -0,0 +1,2 @@
+bundle/
+dist/

core/README.md

@@ -0,0 +1,5 @@
+# core/
+
+We utilize [monaco-editor-wrapper](https://www.npmjs.com/package/monaco-editor-wrapper) and [@typefox/monaco-editor-react](https://www.npmjs.com/package/@typefox/monaco-editor-react) to make the monaco-editor intgration a smoother experience.
+
+This package provides utility `createUserConfig` that provides a fully specified user configuration to be used by either of the two packages. The other purpose is to bundle the code, so it can be integrated with hugo and remove the burden dealing with complex javascript in the hugo build process.

core/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "langium-website-core",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Bundling complex sources for hugo",
+  "author": "TypeFox",
+  "license": "MIT",
+  "private": true,  
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./bundle": {
+      "types": "./dist/index.d.ts",
+      "default": "./bundle/monaco-editor-wrapper-bundle/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "dist/index"
+      ],
+      "bundle": [
+        "dist/index"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "bundle",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "shx rm -rf ./bundle ./dist",
+    "compile": "tsc",
+    "build:bundle": "vite --config vite.bundle.ts build",
+    "build": "npm run clean && npm run compile && npm run build:bundle"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.28",
+    "@types/react-dom": "~18.2.13",
+    "@types/vscode": "~1.83.0",
+    "typescript": "~5.2.2",
+    "vite": "~4.4.11"
+  },
+  "dependencies": {
+    "@codingame/monaco-vscode-keybindings-service-override": "~1.83.2",
+    "@typefox/monaco-editor-react": "2.3.0",
+    "monaco-editor": "~0.44.0",
+    "monaco-editor-workers": "~0.44.0",
+    "monaco-editor-wrapper": "~3.3.0",
+    "monaco-languageclient": "~6.6.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vscode": "npm:@codingame/monaco-vscode-api@>=1.83.2 <1.84.0",
+    "vscode-languageserver": "~8.0.2"
+  },
+  "volta": {
+    "node": "18.18.1",
+    "npm": "9.9.0"
+  }
+}

core/src/index.ts

@@ -0,0 +1,17 @@
+import * as monaco from "monaco-editor";
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import type { MonacoEditorProps } from "@typefox/monaco-editor-react";
+import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
+import { addMonacoStyles } from 'monaco-editor-wrapper/styles';
+
+export * from "monaco-editor-wrapper";
+export type * from "monaco-editor-wrapper";
+export * from "./monaco-editor-wrapper-utils.js";
+
+export {
+    monaco,
+    MonacoEditorProps,
+    MonacoEditorReactComp,
+    addMonacoStyles,
+    getKeybindingsServiceOverride
+}

core/src/monaco-editor-wrapper-utils.ts

@@ -0,0 +1,176 @@
+import { languages } from "monaco-editor";
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import { EditorAppConfigClassic, EditorAppConfigExtended, LanguageClientConfig, UserConfig } from "monaco-editor-wrapper";
+
+export type WorkerUrl = string;
+
+/**
+ * Generalized configuration used with 'getMonacoEditorReactConfig' to generate a working configuration for monaco-editor-react
+ */
+export interface MonacoReactConfig {
+    code: string,
+    languageId: string,
+    worker: WorkerUrl | Worker,
+    readonly?: boolean // whether to make the editor readonly or not (by default is false)
+}
+
+/**
+ * Extended config, specifically for textmate usage
+ */
+export interface MonacoExtendedReactConfig extends MonacoReactConfig {
+    textmateGrammar: any;
+}
+
+/**
+ * Editor config, specifically for monarch grammar usage
+ */
+export interface MonacoEditorReactConfig extends MonacoReactConfig {
+    monarchGrammar?: languages.IMonarchLanguage;
+}
+
+/**
+ * Helper to identify a Extended config, for use with TextMate
+ */
+function isMonacoExtendedReactConfig(config: unknown): config is MonacoExtendedReactConfig {
+    return (config as MonacoExtendedReactConfig).textmateGrammar !== undefined;
+}
+
+
+/**
+ * Default language configuration, common to most Langium DSLs
+ */
+export const defaultLanguageConfig = {
+    "comments": {
+        "lineComment": "//",
+        "blockComment": ["/*", "*/"]
+    },
+    "brackets": [
+        ["{", "}"],
+        ["[", "]"],
+        ["(", ")"]
+    ],
+    "autoClosingPairs": [
+        ["{", "}"],
+        ["[", "]"],
+        ["(", ")"],
+        ["\"", "\""],
+        ["'", "'"]
+    ],
+    "surroundingPairs": [
+        ["{", "}"],
+        ["[", "]"],
+        ["(", ")"],
+        ["\"", "\""],
+        ["'", "'"]
+    ]
+};
+
+/**
+ * Generates a UserConfig for a given Langium example, which is then passed to the monaco-editor-react component
+ * 
+ * @param config A Extended or classic editor config to generate a UserConfig from
+ * @returns A completed UserConfig
+ */
+export function createUserConfig(config: MonacoExtendedReactConfig | MonacoEditorReactConfig): UserConfig {
+    // setup urls for config & grammar
+    const id = config.languageId;
+
+    // check whether to use extended config (Textmate) or the classic editor config (Monarch)
+    let editorAppConfig: EditorAppConfigClassic | EditorAppConfigExtended;
+    const useExtendedConfig = isMonacoExtendedReactConfig(config);
+    if (useExtendedConfig) {
+        // setup extension contents
+        const languageConfigUrl = `/${id}-configuration.json`;
+        const languageGrammarUrl = `/${id}-grammar.json`;
+        const extensionContents = new Map<string, string>();
+        extensionContents.set(languageConfigUrl, JSON.stringify(defaultLanguageConfig));
+        extensionContents.set(languageGrammarUrl, JSON.stringify(config.textmateGrammar));
+
+        editorAppConfig = {
+            $type: 'extended',
+            languageId: id,
+            code: config.code,
+            useDiffEditor: false,
+            extensions: [{
+                config: {
+                    name: id,
+                    publisher: 'TypeFox',
+                    version: '1.0.0',
+                    engines: {
+                        vscode: '*'
+                    },
+                    contributes: {
+                        languages: [{
+                            id: id,
+                            extensions: [ `.${id}` ],
+                            configuration: languageConfigUrl
+                        }],
+                        grammars: [{
+                            language: id,
+                            scopeName: `source.${id}`,
+                            path: languageGrammarUrl
+                        }]
+                    }
+                },
+                filesOrContents: extensionContents,
+            }],                
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.semanticHighlighting.enabled': true,
+                    'editor.lightbulb.enabled': true,
+                    'editor.guides.bracketPairsHorizontal': 'active'
+                })
+            }
+        };
+    } else {
+        editorAppConfig = {
+            $type: 'classic',
+            languageId: id,
+            code: config.code,
+            useDiffEditor: false,
+            languageExtensionConfig: { id },
+            languageDef: config.monarchGrammar,
+            editorOptions: {
+                'semanticHighlighting.enabled': true,
+                readOnly: config.readonly,
+                theme: 'vs-dark'
+            }
+        };
+    }
+
+    let languageClientConfig: LanguageClientConfig;
+    if (typeof config.worker === 'string') {
+        languageClientConfig = {
+            options: {
+                $type: 'WorkerConfig',
+                url: new URL(config.worker, window.location.href),
+                type: 'module',
+                name: `${id}-language-server-worker`,
+            }
+        };
+    } else {
+        languageClientConfig = {
+            options: {
+                $type: 'WorkerDirect',
+                worker: config.worker
+            }
+        };
+    }
+
+    // generate user config for langium based language
+    const userConfig: UserConfig = {
+        wrapperConfig: {
+            serviceConfig: {
+                // only use keyboard service in addition to the default services from monaco-editor-wrapper
+                userServices: {
+                    ...getKeybindingsServiceOverride()
+                },
+                debugLogging: true
+            },
+            editorAppConfig
+        },
+        languageClientConfig
+    }
+    return userConfig;
+}

core/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "noImplicitAny": true,
+        "target": "ES2022",
+        "module": "Node16",
+        "moduleResolution": "Node16",
+        "rootDir": "src",
+        "outDir": "dist",
+        "declaration": true,
+        "declarationDir": "dist"
+    },
+    "include": [
+        "src/**/*.ts",
+    ]
+}

hugo/vite.bundle-monaco-editor-react.ts → core/vite.bundle.ts

@@ -4,21 +4,21 @@ import { defineConfig } from 'vite';
 const config = defineConfig({
     build: {
         lib: {
-            entry: resolve(__dirname, './assets/scripts/monaco-editor-react.ts'),
-            name: 'monaco-editor-react',
-            fileName: () => 'monaco-editor-react.js',
+            entry: resolve(__dirname, './src/index.ts'),
+            name: 'monaco-editor-wrapper-bundle',
+            fileName: () => 'index.js',
             formats: ['es']
         },
-        outDir: resolve(__dirname, 'static/libs/monaco-editor-react'),
-        assetsDir: resolve(__dirname, 'static/libs/monaco-editor-react/assets'),
-        emptyOutDir: false,
+        outDir: resolve(__dirname, 'bundle/monaco-editor-wrapper-bundle'),
+        assetsDir: resolve(__dirname, 'bundle/monaco-editor-wrapper-bundle/assets'),
+        emptyOutDir: true,
         cssCodeSplit: false,
         commonjsOptions: {
             strictRequires: true
         },
         rollupOptions: {
             output: {
-                name: 'monaco-editor-react',
+                name: 'monaco-editor-wrapper-bundle',
                 exports: 'named',
                 sourcemap: false,
                 assetFileNames: (assetInfo) => {
@@ -28,11 +28,8 @@ const config = defineConfig({
         }
     },
     resolve: {
-        alias: {
-            path: 'path-browserify'
-        }
-    },
-    assetsInclude: ['**/*.wasm']
+        dedupe: ['monaco-editor', 'vscode']
+    }
 });
 
-export default config;
+export default config;

hugo/.gitignore

@@ -0,0 +1,5 @@
+resources/
+static/css/
+static/showcase/
+static/libs/
+static/playground/

hugo/assets/scripts/arithmetics/arithmetics-tools.tsx

@@ -1,4 +1,4 @@
-import { monaco } from "monaco-editor-wrapper/.";
+import { monaco } from "langium-website-core/bundle";
 import { Pos } from "../langium-utils/langium-ast";
 
 export interface Evaluation {

hugo/assets/scripts/arithmetics/arithmetics.tsx

@@ -1,11 +1,11 @@
-import { MonacoEditorReactComp } from "./static/libs/monaco-editor-react/monaco-editor-react.js";
+import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
 import { buildWorkerDefinition } from "monaco-editor-workers";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Diagnostic, DocumentChangeResponse } from "../langium-utils/langium-ast";
 import { Evaluation, examples, syntaxHighlighting } from "./arithmetics-tools";
-import { UserConfig } from "monaco-editor-wrapper"; 
-import { createUserConfig } from "../utils";
+
+addMonacoStyles('monaco-styles-helper');
 
 buildWorkerDefinition(
     "../../libs/monaco-editor-workers/workers",