Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: methods non decorated are available on React component #417

Open
3 tasks done
dpellier opened this issue Feb 7, 2024 · 2 comments
Open
3 tasks done

bug: methods non decorated are available on React component #417

dpellier opened this issue Feb 7, 2024 · 2 comments
Labels
help wanted a good issue for the community package: react @stencil/react-output-target package type: bug Something isn't working

Comments

@dpellier
Copy link

dpellier commented Feb 7, 2024

Prerequisites

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

@ionitron-bot ionitron-bot bot added the triage label Feb 7, 2024
Copy link

ionitron-bot bot commented Feb 7, 2024

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

@christian-bromann christian-bromann added type: bug Something isn't working package: react @stencil/react-output-target package help wanted a good issue for the community and removed triage labels Oct 12, 2024
Copy link

ionitron-bot bot commented Oct 12, 2024

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted a good issue for the community package: react @stencil/react-output-target package type: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants