Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.
W poprzednich artykułach zaznaczyłem, że jedną z korzyści, jakie dają nam Web Components, jest możliwość używania ich w różnych aplikacjach. Nie ma znaczenia, czy tworzymy projekt z użyciem czystego JS-a, czy korzystamy z któregoś z bardziej lub mniej popularnych frameworków. W tym wpisie pokażę, jak używać Web Components z Reactem i Angularem.
Użycie Web Components w React
Najpierw zajmiemy się zastosowaniem komponentów w Reactcie.
Instalacja komponentu w aplikacji
Na początku musimy utworzony przez nas Web Component dodać do aplikacji. W tym celu skorzystamy z error boxa, którego wcześniej opublikowaliśmy w NPM. Jest to komponent, który znamy już z poprzedniego wpisu na temat Web Components, gdzie opisywałem technologię Shadow DOM.
Error box instalujemy za pomocą komendy:
npm i @xkamis/error-box
Ważne jest to, że sam error box na potrzeby użycia w Reactcie musiał zostać delikatnie zmodyfikowany. Jeśli chcemy używać naszego komponentu w tym frameworku, import stylów w HTML oraz samo pobranie pliku HTML za pomocą fetch niestety nie zadziała. Dlatego wszystko zostało zdefiniowane w jednym pliku JS poprzez zapisanie stylów oraz HTML-a za pomocą template string.
Po instalacji error boxa, możemy już użyć komponentu w Reactcie. Całość kodu będzie wyglądała następująco:
Wyświetlanie komponentu
W tym momencie możemy już wyświetlić nasz komponent. W JSX wygląda to tak samo, jak w zwykłym HTML – argumenty określamy w ten sam sposób. Nasz komponent error box korzysta ze slotów, dlatego treść błędu przekazujemy wewnątrz error-box.
Używając Web Componentów musimy pamiętać o dwóch różnicach. Po pierwsze, jeśli chcemy określić klasę dla naszego komponentu, korzystamy ze standardowego argumentu class, a nie className, do którego jesteśmy przyzwyczajeni w Reactcie. Działa to w następujący sposób:
Po drugie, co już można zauważyć w naszym kodzie, stworzone przez nas eventy wewnątrz komponentu nie będą przechwytywane przez zdefiniowanie odpowiedniej akcji w JSX. Zamiast tego, musimy użyć bardziej standardowego podejścia z addEventListener. W tym celu używamy ref, na którym dodajemy eventListener.
Użycie Web Components wraz z Angularem
Przejdźmy teraz do wykorzystania Web Componentów w Angulerze.
Instalacja kompenentu
Tak jak poprzednio, musimy rozpocząć od instalacji komponentu. W module, w którym chcemy użyć naszego komponentu, musimy go zaimportować.
Dodatkowo do tablicy schemas musimy dodać CUSTOM_ELEMENTS_SCHEMA zaimportowane z @angular/core. To pozwoli nam na używanie w tym module komponentów nie-angularowych, zapisanych z użyciem “-”, oraz argumentów komponentów zapisanych w ten sam sposób. W skrócie, pozwala nam to na używanie Custom Elements w Angularze.
Teraz już tylko pozostaje użyć naszego error boxa w komponencie Angulara – na przykładzie w AppComponent.
Kod raczej nie wymaga żadnego komentarza. Warto jednak zauważyć, że w Angularze obsługa eventów pochodzących z Web Components jest standardowa dla Angulara.
Podsumowanie
W powyższej instrukcji pokazałem, w jaki sposób możemy używać Web Components w Reactcie i Angular. Takie ich zastosowanie pozwala na tworzenie uniwersalnych komponentów, których będziemy mogli użyć w dowolnej aplikacji. Myślę, że taka droga stanie się popularna, ponieważ umożliwia uzyskanie niezależności od frameworka i jednorazowe stworzenie uniwersalnych komponenty, których będzie można używać w wielu różnych aplikacjach, zamiast tworzyć je za każdym razem od nowa.
