chore: conditional legacy browser support using custom vite plugin

knip.config.ts

@@ -37,12 +37,13 @@ const config: KnipConfig = {
         '@babel/core', // Required peer dependency for babel plugins
         '@types/luxon', // Used in tests
         'babel-plugin-transform-typescript-metadata', // Used to build with decorators for ioc resolution
+        'core-js', // Conditionally imported at build time
         'eslint-plugin-codeceptjs', // Used by apps/web/test-e2e/.eslintrc.cjs
         'luxon', // Used in tests
         'playwright', // Used in test configs
         '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,
+        'virtual:pwa-register', // Service Worker code is injected at build time
       ],
     },
     'configs/eslint-config-jwp': {

platforms/web/package.json

@@ -92,6 +92,7 @@
     "@jwp/ott-theme": "*",
     "@jwp/ott-ui-react": "*",
     "eslint-config-jwp": "*",
-    "postcss-config-jwp": "*"
+    "postcss-config-jwp": "*",
+    "virtual:polyfills": "*"
   }
 }

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

@@ -0,0 +1,23 @@
+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')) {
+        return enabled ? "import './src/polyfills';" : '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.ts

@@ -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) => {