feat: Compatibility issue between Ember Glimmer VM and Stencil

Abierto
  • ¿Algo no está bien?
#4,168 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza con src/runtime/proxy-component.ts y la implementación enlazada de props de Glimmer; después, reproduce el comportamiento usando el CodeSandbox proporcionado y los pasos de Ember. Revisa también src/compiler/transformers/reserved-public-members.ts. Se considera terminado cuando la reproducción de Stencil/Glimmer ya no clasifica incorrectamente la propiedad o el atributo relevante, y el comportamiento de compatibilidad está cubierto por una prueba adecuada.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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!

Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.