How to read from filesystem in worker in web extension?

[Viir]

How can I supply a listing of file paths and file contents into a worker that is running in a web extension?

I used the lsp-web-extension-sample to search for an implementation.
In the main extension JavaScript, accessing the file system was straightforward.
Adding the following code:

import * as vscode from 'vscode'

console.log('vscode.workspace.fs.readFile: ' + vscode.workspace.fs.readFile);

The log showed that the reference to vscode.workspace.fs.readFile was resolved successfully at runtime:

vscode.workspace.fs.readFile: async readFile(i){try{const n=l.b.get(i.scheme);return n?(await l.a.$ensureActivation(i.scheme),(await n.impl.readFile(i)).slice()):(await l.a.$readFile(i)).buffer}catch(n){return S.e(n)}}

However, when I placed this code in the worker, in the file browserServerMain.ts, it failed at runtime with the following error:

ErrorEvent {isTrusted: true, message: 'Uncaught ReferenceError: require is not defined', filename: 'vscode-file://vscode-app/k:/Source/Repos/vsc…ion-sample/server/dist/browserServerMain.js', lineno: 8539, colno: 1, …}

As far as I understand this error, the import does not work on the worker as it does in the main extension scope.

Can we somehow access vscode.workspace.fs in such a worker?

[tamuratak]

Can we somehow access vscode.workspace.fs in such a worker?

No. browserServerMain.js is executed in the context of Web Worker. The vscode module is not provided in the context.

	const serverMain = Uri.joinPath(context.extensionUri, 'server/dist/browserServerMain.js');
	const worker = new Worker(serverMain.toString(true));

https://github.com/microsoft/vscode-extension-samples/blob/a11599ca990d239073f4b9978723800d8565d9fb/lsp-web-extension-sample/client/src/browserClientMain.ts#L44-L45

However, even in the context of Web Worker, you can execute fetch('file:///localworkspacedir/local/file') if you want.

[Viir]

@tamuratak thank you for the idea.
Unfortunately, the fetch did not work there.
I used the following code to test fetch, using the file URI given via the API:

function getColorInformation(textDocument: TextDocumentIdentifier) {

	// const testFetchFile = fetch('file:///localworkspacedir/local/file');

	const testFetchFile = fetch(textDocument.uri);

	testFetchFile.catch((reason) => {

		console.error('testFetchFile.catch(' + textDocument.uri + '): ' + reason);

	}).then((response) => {

		console.log('testFetchFile.response: ' + response);

	});

	console.log('getColorInformation...');

	const colorInfos: ColorInformation[] = [];

	const document = documents.get(textDocument.uri);
	if (document) {
		const text = document.getText();

		colorRegExp.lastIndex = 0;
		let match;
		while ((match = colorRegExp.exec(text)) != null) {
			const offset = match.index;
			const length = match[0].length;

			const range = Range.create(document.positionAt(offset), document.positionAt(offset + length));
			const color = parseColor(text, offset);
			colorInfos.push({ color, range });
		}
	}

	return colorInfos;
}

However, the console log showed this:

running server lsp-web-extension-sample
browserServerMain.ts:11
getColorInformation...
browserServerMain.ts:61
testFetchFile.catch(file:///k%3A/Source/Repos/elm-time/implement/pine/ElmTime/compile-elm-program/elm-test-case-4.txt): TypeError: Failed to fetch
browserServerMain.ts:53
testFetchFile.response: undefined

These results look like the name fetch is declared in scope but the files don't seem to be available.
The error TypeError: Failed to fetch was also returned in cases where the file already existed on disk before starting the instance of VSCode.

[tamuratak]

Then, possible solutions are:

1. Implement the extension features on the host side without vscode-languageserver-node since fs.readFile is available there.
2. Only use document caches provided from vscode-languageserver-node as the example does.

[Viir]

2. Only use document caches provided from vscode-languageserver-node as the example does.

I do not understand this second idea. How would we get a listing of all file names in the workspace this way? How would we read the content of a file that was never opened in the editor?

1. Implement the extension features on the host side without vscode-languageserver-node since fs.readFile is available there.

As far as I understand, that would entail maintaining the program code up to calls like registerHoverProvider and registerCompletionItemProvider in my project.
I used that approach already, but I was wondering if there is a better way than maintaining the JavaScript code to connect the individual features myself.
I was hoping to leverage the language server protocol and the client library from the vscode-languageclient/browser package to outsource the JavaScript maintenance.
To simplify the project, I am searching for a way to use the JSON-based representation for the interface, as described at https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/ instead of depending on JavaScript syntax.

Apart from the maintenance effort of implementing an analog to vscode-languageclient/browser, I wonder if moving the language services from a worker to the host side will result in worse response times for users. What will happen to concurrent execution when moving this to the host? Does that move imply that we share a single thread with all other extensions?

[tamuratak]

How would we read the content of a file that was never opened in the editor?

There is no way to do that. The extension would have limitations in that case.

Interestingly, on the lsp-web-extension-sample example, we can fetch file:///Users/tamura/src/github/vscode-extension-samples/lsp-web-extension-sample/README.md even in browserServerMain.ts. The VS Code development team has chosen to make extension resource files (files under extensionContext.extensionUri) available for nested web workers and to make workspace files not available.

I guess it is due to a security concern. You can open a feature request for that at https://github.com/microsoft/vscode.

• Cannot resolve file-resources in nested worker of ext host worker vscode#132543