Merge pull request #2131 from dmitrylyzo/es6-webos

Fix babel support for legacy browsers

babel.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+    babelrcRoots: [
+        // Keep the root as a root
+        '.'
+    ],
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                useBuiltIns: 'usage',
+                corejs: 3
+            }
+        ]
+    ],
+    plugins: [
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-private-methods',
+        'babel-plugin-dynamic-import-polyfill'
+    ]
+};

package.json

@@ -10,9 +10,12 @@
     "@babel/eslint-plugin": "^7.12.1",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-private-methods": "^7.12.1",
+    "@babel/plugin-transform-modules-umd": "^7.12.1",
     "@babel/preset-env": "^7.12.7",
+    "@uupaa/dynamic-import-polyfill": "^1.0.2",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.2.2",
+    "babel-plugin-dynamic-import-polyfill": "^1.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "confusing-browser-globals": "^1.0.10",
     "copy-webpack-plugin": "^6.3.2",
@@ -75,21 +78,6 @@
     "workbox-core": "^5.1.4",
     "workbox-precaching": "^5.1.4"
   },
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "useBuiltIns": "usage",
-          "corejs": 3
-        }
-      ]
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-class-properties",
-      "@babel/plugin-proposal-private-methods"
-    ]
-  },
   "browserslist": [
     "last 2 Firefox versions",
     "last 2 Chrome versions",

src/components/viewContainer.js

@@ -1,3 +1,4 @@
+import { importModule } from '@uupaa/dynamic-import-polyfill';
 import './viewManager/viewContainer.css';
 import Dashboard from '../scripts/clientUtils';
 
@@ -17,7 +18,7 @@ import Dashboard from '../scripts/clientUtils';
 
             controllerUrl = Dashboard.getPluginUrl(controllerUrl);
             const apiUrl = ApiClient.getUrl('/web/' + controllerUrl);
-            return import(/* webpackIgnore: true */ apiUrl).then((ControllerFactory) => {
+            return importModule(apiUrl).then((ControllerFactory) => {
                 options.controllerFactory = ControllerFactory;
             });
         }

src/scripts/site.js

@@ -30,6 +30,8 @@ import { pageClassOn, serverAddress } from './clientUtils';
 import '../libraries/screensavermanager';
 import './serverNotifications';
 import '../components/playback/playerSelectionMenu';
+import '../legacy/focusPreventScroll';
+import '../legacy/vendorStyles';
 import SyncPlay from '../components/syncPlay/core';
 import { playbackManager } from '../components/playback/playbackmanager';
 import SyncPlayToasts from '../components/syncPlay/ui/syncPlayToasts';

webpack.common.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const packageConfig = require('./package.json');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
@@ -24,7 +23,7 @@ const LibarchiveWasm = [
 
 module.exports = {
     context: path.resolve(__dirname, 'src'),
-    target: 'web',
+    target: 'browserslist',
     resolve: {
         modules: [
             path.resolve(__dirname, 'node_modules')
@@ -91,11 +90,20 @@ module.exports = {
             },
             {
                 test: /\.js$/,
-                exclude: /node_modules[\\/](?!date-fns|epubjs)/,
+                exclude: /node_modules[\\/](?!@uupaa[\\/]dynamic-import-polyfill|date-fns|epubjs|flv.js|libarchive.js)/,
+                use: [{
+                    loader: 'babel-loader'
+                }]
+            },
+            /* modules that Babel breaks when transforming to ESM */
+            {
+                test: /node_modules[\\/](pdfjs-dist|xmldom)[\\/].*\.js$/,
                 use: [{
                     loader: 'babel-loader',
                     options: {
-                        presets: packageConfig.babel.presets
+                        plugins: [
+                            '@babel/transform-modules-umd'
+                        ]
                     }
                 }]
             },

yarn.lock

@@ -152,7 +152,7 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
+"@babel/helper-module-imports@7.x", "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
   integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
@@ -1148,6 +1148,11 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
+"@uupaa/dynamic-import-polyfill@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@uupaa/dynamic-import-polyfill/-/dynamic-import-polyfill-1.0.2.tgz#e540cfd8671058fe1e48f816fc8be07e058d5d3a"
+  integrity sha512-V3vzdXunOKKob1F+2ldv/4iGQoQA/iyqtW8PVlr1v16xCCKL831pGUubT+vs5/9wxTE/zBKEhjIjmmpK6nqw2A==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -1606,6 +1611,13 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-dynamic-import-polyfill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-polyfill/-/babel-plugin-dynamic-import-polyfill-1.0.0.tgz#f251f47ae05ab193cb0ffb93cae0cfe0bf2bd122"
+  integrity sha512-fqdut9hGeaAgdX3sbAY25TkqA7LPmZB+Hf1XI67AppvhUw1cBST58BPwl5kPwDZYIvmqRwnsVKM0lppsQAsxhg==
+  dependencies:
+    "@babel/helper-module-imports" "7.x"
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"