blob: 2a7dca497c3f6b9462621e983e235410e3104569 [file] [log] [blame]
import { esbuildPlugin } from "@web/dev-server-esbuild";
import cors from "@koa/cors";
/** @type {import('@web/dev-server').DevServerConfig} */
export default {
port: 8081,
plugins: [
ts: true,
target: "es2020",
tsconfig: "polygerrit-ui/app/tsconfig.json",
nodeResolve: true,
rootDir: "polygerrit-ui/app",
middleware: [
// Allow files served from the localhost domain to be used on any domain
// (ex:, which happens during local
// development with Gerrit FE Helper extension.
cors({ origin: "*" }),
// The issue solved here is that our production index.html does not load
// 'gr-app.js' as an ESM module due to our build process, but in development
// all our source code is written as ESM modules. When using the Gerrit FE
// Helper extension to see our local changes on a production site we see a
// syntax error due to this mismatch. The trick used to fix this is to
// rewrite the response for 'gr-app.js' to be a dynamic import() statement
// for a fake file 'gr-app.mjs'. This fake file will be loaded as an ESM
// module and when the server receives the request it returns the real
// contents of 'gr-app.js'.
async (context, next) => {
const isGrAppMjs = context.url.includes("gr-app.mjs");
if (isGrAppMjs) {
// Load the .ts file of the entrypoint instead of .js to trigger esbuild
// which will convert every .ts file to .js on request.
context.url = context.url.replace("gr-app.mjs", "gr-app.ts");
// Pass control to the next middleware which eventually loads the file.
// see
await next();
if (!isGrAppMjs && context.url.includes("gr-app.js")) {
context.body = "import('./gr-app.mjs')";