Serving multiple static files to an HTTP request

let port;
onmessage = async e => {
  'use strict';
  if (!port) {
    [port] = e.ports;
    port.onmessage = event => postMessage(event.data);
  }
  const { urls } = e.data;
  // https://github.com/whatwg/streams/blob/master/transferable-streams-explainer.md
  const { readable, writable } = new TransformStream();
  (async _ => {
    for await (const _ of (async function* stream() {
      while (urls.length) {
        yield (await fetch(urls.shift(), {cache: 'no-store'})).body.pipeTo(writable, {
          preventClose: !!urls.length,
        });
      }
    })());
  })();
  port.postMessage(
    {
      readable,
    },
    [readable]
  );
};

let port;
onmessage = async e => {
  'use strict';
  if (!port) {
    [port] = e.ports;
    port.onmessage = event => postMessage(event.data);
  }
  const { urls } = e.data;
  // https://github.com/whatwg/streams/blob/master/transferable-streams-explainer.md
  const { readable, writable } = new TransformStream();
  (async _ => {
    for await (const _ of (async function* stream() {
      while (urls.length) {
        yield (await fetch(urls.shift(), {cache: 'no-store'})).body.pipeTo(writable, {
          preventClose: !!urls.length,
        });
      }
    })());
  })();
  port.postMessage(
    {
      readable,
    },
    [readable]
  );
};

onfetch = (e) => {
  if (e.request.url.includes('files')) {
    const fd = new FormData();
    fd.append(
      '0',
      new Blob([`console.log('script 0')`], { type: 'text/javascript' }),
      '0.js'
    );

    fd.append(
      '1',
      new Blob([`console.log('script 1')`], { type: 'text/javascript' }),
      '1.js'
    );

    fd.append(
      '2',
      new Blob([`body {color:blue}`], { type: 'text/css' }),
      '2.css'
    );
    let client = clients.get(e.clientId);
    // console.log(e.request.headers.get('content-type'));
    e.respondWith(
      new Response(fd, {
        headers: {},
      })
    );
  }
};

onfetch = (e) => {
  if (e.request.url.includes('files')) {
    const fd = new FormData();
    fd.append(
      '0',
      new Blob([`console.log('script 0')`], { type: 'text/javascript' }),
      '0.js'
    );

    fd.append(
      '1',
      new Blob([`console.log('script 1')`], { type: 'text/javascript' }),
      '1.js'
    );

    fd.append(
      '2',
      new Blob([`body {color:blue}`], { type: 'text/css' }),
      '2.css'
    );
    let client = clients.get(e.clientId);
    // console.log(e.request.headers.get('content-type'));
    e.respondWith(
      new Response(fd, {
        headers: {},
      })
    );
  }
};

      async function processFormData() {
        fetch('./?files')
          .then(async (r) => {
            console.log(r.headers.get('content-type'));
            /*
            return new Response(await r.text(), {
              headers: { 'content-type': r.headers.get('content-type') },
            })
            */
            return r.formData();
          })
          .then(async (fd) => {
            console.log(fd);
            for (const [, file] of fd) {
              switch (file.type) {
                case 'text/javascript':
                  const script = document.createElement('script');
                  script.textContent = await file.text();
                  document.body.appendChild(script);
                  break;
                case 'text/css':
                  const style = document.createElement('style');
                  style.textContent = await file.text();
                  document.head.appendChild(style);
                  break;
                default:
                  console.log(file.type);
              }
            }
          })
          .catch(console.warn);
      }

      async function processFormData() {
        fetch('./?files')
          .then(async (r) => {
            console.log(r.headers.get('content-type'));
            /*
            return new Response(await r.text(), {
              headers: { 'content-type': r.headers.get('content-type') },
            })
            */
            return r.formData();
          })
          .then(async (fd) => {
            console.log(fd);
            for (const [, file] of fd) {
              switch (file.type) {
                case 'text/javascript':
                  const script = document.createElement('script');
                  script.textContent = await file.text();
                  document.body.appendChild(script);
                  break;
                case 'text/css':
                  const style = document.createElement('style');
                  style.textContent = await file.text();
                  document.head.appendChild(style);
                  break;
                default:
                  console.log(file.type);
              }
            }
          })
          .catch(console.warn);
      }

{ user: { id: '', name: '', phone: '' }, files: [ file/blob, file/blob ] }

{ user: { id: '', name: '', phone: '' }, files: [ file/blob, file/blob ] }