Locally scoped JSX + non-wildcard import doesn't work

[marvinhagemeister]

TypeScript Version: 2.9.0-dev.20180428

Search Terms: jsx, jsxfactory

Code

Over at preact we are currently trying out the new feature of locally scoped JSX namespaces.

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
  }
}

// This is how most of our users use preact with TS
import { h, Component } from "preact";

export class Foo extends Component {
  render() {
    // <div> has type `any`
    return <div>hey</div>;
  }
}

Slightly rewriting our example we can get this to work:

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "preact.h",
  }
}

import * as preact from "preact";

export class Foo extends preact.Component {
  render() {
    // <div> now has correct type
    return <div>hey</div>;
  }
}

But that does seem unnecessary.

Expected behavior:

Type of <div> is inferred from the JSX namespace when using jsxFactory: h and import { h } from "preact"

Actual behavior:

<div> is typed as any.

Playground Link:
N/A

Related Issues:

[weswigham]

The jsx namespace is relative to the root identifier of the factory... So if the factory is a bare h, the namespace should be under the h function itself. If the factory is preact.h, then you can place it within preact. If the intent is that your users import/reference your factory with no qualifier, then the namespace should be under the function (and I suppose if you want to be flexible you can alias it elsewhere).

[marvinhagemeister]

@weswigham Thanks four your quick response, that sounds reasonable 👍 Seems like using wildcards is the way to go.

[weswigham]

You should probably just move your namespace if you want "jsxFactory": "h" to work. Namely, move it to

export function h(/*...*/): h.JSX.Element;
export namespace h {
    export namespace JSX {
        export interface Element {}
    }
}

You can probably also get away with being flexible and making it work in both ways (ie, with either factory style) with something like

namespace JSXInternal {
    export interface Element {}
}
export { JSXInternal as JSX };
export function h(): JSXInternal.Element;
export namespace h {
    export import JSX = JSXInternal;
}