Typings not valid in React/Typescript app

[hartjus]

Stencil version:

 @stencil/core@0.7.12

I'm submitting a:

[ ] bug report
[ ] feature request
[X] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
I'm trying to integrate my Stencil components into a React/TypeScript project (as a 3rd party dependency). It appears that the custom elements are implemented in a way that does not match the d.ts that is produced by the stencil build. Is there a way to reference the d.ts version and not the raw HTML?

Also, what is the correct way to "Listen" to Events from a stencil built component in a React/TypeScript template? There seems to be a lot of boiler-plate involved.

(Code below)

Expected behavior:
If I'm importing a component into a React/Typescript project, I would expect to interact with the component via the d.ts, and not the raw HTML. Also, I would expect the event binding to be per the interface and docs, not registering and eventListener.

Related code:

hello-world.tsx

import {Component, Prop, Event, EventEmitter} from '@stencil/core';

@Component({
    tag: 'hello-world'
})
export class HelloWorld {

    @Prop() name: string = 'world';

    @Event() helloWorldName: EventEmitter;

    onButtonClick = () => {
        this.helloWorldName.emit(this.name);
    }

    render() {
        return(
            <div class="hello-world">
                <p>Hello, {this.name}!</p>
                <p><button type="button" onClick={this.onButtonClick}>Click me!</button></p>
            </div>
        );
    }
}

Components.d.ts

namespace JSXElements {
    export interface HelloWorldAttributes extends HTMLAttributes {
      'name'?: string;
      'onHelloWorldName'?: (event: CustomEvent) => void;
    }
  }

React/Typescript/TSX - App.tsx

class App extends React.Component {
    hw: HTMLElement;

    public componentDidMount() {
        this.hw.addEventListener('helloWorldName', this.onHelloWorld);
    }

    public componentWillUnmount() {
        this.hw.removeEventListener('helloWorldName', this.onHelloWorld);
    }

    render() {
        return(
           <div>
               <hello-world
                            name="NAME"
                            ref={(elem: HTMLElement) => this.hw = elem}
                        />
           </div>
        );
    }
}

I would expect that I would call the component like this from the React/TSX:
<hello-world name="NAME" onHelloWorldName={this.someMethod} />

Other information:

[jthoms1]

Could you provide an example repo that reproduces this issue? I realize that most likely the code involved is provided above and at first glance it looks fine, so I believe that a simple reproduction in a small repo would help a lot. Thanks!

[hartjus]

@jthoms1 OK, I've created two repos:

1. for the stencil component. https://github.com/hartjus/stencil-hello-world . Created using the stencil-component starter project.
2. For the react/tsx app that consumes the stencil component. https://github.com/hartjus/react-tsx-stencil. Created via create-react-app: create-react-app react-ts-app --scripts-version=react-scripts-ts

In the react/tsx app, pay attention to the App.tsx file. The components.d.ts that is produced is not properly consumable from the TSX--Camel case vs kebab-case, ref not provided. Additionally, the Event output has to be manually registered as this does not happen when the TSX is compiled (is this expected?).

Note: I had to shim the component into the node_modules via the postinstall task.

Thanks in advance for your help! Let me know if I can provide you any additional info!

[jthoms1]

In the coming weeks I will be spending more time on getting React to play nice with Web components produced by Stencil. I created a simple shim early on in the project that should still work.
https://github.com/ionic-team/ionic-react-conference-app/blob/master/src/utils/stencil.js

There are a number of known issues with React and web components and my shim was to work around those issues. There is an open RFC for web components in react but seems not to be moving very fast. reactjs/rfcs#15

[hartjus]

@jthoms1 Thanks for the shim, I'll check it out! Didn't realize the problem was larger than stencil, but this makes sense. Any guidance/docs stencil can provide on integrating with React/Typescript would be really helpful. Really appreciate your help on this issue!

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!