Help importing a vsix

[ejfasting]

Hello!

I had a discussion going on the monaco-languageclient-discussionboard about how you import a vsix (using vite):
TypeFox/monaco-languageclient#597 (reply in thread)

I have set up a test-project, with vite, and removed everything besides my logic for importing the .vsix and showing a simple editor:
https://github.com/ejfasting/MonacoTest/tree/main

I get this when i run the import-statement at the top of main.ts.. :
Uncaught SyntaxError: malformed Unicode character escape sequence

But from the other/old thread i see that @CGNonofr was able to import it without issues in the demo-project..
I'm not exactly sure what I'm doing wrong, but any input/feedback/help is much appreciated!

//eivind

[CGNonofr]

This library requires you to initialize the services using the initialize function from vscode/services with the service override you want

You should have a look at the demo

[ejfasting]

I see. My issue is primarily that its unable to even read the file:

I've looked at the demo, but unfortunately it didnt help much, and probably just got me more confused lol..
It also feels like kind of a maze to know whats what between monaco-vscode-api, monaco-languageclient and monaco-editor.

Thank you for all your time! I think I have to give up on this and see if things have changed further down the line :)

[CGNonofr]

Are you using the rollup/vite plugin to load the file?

[ejfasting]

Yes. After a lot of testing i figured out the root cause of my issue had to do with the content of the vsix. Now it is imported as it should, and i can see the content of the file etc:

Since server.js, which is the lsp-server, is bundled in the vsix it gets registered like this:
registerFileUrl('dist\server', 'data:application/javascript;base64,InVzZSBzdHJpY3QiO3ZhciBCUj1PY.....

If i understand this correctly I then have to create the editor, register the servicesOverrides that i want, and somehow GET this registered file and launch it on the webworker (?).
If i had the .js-file directly in the monaco-project i would do this:
https://github.com/ejfasting/MonacoTest/blob/05ab15b3092f9b442e596f491f61dd394dfc5224/src/main.ts#L64

Since the vsix actually contains the client and the server, is it possible to just import it and 'activate'?

[CGNonofr]

Since server.js, which is the lsp-server, is bundled in the vsix it gets registered like this:
registerFileUrl('dist\server', 'data:application/javascript;base64,InVzZSBzdHJpY3QiO3ZhciBCUj1PY.....

Yes, in dev mode it's a base64 url, build in build mode, the asset is emitted

If i understand this correctly I then have to create the editor, register the servicesOverrides that i want

Correct! (you just need to initialize the services BEFORE creating the editor)

and somehow GET this registered file and launch it on the webworker (?).

It's already done in your extension so I'm not sure to understand your concerns

If i had the .js-file directly in the monaco-project i would do this:
https://github.com/ejfasting/MonacoTest/blob/05ab15b3092f9b442e596f491f61dd394dfc5224/src/main.ts#L64

You can still put that code in the extension code

Since the vsix actually contains the client and the server, is it possible to just import it and 'activate'?

That's exactly what importing the vsix with the vsix-loader does

I think you're overthinking. You just need a VSCode web-compatible extension loaded via the vsix-loader and that's it
Just make sure:

• You've registered the required service overrides depending on the features you want
• You're provided a valid worker configuration to the extension service override (see

  monaco-vscode-api/demo/src/setup.common.ts

  Line 249 in 7864fdc

  ...getExtensionServiceOverride(workerConfig),

  and https://github.com/CodinGame/monaco-vscode-api/blob/main/demo/src/tools/extHostWorker.ts) to enable to webworker extension host

[ejfasting]

Hm, ok.
I know the extension is web-compatible, from testing it myself and by you in the demo-project. It loads up just fine, and gets imported.

For starters I'm just adding these services, as I just want to load the vsix successfully:
await initialize({ ...getConfigurationServiceOverride(), ...getExtensionServiceOverride(workerConfig), });
The workerConfig is basically a copy-paste of what you provided as an example.

To set up the editor i do this:
const editorOptions = { model: editor.createModel('const foo = () => 0;', languageId), automaticLayout: true }; createConfiguredEditor(rootElement, editorOptions);

languageId here is jsfso, which is the same as the activationEvent in the .vsix.
The editor gets added, with the text, but It does not seem to 'understand' its jsfso, which in turn should enable the extension (?).
I added a short console.log to both the client and server, to validate that nothing happens.

The console has other rows like this:

But the FAQ linked here says this could be because its served on file:// , but thats not the case when i use vite (?)

This probably goes outside of this discussion, and i appreciate your patience! :)

[CGNonofr]

languageId here is jsfso, which is the same as the activationEvent in the .vsix. The editor gets added, with the text, but It does not seem to 'understand' its jsfso, which in turn should enable the extension (?). I added a short console.log to both the client and server, to validate that nothing happens.

Not sure what you are talking about:

The console has other rows like this: But the FAQ linked here says this could be because its served on file:// , but thats not the case when i use vite (?)

Which FAQ? here it's about the editor worker that need to be configured (see

monaco-vscode-api/demo/src/setup.common.ts

Lines 151 to 167 in 7864fdc

	const workerLoaders: Partial<Record<string, WorkerLoader>> = {
	editorWorkerService: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' }),
	textMateWorker: () => new Worker(new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url), { type: 'module' }),
	outputLinkComputer: () => new Worker(new URL('@codingame/monaco-vscode-output-service-override/worker', import.meta.url), { type: 'module' }),
	languageDetectionWorkerService: () => new Worker(new URL('@codingame/monaco-vscode-language-detection-worker-service-override/worker', import.meta.url), { type: 'module' }),
	notebookEditorWorkerService: () => new Worker(new URL('@codingame/monaco-vscode-notebook-service-override/worker', import.meta.url), { type: 'module' })
	}
	window.MonacoEnvironment = {
	getWorker: function (moduleId, label) {
	const workerFactory = workerLoaders[label]
	if (workerFactory != null) {
	return workerFactory()
	}
	throw new Error(`Unimplemented worker ${label} (${moduleId})`)
	}
	}

