Skip to content

Commit

Permalink
Update to latest monaco-editor-wrapper and monaco-editor-react
Browse files Browse the repository at this point in the history
Extract/Add package langium-website-foundation
  • Loading branch information
kaisalmen committed Oct 16, 2023
1 parent 0faf6ac commit ed10438
Show file tree
Hide file tree
Showing 23 changed files with 794 additions and 674 deletions.
6 changes: 0 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions foundation/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
bundle/
dist/
67 changes: 67 additions & 0 deletions foundation/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{
"name": "langium-website-foundation",
"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.82.0",
"typescript": "~5.2.2",
"vite": "~4.4.11"
},
"dependencies": {
"@codingame/monaco-vscode-keybindings-service-override": "~1.82.5",
"@typefox/monaco-editor-react": "2.3.0-next.3",
"monaco-editor": "~0.43.0",
"monaco-editor-workers": "~0.43.0",
"monaco-editor-wrapper": "~3.3.0-next.3",
"monaco-languageclient": "~6.5.3",
"react": "~18.2.0",
"react-dom": "~18.2.0",
"vscode": "npm:@codingame/monaco-vscode-api@>=1.82.5 <1.83.0",
"vscode-languageserver": "~8.0.2"
},
"volta": {
"node": "18.18.1",
"npm": "9.9.0"
}
}
17 changes: 17 additions & 0 deletions foundation/src/index.ts
Original file line number Diff line number Diff line change
@@ -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
}
176 changes: 176 additions & 0 deletions foundation/src/monaco-editor-wrapper-utils.ts
Original file line number Diff line number Diff line change
@@ -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;
}
15 changes: 15 additions & 0 deletions foundation/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"compilerOptions": {
"noImplicitAny": true,
"target": "ES2022",
"module": "Node16",
"moduleResolution": "Node16",
"rootDir": "src",
"outDir": "dist",
"declaration": true,
"declarationDir": "dist"
},
"include": [
"src/**/*.ts",
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -28,11 +28,8 @@ const config = defineConfig({
}
},
resolve: {
alias: {
path: 'path-browserify'
}
},
assetsInclude: ['**/*.wasm']
dedupe: ['monaco-editor', 'vscode']
}
});

export default config;
export default config;
5 changes: 5 additions & 0 deletions hugo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
resources/
static/css/
static/showcase/
static/libs/
static/playground/
2 changes: 1 addition & 1 deletion hugo/assets/scripts/arithmetics/arithmetics-tools.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { monaco } from "monaco-editor-wrapper/.";
import { monaco } from "langium-website-foundation/bundle";
import { Pos } from "../langium-utils/langium-ast";

export interface Evaluation {
Expand Down
4 changes: 1 addition & 3 deletions hugo/assets/scripts/arithmetics/arithmetics.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { MonacoEditorReactComp } from "./static/libs/monaco-editor-react/monaco-editor-react.js";
import { createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-foundation/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";

buildWorkerDefinition(
"../../libs/monaco-editor-workers/workers",
Expand Down
4 changes: 1 addition & 3 deletions hugo/assets/scripts/domainmodel/domainmodel.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react/bundle";
import { createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-foundation/bundle";
import { buildWorkerDefinition } from "monaco-editor-workers";
import React from "react";
import { createRoot } from "react-dom/client";
import { Diagnostic, DocumentChangeResponse, LangiumAST } from "../langium-utils/langium-ast";
import { DomainModelAstNode, example, getTreeNode, syntaxHighlighting } from "./domainmodel-tools";
import { UserConfig } from "monaco-editor-wrapper";
import { createUserConfig } from "../utils";
import D3Tree from "./d3tree";

buildWorkerDefinition(
Expand Down
2 changes: 1 addition & 1 deletion hugo/assets/scripts/minilogo/minilogo-tools.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { monaco } from "monaco-editor-wrapper/.";
import { monaco } from "langium-website-foundation/bundle";

export interface Command {
name: 'penUp' | 'penDown' | 'move' | 'color';
Expand Down
4 changes: 1 addition & 3 deletions hugo/assets/scripts/minilogo/minilogo.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react/bundle";
import { createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-foundation/bundle";
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 { ColorArgs, Command, MoveArgs, examples, syntaxHighlighting } from "./minilogo-tools";
import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";
import { UserConfig } from "monaco-editor-wrapper";
import { createUserConfig } from "../utils";

buildWorkerDefinition(
"../../libs/monaco-editor-workers/workers",
Expand Down
2 changes: 0 additions & 2 deletions hugo/assets/scripts/monaco-editor-react.ts

This file was deleted.

Loading

0 comments on commit ed10438

Please sign in to comment.