From 1437648df1ea672d0dbaea927fdede04b2950e8c Mon Sep 17 00:00:00 2001 From: Simon Hausmann Date: Wed, 25 May 2022 15:13:56 +0200 Subject: [PATCH] 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. --- .../browserServerMain.ts | 47 ++++++++++--------- editor/vscode/esbuild.js | 41 ++++++++++++++++ editor/vscode/package.json | 18 +++---- 3 files changed, 77 insertions(+), 29 deletions(-) create mode 100644 editor/vscode/esbuild.js diff --git a/editor/vscode/browser-language-server/browserServerMain.ts b/editor/vscode/browser-language-server/browserServerMain.ts index 6473da8f41..71171b07aa 100644 --- a/editor/vscode/browser-language-server/browserServerMain.ts +++ b/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(); + +}) diff --git a/editor/vscode/esbuild.js b/editor/vscode/esbuild.js new file mode 100644 index 0000000000..f01a806c45 --- /dev/null +++ b/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)) diff --git a/editor/vscode/package.json b/editor/vscode/package.json index 5ee73a8ac1..db44b02770 100644 --- a/editor/vscode/package.json +++ b/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",