Typings not valid in React/Typescript app #693
Description
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: