This page View Markdown Open in ChatGPT Open in Claude

UI libraries¶

The UI libraries of a website are loaded in the browser of its visitors : CSS frameworks, icons, charts, small frameworks of scripts. They are the website's own list, libraries.json, apart from the packages of npm the sandboxes of the account install (those run on the server).

The panel has them in the view UI libraries of a website : the catalog, your list, the order they load in, a library turned off, removed, or copied into the website.

libraries.json

{
    "libraries": [
        { "id": "bootstrap" },
        { "id": "bootstrap-icons", "selfHost": true },
        { "id": "chartjs", "pages": ["/reports/*", "/"] },
        { "package": "canvas-confetti", "version": "1.9.3", "files": ["dist/confetti.browser.js"] },
        { "url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap", "type": "css" }
    ]
}

An entry¶

Field	What it is
`id`	A library of the catalog : its version and its files, each with its hash.
`package`, `version`, `files`	Any package of npm, at an exact version, from jsDelivr : paths in the package, or `{ path, integrity, type }`.
`url`, `type`, `integrity`	Any address : `type` is `css`, `js` or `module` (else read from its end).
`pages`	The paths it loads on : `/reports/*` is every path which starts so. Every page when there are none.
`enabled`	`false` : not loaded.
`selfHost`	Its files are copied into `public/_lib/<package>@<version>/` and served by the website : no CDN is asked.
`csp`	What the CSP needs beyond the origins of its files : `{ "script": ["'unsafe-eval'"] }`.

Every file goes into the head of the pages which load it : a style sheet as a <link>, a script as a <script defer> with the nonce of the page, both with their hash (integrity) when they have one. A CDN which sent something else would be refused by the browser.

The catalog¶

Bootstrap, Bootswatch, Bootstrap Icons, Tailwind CSS, Bulma, Pico CSS, UIkit, Shoelace, Alpine.js (and its CSP build), htmx, _hyperscript, jQuery, Chart.js, ApexCharts, ECharts, Font Awesome, Tabler Icons, Lucide, Animate.css, AOS, GSAP, Swiper, GLightbox, SweetAlert2, Toastify, Flatpickr, Tom Select, SortableJS, Simple-DataTables, Leaflet, highlight.js, Prism, Marked, Mermaid, KaTeX, Day.js, Lodash, Axios, normalize.css and the Inter font : each at a version tried with the server, each file with its SHA-384 hash. The panel shows how a page uses each.

Which pages load what¶

A page names the libraries it loads :

export const config: PageConfig = { libraries: ['chartjs'] };   // Chart.js alone
export const config: PageConfig = { libraries: false };         // none

A page which names none loads every library of the list for its path (pages). A layout may name them for the pages inside it.

Using a library in a page¶

The style sheets apply as they load. A script loads with defer : code of the page which uses it waits for the page to be read.

import { serialize } from 'am-ssr';

export default function Report({ data }: PageProps<typeof loader>) {
    return (
        <>
            <canvas id="sales"></canvas>
            <script>{`
document.addEventListener('DOMContentLoaded', () => {
    new Chart(document.getElementById('sales'), { type: 'line', data: ${serialize(data.chart)} });
});
`}</script>
        </>
    );
}

The CSP¶

The policy of a page (strict by default) lets in the scripts and the style sheets of the libraries that page loads, by their origins : a page without Chart.js does not allow its CDN for scripts. A library which needs more says so in the catalog (Alpine.js needs 'unsafe-eval', Leaflet loads tiles from OpenStreetMap) ; an entry may add its own needs with csp.

A self-hosted library comes from the website itself : the policy needs nothing for it.

Self-hosting¶

With selfHost, the panel downloads the files of the entry from jsDelivr, checks each against its hash (a file which differs is refused), and copies it into public/_lib/<package>@<version>/, with the fonts and images its style sheets name. The website then asks no CDN : nothing of your visitors goes to another company, and the website works where the CDN does not answer.

Remove the folder of a library from public/_lib when you remove it from the list.