WIP: bundle the lsp wasm inside browserServerMain.js

* Use wasm-pack's web mode to create a .wasm file and an ESM module for the
  glue code
* Import the .wasm file directly in browserServerMain.ts
* And process it all with esbuild, which succeeds in seeing the .wasm import in
  browserServerMain.ts and then bundles it inline.

editor/vscode/browser-language-server/browserServerMain.ts

@@ -6,35 +6,40 @@ import { createConnection, BrowserMessageReader, BrowserMessageWriter } from 'vs
 import { Color, ColorInformation, Range, InitializeParams, InitializeResult, ServerCapabilities, TextDocuments, ColorPresentation, TextEdit, TextDocumentIdentifier } from 'vscode-languageserver';
 import { TextDocument } from 'vscode-languageserver-textdocument';
 
-import * as slint_lsp from "../../../tools/lsp/pkg";
+import { default as slint_lsp_init } from "../../../tools/lsp/pkg/index.js";
+import slint_wasm_data from "../../../tools/lsp/pkg/index_bg.wasm";
 
-console.log('Hello from the worker', slint_lsp);
+slint_lsp_init(slint_wasm_data).then((slint_lsp) => {
+
+    console.log('Hello from the worker', slint_lsp);
 
 
-const messageReader = new BrowserMessageReader(self);
-const messageWriter = new BrowserMessageWriter(self);
+    const messageReader = new BrowserMessageReader(self);
+    const messageWriter = new BrowserMessageWriter(self);
 
-const connection = createConnection(messageReader, messageWriter);
+    const connection = createConnection(messageReader, messageWriter);
 
-let the_lsp: slint_lsp.SlintServer;
+    let the_lsp: slint_lsp.SlintServer;
 
-connection.onInitialize((params: InitializeParams): InitializeResult => {
-    the_lsp = slint_lsp.create(params);
-    return { capabilities: the_lsp.capabilities() };
-});
+    connection.onInitialize((params: InitializeParams): InitializeResult => {
+        the_lsp = slint_lsp.create(params);
+        return { capabilities: the_lsp.capabilities() };
+    });
 
-connection.onRequest((method, params, token) => {
-    //the_lsp.handle_request(token, method, params);
-});
+    connection.onRequest((method, params, token) => {
+        //the_lsp.handle_request(token, method, params);
+    });
 
-connection.onDidChangeTextDocument((param) => {
-    //the_lsp.reload_document(param.contentChanges[param.contentChanges.length - 1].text, param.textDocument.uri);
-});
+    connection.onDidChangeTextDocument((param) => {
+        //the_lsp.reload_document(param.contentChanges[param.contentChanges.length - 1].text, param.textDocument.uri);
+    });
 
-connection.onDidOpenTextDocument((param) => {
-    //the_lsp.reload_document(param.textDocument.text, param.textDocument.uri);
-});
+    connection.onDidOpenTextDocument((param) => {
+        //the_lsp.reload_document(param.textDocument.text, param.textDocument.uri);
+    });
 
-// Listen on the connection
-connection.listen();
+    // Listen on the connection
+    connection.listen();
+
+})
 

editor/vscode/esbuild.js

@@ -0,0 +1,41 @@
+let wasmPlugin = {
+    name: 'wasm',
+    setup(build) {
+        let path = require('path')
+        let fs = require('fs')
+
+        // Resolve ".wasm" files to a path with a namespace
+        build.onResolve({ filter: /\.wasm$/ }, args => {
+            return {
+                path: path.isAbsolute(args.path) ? args.path : path.join(args.resolveDir, args.path),
+                namespace: 'wasm-binary',
+            }
+        })
+
+        // Virtual modules in the "wasm-binary" namespace contain the
+        // actual bytes of the WebAssembly file. This uses esbuild's
+        // built-in "binary" loader instead of manually embedding the
+        // binary data inside JavaScript code ourselves.
+        build.onLoad({ filter: /.*/, namespace: 'wasm-binary' }, async (args) => {
+            return ({
+                contents: await fs.promises.readFile(args.path),
+                loader: 'binary',
+            });
+        })
+    },
+}
+
+require('esbuild').build({
+    entryPoints: ['src/browser.ts'],
+    bundle: true,
+    external: ['vscode'],
+    outfile: 'out/browser.js',
+}).catch(() => process.exit(1))
+
+
+require('esbuild').build({
+    entryPoints: ['browser-language-server/browserServerMain.ts'],
+    bundle: true,
+    outfile: 'out/browserServerMain.js',
+    plugins: [wasmPlugin],
+}).catch(() => process.exit(1))

editor/vscode/package.json

@@ -89,7 +89,7 @@
 	"scripts": {
 		"vscode:prepublish": "npm run compile",
 		"compile": "tsc -p ./",
-		"compile-web": "webpack",
+		"compile-web": "wasm-pack build --target web --out-name index ../../tools/lsp && node ./esbuild.js",
 		"local-package": "mkdir -p bin && cp ../../target/debug/slint-lsp bin/ && npx vsce package",
 		"watch": "tsc -watch -p ./",
 		"pretest": "npm run compile && npm run lint",
@@ -101,19 +101,21 @@
 		"@types/mocha": "^8.0.4",
 		"@types/node": "^12.11.7",
 		"@types/vscode": "^1.52.0",
+		"@types/webpack-env": "^1.16.0",
 		"@typescript-eslint/eslint-plugin": "^4.9.0",
 		"@typescript-eslint/parser": "^4.9.0",
+		"@wasm-tool/wasm-pack-plugin": "github:wasm-tool/wasm-pack-plugin",
+		"esbuild": "^0.14.39",
 		"eslint": "^7.15.0",
 		"glob": "^7.1.6",
 		"mocha": "^8.1.3",
-		"typescript": "^4.1.2",
-		"vscode-test": "^1.4.1",
-		"ts-loader": "^9.2.2",
-		"webpack": "^5.38.1",
-		"webpack-cli": "^4.7.0",
-		"@types/webpack-env": "^1.16.0",
 		"path-browserify": "^1.0.1",
-		"@wasm-tool/wasm-pack-plugin": "github:wasm-tool/wasm-pack-plugin"
+		"ts-loader": "^9.2.2",
+		"typescript": "^4.1.2",
+		"vscode-languageserver": "^8.0.1",
+		"vscode-test": "^1.4.1",
+		"webpack": "^5.38.1",
+		"webpack-cli": "^4.7.0"
 	},
 	"__metadata": {
 		"id": "73b2e4cc-8183-4df0-bc22-29b5f748d788",