Open
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
4.12
Stencil Framework Output Target
React
Stencil Framework Output Target Version
0.5.3
Current Behavior
As described in the Stencil documentation: The @Method() decorator is used to expose methods on the public API.
This works as expected for vanilla component, but the React output ones can access any methods regarding of the presence of the decorator.
Expected Behavior
Non decorated methods should not be accessible from the React component.
Steps to Reproduce
Given a simple component:
@Component({
shadow: true,
tag: 'my-text',
})
export class MyText {
@Prop({ reflect: true }) text?: string;
@Method()
async publicFormatText(text?: string): Promise<string> {
return text || 'nothing'
}
private privateFormatText(text?: string): string {
return text || 'nothing'
}
render(): JSX.Element {
return (
<Host>
<p>{ this.formatText(this.text) }</p>
</Host>
);
}
}
When using as vanilla component:
document.querySelector('my-text').publicFormatText(....) // => call the method => OK
document.querySelector('my-text').privateFormatText(....) // => function does not exists => OK
But as React ref:
// using ref
const textRef = useRef(null);
// render
<OdsText ref={ textRef }
text="Welcome" />
// calls
textRef.current?.publicFormatText() // => call the method => OK
textRef.current?.privateFormatText() // => call the method => KO => this should not be possible
Code Reproduction URL
https://github.com/dpellier/stencil-react-issue/tree/main
Additional Information
No response