typescript issues with the slint-vsc-extension

[ji-podhead]

im trying to add a eventlistener in the wasm_preview.js and call the functions via slint file. but i cant get the vscode extension to run and debug it: i had to change minimatch@5.1.2 @types/minimatch@5.1.2 and vscode@1.1.37 and remove types/glob@8.1.0" because of dependency issues and:"Property 'IOptions' does not exist on type 'typeof import("/home/ji/Dokumente/slint_web/vs-extension/editors/vscode/node_modules/minimatch/dist/cjs/index")'.ts(2339) Namespace '"/home/ji/Dokumente/slint_web/vs-extension/editors/vscode/node_modules/minimatch/dist/cjs/index"' has no exported member 'IOptions'.ts(2694) " i also had to change the tsconfig because it was creating a src subpath in the out folder where it placed the js files.

    "compilerOptions": {
        "module": "commonjs",
        "target": "es2020",
        "outDir": "./out",
        "lib": ["es2021", "WebWorker", "dom"],
        "sourceMap": true,
        "rootDir": "src",
        "strict": true
    },
    "exclude": ["node_modules", ".vscode-test"]
}

in propertiesview.ts in line 11 "Cannot find name 'acquireVsCodeApi'.ts(2304) i had to change to

import {
    PropertiesView,
    SetBindingResponse,
} from "../../../tools/slintpad/src/shared/properties";
interface vscode {
    postMessage(message: any): void;
}

declare const vscode: vscode;

const addCategory = () => () => vscode.postMessage({ command: 'add-category' });

and add this to the tsconfig:

   "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.d.ts",
        "vscode-webview.d.ts" // Add this line if it's not already there
     ]

but i get so many more(35) errors: Found 35 errors in 7 files.

Errors Files 3 src/browser-lsp-worker.ts:5 3 src/propertiesView.ts:56 5 src/properties_webview.ts:11 1 ../../tools/slintpad/src/shared/lsp_commands.ts:12 1 ../../tools/slintpad/src/shared/properties.ts:10 3 ../../../../../usr/lib/node_modules/typescript/lib/lib.dom.d.ts:25 19 ../../../../../usr/lib/node_modules/typescript/lib/lib.webworker.d.ts:25

what kind of typescript setup did you use for this?
is it somehow possible to get a complet project with all dependencies installed? or what do i need to do?
i created the js files like this:vscode]$ tsc -p . and i also followed the steps in the readme.
i can paste the full error log if you want.
best regards: leo

[ji-podhead]

so i noticed that i only have those errors when using npm run compile:

npm run compile

> slint@1.5.0 compile
> node ./esbuild.js

✘ [ERROR] Could not resolve "../out/slint_lsp_wasm.js"

    src/browser-lsp-worker.ts:4:39:
      4 │ import slint_init, * as slint_lsp from "../out/slint_lsp_wasm.js";
        ╵                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "../out/slint_lsp_wasm.js"

    src/browser-lsp-worker.ts:4:39:
      4 │ import slint_init, * as slint_lsp from "../out/slint_lsp_wasm.js";
        ╵                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "../out/slint_lsp_wasm.js"

    src/browser-lsp-worker.ts:4:39:
      4 │ import slint_init, * as slint_lsp from "../out/slint_lsp_wasm.js";
        ╵                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~

so this works now:

import {
    PropertiesView,
    SetBindingResponse,
} from "../../../tools/slintpad/src/shared/properties";

const vscode = acquireVsCodeApi();

[ji-podhead]

i accidentaly deleted that file, so now i just get:

> slint@1.5.0 compile
> node ./esbuild.js

▲ [WARNING] "import.meta" is not available with the "iife" output format and will be empty [empty-import-meta]

    out/slint_lsp_wasm.js:2299:50:
      2299 │         input = new URL('slint_lsp_wasm_bg.wasm', import.meta.url);
           ╵                                                   ~~~~~~~~~~~

  You need to set the output format to "esm" for "import.meta" to work correctly.

but when i hit f5 ill get the same errors like vscode marks up via intellisense:

[22:09:28] Starting compilation in watch mode...

node_modules/vscode-jsonrpc/lib/browser/main.d.ts:6:46 - error TS2304: Cannot find name 'DedicatedWorkerGlobalScope'.

6     constructor(port: MessagePort | Worker | DedicatedWorkerGlobalScope);
                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vscode-jsonrpc/lib/browser/main.d.ts:12:46 - error TS2304: Cannot find name 'DedicatedWorkerGlobalScope'.

12     constructor(port: MessagePort | Worker | DedicatedWorkerGlobalScope);
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~

