Regione Toscana Design System — Servizi Design System Core

Risorse Js

Risorse JS

Le risorse JS sono condivise tra Core e Servizi: il bundle è generato da tutti i componenti del progetto, 08-servizi/ incluso — a differenza del CSS, che è splittato in core.css/servizi.css, il JS non ha un bundle “solo core” o “solo servizi” (vedi Bundle unico vs file singoli sotto). Componenti Servizi con JS proprio: 08-servizi/popover, 08-servizi/table-interactive.

File JS singoli per componente

I file js singoli sono inclusi nelle sezioni dei singoli componenti:

  • components/{PERCORSO}/{nome-componente}/{nome-componente}.js (sorgente)
  • dist/{core|servizi}/components/raw/{nome-componente}/{nome-componente}.js (build dev/Fractal)
  • dist/{version}/js/components/raw/{nome-componente}/{nome-componente}.js (release versionata, anche su CDN)

Bundle unico vs file singoli per componente

Un ambiente ospite ha due opzioni per integrare il JS dei componenti, a seconda dell’approccio scelto:

  1. Bundle completo — un unico file generato da tutti i .js dei componenti (build-entries.js + webpack.config.js):

    public/js/componentsJs.js
dist/{core|servizi}/js/componentsJs.js   ← build dev/Fractal
dist/{version}/js/componentsJs.js        ← release versionata, anche su CDN

    componentsJs.js - file js completo

    Comodo per chi integra l’intero design system, ma carica anche il JS di componenti non usati.

  2. File JS singoli per componente (vedi sopra) — un ambiente che integra solo alcuni componenti (es. solo accordion e tablist) può includere singolarmente questi file al posto del bundle completo, evitando di caricare JS di componenti non utilizzati.

Librerie esterne

I file js delle librerie figurano in:

  • dist/{core|servizi}/js/libraries/{nome-libreria}
  • public/js/libraries/{nome-libreria}

Le librerie esterne non sono distribuite via CDN RT (a differenza di componentsJs.js e dei file singoli per componente, che sono codice di autoria RTDS): sono codice di terzi con proprio ciclo di versioning/sicurezza. Restano disponibili solo nel pacchetto ZIP o nel sito documentale — un ambiente che le richiede le include autonomamente (proprio bundler, altro CDN pubblico, o file dello ZIP).

Libreria Splide.js per il componente carousel/slider.

Libreria Tobii.js per il componente lightbox.

Vedi anche documentazione Tobii.js

Libreria Accessible Autocomplete