Third-party libraries
A widget that wraps a chart, an editor or a carousel loads its library in the browser. Put the
file in
assets/
(or point at a CDN) and load it by the address it is served at:
assets/vendor/greeter.js
is
/vendor/greeter.js. Files in
assets/
are served, not compiled, so they are not static imports; a static
import
at the top of a controller is for code in
lib/
or in a module.
A classic script: CNC.importScript
It adds a <script> and resolves once it has run. Two
widgets asking for the same URL share one fetch.
CNC.importStyle(href)
does the same for a stylesheet.
not loaded
async load() {
await CNC.importScript('/vendor/greeter.js')
// The script has assigned its global by now.
this.status = Greeter.greet('cnc')
}
An ES module: await import(url)
A library that ships as an ES module hands back its exports through a dynamic
import(). Call it from an event handler or
init(): it runs in the browser only.
not imported
async loadEsm() {
const { sayHi } = await import('/vendor/greeting.mjs')
this.esmStatus = sayHi()
}