support of angular standalone

Mathis Poncetrequested to merge
wip-angular-standalone into develop

#185

Références:

Pourquoi un upgrade de Stencil de la 4.17 à 4.21.0 ?

En testant dans l'app de demo, les lignes de la grid n'étaient pas générées. Pourquoi ? Dans le componentDidLoad de la grid,

    componentDidLoad(): void {
        this.columns = this.getGridColumnsFromTemplate();
        this.paginationEl = this.wcsGridPaginationId
            ? document.getElementById(this.wcsGridPaginationId) as HTMLWcsGridPaginationElement
            : this.getGridPaginationsFromTemplate()[0];
        this.updateGridRows(this.data);
        if (this.selectedItems) {
            this.updateSelectionWithValues(this.selectedItems);
        }
        this.refreshSort(true);
    }

    private getGridColumnsFromTemplate(): HTMLWcsGridColumnElement[] {
        const slotted = this.el.shadowRoot.querySelector('slot[name="grid-column"]') as HTMLSlotElement;
        return slotted.assignedElements() as any as HTMLWcsGridColumnElement[];
    }

On s'appuie sur le fait que l'enfant, wcs-grid-column soient chargés pour générer les cellules correspondant aux colonnes. Sauf que, en 4.17 this.el.shadowRoot.querySelector('slot[name="grid-column"]') renvoie null. Ce qui veut autrement dire que l'enfant est défini après le parent. Ca c'est un comportement qu'on a lorsqu'on utilise l'output target dist-custom-elements consommé par l'output target Angular Standalone. Pour que ça marche temporairement, j'avais fait un code récursif qui faisait que tant que this.columns n'étaient pas définis je rappelais la fonction et j'ajoutais cette fonction dans queueMicrotask. M'étant dit que c'était très moche, j'ai commencé à tester le pourquoi wcs-grid-column étaient chargé après wcs-grid. J'ai donc regarder dans les tests de Stencil, et je suis tombé sur ce test https://github.com/stenciljs/core/blob/main/test/wdio/custom-elements-hierarchy-lifecycle/cmp.test.tsx ajouté dans cette MR https://github.com/stenciljs/core/pull/5941 associé à l'issue https://github.com/stenciljs/core/issues/3580 qui dit justement "bug: componentDidLoad is called in parent before children have loaded".

Mis à part la grid, nos composant s'appuie souvent sur ce mécanisme dans le didLoad ce qui fait que ça pouvait casser pas mal de comportement à travers la lib

Problème d'un projet angular consommateur en v20

Un projet consommateur Angular 20 lève l'erreur suivante en console en utilisant un composant wcs standalone

TypeError: def.resolveHostDirectives is not a function or its return value is not iterable

https://stenciljs.com/docs/angular

@stencil/angular-output-target Angular
0.10.2 v18.x and lower
1.0.0 v19.x and above

Pour résoudre le soucis, j’ai augmenté la version de @stencil/angular-output-target en 1.0.0 et la version du projet wcs-angular en 20.x.x

To check

  • Explain what has changed in the changelog
  • For newly created web components only : Declare all new angular proxy components in the file angular/projects/wcs-angular/src/lib/wcs-angular.module.ts
  • For newly created web components only : Add the component name in Components-Overview.mdx with its corresponding image into assets/images/components-overview
  • For newly created web components only : Add the component name in the left or right list in accessibility.mdx

Design token migration (specific task)

  • check that css variables for which you change the name are not setter / read in typescript code. Rename them in the ts code if necessary.
  • Document all renamed css variables in the migration guide.
  • Document all component token (css variable) in the component doc (with ts annotation) so that they can be used by the projects.
Edited by Mathis Poncet

Merge request reports