Komponenty i sloty

Źródło: ComponentRegistry.js, ComponentView.js, SlotView.js

Komponent to nazwany, reużywalny fragment schematu z parametrami (props) i opcjonalnymi slotami. Zamiast kopiować ten sam układ w kilkunastu miejscach, opisujesz go raz i tworzysz instancje widokiem type: component.

Rejestracja

Komponenty deklaruje się w sekcji components na najwyższym poziomie schematu strony — obok głównego type. Definicja przyjmuje:

components:
  infoRow:
    props:
      label: ""
      value: ""
    template:
      type: flex
      direction: column
      childs:
        - type: text
          content: "{{ $props.label }}"
          className: text-muted small text-uppercase
        - type: text
          content: "{{ $props.value }}"
type: card
title: Zamówienie
content:
  - type: component
    component: infoRow
    props:
      label: Klient
      value: "{{ order001.customer.name }}"

To samo da się zrobić z kodu:

import { registerComponents } from '@/viewengine';

registerComponents({ infoRow: { props: { label: '', value: '' }, template: { type: 'text' } } });

Instancja

Wartości propsów są parsowane w miejscu użycia, więc widzą notację .$ oraz zmienne $page / $global — a wyrażenie {{ $props.x }} w propsach odnosi się do propsów komponentu nadrzędnego, nie tego właśnie tworzonego.

Odczyt propsów

Wewnątrz template propsy dostępne są pod kluczem $props:

• w szablonach Handlebars — {{ $props.label }} (we wszystkich polach [template] oraz w warunkach renderIf),
• jako ścieżka danych — varPath: "$props.items" w widoku listvar,
• jako typowana referencja w akcjach — valueFrom: $props.id (zachowuje typ wartości).

components:
  tagList:
    props:
      items: []
    template:
      type: listvar
      varPath: "$props.items"
      template:
        type: badge
        label: "{{ $props.items.$ }}"

Sloty

Widok { type: slot } w szablonie komponentu wyznacza miejsce, w które trafi zawartość z instancji: childs (slot domyślny) albo slots.<nazwa> (slot nazwany). Gdy instancja nic nie przekazała, renderowana jest tablica fallback.

components:
  panel:
    props:
      title: ""
    template:
      type: card
      title: "{{ $props.title }}"
      content:
        - type: slot           # tu trafi `childs` instancji
        - type: slot
          name: footer         # tu trafi `slots.footer` instancji
          fallback:
            - type: text
              content: Brak stopki
type: component
component: panel
props:
  title: Podsumowanie
childs:
  - type: text
    content: Treść panelu
slots:
  footer:
    - type: button
      label: Zapisz

Zawartość slotu jest ewaluowana w kontekście miejsca użycia (tak jak sloty w Vue), więc {{ $props.x }} w slocie odnosi się do propsów komponentu nadrzędnego, a nie tego, w którym slot się znajduje.

Zasięg rejestru

Rejestr komponentów jest wspólny dla całej strony. Ponowna rejestracja pod tą samą nazwą nadpisuje definicję (z ostrzeżeniem w konsoli), a unregisterComponents() czyści rejestr, żeby komponenty poprzedniej strony nie wyciekały do następnej.

Stąd wynika ograniczenie zdalnych schematów: schemat pobrany przez schemaFrom nie może rejestrować komponentów, bo podmieniłby definicję używaną gdzie indziej na stronie — patrz Pliki, kamera i schemat z serwera.

Kiedy komponent, a kiedy widok natywny

• Komponent — gdy ten sam układ istniejących widoków powtarza się w schemacie: wiersz etykieta/wartość, kafelek statusu, panel z nagłówkiem i stopką. Nie wymaga kodu JS ani przebudowy aplikacji.
• Widok natywny — gdy potrzebne jest nowe zachowanie: własna obsługa zdarzeń DOM, integracja z biblioteką, praca na strumieniu albo kontrakt kontrolki wartości (patrz Kontrolki wartości). Komponent tylko składa to, co silnik już potrafi.

Powiązane: Szablony Handlebars · Dostępne Akcje (ActionHandler) · ComponentView · SlotView