, you just need the first worker)

This probably goes outside of this discussion, and i appreciate your patience! :)

No problem

[ejfasting]

But, it does matter if i have to create the worker, in my monaco-extension, like this:
const jsfsoWorkerUrl = new URL('assets/jsfso-client-0.0.1.vsix/**server-xyNSEqxM.js**', window.location.href).href; const worker = new Worker(jsfsoWorkerUrl, { type: 'module', name: 'jsfso LS' });

This means that when server.js changes, because i add logic, I also need to edit the jsfsoWorkerUrl to have the new name of the file.

What i was suggesting was that when this gets added through the vsix-import:
registerFileUrl('dist\server.js.map', 'data:application/json;base64,ewogICJ2ZXJzaW9u....

Then i should be able to do this, to not have to edit the filename every run:
const jsfsoWorkerUrl = new URL('dist/server.js', window.location.href).href;

I can probably use vite.config to do this, and tell it not to append the hash :)

[CGNonofr]

I'm really lost

What is a monaco-extension? is it different from the VSCode extension?

Are you trying to reference the worker from outside the extension? why?

[ejfasting]

Hehe, I understand, and my terminology is probably way off..
Take a look at the repo: https://github.com/ejfasting/MonacoTest/blob/main/src/main.ts

I have still not made it work by simply importing the .vsix:
https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L3

adding ...getConfigurationServiceOverride:
https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L55

and uncomment these lines:
https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L34-L51

but it does work if i import the extension, then create a worker with the server.js and create a MonacoLanguageClient:
https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L96-L105

I'm all ears :)

[CGNonofr]

Hehe, I understand, and my terminology is probably way off.. Take a look at the repo: https://github.com/ejfasting/MonacoTest/blob/main/src/main.ts

I have still not made it work by simply importing the .vsix: https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L3

adding ...getConfigurationServiceOverride: https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L55

I don't think it will help you to make it work but it can't hurt

and uncomment these lines: https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L34-L51

Same, you'll need it but the editor worker is able to run outside of the worker so not blocking

but it does work if i import the extension, then create a worker with the server.js and create a MonacoLanguageClient: https://github.com/ejfasting/MonacoTest/blob/bbfb706811ccc0f1a0f6d6f0473ab9d0c369b311/src/main.ts#L96-L105

In that case, you're using the local extension host (allowed because you imported vscode/localExtensionHost)

I'm all ears :)

Ok, here's the issues with your project:

• Vite have some issues with esbuild not supporting some feature in dev mode, to fix it, you should use the @codingame/esbuild-import-meta-url-plugin plugin (look at the demo here) and force it to optimize commonjs dependencies ('vscode-semver', 'vscode-marked')
• Your extension needs the worker extension host to run so you must provide the extension host worker configuration
• For your extension to trigger, the jsfso language should exist, your extension declare it but it requires the languages service override to be taken into account

note:

• monaco-languageclient is pulling old version of monaco-vscode-api and you don't seem to be needing it
• you don't need vscode/localExtensionHost

Here's the patch:

fix.patch.zip

[ejfasting]

aha, that makes sense! Added the patch to the repo, but now says this:

Fetch API cannot load extension-file://superoffice.jsfso-client/dist/client.js. URL scheme "extension-file" is not supported.

Thank you for all your help so far! This is getting really close :)

[CGNonofr]

I'm unable to reproduce your issue, what are you doing to produce that error?

[ejfasting]

Nothing special really:

1. clone the repo
2. npm install
3. npm run dev

Tried it on 2 different machines, just to make sure it wasnt just this environment.
Looks to be related to that nativeFetch blocks a custom protocol.. -> electron/electron#6749

If you can do the 3 steps above without issues then this must be related to my environment and/or a lack of something outside of monaco.

[CGNonofr]

I've just checked another time and I confirm I don't have any issue with latest Chrome on Ubuntu