1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import { esbuildPlugin } from "@web/dev-server-esbuild";
import cors from "@koa/cors";
/** @type {import('@web/dev-server').DevServerConfig} */
export default {
port: 8081,
plugins: [
esbuildPlugin({
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: gerrit-review.googlesource.com), 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 https://koajs.com/#cascading
await next();
if (!isGrAppMjs && context.url.includes("gr-app.js")) {
context.body = "import('./gr-app.mjs')";
}
},
],
};
|