src/browser-lsp-worker.ts:5:8 - error TS1192: Module '"/kubyplexer/slint_web/vs-extension/editors/vscode/out/slint_lsp_wasm_bg.wasm"' has no default export.

5 import slint_wasm_data from "../out/slint_lsp_wasm_bg.wasm";
         ~~~~~~~~~~~~~~~

src/propertiesView.ts:11:16 - error TS2304: Cannot find name 'acquireVsCodeApi'.

11 const vscode = acquireVsCodeApi();
                  ~~~~~~~~~~~~~~~~

src/propertiesView.ts:50:44 - error TS7006: Parameter 'resolve' implicitly has an 'any' type.

50     function wait_for_set_binding_response(resolve, reject) {
                                              ~~~~~~~

src/propertiesView.ts:50:53 - error TS7006: Parameter 'reject' implicitly has an 'any' type.

50     function wait_for_set_binding_response(resolve, reject) {
                                                       ~~~~~~

src/propertiesView.ts:60:52 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

60                 wait_for_set_binding_response.bind(this, resolve, reject),
                                                      ~~~~

src/properties_webview.ts:11:8 - error TS6059: File '/kubyplexer/slint_web/vs-extension/tools/slintpad/src/shared/properties.ts' is not under 'rootDir' '/kubyplexer/slint_web/vs-extension/editors/vscode/src'. 'rootDir' is expected to contain all source files.
  The file is in the program because:
    Imported via "../../../tools/slintpad/src/shared/properties" from file '/kubyplexer/slint_web/vs-extension/editors/vscode/src/properties_webview.ts'
    Imported via "./properties" from file '/kubyplexer/slint_web/vs-extension/tools/slintpad/src/shared/lsp_commands.ts'
    Imported via "../../../tools/slintpad/src/shared/properties" from file '/kubyplexer/slint_web/vs-extension/editors/vscode/src/propertiesView.ts'

11 } from "../../../tools/slintpad/src/shared/properties";
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  ../../tools/slintpad/src/shared/lsp_commands.ts:4:51
    4 import { PropertyQuery, SetBindingResponse } from "./properties";
                                                        ~~~~~~~~~~~~~~
    File is included via import here.
  src/propertiesView.ts:9:8
    9 } from "../../../tools/slintpad/src/shared/properties";
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is included via import here.

src/properties_webview.ts:12:31 - error TS6059: File '/kubyplexer/slint_web/vs-extension/tools/slintpad/src/shared/lsp_commands.ts' is not under 'rootDir' '/kubyplexer/slint_web/vs-extension/editors/vscode/src'. 'rootDir' is expected to contain all source files.
  The file is in the program because:
    Imported via "../../../tools/slintpad/src/shared/lsp_commands" from file '/kubyplexer/slint_web/vs-extension/editors/vscode/src/properties_webview.ts'
    Imported via "../../../tools/slintpad/src/shared/lsp_commands" from file '/kubyplexer/slint_web/vs-extension/editors/vscode/src/common.ts'

12 import * as lsp_commands from "../../../tools/slintpad/src/shared/lsp_commands";
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/common.ts:12:31
    12 import * as lsp_commands from "../../../tools/slintpad/src/shared/lsp_commands";
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is included via import here.

src/properties_webview.ts:72:72 - error TS2345: Argument of type 'undefined' is not assignable to parameter of type 'Range'.

72                             vscode.window.activeTextEditor.revealRange(range);
                                                                          ~~~~~

src/properties_webview.ts:74:54 - error TS18048: 'range' is possibly 'undefined'.

74                                 new vscode.Selection(range.start, range.end);
                                                        ~~~~~

src/properties_webview.ts:74:67 - error TS18048: 'range' is possibly 'undefined'.

74                                 new vscode.Selection(range.start, range.end);
                                                                     ~~~~~

../../tools/slintpad/src/shared/lsp_commands.ts:12:8 - error TS2307: Cannot find module 'vscode-languageserver-types' or its corresponding type declarations.

12 } from "vscode-languageserver-types";
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../tools/slintpad/src/shared/properties.ts:10:8 - error TS2307: Cannot find module 'vscode-languageserver-types' or its corresponding type declarations.

10 } from "vscode-languageserver-types";
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[22:09:35] Found 14 errors. Watching for file changes.

i dont get any errors from the extension window any more, but its not working either

[ji-podhead]

ok i pulled again and did exactly like it was stated in the readme, but now i get another error when i want to buil wasm:lsp:

[ji@controllplane vscode]$ cargo build -p slint-lsp
   Compiling i-slint-compiler v1.5.0 (/kubyplexer/slint web 2/slint-master/internal/compiler)
