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.

Sign up for GitHub

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

Jump to bottom

bug: property casing in runtime vs SSR #6150

Closed
3 tasks done
christian-bromann opened this issue Feb 10, 2025 · 1 comment · Fixed by #6158
Closed
3 tasks done

bug: property casing in runtime vs SSR #6150

christian-bromann opened this issue Feb 10, 2025 · 1 comment · Fixed by #6158
Assignees
@christian-bromann

Comments

@christian-bromann
Copy link
Member

Prerequisites

Stencil Version

latest

Current Behavior

When defining component properties in Stencil, there is currently a discrepancy between how Stencil reads property names during runtime and hydration.

Given the following component:

// my-component.tsx
import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() firstName: string;

  /**
   * The middle name
   */
  @Prop() middleName: string;

  /**
   * The last name
   */
  @Prop() lastName: string;

  private getText(): string {
    return format(this.firstName, this.middleName, this.lastName);
  }

  render() {
    return <div>Hello, World! I'm {this.getText()}</div>;
  }
}

and

// stencil-component.tsx
import { Component, h } from '@stencil/core';

@Component({
  tag: 'stencil-component',
  shadow: true,
})
export class StencilComponent {
  render() {
    return <div>
      <code>
        &#x3C;my-component firstName=&#x22;Stencil&#x22; middleName=&#x22;&#x27;Don&#x27;t call me a framework&#x27;&#x22; lastName=&#x22;JS&#x22;&#x3E;&#x3C;/MyComponent&#x3E;
      </code>
      <my-component firstName="Stencil" middleName="'Don't call me a framework'" lastName="JS"></my-component>
      <hr />

      <code>
        &#x3C;my-component first-name=&#x22;Stencil&#x22; middle-name=&#x22;&#x27;Don&#x27;t call me a framework&#x27;&#x22; last-name=&#x22;JS&#x22;&#x3E;&#x3C;/my-component&#x3E;
      </code>
      <my-component first-name="Stencil" middle-name="'Don't call me a framework'" last-name="JS"></my-component>
    </div>
  }
}

Now if you render the following HTML template:

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/propscal.esm.js"></script>
    <script nomodule src="/build/propscal.js"></script>
  </head>
  <body>
    <code>
      &#x3C;my-component firstName=&#x22;Stencil&#x22; middleName=&#x22;&#x27;Don&#x27;t call me a framework&#x27;&#x22; lastName=&#x22;JS&#x22;&#x3E;&#x3C;/my-component&#x3E;
    </code>
    <my-component firstName="Stencil" middleName="'Don't call me a framework'" lastName="JS"></my-component>
    <hr>

    <code>
      &#x3C;my-component first-name=&#x22;Stencil&#x22; middle-name=&#x22;&#x27;Don&#x27;t call me a framework&#x27;&#x22; last-name=&#x22;JS&#x22;&#x3E;&#x3C;/my-component&#x3E;
    </code>
    <my-component first-name="Stencil" middle-name="'Don't call me a framework'" last-name="JS"></my-component>

    <hr>
    <hr>
    <stencil-component />
  </body>
</html>

You receive the following output:

Image

However, if you hydrate the template, you receive:

Image

Note the differences: first-name and other properties are not recognised when rendered in a JSX context.

Expected Behavior

The behavior should be the same across runtime and hydrate mode.

System Info

n/a

Steps to Reproduce

https://github.com/christian-bromann/stencil-case-repro

Code Reproduction URL

n/a

Additional Information

n.a
@christian-bromann christian-bromann self-assigned this Feb 10, 2025
@ionitron-bot ionitron-bot bot added the triage label Feb 10, 2025
@christian-bromann christian-bromann mentioned this issue Feb 14, 2025
Merged
2 tasks
@christian-bromann
Copy link
Member Author

A fix has been shipped in Stencil v4.27.0

This was referenced Feb 28, 2025
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@christian-bromann christian-bromann

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(hydrate): support dash-case case in hydrate mode stenciljs/core
1 participant
@christian-bromann