melkam•4d ago

Unable to target browser and deno with unstable features in typescript `compilerOptions.lib`

Hi. I followed the guide from docs to include libs for dom api and deno unstable features in the same environment. But it doesn't work for me. I added this to deno.json:

{
    "unstable": ["webgpu"],
    "compilerOptions": {
        "lib": [
            "dom",
            "dom.iterable",
            "dom.asynciterable",
            "deno.ns",
            "deno.unstable"
        ],
    },
}

{
    "unstable": ["webgpu"],
    "compilerOptions": {
        "lib": [
            "dom",
            "dom.iterable",
            "dom.asynciterable",
            "deno.ns",
            "deno.unstable"
        ],
    },
}

In my case I wanted to use webgpu api and render it on dom canvas

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
// no errors for dom api

const adapter = await navigator.gpu.requestAdapter();
                                ^^^
Property 'gpu' does not exist on type 'Navigator'.

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
// no errors for dom api

const adapter = await navigator.gpu.requestAdapter();
                                ^^^
Property 'gpu' does not exist on type 'Navigator'.

If I don't specify lib property in compilerOptions, I can access the navigator.gpu, but then I can't use dom api. Based on the docs the configuration above should allow for both api, but it doesn't work for me.

Deno

Configuring TypeScript

In-depth documentation, guides, and reference materials for building secure, high-performance JavaScript and TypeScript applications with Deno

8 Replies

Doctor 🤖•4d ago

navigator.gpu doesn't have enough compatibility in the browser space to be included under the dom libs in TypeScript. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/gpu#browser_compatibility

MDN Web Docs

Navigator: gpu property - Web APIs | MDN

The Navigator.gpu read-only property returns the GPU object for the current browsing context, which is the entry point for the WebGPU API.

melkamOP•4d ago

yes, I know that. This is why I wanted to use ["deno.unstable"] lib that should provide access to such type definitions

Doctor 🤖•4d ago

I'm pretty sure that just provides access to the unstable APIs in the Deno namespace Like Deno.cron and kv I think you'll just have to cast it to type any and do it without types (navigator as any).gpu

melkamOP•4d ago

hmm, okey. I thought that, as it is an unstable feature, its types are also included in this "deno.unstable" library. If I don't specify anything in the "lib" option, I have all definitions for webgpu types. But the time I add anything to the "lib" options, I lose them.

Doctor 🤖•4d ago

When the lib option is empty deno.window is used which does have the .gpu since Deno supports it

melkamOP•4d ago

ahh, okey. Thanks. Then it seems like the only way would be to manually include types from npm "@webgpu/types" because "deno.window" would conflict with "dom" apis

Doctor 🤖•4d ago

I think just casting it to type any would be easiest but you do you I have to do a similar thing with ArrayBuffer.transfer until Deno updates the TypeScript version to 5.7

melkamOP•4d ago

webgpu has lots of apis, classes, functions etc. That's would be really hard to use if I don't have any type definitions. If this would be the only place I need to cast, then yes, I agree that it would be easier solution anyway, thanks for helping