warning: i-slint-backend-qt@1.5.0: Could not find a Qt installation. The Qt backend will not be functional. See https://github.com/slint-ui/slint/blob/master/docs/install_qt.md for more info
warning: i-slint-backend-qt@1.5.0:     Failed to execute qmake. Make sure \'qmake\' is in your path!\nentity not found
   Compiling slint-interpreter v1.5.0 (/kubyplexer/slint web 2/slint-master/internal/interpreter)
   Compiling slint-build v1.5.0 (/kubyplexer/slint web 2/slint-master/api/rs/build)
   Compiling slint-macros v1.5.0 (/kubyplexer/slint web 2/slint-master/api/rs/macros)
   Compiling slint-lsp v1.5.0 (/kubyplexer/slint web 2/slint-master/tools/lsp)
   Compiling slint v1.5.0 (/kubyplexer/slint web 2/slint-master/api/rs/slint)
    Finished dev [unoptimized + debuginfo] target(s) in 59.71s
[ji@controllplane vscode]$ npm install

up to date, audited 354 packages in 1s

67 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[ji@controllplane vscode]$ npm run build:wasm_lsp

> slint@1.5.0 build:wasm_lsp
> env-var wasm-pack build --dev     --target web ../../tools/lsp --out-dir {{npm_config_local_prefix}}/out -- --no-default-features --features backend-winit,renderer-femtovg,preview

[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
error: unexpected argument 'web' found

Usage: cargo build [OPTIONS]

For more information, try '--help'.
Error: Compiling your crate to WebAssembly failed
Caused by: Compiling your crate to WebAssembly failed
Caused by: failed to execute `cargo build`: exited with exit status: 1
  full command: cd "../../tools/lsp" && "cargo" "build" "--lib" "--target" "wasm32-unknown-unknown" "web" "2/slint-master/editors/vscode/out" "--" "--no-default-features" "--features" "backend-winit,renderer-femtovg,preview"

i just dont know what to do any more. i get so many errors. what ever i try, it results in chains of errors. can somebody pls help me? i try to get this running since at least 8h and its super hard for me to go trough all that code and its lacking a little bit of documentation (by all means this should not sound offensive)

[ji-podhead]

i think ill try to use the "transpiled" js files and anything that is needed besides the ts files to create another extension from it using vanilla js. later ill convert that back to ts. :(

[tronical]

error: unexpected argument 'web' found

I suspect that somehow this is where the root cause lies. Could you paste the output of wasm-pack --version?

[ogoffart]

I'm sorry but I'm not understanding what this issue is about.

Building the extension should work out of the box following the instructions from the Readme

Of course if you change the dependencies you may need to adjust a few things.

But that unexpected argument 'web' found is indeed strange I've never seen that before, not sure why wasm-pack pass this option to cargo build.

But I don't think this is a bug in our stack. So I'm going to close this issue as this is not actionable for us. But we can continue discussion about your extension in https://github.com/slint-ui/slint/discussions/4728

[ji-podhead]

@ogoffart the target web is for the following:

"Outputs JS that can be natively imported as an ES module in a browser, but the WebAssembly must be manually instantiated and loaded. "

see wasm-pack-api

according to your source code you have used that to implement the wasm file in your vscode extension in the vscode webview part. if it was not bundled with webpack, but i cant recall that. but anyway i created a new vscode project and followed the instructions from the readme just like quoted in my previous statements

[ji-podhead]

some possible reasons: It might differ from the version described in the documentation. The documentation could have been updated to reflect the current behavior, while your version of wasm-pack might still implement the old behavior.

Configuration file: There could be a configuration file or environment variable that sets the target to web. wasm-pack could use this configuration instead of the default behavior when no target is specified.

Error in the documentation: It's also possible that it's an error in the documentation. However, this is less likely, as the documentation of wasm-pack is maintained by the community and changes are usually reviewed.

---

HOWEVER: If you clone a new project from a GitHub repository and follow the instructions exactly, without making any changes to the configuration, you should not encounter any errors due to configuration files or environment variables.

[ogoffart]

HOWEVER: If you clone a new project from a GitHub repository and follow the instructions exactly, without making any changes to the configuration, you should not encounter any errors due to configuration files or environment variables.

That's correct. Can you please tell us which error you encountered?

As I said, you should be able to build the vscode extension by following the instructions in the Readme , and there should not be any errors.

[ogoffart]

Just to be sure, i'm talking about these instruction:

cd editors/vscode
npm install
npm run build:wasm_lsp
npm run compile

Which one of the commend is failing and with what errors?