Merge pull request #41 from umijs/feat-event

feat: add eventbus and dynamic import page init event, ref #38.

examples/ts/config.js

@@ -1,5 +1 @@
-export default {
-  alias: {
-    dva: 'dva-no-router',
-  },
-};
+export default {};

examples/ts/pages/index/page.tsx

@@ -4,6 +4,13 @@ import dva from 'dva';
 import Count from './components/Count';
 import styles from './page.css';
 
+import { default as event, Events, EventTypes } from 'umi/event';
+const { PAGE_INITIALIZED } = Events;
+
+event.addEventListener<EventTypes.PAGE_INITIALIZED_TYPE>(PAGE_INITIALIZED, (evt) => {
+  console.log('PAGE_INITIALIZED', evt);
+});
+
 const app = dva();
 app.model(require('./models/count').default);
 

packages/umi-build-dev/src/getRouterContent.js

@@ -34,10 +34,7 @@ function getRouteComponents(routeConfig, config = {}, paths) {
   const { loading } = config;
   let loadingOpts = '';
   if (loading) {
-    loadingOpts = `, { loading: require('${join(
-      paths.cwd,
-      loading,
-    )}').default }`;
+    loadingOpts = `loading: require('${join(paths.cwd, loading)}').default,`;
   }
 
   const routerComponents = Object.keys(routeConfig).map(key => {
@@ -49,11 +46,9 @@ function getRouteComponents(routeConfig, config = {}, paths) {
         : '() => <div>Compiling...</div>';
       return `    <Route exact path="${key}" component={${component}}></Route>`;
     } else {
-      return `    <Route exact path="${
-        key
-      }" component={dynamic(() => import(/* webpackChunkName: '${normalizeEntry(
+      return `    <Route exact path="${key}" component={dynamic(() => import(/* webpackChunkName: '${normalizeEntry(
         routeConfig[key],
-      )}' */'${pageJSFile}')${loadingOpts})}></Route>`;
+      )}' */'${pageJSFile}'), { callback: (err) => callback('${key}', err), ${loadingOpts} }) }></Route>`;
     }
   });
 

packages/umi-build-dev/template/router.js

@@ -1,7 +1,15 @@
 import { Router, Route, Switch } from 'umi-router';
 import dynamic from '<%= libraryName %>/dynamic';
+import { default as event, Events } from '<%= libraryName %>/event';
 
 export default function() {
+
+  function callback(key, err) {
+    if (!err) {
+      event.emit(Events.PAGE_INITIALIZED, { key });
+    }
+  }
+
   return (
 <%= routeComponents %>
   );

packages/umi/dynamic.d.ts

@@ -1,2 +1,7 @@
-declare const dynamic: (resolve: (value?: PromiseLike<any>) => void) => void;
+declare const dynamic: (resolve: (value?: PromiseLike<any>) => void, opts?: {
+  /** LoadingComponent */
+  loading?: Function,
+  /** The callback of load script */
+  callback?: (err?: Error) => void,
+}) => void;
 export default dynamic;

packages/umi/event.d.ts

@@ -0,0 +1,28 @@
+export declare class EventBus {
+  private eventHandlers;
+  /**
+   * addEventListener
+   * @param eventType string
+   * @param callback event callback
+   */
+  addEventListener<T>(eventType: string, callback: (event: T) => void): void;
+  /**
+   * removeEventListener
+   * @param eventType string
+   * @param callback event callback
+   */
+  removeEventListener<T>(eventType: string, callback: (event: T) => void): void;
+  removeAllEventListeners(eventType: any): void;
+  emit<T>(eventType: any, data: T): void;
+}
+
+declare const defaultInstance: EventBus;
+export default defaultInstance;
+
+export const Events: {
+  PAGE_INITIALIZED: string,
+};
+
+export namespace EventTypes {
+  interface PAGE_INITIALIZED_TYPE { key: string }
+}

packages/umi/package.json

@@ -48,7 +48,8 @@
     "babel.js",
     "dynamic.d.ts",
     "link.d.ts",
-    "router.d.ts"
+    "router.d.ts",
+    "event.d.ts"
   ],
   "devDependencies": {
     "glob": "^7.1.2"

packages/umi/src/babel.js

@@ -39,6 +39,7 @@ export default function(context, opts = {}) {
             [`${libraryName}/dynamic`]: require.resolve('./dynamic'),
             [`${libraryName}/link`]: require.resolve('./link'),
             [`${libraryName}/router`]: require.resolve('./router'),
+            [`${libraryName}/event`]: require.resolve('./event'),
           },
         },
       ],

packages/umi/src/dynamic.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
 
 export default function(resolve, opts = {}) {
-  const { loading: LoadingComponent = () => null } = opts;
+  const {
+    loading: LoadingComponent = () => null,
+    callback = () => null,
+  } = opts;
 
   return class DynamicComponent extends Component {
     constructor(...args) {
@@ -22,14 +25,20 @@ export default function(resolve, opts = {}) {
     }
 
     load() {
-      resolve().then(m => {
-        const AsyncComponent = m.default || m;
-        if (this.mounted) {
-          this.setState({ AsyncComponent });
-        } else {
-          this.state.AsyncComponent = AsyncComponent; // eslint-disable-line
-        }
-      });
+      resolve()
+        .then(m => {
+          const AsyncComponent = m.default || m;
+          if (this.mounted) {
+            this.setState({ AsyncComponent }, () => {
+              callback();
+            });
+          } else {
+            this.state.AsyncComponent = AsyncComponent; // eslint-disable-line
+          }
+        })
+        .catch(err => {
+          callback(err);
+        });
     }
 
     render() {

packages/umi/src/event.js

@@ -0,0 +1,40 @@
+export class EventBus {
+  eventHandlers = {};
+
+  addEventListener(type, callback) {
+    if (!this.eventHandlers[type]) {
+      this.eventHandlers[type] = [];
+    }
+    this.eventHandlers[type].push(callback);
+  }
+
+  removeEventListener(type, callback) {
+    const element = this.eventHandlers[type];
+    if (element) {
+      const index = element.indexOf(callback);
+      if (index !== -1) {
+        element.splice(index, 1);
+      }
+    }
+  }
+
+  removeAllEventListeners(type) {
+    this.eventHandlers[type] = [];
+  }
+
+  emit(type, data) {
+    if (this.eventHandlers[type]) {
+      this.eventHandlers[type].forEach(handler => {
+        handler(data);
+      });
+    }
+  }
+}
+
+export default new EventBus();
+
+const Events = {
+  PAGE_INITIALIZED: 'pageInitialized',
+};
+
+export { Events };