Inferno: Inferno in tsx files

[isergey]

How to use Inferno with Typescript? Typescript compile to React.createElement(AnyComponent...). Is is possible tell to TS compile as Inferno.createElement(AnyComponent...)?
Thanks a lot!

[trueadm]

@isergey No, due to limitations in Typescript (for now), there's no way to tell it to use a custom JSX parser, as we create and handle JSX differently from the default React version. How the Inferno team have dealt with this, is to ensure JSX remains as is (not compiled by Typescript) and then to use Babel to compile the JSX to ES5/ES6. I hope that helps!

[dchest]

FYI, there's jsxFactory compiler option coming in TypeScript 2.1 (currently available in typescript@next) https://github.com/Microsoft/TypeScript/pull/12135

Here's an example from my experiment:

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false,
        "target": "es5",
        "moduleResolution": "node",
        "jsx": "react",
        "jsxFactory": "createElement"
        // ...
   }
}

Button.tsx:

import * as createElement from 'inferno-create-element';
import * as Component from 'inferno-component';

class Button extends Component<{}, {}> {
  render() {
    return (
      <button>It's a button!</button>
    );
  }
}

export default Button;

This requires modified typings, though (https://github.com/trueadm/inferno/issues/505#issuecomment-264607274):

node_modules/inferno/index.d.ts:

declare module 'inferno-component' {
    class Component<P, C> {
        refs?: any;
        state?: any;
        props?: P;
        context?: C;
        _unmounted?: boolean;
        constructor (props?: P, context?: C);
        componentWillReact();
        componentWillReceiveProps? (nextProps: P, nextContext: C): void;
        forceUpdate (): void;
        setState (v: Object, cb?: () => {}): boolean;
        isPrototypeOf (v: Object): void;
    }
    export = Component;
    namespace Component {}
}

declare module 'inferno-create-element' {
    function createElement(component: any, props: any, ...children): any;
    namespace createElement {}
    export = createElement;
}

[marvinhagemeister]

Man the typescript guys do ship amazing features lately! I'm really impressed by them!

@dchest would you love to take on a PR? Otherwise I can do it the following days.

[dchest]

@marvinhagemeister I'd leave it to you, as I'm afraid I'm confused with all this type declaration stuff, need to learn it properly first ;)

[trueadm]

I'm happy to take a PR for these changes against dev. I'll be honest – I'm super overloaded right now with this project + job + family so any help would be amazing. If you guys could make sure you're on the Inferno Slack too, so we can all properly communicate that would be great. https://inferno-slack.herokuapp.com/

[trueadm]

Let's add this to the 1.0 post roadmap @Havunen @nightwolfz @lukeed @LukeSheard

[osdevisnot]

@dchest it seems jsxFactory compiler option is now available in TS stable. Is there any example of using it with inferno? When trying here, unfortunately I am getting this error in browser:

[Havunen]

What is that JSX factory how does it know how to create vNodes from JSX?

[Havunen]

Just wondering because... We have our babel plugin that compiles JSX into createVNodes

[dchest]

@osdevisnot perhaps, this is because the imports are incorrect? Check how they've done in my comment.

[osdevisnot]

@dchest unfortunately no. When I switch the import style to match your comment, the TS compiler spits out this error:

[michaelwilcox]

hey, in case anyone stumbled here looking to get inferno working with rollup and typescript, I have a really simple setup started here: https://github.com/mjw56/inferno-ts-rollup

improvements are welcome! maybe we could have some sort of a semi-official example somewhere?