bug: Prop() is mutable despite what it says in the docs

Đang mở
  • Có gì không ổn?
#6,006 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu bằng việc tái hiện trong src/components/my-component/my-component.tsx, sau đó chạy npm start và lặp lại các bước mutation đã được ghi lại trong một component đã build. So sánh cảnh báo khi phát triển với hành vi trong consumer Vue/Angular/HTML được mô tả trong issue. Để được xem là hoàn tất, cần giải quyết sự khác biệt giữa hành vi được ghi lại và hành vi thực tế của tính mutable của Prop, đồng thời bao phủ hành vi được chọn bằng một regression test.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Resolution: Refine
Prerequisites
Stencil Version

4.21.0

Current Behavior

The documentation at https://stenciljs.com/docs/properties#mutability says:

A Prop is by default immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.

Creating a brand new StencilJS component still allows you to mutate a standard Prop() within a component. The component re-renders after the property is changed.

Expected Behavior

  • I would expect the StencilJS build to fail and report an error that the component attempted to mutate an immutable property

  • Alternately, I would expect a console.error during development and the property not to change, and when built the property would only change if the value were changed in the Vue/Angular/Html app.

  • Worst case scenario, I would expect the documentation to say something like:

A Prop is intended to be immutable from inside the component logic. During development, a console warning is produced when a component changes an immutable property. Note that the property is still changed, but the developer is warned. The developer should change the property to allow mutability with @Prop({mutable: true}). Expect mutating a default @Prop() to cause a build failure in future versions of StencilJS

System Info
System: node 20.15.1
    Platform: windows (10.0.22000)
   CPU Model: 12th Gen Intel(R) Core(TM) i7-1265U (12 cpus)
    Compiler: c:\dev\prop-bug\node_modules\@stencil\core\compiler\stencil.js
       Build: 1724698030
     Stencil: 4.21.0
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1
Tested in private tabs with Chrome 128.0, Firefox 102.5 esr, and Edge 107.0
Steps to Reproduce
  1. Create a new StencilJS component with npm init stencil@latest called prop-bug.
  2. cd prop-bug and edit the package.json to use "@stencil/core": "^4.21.0", and run npm install
  3. In the ./src/components/my-component/my-component.tsx file add an input field so the user can input a new value for this.first.
  4. Add a button with a function to run when the button is clicked that changes the value of this.first to the value in the input field
  5. Add another button that directly changes this.last.
  6. At the command line, run npm install and npm start
  7. Open new private tabs Chrome 128.0, Firefox 102.5 esr, or Edge 107.0
  8. Open the dev tools so you can see the console and then open http://localhost:3333/ or whatever port your StencilJS app reports it is running on.
  9. Enter a new first name and click the button or click the button to change the last name and watch the console.
  10. The html on the page will change to reflect the new first and last names and the console will report:
@Prop() "last" on <my-component> is immutable but was modified from within the component.
More information: https://stenciljs.com/docs/properties#prop-mutability
  1. Build the component and add it to a new Vue/Angular/Html project and repeat. The properties will still update but the warning won't show in the console.
Code Reproduction URL

https://github.com/rramsey/stencil-bug

Additional Information

The repo uses

render() {
    return (
        <Host>
...
        </Host>
   );
}

But I see the same behavior with a simple:

render() {
    return <div>
...
        </div>
   ;
}
Ngôn ngữ chính
TypeScript
Star
13.2k
Fork
865
Merge trung bình
2 ngày 16 giờ
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của stenciljs/core

Tất cả issue của stenciljs/core

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.