gistfile1.js

import fs from 'fs';
import express from 'express';
import https from 'https';
import { createServer as createViteServer } from 'vite';
import createProxyMiddleware from 'http-proxy-middleware';
import ws from 'ws';
import { parse } from 'url';

const dataproxy = createProxyMiddleware('XXX', { changeOrigin: true });

const vite = await createViteServer({
  server: { middlewareMode: 'html' },
});
const string0 = String.fromCharCode(0);

https.createServer({ key: fs.readFileSync('./localkey.pem'), cert: fs.readFileSync('./localcert.pem') },
  express()
    .use(async (req, res, next) => {
      if (req.headers.accept && req.headers.accept.indexOf('text/html') === -1) {
        return next();
      }
      res.set('content-type', 'text/html');
      const indexHtml = fs.readFileSync('./index.html').toString();
      res.set('Cross-Origin-Opener-Policy', 'same-origin');
      res.set('Cross-Origin-Embedder-Policy', 'require-corp');
      res.send(await vite.transformIndexHtml(req.url, indexHtml));
    })
    .use((req, res, next) => {
      if (req.url.endsWith('.service-worker.js')) {
        res.set('Service-Worker-Allowed', '/')
      }
      if (req.url.endsWith('?worker')) {
        res.set('Cross-Origin-Opener-Policy', 'same-origin');
        res.set('Cross-Origin-Embedder-Policy', 'require-corp');
      }
      next();
    })
    .use(vite.middlewares)
    .use('/auth/ws', (req, res, next) => dataproxy.web(req, res, next))
    .use('/ping', (req, res, next) => dataproxy.web(req, res, next)),
)
  .listen(9000, 'local.alpha.thebricks.com', () => {
    console.log('ready')
  })
  .on('upgrade', (req, socket, head) => {
    const { pathname } = parse(req.url);
    switch (pathname) {
      case '/vite-booster':
        new ws.Server({
          noServer: true,
          perMessageDeflate: false,
          skipUTF8Validation: true
        }).handleUpgrade(req, socket, head, ws =>
          ws.on('message', (msg) => vite.transformRequest(parse(msg).path).then(({code}) => ws.send(`${msg}${string0}${code}`))))
        return;
      case '/auth/ws':
      case '/ping':
        dataproxy.upgrade(req, socket, head);
        return;
      default:
    }
  });

vite-booster.service-worker.js

const promises = new Map();

let socket;
let socketPromise;
const string0 = String.fromCharCode(0);
const createWebSocket = () => {
  // eslint-disable-next-line no-restricted-globals
  socket = new WebSocket(`wss://${location.host}/vite-booster`);
  socket.addEventListener('message', (event) => {
    const indexOf0 = event.data.indexOf(string0);
    const key = event.data.slice(0, indexOf0);
    const data = event.data.slice(indexOf0 + 1);
    const promise = promises.get(key);
    if (promise) {
      promise.resolve(data);
    } else {
      console.error('failed to find a promise for', key);
    }
  });

  socket.onerror = () => {
    createWebSocket();
  };
  socket.onclose = () => {
    createWebSocket();
  };
  socketPromise = new Promise((res) => {
    socket.onopen = res;
  });
};
createWebSocket();

// eslint-disable-next-line no-restricted-globals
self.addEventListener('unload', () => {
  socket.onclose = null;
  socket.close();
});

const makeResponse = ({ request }) => {
  if (promises.has(request.url)) {
    return promises.get(request.url);
  }

  let resolve;
  const promise = new Promise((res) => {
    resolve = res;
  });
  promises.set(
    request.url,
    Object.assign(promise, {
      resolve: (data) => {
        const headers = {};
        if (request.destination === 'script') {
          headers['Content-Type'] = 'application/javascript';
        }
        if (request.destination === 'worker') {
          headers['Content-Type'] = 'application/javascript';
          headers['Cross-Origin-Opener-Policy'] = 'same-origin';
          headers['Cross-Origin-Embedder-Policy'] = 'require-corp';
        }
        resolve(new Response(data, { status: 200, headers }));
        promises.delete(request.url);
      },
    }),
  );
  socketPromise.then(() => socket.send(request.url));
  return promise;
};

// eslint-disable-next-line no-restricted-globals
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);
  if (
    request.method !== 'GET' ||
    // eslint-disable-next-line no-restricted-globals
    url.origin !== location.origin ||
    !(url.pathname.startsWith('/src/') || url.pathname.startsWith('/node_modules/') || url.pathname.startsWith('/@')) ||
    request.destination === 'document' ||
    request.url.endsWith('.wasm')
  ) {
    return;
  }
  event.respondWith(makeResponse(event));
});