-
-
Notifications
You must be signed in to change notification settings - Fork 171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
julia language server with monaco editor client side #617
Comments
Hi @vladtimss we have a complete solution for that now here: See how it can be used with the python language server: |
thanks for your answer i tried many time to install and launch monaco-languageclient to play with examples, but in was not successfully because of errors after click on any example on html also i tried detailed learn your attached links and i faced with problems to launch simple new projects with @typefox/monaco-editor-react, i also attached my realization and i dont understand how start send message from monaco editor to soccket and get response via json-rpc please could you give some advices? or see my components to fix it? my repo here - https://github.com/vladtimss/monaco-julia-language-server/tree/main/my-app |
@vladtimss you have to change the configuration. You just copy-pasted the python config. This can't work. You need changes it according you julia language server needs (e.g. $type: 'WebSocket',
host: 'localhost',
port: 30001,
path: 'pyright', The whole configuration is typed. |
thank you @kaisalmen. Now i am trying to solve my troubles. I hope soon i may come back with news. Could you tell me. Does i understand right, that this component https://www.npmjs.com/package/@typefox/monaco-editor-react create monaco-editor from node_module and does not use cdn? |
Dear @kaisalmen thank for your help and your work! I've had some success. I was able to connect to the socket and even see the component communicating with the server over the socket via the json-rpc. Also this component can show LSP suggestions. It is great. But i faced with some errors, and has new problems. Please, could you help and give some advices.
This my code import React, { useEffect, useRef } from 'react';
import { EditorWrapper } from '@/modules/lsp-editor/lsp-editor.styles';
import { MonacoEditorProps, MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import { UserConfig } from 'monaco-editor-wrapper';
import * as vscode from 'vscode';
import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
const config: UserConfig = {
languageClientConfig: {
options: {
name: 'Julia Language Server Example',
$type: 'WebSocketUrl',
url: '.........ijulia/lsp',
},
clientOptions: {
documentSelector: ['julia'],
workspaceFolder: {
index: 0,
name: 'workspace',
uri: vscode.Uri.parse('/workspace/'),
},
},
},
wrapperConfig: {
serviceConfig: {
userServices: {},
debugLogging: true,
},
editorAppConfig: {
$type: 'extended',
languageId: 'julia',
codeUri: '/workspace/julia.jl',
extensions: [
{
config: {
name: 'julia-client',
publisher: 'monaco-languageclient-project',
version: '1.0.0',
engines: {
vscode: '^1.85.0',
},
contributes: {
languages: [
{
id: 'julia',
extensions: ['.jl'],
aliases: ['julia'],
mimetypes: ['application/julia'],
},
],
},
},
},
],
editorOptions: {},
useDiffEditor: false,
},
},
};
const LspEditor = () => {
const editorRef = useRef<MonacoEditorReactComp<MonacoEditorProps>>(null);
useWorkerFactory({ basePath: '../../../../node_modules' }); // Perhaps this is the place of troubles with worker?
const onTextChanged = (text: string, isDirty: boolean) => {
console.log(`Dirty? ${isDirty} Content: ${text}`);
};
useEffect(() => {
if (editorRef.current) {
console.log(editorRef.current);
}
}, []);
return (
<EditorWrapper>
<MonacoEditorReactComp
ref={editorRef}
onTextChanged={onTextChanged}
userConfig={config}
style={{ height: '90vh', width: '100%' }}
onLoad={() => console.log('Loaded')}
onError={(e) => console.error(e)}
/>
</EditorWrapper>
);
};
export { LspEditor }; |
Hi @vladtimss The first issue seems to be that you use the editor (via You can freely overwrite the worker loading see here. In you case you only need the editor worker, so it will be very similar to what is done in the linked example at line 18. For syntac hghligthing you can use the npm package |
oh, @kaisalmen I'm desperate((( I'm doing my best but 1)i cant solve the problem with i tried to do the same as this example but i have this problems yet. By the way, many thanks im succeeded load worker. but not sure that right. please if you can give any advice, help. i will be glad you! this my component with config and react. and i set also questions import React, { useEffect, useRef } from 'react';
import * as vscode from 'vscode';
import '@codingame/monaco-vscode-julia-default-extension'; // HERE I SET EXTENSION BUT IT DOES NOT WORK
import { EditorWrapper } from '@/modules/script-editor/components/lsp-editor/lsp-editor.styles';
import { MonacoEditorProps, MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
import { UserConfig } from 'monaco-editor-wrapper';
export const configureMonacoWorkers = () => {
// override the worker factory with your own direct definition
// eslint-disable-next-line react-hooks/rules-of-hooks
useWorkerFactory({
ignoreMapping: true,
workerLoaders: {
editorWorkerService: () =>
new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { // DOES IT RIGHT WAY? DOES NEED ADD HERE MORE MODULES, FOR EXAMPLE FOR JSON? HOW?
type: 'module',
}),
},
});
};
export const createUserConfig = (code: string): UserConfig => {
return {
languageClientConfig: {
options: {
name: 'Julia Language Server Example',
$type: 'WebSocketUrl',
url: 'wss:///ijulia/lsp',
},
clientOptions: {
documentSelector: ['julia'],
workspaceFolder: {
index: 0,
name: 'workspace',
uri: vscode.Uri.parse('/workspace/'), // I HAVE DOUBTS ABOUT THIS PART. COULD YOU EXPLAIN WHY THIS NEED?
},
},
},
wrapperConfig: {
editorAppConfig: {
$type: 'extended',
languageId: 'julia',
codeUri: '/workspace/julia.jl', // I HAVE DOUBTS ABOUT THIS PART. COULD YOU EXPLAIN WHY THIS NEED?
extensions: [
{
config: {
name: 'julia-client',
publisher: 'monaco-languageclient-project',
version: '1.0.0',
engines: {
vscode: '^1.85.0',
},
contributes: {
languages: [
{
id: 'julia',
extensions: ['.jl'],
aliases: ['julia'],
mimetypes: ['application/julia'],
},
],
},
},
},
],
code: code,
editorOptions: {},
useDiffEditor: false,
},
},
};
};
configureMonacoWorkers(); // THIS I RUN WORKER
const LspEditor = () => { // THIS COMPONENT I USE IN MY PROJECT AS COMMON REACT COMPONENT. WHATS WRONG?
const editorRef = useRef<MonacoEditorReactComp<MonacoEditorProps>>(null);
const onTextChanged = (text: string, isDirty: boolean) => {
console.log(`Dirty? ${isDirty} Content: ${text}`);
};
useEffect(() => {
if (editorRef.current) {
console.log(editorRef.current);
}
}, []);
return (
<EditorWrapper>
<MonacoEditorReactComp
ref={editorRef}
onTextChanged={onTextChanged}
userConfig={createUserConfig('using')}
style={{ height: '90vh', width: '100%' }}
onLoad={() => console.log('Loaded')}
onError={(e) => console.error(e)}
/>
</EditorWrapper>
);
};
export { LspEditor }; |
Hi!
I need help to understand how connect my monaco-editor react component to julia language server which my team did on our server. I cant see sending message via json-rpc in my monaco. please help.
I use this example example trying to do the same. But i faced misunderstanding of all logic. Please help, help!
There are steps of my attempt repeat their solution.
1
i seems that i need first create languageClient
2
Then seems i should create WS and start client. and i try to do this one
3
i think i need to active monaco services in my monaco wrapper component and then after activation i should run
createWebSocketAndStartClient
i do it like this and i see also on this exampleThanks for any help, advices! Please help me.
The text was updated successfully, but these errors were encountered: