From 3568476cca94f6c7ae3d5ff0d88920c6d88bbd03 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Mon, 10 Oct 2016 12:24:07 +0100 Subject: [PATCH] aspnet-webpack auto-loads 'event-source-polyfill' on client when HMR is enabled. This requires 'event-source-polyfill' to be included in the client-side bundle, so it's also now added to all the templates' vendor bundles. Fixes #365. --- .../src/WebpackDevMiddleware.ts | 31 ++++++++++++++++--- templates/Angular2Spa/package.json | 1 + .../Angular2Spa/webpack.config.vendor.js | 1 + templates/KnockoutSpa/package.json | 1 + .../KnockoutSpa/webpack.config.vendor.js | 2 +- templates/ReactReduxSpa/package.json | 1 + .../ReactReduxSpa/webpack.config.vendor.js | 2 +- templates/ReactSpa/package.json | 1 + templates/ReactSpa/webpack.config.vendor.js | 2 +- templates/WebApplicationBasic/package.json | 1 + .../webpack.config.vendor.js | 2 +- 11 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts index 9558e67..b54b1fb 100644 --- a/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts +++ b/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts @@ -26,10 +26,6 @@ interface DevServerOptions { ReactHotModuleReplacement: boolean; } -function arrayContainsStringStartingWith(array: string[], prefixToFind: string) { - return array.some(item => item.substring(0, prefixToFind.length) === prefixToFind); -} - function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configuration, enableHotModuleReplacement: boolean, enableReactHotModuleReplacement: boolean, hmrEndpoint: string) { // Build the final Webpack config based on supplied options if (enableHotModuleReplacement) { @@ -49,9 +45,23 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati const webpackHotMiddlewareOptions = `?path=` + encodeURIComponent(hmrEndpoint); if (typeof entryPoints[entryPointName] === 'string') { entryPoints[entryPointName] = [webpackHotMiddlewareEntryPoint + webpackHotMiddlewareOptions, entryPoints[entryPointName]]; - } else if (!arrayContainsStringStartingWith(entryPoints[entryPointName], webpackHotMiddlewareEntryPoint)) { + } else if (firstIndexOfStringStartingWith(entryPoints[entryPointName], webpackHotMiddlewareEntryPoint) < 0) { entryPoints[entryPointName].unshift(webpackHotMiddlewareEntryPoint + webpackHotMiddlewareOptions); } + + // Now also inject eventsource polyfill so this can work on IE/Edge (unless it's already there) + const eventSourcePolyfillEntryPoint = 'event-source-polyfill'; + const entryPointsArray: string[] = entryPoints[entryPointName]; // We know by now that it's an array, because if it wasn't, we already wrapped it in one + if (entryPointsArray.indexOf(eventSourcePolyfillEntryPoint) < 0) { + const webpackHmrIndex = firstIndexOfStringStartingWith(entryPointsArray, webpackHotMiddlewareEntryPoint); + if (webpackHmrIndex < 0) { + // This should not be possible, since we just added it if it was missing + throw new Error('Cannot find ' + webpackHotMiddlewareEntryPoint + ' in entry points array: ' + entryPointsArray); + } + + // Insert the polyfill just before the HMR entrypoint + entryPointsArray.splice(webpackHmrIndex, 0, eventSourcePolyfillEntryPoint); + } }); webpackConfig.plugins = [].concat(webpackConfig.plugins || []); // Be sure not to mutate the original array, as it might be shared @@ -168,3 +178,14 @@ function removeTrailingSlash(str: string) { function getPath(publicPath: string) { return url.parse(publicPath).path; } + +function firstIndexOfStringStartingWith(array: string[], prefixToFind: string) { + for (let index = 0; index < array.length; index++) { + const candidate = array[index]; + if (candidate.substring(0, prefixToFind.length) === prefixToFind) { + return index; + } + } + + return -1; // Not found +} diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json index de44cae..ff7d598 100644 --- a/templates/Angular2Spa/package.json +++ b/templates/Angular2Spa/package.json @@ -21,6 +21,7 @@ "css": "^2.2.1", "css-loader": "^0.25.0", "es6-shim": "^0.35.1", + "event-source-polyfill": "^0.0.7", "expose-loader": "^0.7.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js index 5853c8d..89371ba 100644 --- a/templates/Angular2Spa/webpack.config.vendor.js +++ b/templates/Angular2Spa/webpack.config.vendor.js @@ -30,6 +30,7 @@ module.exports = { 'bootstrap/dist/css/bootstrap.css', 'es6-shim', 'es6-promise', + 'event-source-polyfill', 'jquery', 'zone.js', ] diff --git a/templates/KnockoutSpa/package.json b/templates/KnockoutSpa/package.json index 6a92079..fb661bb 100644 --- a/templates/KnockoutSpa/package.json +++ b/templates/KnockoutSpa/package.json @@ -7,6 +7,7 @@ "bundle-loader": "^0.5.4", "crossroads": "^0.12.2", "css-loader": "^0.23.1", + "event-source-polyfill": "^0.0.7", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "history": "^2.0.1", diff --git a/templates/KnockoutSpa/webpack.config.vendor.js b/templates/KnockoutSpa/webpack.config.vendor.js index bc734d9..049bc83 100644 --- a/templates/KnockoutSpa/webpack.config.vendor.js +++ b/templates/KnockoutSpa/webpack.config.vendor.js @@ -15,7 +15,7 @@ module.exports = { ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'knockout', 'crossroads', 'history', 'isomorphic-fetch', 'style-loader', 'jquery'], + vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'knockout', 'crossroads', 'event-source-polyfill', 'history', 'isomorphic-fetch', 'style-loader', 'jquery'], }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), diff --git a/templates/ReactReduxSpa/package.json b/templates/ReactReduxSpa/package.json index ea162cb..46fd478 100644 --- a/templates/ReactReduxSpa/package.json +++ b/templates/ReactReduxSpa/package.json @@ -12,6 +12,7 @@ "bootstrap": "^3.3.6", "css-loader": "^0.23.1", "domain-task": "^2.0.0", + "event-source-polyfill": "^0.0.7", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "jquery": "^2.2.1", diff --git a/templates/ReactReduxSpa/webpack.config.vendor.js b/templates/ReactReduxSpa/webpack.config.vendor.js index 7e4175a..96d6bc3 100644 --- a/templates/ReactReduxSpa/webpack.config.vendor.js +++ b/templates/ReactReduxSpa/webpack.config.vendor.js @@ -15,7 +15,7 @@ module.exports = { ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'domain-task', 'react', 'react-dom', 'react-router', 'redux', 'redux-thunk', 'react-router-redux', 'redux-typed', 'style-loader', 'jquery'], + vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'domain-task', 'event-source-polyfill', 'react', 'react-dom', 'react-router', 'redux', 'redux-thunk', 'react-router-redux', 'redux-typed', 'style-loader', 'jquery'], }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), diff --git a/templates/ReactSpa/package.json b/templates/ReactSpa/package.json index ed42443..cdb6d9c 100644 --- a/templates/ReactSpa/package.json +++ b/templates/ReactSpa/package.json @@ -10,6 +10,7 @@ "babel-preset-react": "^6.5.0", "bootstrap": "^3.3.6", "css-loader": "^0.23.1", + "event-source-polyfill": "^0.0.7", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "isomorphic-fetch": "^2.2.1", diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js index 8a95bb3..c3421e8 100644 --- a/templates/ReactSpa/webpack.config.vendor.js +++ b/templates/ReactSpa/webpack.config.vendor.js @@ -15,7 +15,7 @@ module.exports = { ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'], + vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'], }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), diff --git a/templates/WebApplicationBasic/package.json b/templates/WebApplicationBasic/package.json index b899475..ff1e734 100644 --- a/templates/WebApplicationBasic/package.json +++ b/templates/WebApplicationBasic/package.json @@ -4,6 +4,7 @@ "devDependencies": { "bootstrap": "^3.3.6", "css-loader": "^0.23.1", + "event-source-polyfill": "^0.0.7", "extendify": "^1.0.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", diff --git a/templates/WebApplicationBasic/webpack.config.vendor.js b/templates/WebApplicationBasic/webpack.config.vendor.js index 19ad77c..c6161de 100644 --- a/templates/WebApplicationBasic/webpack.config.vendor.js +++ b/templates/WebApplicationBasic/webpack.config.vendor.js @@ -15,7 +15,7 @@ module.exports = { ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery'] + vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'style-loader', 'jquery'] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'),