feat(project): support old browsers by using @vitejs/plugin-legacy

Videodock · Apr 16, 2024 · 1c0f3be · 1c0f3be
1 parent d6c7202
commit 1c0f3be
Show file tree

Hide file tree

Showing 4 changed files with 789 additions and 49 deletions.
diff --git a/platforms/web/index.html b/platforms/web/index.html
@@ -1,37 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title><% name %></title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <meta name="description" content="<% description %>" data-react-helmet="true" />
-  <meta name="twitter:card" content="summary" data-react-helmet="true"  />
-  <meta property="og:title" content="<% name %>" data-react-helmet="true" >
-  <meta property="og:description" content="<% description %>" data-react-helmet="true">
-  <meta property="og:image" content="/images/icons/app-icon.png" data-react-helmet="true">
-
-  <link rel="icon" href="/images/icons/favicon.ico" type="image/x-icon" sizes="any">
-  <%- favicons %>
-
-  <!-- Pre-connect JW Player origins -->
-  <link rel="preconnect" href="https://content.jwplatform.com"/>
-  <link rel="preconnect" href="https://cdn.jwplayer.com"/>
-
-  <!-- Safari web app -->
-  <meta name="apple-mobile-web-app-capable" content="yes">
-
-  <!-- Chrome, Firefox OS and Opera -->
-  <meta name="theme-color" content="#000000">
-  <!-- iOS Safari -->
-  <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
-
-  <!-- Manifest -->
-  <link rel="manifest" href="/manifest.json" />
-</head>
-<body>
-  <div id="root"></div>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <script type="module" src="/src/index.tsx"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/app/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
 </html>
diff --git a/platforms/web/package.json b/platforms/web/package.json
@@ -39,7 +39,7 @@
     "zustand": "^3.6.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-proposal-decorators": "^7.22.10",
     "@codeceptjs/configure": "^0.8.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -51,6 +51,7 @@
     "@types/react-helmet": "^6.1.2",
     "@types/reflect-metadata": "^0.1.0",
     "@vite-pwa/assets-generator": "^0.2.3",
+    "@vitejs/plugin-legacy": "^5.3.2",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "allure-commandline": "^2.17.2",
@@ -67,6 +68,7 @@
     "sharp": "^0.33.2",
     "stylelint": "^15.11.0",
     "stylelint-config-jwp": "*",
+    "terser": "^5.30.3",
     "tsconfig-paths": "^4.1.0",
     "vi-fetch": "^0.8.0",
     "vite": "^5.1.5",

diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import path from 'path';
 
 import { defineConfig, loadEnv } from 'vite';
@@ -9,6 +11,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import svgr from 'vite-plugin-svgr';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
+import legacy, { type Options as LegacyOptions } from '@vitejs/plugin-legacy';
 
 import { basePath, favIconSizes, appleIconSizes } from './pwa-assets.config';
 import {
@@ -49,8 +52,18 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
   const bodyAltFontsString = bodyAltFonts.map((font) => font.fontFamily).join(', ');
   const favicons = generateIconTags(basePath, favIconSizes, appleIconSizes);
 
+  const legacyOptions: LegacyOptions = {
+    targets: 'chrome>= 68',
+  };
+
+  if (process.env.LEGACY_DEBUG) {
+    legacyOptions.modernTargets = legacyOptions.targets as string; // Duplicate
+    legacyOptions.modernPolyfills = true; // Enforce loading polyfills (needed for testing purposes in Chromium)
+  }
+
   return defineConfig({
     plugins: [
+      legacy(legacyOptions),
       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 }]] },
@@ -86,13 +99,14 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
           ],
         },
       }),
-      createHtmlPlugin({
-        minify: true,
-        inject: {
-          tags: [getGoogleVerificationTag(env), fontTags, getGtmTags(env)].flat(),
-          data: { ...app, favicons },
-        },
-      }),
+      // TODO inject variables using the built in methods
+      // createHtmlPlugin({
+      //   minify: true,
+      //   inject: {
+      //     tags: [getGoogleVerificationTag(env), fontTags, getGtmTags(env)].flat(),
+      //     data: { ...app, favicons },
+      //   },
+      // }),
       viteStaticCopy({ targets: getFileCopyTargets(mode) }),
     ],
     define: {