feat: Compatibility issue between Ember Glimmer VM and Stencil

オープン
  • 何か問題がありますか？
#4,168 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
typescript
領域
frontend

調査の方向性

src/runtime/proxy-component.ts とリンクされている Glimmer の props 実装から始め、提供されている CodeSandbox と Ember の手順を使って動作を再現します。src/compiler/transformers/reserved-public-members.ts も確認してください。Stencil/Glimmer の再現で該当するプロパティまたは属性が誤って分類されなくなり、互換性の動作が適切なテストでカバーされれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Resolution: Refine
Prerequisites
Stencil Version

>= 2.22.3

Current Behavior

Stencil components write their properties decorated with f.e. the @Prop decorator to the prototype object of the custom element. However, ember's latest rendering pipeline - Glimmer.js - checks if the property is present on element to differentiate between setting properties or attributes. The outcome is that Glimmer does not set an attribute but instead sets it as a property, resulting in wrong markup.

Here you can see the stencil code that sets the property on the element.

Here you can see the Glimmer.js code that checks the element to determine if it should be a property or an attribute.

Here you can see a reproducable case in codesandbox that displays the difference by rendering using a dynamic property and rendering using a static (string) property in Glimmer.

Screenshot 2023-03-15 at 17 02 45

Because only the internal property is actually set on the custom element, attributes using kebab-case actually behave correctly. Since internally stencil converts those to camelCase and Glimmer's property check doesn't pass.

Expected Behavior

Ideally stencil does not set the property on the custom element at all, and handles this internally. This avoids a whole range of issues that could be introduced by "polluting" the space of the custom-element and also makes the need for the property validation on build-time redundant.

After digging around in the source code I couldn't find a quick solution for this due to my limited experience with the codebase.

Another solution could be to at least prefix the internal properties with something like stencil__ on build time so they don't collide with Glimmer.

System Info
System: node 18.15.0
     Plaform: linux (5.15.63)
   CPU Model: AMD EPYC (2 cpus)
    Compiler: /project/home/arnaudweyts/workspace/node_modules/@stencil/core/compiler/stencil.js
       Build: 1678806593
     Stencil: 2.22.3 🎆
  TypeScript: 4.9.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.1
Steps to Reproduce

Reproduced case in codesandbox here.

  • Set up an ember project
  • Add a component with a class property that binds to the stencil element property you want to render
  • Render the component with the class property
Code Reproduction URL

https://codesandbox.io/p/sandbox/infallible-platform-y2w7ho?file=%2Fapp%2Finitializers%2Fionic-components.js&selection=%5B%7B%22endColumn%22%3A3%2C%22endLineNumber%22%3A14%2C%22startColumn%22%3A3%2C%22startLineNumber%22%3A14%7D%5D

Additional Information

If this is perceived as a Glimmer.js issue instead of a Stencil issue, I can also open an issue over there.

Thanks a lot for your work on this great framework!

主要言語
TypeScript
スター
13.2k
フォーク
865
平均マージ
2日 16時間
マージ済み PR（30日）
29

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

stenciljs/core のほかの issue

stenciljs/core の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。