Wanna know what kind of module i'm dealing with

[jimmywarting]

when i import something from a script that has assertion type
aka:

import style from './style.css' assert { type: 'css' }
import config from './config.json' assert { type: 'json' }
import util from './util.js'

then i want to know what i'm dealing with when i'm listening to fetch events...
only using event.request.destination is not enough...

onfetch = event => {
  console.log(event.request.destination)
}

I wanna know about what kind of thing i'm dealing with.

On a bonus point. i would like to be able to polyfill unsupported assertion types if possible.
for instance... safari don't support assert { type: 'css' } so i would like to fetch the content of the code. construct a own stylesheet and export that a normal script with a default export.

cuz right now it dose not support it...

import('./fe.css', {assert: {type: 'css'}})
[Error] Unhandled Promise Rejection: TypeError: Import assertion type "css" is not valid

if i could polyfill it with service worker then i could fetch the source and convert it with something like this:

onfetch = evt => {
  if (
    evt.request.destination === 'script' &&
    evt.request.assertion?.type === 'css' &&
    and_not_natively_supported
  ) {
    evt.waitUntil(async function () {
      const { request } = evt
      const css = await fetch(request).then(res => res.text())

      return new Response(`
        const sheet = new CSSStyleSheet()
        await sheet.replace(${JSON.stringify(css)}, {
          baseURL: ${JSON.stringify(ctx.request.url)}
        })
        export default sheet
      `, {
        headers: { 'content-type': 'text/javascript' }
      })
    })
  }
}

but currently i can't do that... instead the workaround i have to do is omit the hole {assert: {type: 'css'}}) thing and only look at the url pathname.

i can only imagine more and more types being supported like:

import wasm from './xyz.wasm' assert { type: 'wasm' }
import uint8array from './cat.png' assert { type: 'uint8array' }
import blob from './cat.png' assert { type: 'blob' }
import webWorker from './havy.js' assert { type: 'worker' }
import bitmap from './cat.png' assert { type: 'bitmap' }

blob.arrayBuffer().then(console.log)

and more to come...
so there need to be a way to polyfill stuff even if they are not supported.
but to do that i need to know what kind of thing scripts are trying to import stuff as.

a file type assertion could be transformed like this:

onfetch = evt => {
  if (
    evt.request.destination === 'script' &&
    evt.request.assertion?.type === 'blob' &&
    and_not_natively_supported
  ) {
    evt.waitUntil(async function () {
      const url = JSON.stringify(evt.request.url)
      return new Response(`
        const blob = await fetch(${url}).then(res => res.blob())
        export default blob
      `, {
        headers: { 'content-type': 'text/javascript' }
      })
    })
  }
}

given a import statement with:

import blob from './cat.png' assert { type: 'blob' }