scriptTag & styleSheet

scriptTag

If you need to load an old school (cjs) javascript or css library via cdn then use these two functions.

tosijs-ui uses this library to implement the <tosi-code>, <tosi-lottie>, and <tosi-map> elements.

scriptTag() and styleSheet() return promises that resolve globalThis when the module in question has loaded and otherwise behave as much like import() as possible.

This example uses scriptTag and styleSheet to load quilljs on-the-fly.

import { elements } from 'tosijs'
import { scriptTag, styleSheet } from 'tosijs-ui'

const toolbarOptions = [
  [{ header: [1, 2, 3, 4, false] }],
  ['blockquote', 'code-block'],
  [{ 'align': [] }],
  ['bold', 'italic', 'strike'],
  ['link', 'image', 'video'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],
  ['clean']
]

;(async () => {
  await Promise.all([
    styleSheet('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.core.css'),
    styleSheet('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css'),
  ])

  const container = elements.div()
  const { Quill } = await scriptTag('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js')
  preview.append(container)

  const quill = new Quill(container, {
    debug: 'info',
    modules: {
      toolbar: toolbarOptions,
    },
    theme: 'snow',
  })
})()

Note that scriptTag will resolve globalThis so it behaves as much like async import() as possible.

As an aside:

<tosi-lottie> is implemented in such a way that if you've preloaded the module (e.g. via a script tag or packaging) it won't load it again, which affords offline use.

There's no point for <tosi-map> since it won't work without connectivity anyway.

styleSheet

styleSheet creates a <link> tag for a specified css file.

Using styleSheet:

styleSheet('../path/to/style.css')

This is awaitable, if you care. The stylesheet <link> will only be inserted once.