0

I try to recreate an existing monaco+react+typescript project to my own goals. And it's not working, unfortunately. Language functionalities don't work. When I tried to throw alerts from the setupLanguage function it's working on getWorkerUrl function only. But don't work for the monaco.languages.onLanguage event processor. May I ask you to show me the point where I'm wrong?

Regards, vladimir

P.s. Code are available on https://github.com/vladimirkozhaev/monaco-web-editor-new-edition This is my setup.ts

import * as monaco from "monaco-editor-core";
import { languageExtensionPoint, languageID } from "./config";
import { richLanguageConfiguration, monarchLanguage } from "./TodoLang";
import { TodoLangWorker } from "./todoLangWorker";
import { WorkerManager } from "./WorkerManager";
import DiagnosticsAdapter from "./DiagnosticsAdapter";
import TodoLangFormattingProvider from "./TodoLangFormattingProvider";

export function setupLanguage() {
    (window as any).MonacoEnvironment = {
        getWorkerUrl: function (moduleId, label) {
            if (label === languageID)
                return "./todoLangWorker.js";
            return './editor.worker.js';
        }
    }
    monaco.languages.register(languageExtensionPoint);
    monaco.languages.onLanguage(languageID, () => {
        monaco.languages.setMonarchTokensProvider(languageID, monarchLanguage);
        monaco.languages.setLanguageConfiguration(languageID, richLanguageConfiguration);
        const client = new WorkerManager();

        const worker: WorkerAccessor = (...uris: monaco.Uri[]): Promise<TodoLangWorker> => {
            return client.getLanguageServiceWorker(...uris);
        };
        //Call the errors provider
        new DiagnosticsAdapter(worker);
        monaco.languages.registerDocumentFormattingEditProvider(languageID, new TodoLangFormattingProvider(worker));
    });

}

export type WorkerAccessor = (...uris: monaco.Uri[]) => Promise<TodoLangWorker>;

This is my package.json

{
    "name": "todolangeditor",
    "version": "1.0.0",
    "description": "TodoLang editor",
    "license": "UNLICENSED",
    "scripts": {
        "test": "jest -c jest.config.unit.js",
        "start": "webpack-dev-server",
        "antlr4ts": "antlr4ts ./ExpressionsParserGrammar.g4 -visitor -o ./src/ANTLR"
    },
    "dependencies": {
        "antlr4ts": "0.5.0-alpha.4",
        "monaco-editor-core": "0.18.1",
        "react": "16.8.6",
        "react-dom": "16.8.6"
    },
    "devDependencies": {
        "@types/react": "16.8.12",
        "source-map-loader": "^1.0.0",
        "@types/react-dom": "16.8.3",
        "antlr4ts-cli": "0.5.0-alpha.4",
        "css-loader": "3.3.0",
        "html-webpack-plugin": "3.2.0",
        "style-loader": "1.0.1",
        "ts-loader": "5.3.3",
        "typescript": "^4.8",
        "webpack": "4.29.6",
        "webpack-cli": "3.3.0",
        "webpack-dev-server": "3.2.1",
        "ts-jest": "^29.0.3",
        "@types/jest":"29.0.3"
    }
}

This is my webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { SourceMapDevToolPlugin } = require("webpack");
module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.tsx',
        "editor.worker": 'monaco-editor-core/esm/vs/editor/editor.worker.js',
        "todoLangWorker": './src/todo-lang/todolang.worker.ts'
    },
    output: {
        globalObject: 'self',
        filename: (chunkData) => {
            switch (chunkData.chunk.name) {
                case 'editor.worker':
                    return 'editor.worker.js';
                case 'todoLangWorker':
                    return "todoLangWorker.js"
                default:
                    return 'bundle.[hash].js';
            }
        },
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.css']
    },
    module: {
        rules: [
            {
                test: /\.tsx?/,
                loader: 'ts-loader'
            },
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader']
            }
        ]
    },
    plugins: [
//      new SourceMapDevToolPlugin({
//          filename: "[file].map"
//      }),
        new htmlWebpackPlugin({
            template: './src/index.html'
        })

    ]
}

This is my index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {setupLanguage} from "./todo-lang/setup";
import { Editor } from './components/Editor/Editor';
import { languageID } from './todo-lang/config';
import { parseAndGetSyntaxErrors, parseAndGetASTRoot } from './language-service/Parser';

setupLanguage();
const App = () => <Editor language={languageID}></Editor>;

ReactDOM.render(<App/>, document.getElementById('container'));

0 Answers0