feat: extend minimum browser support using APP_LEGACY_BUILD env-var

* feat(project): manage minimum browser support * fix: inject variables into index.html * chore: remove .js from import * chore: polyfills as first entry point * chore: restore index.html doctype * chore: conditional legacy browser support using custom vite plugin * chore: polyfills in ignoreDependencies instead of peerDependecies --------- Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
jwplayer · Jun 4, 2024 · 1794113 · 1794113
1 parent a706d0e
commit 1794113
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 4 deletions.
diff --git a/knip.config.ts b/knip.config.ts
@@ -37,12 +37,14 @@ 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
+        'virtual:polyfills', // Polyfills are conditionally injected
       ],
     },
     'configs/eslint-config-jwp': {

diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
@@ -13,6 +13,7 @@
   display: inline-block;
   width: 270px;
   max-width: 90vw;
+  height: 100vh; // Fallback
   height: 100dvh;
   overflow-y: auto;
   background-color: var(--body-background-color);

diff --git a/packages/ui-react/src/pages/Loading/Loading.module.scss b/packages/ui-react/src/pages/Loading/Loading.module.scss
@@ -2,5 +2,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100vh; // Fallback
   height: 100dvh;
 }
diff --git a/platforms/web/index.html b/platforms/web/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title><% name %></title>
+  <title><%- name %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <meta name="description" content="<% description %>" data-react-helmet="true" />
+  <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: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">
 

diff --git a/platforms/web/package.json b/platforms/web/package.json
@@ -55,6 +55,7 @@
     "allure-commandline": "^2.17.2",
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
     "codeceptjs": "3.5.5",
+    "core-js": "^3.37.0",
     "eslint-plugin-codeceptjs": "^1.3.0",
     "jsdom": "^22.1.0",
     "luxon": "^3.2.1",

diff --git a/platforms/web/scripts/build-tools/plugins.ts b/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'];
+      }
+    },
+  };
+};
diff --git a/platforms/web/src/index.tsx b/platforms/web/src/index.tsx
@@ -1,3 +1,4 @@
+import 'virtual:polyfills';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import 'wicg-inert';

diff --git a/platforms/web/src/polyfills.ts b/platforms/web/src/polyfills.ts
@@ -0,0 +1,2 @@
+import 'core-js/es/array/flat-map';
+import 'core-js/es/object/from-entries';
diff --git a/platforms/web/vite.config.ts b/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 }]] },
@@ -130,6 +132,9 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
             if (id.includes('/node_modules/@inplayer')) {
               return 'inplayer';
             }
+            if (id.includes('/node_modules/core-js')) {
+              return 'polyfills';
+            }
             if (id.includes('/node_modules/')) {
               return 'vendor';
             }

diff --git a/yarn.lock b/yarn.lock
@@ -4246,6 +4246,11 @@ core-js@^3.19.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.0.tgz#e752fa0b0b462a0787d56e9d73f80b0f7c0dde68"
   integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
 
+core-js@^3.37.0:
+  version "3.37.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.0.tgz#d8dde58e91d156b2547c19d8a4efd5c7f6c426bb"
+  integrity sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"