🐛 distinguish master and slave in patcher (umijs#804)

examples/main/index.html

@@ -26,7 +26,6 @@ <h1>QianKun</h1>
     </div>
   </div>
 
-  <script src="./index.js"></script>
   <script>
     function push(subapp) { history.pushState(null, subapp, subapp) }
   </script>

examples/main/multiple.html

@@ -17,6 +17,5 @@
 <div id="react15">react loading...</div>
 <div id="vue">vue loading...</div>
 
-<script src="./multiple.js"></script>
 </body>
 </html>

examples/main/package.json

@@ -4,18 +4,27 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "parcel index.html --port 7099",
-    "start:multiple": "parcel multiple.html --port 7099",
+    "start": "webpack-dev-server",
+    "start:multiple": "MODE=multiple webpack-dev-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "devDependencies": {
-    "less": "^3.9.0",
-    "parcel-bundler": "^1.12.3"
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.7.1",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less-loader": "^6.2.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   },
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "vue": "^2.6.11",
     "zone.js": "^0.10.2"
   }

examples/main/webpack.config.js

@@ -0,0 +1,51 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { name } = require('./package');
+
+module.exports = {
+  entry: process.env.MODE === 'multiple' ? './multiple.js' : './index.js',
+  devtool: 'source-map',
+  devServer: {
+    port: '7099',
+    clientLogLevel: 'warning',
+    disableHostCheck: true,
+    compress: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    historyApiFallback: true,
+    overlay: { warnings: false, errors: true },
+  },
+  mode: 'development',
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-transform-react-jsx'],
+          },
+        },
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: ['style-loader', 'css-loader', 'less-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: process.env.MODE === 'multiple' ? './multiple' : './index.html',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+      },
+    }),
+  ],
+};

package.json

@@ -58,7 +58,7 @@
   },
   "homepage": "https://github.com/kuitos/qiankun#readme",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "^7.10.5",
     "import-html-entry": "^1.7.0",
     "lodash": "^4.17.11",
     "single-spa": "^5.3.1",

src/sandbox/patchers/__tests__/interval.test.ts

@@ -7,7 +7,7 @@ import { sleep } from '../../../utils';
 import patch from '../interval';
 
 test('patch setInterval', async () => {
-  const free = patch();
+  const free = patch(window);
 
   const clearedListener = jest.fn();
   const unclearedListener = jest.fn();

src/sandbox/patchers/index.ts

@@ -21,8 +21,8 @@ export function patchAtMounting(
   excludeAssetFilter?: Function,
 ): Freer[] {
   const basePatchers = [
-    () => patchInterval(),
-    () => patchWindowListener(),
+    () => patchInterval(sandbox.proxy),
+    () => patchWindowListener(sandbox.proxy),
     () => patchHistoryListener(),
     () => patchDynamicAppend(appName, elementGetter, sandbox.proxy, true, singular, scopedCSS, excludeAssetFilter),
   ];

src/sandbox/patchers/interval.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /**
  * @author Kuitos
  * @since 2019-04-11
@@ -8,26 +9,24 @@ import { noop } from 'lodash';
 const rawWindowInterval = window.setInterval;
 const rawWindowClearInterval = window.clearInterval;
 
-export default function patch() {
+export default function patch(global: Window) {
   let intervals: number[] = [];
 
-  // @ts-ignore
-  window.clearInterval = (intervalId: number) => {
+  global.clearInterval = (intervalId: number) => {
     intervals = intervals.filter(id => id !== intervalId);
     return rawWindowClearInterval(intervalId);
   };
 
-  // @ts-ignore
-  window.setInterval = (handler: Function, timeout?: number, ...args: any[]) => {
+  global.setInterval = (handler: Function, timeout?: number, ...args: any[]) => {
     const intervalId = rawWindowInterval(handler, timeout, ...args);
     intervals = [...intervals, intervalId];
     return intervalId;
   };
 
   return function free() {
-    intervals.forEach(id => window.clearInterval(id));
-    window.setInterval = rawWindowInterval;
-    window.clearInterval = rawWindowClearInterval;
+    intervals.forEach(id => global.clearInterval(id));
+    global.setInterval = rawWindowInterval;
+    global.clearInterval = rawWindowClearInterval;
 
     return noop;
   };

src/sandbox/patchers/windowListener.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /**
  * @author Kuitos
  * @since 2019-04-11
@@ -8,10 +9,10 @@ import { noop } from 'lodash';
 const rawAddEventListener = window.addEventListener;
 const rawRemoveEventListener = window.removeEventListener;
 
-export default function patch() {
+export default function patch(global: WindowProxy) {
   const listenerMap = new Map<string, EventListenerOrEventListenerObject[]>();
 
-  window.addEventListener = (
+  global.addEventListener = (
     type: string,
     listener: EventListenerOrEventListenerObject,
     options?: boolean | AddEventListenerOptions,
@@ -21,7 +22,7 @@ export default function patch() {
     return rawAddEventListener.call(window, type, listener, options);
   };
 
-  window.removeEventListener = (
+  global.removeEventListener = (
     type: string,
     listener: EventListenerOrEventListenerObject,
     options?: boolean | AddEventListenerOptions,
@@ -35,10 +36,10 @@ export default function patch() {
 
   return function free() {
     listenerMap.forEach((listeners, type) =>
-      [...listeners].forEach(listener => window.removeEventListener(type, listener)),
+      [...listeners].forEach(listener => global.removeEventListener(type, listener)),
     );
-    window.addEventListener = rawAddEventListener;
-    window.removeEventListener = rawRemoveEventListener;
+    global.addEventListener = rawAddEventListener;
+    global.removeEventListener = rawRemoveEventListener;
 
     return noop;
   };