Merge pull request #6558 from tkqubo/webpack-hot-module-replacement

webpack: add Hot Module Replacement

webpack/webpack-env-tests.ts

@@ -13,3 +13,68 @@ let contextModule = context<SomeModule>('./someModule');
 require(['./someModule', './otherModule'], (someModule: SomeModule, otherModule: any) => {
 
 });
+
+// check if HMR is enabled
+if(module.hot) {
+    // accept update of dependency
+    module.hot.accept("./handler.js", function() {
+        //...
+    });
+}
+
+module.exports = null;
+
+// check if HMR is enabled
+if(module.hot) {
+
+    // accept itself
+    module.hot.accept();
+
+    // dispose handler
+    module.hot.dispose(function() {
+        // revoke the side effect
+        //...
+    });
+}
+
+class ModuleData {
+    updated: boolean;
+}
+
+if (module.hot) {
+    module.hot.accept((err: Error) => {
+       //...
+    });
+
+    module.hot.decline("./someModule");
+
+    module.hot.dispose((data: ModuleData) => {
+        data.updated = true;
+        // ...
+    });
+
+    let disposeHandler: ((data: ModuleData) => void) = data => {
+        // ...
+    };
+    module.hot.addDisposeHandler(disposeHandler);
+    module.hot.removeDisposeHandler(disposeHandler);
+
+    module.hot.check(true, (err: Error, outdatedModules: (string|number)[]) => {
+       // ...
+    });
+
+    module.hot.apply({ ignoreUnaccepted: true }, (err: Error, outdatedModules: (string|number)[]) => {
+        // ...
+    });
+
+    var status: string = module.hot.status();
+    let statusHandler: ((status: string) => void) = status => {
+        // ...
+    };
+    module.hot.status(statusHandler);
+    module.hot.addStatusHandler(statusHandler);
+    module.hot.removeStatusHandler(statusHandler);
+}
+
+
+

webpack/webpack-env.d.ts

@@ -51,6 +51,133 @@ declare namespace __WebpackModuleApi {
             [id: string]: any;
         }
     }
+
+    interface Module {
+        exports: any;
+        require(id: string): any;
+        id: string;
+        filename: string;
+        loaded: boolean;
+        parent: any;
+        children: any[];
+        hot: Hot;
+    }
+    type ModuleId = string|number;
+
+    interface Hot {
+        /**
+         * Accept code updates for the specified dependencies. The callback is called when dependencies were replaced.
+         * @param dependencies
+         * @param callback
+         */
+        accept(dependencies: string[], callback: (updatedDependencies: ModuleId[]) => void): void;
+        /**
+         * Accept code updates for the specified dependencies. The callback is called when dependencies were replaced.
+         * @param dependency
+         * @param callback
+         */
+        accept(dependency: string, callback: () => void): void;
+        /**
+         * Accept code updates for this module without notification of parents.
+         * This should only be used if the module doesn’t export anything.
+         * The errHandler can be used to handle errors that occur while loading the updated module.
+         * @param errHandler
+         */
+        accept(errHandler?: (err: Error) => void): void;
+        /**
+         * Do not accept updates for the specified dependencies. If any dependencies is updated, the code update fails with code "decline".
+         */
+        decline(dependencies: string[]): void;
+        /**
+         * Do not accept updates for the specified dependencies. If any dependencies is updated, the code update fails with code "decline".
+         */
+        decline(dependency: string): void;
+        /**
+         * Flag the current module as not update-able. If updated the update code would fail with code "decline".
+         */
+        decline(): void;
+        /**
+         * Add a one time handler, which is executed when the current module code is replaced.
+         * Here you should destroy/remove any persistent resource you have claimed/created.
+         * If you want to transfer state to the new module, add it to data object.
+         * The data will be available at module.hot.data on the new module.
+         * @param callback
+         */
+        dispose<T>(callback: (data: T) => void): void;
+        /**
+         * Add a one time handler, which is executed when the current module code is replaced.
+         * Here you should destroy/remove any persistent resource you have claimed/created.
+         * If you want to transfer state to the new module, add it to data object.
+         * The data will be available at module.hot.data on the new module.
+         * @param callback
+         */
+        addDisposeHandler<T>(callback: (data: T) => void): void;
+        /**
+         * Remove a handler.
+         * This can useful to add a temporary dispose handler. You could i. e. replace code while in the middle of a multi-step async function.
+         * @param callback
+         */
+        removeDisposeHandler<T>(callback: (data: T) => void): void;
+        /**
+         * Throws an exceptions if status() is not idle.
+         * Check all currently loaded modules for updates and apply updates if found.
+         * If no update was found, the callback is called with null.
+         * If autoApply is truthy the callback will be called with all modules that were disposed.
+         * apply() is automatically called with autoApply as options parameter.
+         * If autoApply is not set the callback will be called with all modules that will be disposed on apply().
+         * @param autoApply
+         * @param callback
+         */
+        check(autoApply: boolean, callback: (err: Error, outdatedModules: ModuleId[]) => void): void;
+        /**
+         * Throws an exceptions if status() is not idle.
+         * Check all currently loaded modules for updates and apply updates if found.
+         * If no update was found, the callback is called with null.
+         * The callback will be called with all modules that will be disposed on apply().
+         * @param callback
+         */
+        check(callback: (err: Error, outdatedModules: ModuleId[]) => void): void;
+        /**
+         * If status() != "ready" it throws an error.
+         * Continue the update process.
+         * @param options
+         * @param callback
+         */
+        apply(options: AcceptOptions, callback: (err: Error, outdatedModules: ModuleId[]) => void): void;
+        /**
+         * If status() != "ready" it throws an error.
+         * Continue the update process.
+         * @param callback
+         */
+        apply(callback: (err: Error, outdatedModules: ModuleId[]) => void): void;
+        /**
+         * Return one of idle, check, watch, watch-delay, prepare, ready, dispose, apply, abort or fail.
+         */
+        status(): string;
+        /** Register a callback on status change. */
+        status(callback: (status: string) => void): void;
+        /** Register a callback on status change. */
+        addStatusHandler(callback: (status: string) => void): void;
+        /**
+         * Remove a registered status change handler.
+         * @param callback
+         */
+        removeStatusHandler(callback: (status: string) => void): void;
+
+        active: boolean;
+        data: {};
+    }
+
+    interface AcceptOptions {
+        /**
+         * If true the update process continues even if some modules are not accepted (and would bubble to the entry point).
+         */
+        ignoreUnaccepted?: boolean;
+        /**
+         * Indicates that apply() is automatically called by check function
+         */
+        autoApply?: boolean;
+  }
 }
 
 declare var require: __WebpackModuleApi.RequireFunction;
@@ -101,3 +228,5 @@ declare var __non_webpack_require__: any;
  * Equals the config option debug
  */
 declare var DEBUG: boolean;
+
+declare var module: __WebpackModuleApi.Module;