chore: conditional legacy browser support using custom vite plugin

knip.config.ts

@@ -30,6 +30,9 @@ const config: KnipConfig = {
       ],
     },
     'platforms/web': {
+      ignore: [
+        'src/index.tsx', // Because of virtual polyfill
+      ],
       ignoreDependencies: [
         '@codeceptjs/allure-legacy',
         '@codeceptjs/configure', // Used in e2e tests
@@ -43,6 +46,7 @@ const config: KnipConfig = {
         'sharp', // Requirement for @vite-pwa/assets-generator
         'tsconfig-paths', // Used for e2e test setup
         'virtual:pwa-register', // Service Worker code is injected at build time,
+        'core-js', // Conditionally imported at build time
       ],
     },
     'configs/eslint-config-jwp': {

platforms/web/scripts/build-tools/plugins.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite';
+
+export const legacyBrowserPlugin = (enabled: boolean = true): Plugin => {
+  return {
+    name: 'legacy-browser',
+    resolveId(id) {
+      if (id.includes('virtual:./polyfills')) {
+        return '\0' + id;
+      }
+    },
+    load(id) {
+      if (id.includes('\0virtual:./polyfills')) {
+        const importPath = id.replace('\0virtual:', '');
+        return enabled ? `import '${importPath}';` : 'export default {};';
+      }
+    },
+    config(config) {
+      if (enabled) {
+        config.build = config.build ?? {};
+        config.build.target = ['es2020', 'edge88', 'firefox78', 'chrome68', 'safari14'];
+      }
+    },
+  };
+};

platforms/web/src/index.tsx

@@ -1,5 +1,4 @@
-import 'core-js/es/array/flat-map';
-import 'core-js/es/object/from-entries';
+import 'virtual:./polyfills';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import 'wicg-inert';

platforms/web/src/polyfills.tsx

@@ -0,0 +1,2 @@
+import 'core-js/es/array/flat-map';
+import 'core-js/es/object/from-entries';

platforms/web/vite.config.ts

@@ -11,6 +11,7 @@ import svgr from 'vite-plugin-svgr';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 import { basePath, favIconSizes, appleIconSizes } from './pwa-assets.config';
+import { legacyBrowserPlugin } from './scripts/build-tools/plugins';
 import {
   extractExternalFonts,
   getFileCopyTargets,
@@ -51,6 +52,7 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
 
   return defineConfig({
     plugins: [
+      legacyBrowserPlugin(!!process.env.APP_LEGACY_BUILD),
       react({
         // This is needed to do decorator transforms for ioc resolution to work for classes
         babel: { plugins: ['babel-plugin-transform-typescript-metadata', ['@babel/plugin-proposal-decorators', { legacy: true }]] },
@@ -114,7 +116,6 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       cssCodeSplit: false,
       sourcemap: true,
       minify: true,
-      target: ['es2020', 'edge88', 'firefox78', 'chrome68', 'safari14'],
       rollupOptions: {
         output: {
           manualChunks: (id) => {