Allow behavior to differ between different wikis with env variables

[Dianliang233]

It seems like that currently the only way to allow the scripts to behave differently across two wikis is to:

• Create two different gadgets. However this can create boilerplate code and causes difficulty in maintenance.
• Have if statements to check which wiki it's currently running on. However this may cause output size to bloat if the branches are too large.

It would be preferable to have something like this:

if (import.meta.env.WIKI === 'awiki') {
  console.log('this is from awiki');
} else if (import.meta.env.WIKI === 'bwiki') {
  console.log('this is from bwiki');
}

Output before treeshake:

if (true) {
  console.log('this is from awiki');
} else if (false) {
  console.log('this is from bwiki');
}

Treeshaken:

// conditional removed
console.log('this is from awiki');
// unreachable code removed

This is, in fact, very easy to implement if we could allow esbuild to run once for each wiki. However this might cause performance issues depending on how much time each build takes and how many wikis are defined. I don't know if there would be any good alternatives though.

Similarly, with CSS, it might also be possible for us to define a custom CSS at-rule with PostCSS. However this might not be needed as it's very easy to override CSS.

[AnYiEE]

In fact, currently during compilation, Tree shaking is already enforced for esbuild (esbuild does not enable tree shaking for cjs format by default).

But just tested it, Tree shaking didn't actually take effect, but after passing minify: true to esbuild, tree shaking took effect. I'm not sure why, it seems that there is no mention of this in esbuild's documentation.

So, with tree shaking already enabled, simply append minify: true to esbuildOptions, and add a line similar to 'process.env.WIKI': '"awiki"' in the define object. Run the following code to see the effect you mentioned.

if (process.env.WIKI === 'awiki') {
    console.log('this is from awiki');
} else if (process.env.WIKI === 'bwiki') {
    console.log('this is from bwiki');
}

The reason for needing define is that the current usage of esbuild in the repo does not actually read environment variables.