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 statica Fractal)
  • components/{categoria}/{nome-componente}/{nome-componente}.js (pacchetto di distribuzione, accanto al markup renderizzato del componente)
  • cdn/js/components/{nome-componente}.js (sottoinsieme CDN del pacchetto — cartella piatta, senza l’albero delle categorie)

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                ← sorgente compilato
dist/{core|servizi}/js/componentsJs.js   ← build statica Fractal
js/componentsJs.js                       ← pacchetto di distribuzione
cdn/js/componentsJs.js                   ← sottoinsieme CDN del pacchetto

    componentsJs.js - file js completo

    Adatto a chi integra l’intero design system; carica anche il JS dei componenti non utilizzati.

  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). Per lo stesso motivo la cartella cdn/ del pacchetto non le contiene, mentre js/libraries/ e css/libraries/ sì.

Libreria Splide.js per il componente carousel/slider.

Libreria Tobii.js per il componente lightbox.

Vedi anche documentazione Tobii.js

Libreria Accessible Autocomplete