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/-/[email protected]/dist=es2020,mode=imports/optimized/preact.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/src/index.d.ts
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/src/jsx.d.ts
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/preact-render-to-string.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/src/index.d.ts
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/preact.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/index.d.ts
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/src/index.d.ts
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=types/src/jsx.d.ts
Check file:///app/deps.ts

Notably, the last file downloaded https://cdn.skypack.dev/-/[email protected]/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/[email protected]/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/[email protected]/mod.js uses different typings. The typings that are served by Skypack do not work in Deno (they rely on namespace augmentation).

[tbremer]

Thanks for the response! I looked over your types, but only briefly and did not realize there was a difference.

[tbremer]

FWIW, I opened an issue with Preact to see if we can get this resolved.

preactjs/preact#3075

[aadamsx]

@tbremer I was just today researching/considering using Preact for my next Deno project and came across this post. Are you unable to actually use Preact with Deno? From your starting post it seems you can't even do a simple render in Deno.

Maybe Nanojsx is a better solution at the moment (it supports Deno out of the box)? https://nanojsx.github.io/

[kitsonk]

but as far as I know Deno does not allow/put anything in the global namespace

No, it does... It is just that ambient declarations are unpredictable, because Deno may not seem them, because it does not automatically acquire .d.ts files and treats everything as a module... If it is a UMD declaration that does a declare global then it should be fine.

@marvinhagemeister I suspect @lucacasonato or myself would be glad to try to help. I will try to find a time to take a look and suggest something that would work for Deno and hopefully everyone else.

[marvinhagemeister]

@kitsonk That's great to hear! I'd really love to make the Preact + Deno experience as smooth as possible. I'm unsure where to start debugging this. With node I'll usually just mess with files in node_modules directly and fire up the tsc compiler again.

Fun fact: We're currently working on improving our server rendering performance and one of the test cases is coincidently the deno docs as they are a good benchmark for that!

[tbremer]

No, it does... It is just that ambient declarations are unpredictable, because Deno may not seem them, because it does not automatically acquire .d.ts files and treats everything as a module... If it is a UMD declaration that does a declare global then it should be fine.

thanks for clarifying!

[tbremer]

@marvinhagemeister, @kitsonk please let me know if there is some way I can help!