bug: Preact typing doesn't work if using non-legacy TypeScript moduleResolution

[maxpatiiuk]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Calcite provides typings for Preact.
However, these work only if using legacy TypeScript moduleResolution setting "Node"

Expected Behavior

Using modern moduleResolution like "Node16" or "Bundler" should work.
Without this, you can't use the package.json's "exports" field

Reproduction Sample

https://github.com/Esri/calcite-components-examples/tree/main/preact-typescript

Reproduction Steps

1. Clone this folder: https://github.com/Esri/calcite-components-examples/tree/main/preact-typescript

2. In tsconfig on this line, replace the legacy module resolution with a modern one:

   -     "moduleResolution": "Node",
   +     "moduleResolution": "Node16", // or "Bundler"

3. See error anywhere where calcite elements are used in JSX

   Property 'calcite-icon' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

Reproduction Version

2.8.5

Relevant Info

The issue is likely because the preact typings generated by Calcite reference a "preact/src/jsx" file which is not included in Preact's package.json's "exports" field:

calcite-design-system/packages/calcite-components/support/preact.ts

Line 26 in 9b4c3ee

declare module "preact/src/jsx" {

Note, because of TypeScript limitation, this might be not possible to solve without opening a PR in Preact to add this to their package.json's exports:

    "./src/jsx": { "types": "./src/jsx.d.ts" },

With the above line, Calcite's typings seem to work again

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

I tried to add Preact typings to arcgis-web-components, but faced an issue.
When I looked at how typings work in Calcite, I noticed that Calcite's Preact typings don't work with newer TypeScript module resolution setting.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[maxpatiiuk]

As per preactjs/preact#1180 (comment), changing the preact.d.ts that Calcite generates like so appears to work both with the legacy and the new moduleResolution strategy:

- import { JSXInternal } from "preact/src/jsx"; 
- import { JSX } from "./components";
+ import { JSX as JSXInternal } from "preact";
+ import { JSX as CalciteJsx } from "./components";

- declare module "preact/src/jsx" {
-   namespace JSXInternal {
+ declare module 'preact' {
+   namespace createElement.JSX extends JSXInternal.IntrinsicElements {

This seems to work because new versions of TypeScript look at the jsx factory function to resolve the JSX namespace

In addition:

• Rename usages of JSX.Calcite* in the file with CalciteJsx.Calcite*)
• Duplicate the contents of namespace createElement.JSX extends JSXInternal.IntrinsicElements { ... } and call it namespace h.JSX extends JSXInternal.IntrinsicElements { ... } so that typing works both for people using "jsxFactory": "h" and "jsxFactory": "createElement"`

@paulcpederson Since you worked on the original Calcite types for Preact, could you please verify if the above fix looks good and if so if it can be integrated into the preact.d.ts that Calcite ships?

[geospatialem]

Spike to determine if the breaking change release mitigates the above.

[maxpatiiuk]

Note, this issue will be fixed automatically upon migration to Lit, thus you could delay addressing it until then.

[jcfranco]

Blocked by #10310.

[github-actions]

Issue #10310 has been closed, this issue is ready for re-evaluation.

cc @geospatialem,@DitwanP