Skypack, Preact, JSX Intrinsic Elements.

[tbremer]

I have read through a couple of issues related to this, but not one that directly gives a solution.

I have a project where I was wanting to use Preact, my deps.ts looks like this:

import * as preactRenderToString from "https://cdn.skypack.dev/preact-render-to-string?dts";
const { render } = preactRenderToString;

import * as preact from "https://cdn.skypack.dev/preact?dts";
export { preact, render };

As I was using Preact, which has a different jsx factory, I had to use a custom tsconfig.json. It looks like this:

{
    "compilerOptions": {
        "lib": ["esnext", "dom", "deno.ns"],
        "jsx": "react",
        "jsxFactory": "h",
        "jsxFragmentFactory": "Fragment"
    }
}

Skypack resolves modules with type definitions using their ?dts query paramter. If I reload the cache I can see the *.d.ts files being fetched:

$ deno cache --reload --config tsconfig.json deps.ts 
Download https://cdn.skypack.dev/preact-render-to-string?dts
Download https://cdn.skypack.dev/preact?dts
Download https://cdn.skypack.dev/-/preact@v10.5.13-YBEbAK5M5p0s1c9aovEb/dist=es2020,mode=imports/optimized/preact.js
Download https://cdn.skypack.dev/-/preact@v10.5.13-YBEbAK5M5p0s1c9aovEb/dist=es2020,mode=types/src/index.d.ts
Download https://cdn.skypack.dev/-/preact@v10.5.13-YBEbAK5M5p0s1c9aovEb/dist=es2020,mode=types/src/jsx.d.ts
Download https://cdn.skypack.dev/-/preact-render-to-string@v5.1.16-OpLkEM3eRx574UMXNSoo/dist=es2020,mode=imports/optimized/preact-render-to-string.js
Download https://cdn.skypack.dev/-/preact-render-to-string@v5.1.16-OpLkEM3eRx574UMXNSoo/dist=es2020,mode=types/src/index.d.ts
Download https://cdn.skypack.dev/-/preact@v10.5.13-V3GjhSMJg71SAoQzY34u/dist=es2020,mode=imports/optimized/preact.js
Download https://cdn.skypack.dev/-/preact@v10.5.13-V3GjhSMJg71SAoQzY34u/dist=es2020,mode=types/index.d.ts
Download https://cdn.skypack.dev/-/preact@v10.5.13-V3GjhSMJg71SAoQzY34u/dist=es2020,mode=types/src/index.d.ts
Download https://cdn.skypack.dev/-/preact@v10.5.13-V3GjhSMJg71SAoQzY34u/dist=es2020,mode=types/src/jsx.d.ts
Check file:///app/deps.ts

Notably, the last file downloaded https://cdn.skypack.dev/-/preact@v10.5.13-V3GjhSMJg71SAoQzY34u/dist=es2020,mode=types/src/jsx.d.ts contains the JSX namespace that I am having an issue with.

Whenever I actually use jsx within the code:

import { render, preact } from "./deps.ts";
const { h } = preact;

console.log(render(<h1>hello, world!</h1>));

I am returned an error about the JSX namespace:

TS7026 [ERROR]: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
  return <h1>Hello, world!</h1>;

The Deno docs (https://deno.land/manual@v1.8.1/typescript/types#type-declaration-semantics) aren't clear, outside of suggesting Skypack.

Is there a solution outside of hosting the module directly like @lucacasonato did for dext.ts?

[lucacasonato]

https://x.lcas.dev/preact@10.5.11/mod.js uses different typings. The typings that are served by Skypack do not work in Deno (they rely on namespace augmentation).