feat: Compatibility issue between Ember Glimmer VM and Stencil

Aperta
  • Qualcosa non va?
#4,168 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Inizia con src/runtime/proxy-component.ts e con l’implementazione collegata delle props di Glimmer, quindi riproduci il comportamento usando il CodeSandbox fornito e i passaggi di Ember. Esamina anche src/compiler/transformers/reserved-public-members.ts. Il lavoro è completato quando la riproduzione Stencil/Glimmer non classifica più erroneamente la proprietà o l’attributo rilevante e il comportamento di compatibilità è coperto da un test appropriato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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!

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.