Skip to content

Commit

Permalink
Webpack 5 Upgrade (#5007)
Browse files Browse the repository at this point in the history
* Webpack 5 Upgrade

* Disable optimization.usedExportes for webworkify-webpack to work in hls.min.js

* Log when debug logger is enabled with instance/worker id

Co-authored-by: Rob Walch <rob@jwplayer.com>
  • Loading branch information
robwalch and Rob Walch committed Nov 3, 2022
1 parent e5f8729 commit 23111a3
Show file tree
Hide file tree
Showing 11 changed files with 15,955 additions and 7,235 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = {
// see https://github.com/standard/eslint-config-standard
// 'prettier' (https://github.com/prettier/eslint-config-prettier) must be last
extends: ['eslint:recommended', 'prettier'],
ignorePatterns: ['/src/demux/webworkify-webpack.js'],
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: 'module',
Expand Down
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@
/demo/libs
/dist
/lib
/src/demux/webworkify-webpack.js
package-lock.json
9 changes: 6 additions & 3 deletions karma.conf.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const { merge } = require('webpack-merge');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config')({ debug: true })[0];
delete webpackConfig.entry;
delete webpackConfig.output;
Expand All @@ -12,7 +13,7 @@ const karmaWebpack = {
enforce: 'post',
use: [
{
loader: 'istanbul-instrumenter-loader',
loader: 'coverage-istanbul-loader',
options: {
esModules: true,
},
Expand All @@ -21,8 +22,10 @@ const karmaWebpack = {
},
],
},
node: {
global: true,
resolve: {
fallback: {
util: false,
},
},
};

Expand Down
22,951 changes: 15,741 additions & 7,210 deletions package-lock.json

Large diffs are not rendered by default.

15 changes: 7 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,14 @@
"@types/chart.js": "2.9.37",
"@types/mocha": "10.0.0",
"@types/sinon-chai": "3.2.8",
"@typescript-eslint/eslint-plugin": "5.41.0",
"@typescript-eslint/parser": "5.41.0",
"@typescript-eslint/eslint-plugin": "5.42.0",
"@typescript-eslint/parser": "5.42.0",
"babel-loader": "8.2.5",
"babel-plugin-transform-remove-console": "6.9.4",
"chai": "4.3.6",
"chart.js": "2.9.4",
"chromedriver": "106.0.1",
"chromedriver": "107.0.3",
"coverage-istanbul-loader": "3.0.5",
"eslint": "8.26.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
Expand All @@ -84,7 +85,6 @@
"eventemitter3": "4.0.7",
"http-server": "14.1.1",
"husky": "8.0.1",
"istanbul-instrumenter-loader": "3.0.1",
"jsonpack": "1.1.5",
"karma": "6.4.1",
"karma-chrome-launcher": "3.1.1",
Expand All @@ -93,7 +93,7 @@
"karma-mocha-reporter": "2.2.5",
"karma-sinon-chai": "2.0.2",
"karma-sourcemap-loader": "0.3.8",
"karma-webpack": "4.0.2",
"karma-webpack": "5.0.0",
"lint-staged": "13.0.3",
"micromatch": "4.0.5",
"mocha": "10.1.0",
Expand All @@ -108,10 +108,9 @@
"sinon-chai": "3.7.0",
"typescript": "4.8.4",
"url-toolkit": "2.2.5",
"webpack": "4.46.0",
"webpack": "5.74.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.11.1",
"webpack-merge": "5.8.0",
"webworkify-webpack": "2.1.5"
"webpack-merge": "5.8.0"
}
}
3 changes: 1 addition & 2 deletions src/demux/transmuxer-interface.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as work from 'webworkify-webpack';
import work from './webworkify-webpack';
import { Events } from '../events';
import Transmuxer, {
TransmuxConfig,
Expand Down Expand Up @@ -304,7 +304,6 @@ export default class TransmuxerInterface {
}
break;

/* falls through */
default: {
data.data = data.data || {};
data.data.frag = this.frag;
Expand Down
2 changes: 1 addition & 1 deletion src/demux/transmuxer-worker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function TransmuxerWorker(self) {
data.vendor,
data.id
);
enableLogs(config.debug);
enableLogs(config.debug, data.id);
forwardWorkerLogs();
forwardMessage('init', null);
break;
Expand Down
193 changes: 193 additions & 0 deletions src/demux/webworkify-webpack.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/*
* Fork of webworkify-webpack with support for Webpack 5
* https://github.com/wupeng-engineer/webworkify-webpack/blob/db0de7/index.js
*/

const webpackBootstrapFunc = function () {// webpackBootstrap
/******/ var __webpack_modules__ = ENTRY_MODULE
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // module factories are used so entry inlining is disabled
/******/ // startup
/******/ // Load entry module and return exports
/******/ var result = __webpack_require__(ENTRY_MODULE)
/******/ return result.default || result
}
webpackBootstrapFunc.toString();
var moduleNameReqExp = '[\\.|\\-|\\+|\\w|\/|@]+';
var dependencyRegExp = '\\(\\s*(\/\\*.*?\\*\/)?\\s*.*?(' + moduleNameReqExp + ').*?\\)';
function quoteRegExp(str) {
return (str + '').replace(/[.?*+^$[\]\\(){}|-]/g, '\\$&');
}

function isNumeric(n) {
return !isNaN(1 * n);
}
function getModuleDependencies(sources, module, queueName) {
var retval = {};
retval[queueName] = [];
var fnString = module.toString();
var wrapperSignature = fnString.match(/^function\s?\w*\(\w+,\s*\w+,\s*(\w+)\)/) || fnString.match(/^\(\w+,\s*\w+,\s*(\w+)\)\s?\=\s?\>/);
if (!wrapperSignature) return retval;
var webpackRequireName = wrapperSignature[1];
var re = new RegExp('(\\\\n|\\W)' + quoteRegExp(webpackRequireName) + dependencyRegExp, 'g');
var match;
while ((match = re.exec(fnString))) {
if (match[3] === 'dll-reference') continue;
retval[queueName].push(match[3]);
}
re = new RegExp('\\(' + quoteRegExp(webpackRequireName) + '\\("(dll-reference\\s(' + moduleNameReqExp + '))"\\)\\)' + dependencyRegExp, 'g');
while ((match = re.exec(fnString))) {
if (!sources[match[2]]) {
retval[queueName].push(match[1]);
sources[match[2]] = __webpack_require__(match[1]).m;
}
retval[match[2]] = retval[match[2]] || [];
retval[match[2]].push(match[4]);
}
var keys = Object.keys(retval);
for (var i = 0; i < keys.length; i++) {
for (var j = 0; j < retval[keys[i]].length; j++) {
if (isNumeric(retval[keys[i]][j])) {
retval[keys[i]][j] = 1 * retval[keys[i]][j];
}
}
}
return retval;
}

function hasValuesInQueues(queues) {
var keys = Object.keys(queues);
return keys.reduce((hasValues, key) => hasValues || queues[key].length > 0, false);
}
function getRequiredModules(sources, moduleId) {
var modulesQueue = {
main: [moduleId]
};
var requiredModules = {
main: []
};
var seenModules = {
main: {}
};
while (hasValuesInQueues(modulesQueue)) {
var queues = Object.keys(modulesQueue);
for (var i = 0; i < queues.length; i++) {
var queueName = queues[i];
var queue = modulesQueue[queueName];
var moduleToCheck = queue.pop();
seenModules[queueName] = seenModules[queueName] || {};
if (seenModules[queueName][moduleToCheck] || !sources[queueName][moduleToCheck]) continue;
seenModules[queueName][moduleToCheck] = true;
requiredModules[queueName] = requiredModules[queueName] || [];
requiredModules[queueName].push(moduleToCheck);
var newModules = getModuleDependencies(sources, sources[queueName][moduleToCheck], queueName);
var newModulesKeys = Object.keys(newModules);
for (var j = 0; j < newModulesKeys.length; j++) {
modulesQueue[newModulesKeys[j]] = modulesQueue[newModulesKeys[j]] || [];
modulesQueue[newModulesKeys[j]] = modulesQueue[newModulesKeys[j]].concat(newModules[newModulesKeys[j]]);
}
}
}
return requiredModules;
}
function getWebpackString(requiredModules, sources, entryModule, key) {
const moduleString = requiredModules[key].map((id) => `"${id}": ${sources[key][id].toString()}`).join(",");
const webpackBootstrapFuncArr = webpackBootstrapFunc.toString().split("ENTRY_MODULE");
return `${webpackBootstrapFuncArr[0]}{${moduleString}}${webpackBootstrapFuncArr[1]}"${entryModule}"${webpackBootstrapFuncArr[2]}`;
}
export default function (moduleId, options) {
options = options || {};
var sources = {
main: __webpack_modules__
};
var requiredModules = options.all ? { main: Object.keys(sources.main) } : getRequiredModules(sources, moduleId);
var src = '';
Object.keys(requiredModules).filter((m) => m !== 'main').forEach((module) => {
var entryModule = 0;
while (requiredModules[module][entryModule]) {
entryModule++;
}
requiredModules[module].push(entryModule);
sources[module][entryModule] = '(function(module, exports, __webpack_require__) { module.exports = __webpack_require__; })';
src = src + `var ${module} = (${getWebpackString(requiredModules, sources, entryModule, modules)})();\n`;
});
src = src + `((${getWebpackString(requiredModules, sources, moduleId, "main")})())(self);`;
var blob = new window.Blob([src], {
type: 'text/javascript'
});
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
var workerUrl = URL.createObjectURL(blob);
var worker = new window.Worker(workerUrl);
worker.objectURL = workerUrl;
return worker;
}
2 changes: 1 addition & 1 deletion src/hls.ts
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default class Hls implements HlsEventEmitter {
constructor(userConfig: Partial<HlsConfig> = {}) {
const config = (this.config = mergeConfig(Hls.DefaultConfig, userConfig));
this.userConfig = userConfig;
enableLogs(config.debug);
enableLogs(config.debug, 'Hls instance');

this._autoLevelCapping = -1;

Expand Down
4 changes: 2 additions & 2 deletions src/utils/logger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function exportLoggerFunctions(
});
}

export function enableLogs(debugConfig: boolean | ILogger): void {
export function enableLogs(debugConfig: boolean | ILogger, id: string): void {
// check that console is available
if (
(self.console && debugConfig === true) ||
Expand All @@ -71,7 +71,7 @@ export function enableLogs(debugConfig: boolean | ILogger): void {
// Some browsers don't allow to use bind on console object anyway
// fallback to default if needed
try {
exportedLogger.log();
exportedLogger.log(`Debug logs enabled for "${id}"`);
} catch (e) {
exportedLogger = fakeLogger;
}
Expand Down
9 changes: 1 addition & 8 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const baseConfig = {
entry: './src/hls',
optimization: {
splitChunks: false,
usedExports: false, // Must be disabled for webworkify-webpack to work in hls.min.js
},
resolve: {
// Add `.ts` as a resolvable extension.
Expand Down Expand Up @@ -109,14 +110,6 @@ const baseConfig = {
},
],
},
node: {
global: false,
process: false,
__filename: false,
__dirname: false,
Buffer: false,
setImmediate: false,
},
};

function getAliasesForLightDist() {
Expand Down

0 comments on commit 23111a3

Please sign in to comment.