Add polyfill bundle

CHANGELOG.md

@@ -18,6 +18,7 @@
     -   Added support for navigating the UI using a TV remote control.
     -   Added a `tv-focus` attribute to specify which UI element should receive the initial focus when showing the controls on a TV.
         In the default UI, initial focus is on the seek bar.
+-   🚀 Added a polyfill bundle in `@theoplayer/web-ui/polyfills`. This contains all the polyfills needed to use THEOplayer Web UI in legacy browsers, such as ES2015 `Promise` and Custom Elements. ([#41](https://github.com/THEOplayer/web-ui/pull/41))
 
 ## v1.4.0 (2023-10-04)
 

README.md

@@ -129,7 +129,7 @@ See [docs/examples/custom-ui.html](https://github.com/THEOplayer/web-ui/blob/mai
 
 By default, THEOplayer Web UI targets modern browsers that support modern JavaScript syntax (such as [async/await](https://caniuse.com/async-functions)) and native [Custom Elements](https://caniuse.com/custom-elementsv1). This keeps the download size small, so your viewers can spend less time waiting for your page to load and start watching their video faster.
 
-On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the THEOplayer Web UI that uses older JavaScript syntax. You also need to load additional polyfills for missing features such as Promises or Custom Elements. We recommend [Polyfill.io](https://polyfill.io/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills) for these.
+On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the THEOplayer Web UI that uses older JavaScript syntax. You also need to load additional polyfills for missing features such as Promises or Custom Elements. These are provided by our polyfill bundle in `@theoplayer/web-ui/polyfills`. Alternatively, you can use [Polyfill.io](https://polyfill.io/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills).
 
 -   Option 1: in your HTML. This uses [differential serving](https://css-tricks.com/differential-serving/) so modern browsers will load the modern build (with `type="module"`), while legacy browsers will load the legacy build (with `nomodule`).
 
@@ -146,17 +146,14 @@ On older browsers (such as Internet Explorer 11 and older smart TVs), you need t
     <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
     <script type="module" src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.mjs"></script>
     <!-- Legacy browsers -->
-    <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
-    <script nomodule src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
-    <script nomodule src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
     <script nomodule src="/path/to/node_modules/theoplayer/THEOplayer.chromeless.js"></script>
+    <script nomodule src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.polyfills.js"></script>
     <script nomodule src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.es5.js"></script>
     ```
 
 -   Option 2: in your JavaScript. This will load the legacy build on both modern and legacy browsers, which is suboptimal. Instead, we recommend configuring your bundler to produce a modern and legacy build of your entire web app, and to import the appropriate version of THEOplayer Web UI for each build flavor.
 
     ```js
-    import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
-    import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
+    import '@theoplayer/web-ui/polyfills';
     import { DefaultUI } from '@theoplayer/web-ui/es5'; // note the "/es5" suffix
     ```

docs/_layouts/example.html

@@ -24,10 +24,8 @@
 <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
 <script type="module" src="../dist/THEOplayerUI.mjs"></script>
 <!-- Legacy browsers -->
-<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
-<script nomodule src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
-<script nomodule src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
 <script nomodule src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.chromeless.js"></script>
+<script nomodule src="../dist/THEOplayerUI.polyfills.js"></script>
 <script nomodule src="../dist/THEOplayerUI.es5.js"></script>
 
 {{ content }}

package.json

@@ -16,6 +16,7 @@
       "import": "./dist/THEOplayerUI.es5.mjs",
       "default": "./dist/THEOplayerUI.es5.js"
     },
+    "./polyfills": "./dist/THEOplayerUI-polyfills.js",
     "./dist/*": "./dist/*"
   },
   "files": [
@@ -46,18 +47,22 @@
     "type": "git",
     "url": "git+https://github.com/THEOplayer/web-ui.git"
   },
+  "dependencies": {
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "lit-html": "^3.0.0"
+  },
   "peerDependencies": {
     "theoplayer": "^6"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-replace": "^5.0.4",
     "@rollup/pluginutils": "^5.0.4",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.89",
     "@swc/helpers": "^0.5.2",
     "@types/html-minifier": "^4.0.3",
     "@webcomponents/shadycss": "^1.11.2",
-    "@webcomponents/webcomponentsjs": "^2.8.0",
     "html-minifier": "^4.0.0",
     "postcss": "^8.4.30",
     "postcss-mixins": "^9.0.4",

rollup.config.mjs

@@ -8,6 +8,7 @@ import postcssMixins from 'postcss-mixins';
 import * as path from 'node:path';
 import { readFile } from 'node:fs/promises';
 import { string } from 'rollup-plugin-string';
+import replace from '@rollup/plugin-replace';
 import dts from 'rollup-plugin-dts';
 
 const fileName = 'THEOplayerUI';
@@ -32,6 +33,18 @@ export default (cliArgs) => {
     return defineConfig([
         ...jsConfig(outputDir, { es5: false, production, sourcemap: true }),
         ...jsConfig(outputDir, { es5: true, production, sourcemap: false }),
+        {
+            input: './src/polyfills.ts',
+            output: {
+                file: path.join(outputDir, `${fileName}.polyfills.js`),
+                format: 'iife',
+                sourcemap: false,
+                indent: false,
+                banner
+            },
+            context: 'self',
+            plugins: jsPlugins({ es5: true, module: false, production: true, sourcemap: false })
+        },
         {
             input: './src/index.ts',
             output: {
@@ -117,6 +130,16 @@ function jsPlugins({ es5 = false, module = false, production = false, sourcemap
         string({
             include: ['./src/**/*.html', './src/**/*.svg']
         }),
+        // Replace `globalThis` in lit-html.
+        es5
+            ? replace({
+                  preventAssignment: true,
+                  delimiters: ['\\b', '\\b'],
+                  values: {
+                      globalThis: 'self'
+                  }
+              })
+            : undefined,
         // Transpile TypeScript.
         swc({
             include: './src/**',
@@ -149,18 +172,16 @@ function jsPlugins({ es5 = false, module = false, production = false, sourcemap
                 externalHelpers: true
             }
         }),
-        ...(production
-            ? [
-                  minify({
-                      sourceMap: sourcemap,
-                      mangle: {
-                          toplevel: true
-                      },
-                      toplevel: true,
-                      module,
-                      ecma: es5 ? 5 : 2017
-                  })
-              ]
-            : [])
-    ];
+        production
+            ? minify({
+                  sourceMap: sourcemap,
+                  mangle: {
+                      toplevel: true
+                  },
+                  toplevel: true,
+                  module,
+                  ecma: es5 ? 5 : 2017
+              })
+            : undefined
+    ].filter((plugin) => plugin !== undefined);
 }

src/polyfills.ts

@@ -0,0 +1,3 @@
+import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
+import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
+import 'lit-html/polyfill-support.js';