How to extend solid JSX.IntrinsicElements namespace for custom web components?

[Akiyamka]

As far as I can see solid.js allows me to use web components directly in the jsx template. In runtime in works fine, but typescript says there is an error property 'map-gl' does not exist on type 'JSX.IntrinsicElements.
According to the typescript documentation it can be fixed pretty easy (playground with solution demo). But if I do it in the project with solidjs it doesn't help.

According to logs from ts language server it use /node_modules/.pnpm/solid-js@1.4.7/node_modules/solid-js/types/jsx.d.ts definitions

Info 334  [18:34:22.350] request:
    {
      "seq": 45,
      "type": "request",
      "command": "geterr",
      "arguments": {
        "delay": 0,
        "files": [
          ".../src/map.tsx",
          ".../src/main-page.tsx",
          ".../node_modules/.pnpm/solid-js@1.4.7/node_modules/solid-js/types/jsx.d.ts",
          ".../index.d.ts"
        ]
      }
    }

If I add my custom component in solidjs definitions - ts finally happy

The thing I can't figure out is why I can't extend the solid.js JSX namespace, and how should custom components in project with solid js

[ryansolid]

We don't pollute the global TypeScript namespace with our JSX definition. While there isn't a custom elements example it should be roughly the same: https://www.solidjs.com/guides/typescript#special-jsx-attributes-and-directives. Notice module "solid-js" and you may need to import JSX from "solid-js" as well.

[Akiyamka]

@ryansolid thank you! Next code in index.d.ts cover my case! Import of JSX from solid-js not required

declare global {
  declare module "solid-js" {
    namespace JSX {
      interface IntrinsicElements { 
        'map-gl': MapGlProps;
      }
    }
  }
}

[3xau1o]

Ambient modules cannot be nested in other modules or namespaces.ts(2435)

Fixed by referencing w triple slash

[jwarkentin]

In case anyone else gets stuck, this took me way too long to figure out so I'll share here. Kudos @Akiyamka for figuring that out and putting me on the right track after a frustrating couple of days searching and failing. I was trying to get it to recognize the web components in the mdui library in SolidJS. Here's what ultimately worked for me:

In global.d.ts:

import "mdui/jsx.en";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {}
  }
}