@angularclass/hmr - npm Package Compare versions

Comparing version 2.1.3 to 3.0.0

dist/experimental.js

@@ -1,4 +0,2 @@
-"use strict";
 // Experimental API below
-Object.defineProperty(exports, "__esModule", { value: true });
 /**
@@ -12,14 +10,14 @@ * get input values
  */
-function __getInputValues() {
-    var _inputs = document.querySelectorAll('input, textarea, select');
-    var inputs = Array.prototype.slice.call(_inputs);
+export function __getInputValues() {
+    const _inputs = document.querySelectorAll('input, textarea, select');
+    const inputs = Array.prototype.slice.call(_inputs);
     return inputs.map(function (input) {
-        var inputTagName = input.tagName.toLowerCase();
-        var inputType = input.type;
-        var inputId = (input.id && typeof input.id === 'string') ? input.id : null;
-        var inputName = (input.name && typeof input.name === 'string') ? input.name : null;
-        var inputValue = (input.value && typeof input.value === 'string') ? input.value : null;
-        var inputChildNodes = input.childNodes;
-        var inputSelected = Boolean(input.selected);
-        var elementStore = {
+        const inputTagName = input.tagName.toLowerCase();
+        const inputType = input.type;
+        const inputId = (input.id && typeof input.id === 'string') ? input.id : null;
+        const inputName = (input.name && typeof input.name === 'string') ? input.name : null;
+        const inputValue = (input.value && typeof input.value === 'string') ? input.value : null;
+        const inputChildNodes = input.childNodes;
+        const inputSelected = Boolean(input.selected);
+        let elementStore = {
             'tag': inputTagName,
@@ -55,4 +53,4 @@ 'type': null,
         else if ('select' === inputTagName) {
-            var childNodes = Array.prototype.slice.call(inputChildNodes);
-            var options = childNodes.map(function (option, i) {
+            const childNodes = Array.prototype.slice.call(inputChildNodes);
+            const options = childNodes.map((option, i) => {
                 return { value: option['value'], selected: Boolean(option['selected']) };
@@ -66,3 +64,2 @@ });
 }
-exports.__getInputValues = __getInputValues;
 /**
@@ -74,10 +71,10 @@ * set input values
  */
-function __setInputValues($inputs) {
-    var inputs = document.querySelectorAll('input, textarea');
-    $inputs.forEach(function (store, i) {
+export function __setInputValues($inputs) {
+    const inputs = document.querySelectorAll('input, textarea');
+    $inputs.forEach((store, i) => {
         if ('input' === store.tag || 'textarea' === store.tag) {
             if ('input' === store.tag && ('checkbox' === store.type || 'radio' === store.type)) {
-                var selector = 'input' + (null !== store.id ? '#' + store.id : '') + '[type="' + store.type + '"]' + (null !== store.name ? '[name="' + store.name + '"]' : '') +
+                let selector = 'input' + (null !== store.id ? '#' + store.id : '') + '[type="' + store.type + '"]' + (null !== store.name ? '[name="' + store.name + '"]' : '') +
                     '[value="' + store.value + '"]';
-                var element = document.body.querySelector(selector);
+                let element = document.body.querySelector(selector);
                 if (element && Boolean(store['checked'])) {
@@ -106,6 +103,6 @@ element['checked'] = 'checked';
                 else {
-                    var selector = 'input' +
+                    let selector = 'input' +
                         (null !== store.id ? '#' + store.id : '') + ('input' === store.tag ? '[type="' + store.type + '"]' : '') +
                         (null !== store.name ? '[name="' + store.name + '"]' : '');
-                    var element = document.body.querySelector(selector);
+                    let element = document.body.querySelector(selector);
                     if (element && store.value.length) {
@@ -119,23 +116,23 @@ element['value'] = store.value;
         else if ('select' === store.tag) {
-            var select_1 = null;
+            let select = null;
             if (null === store.id && null === store.name) {
                 if (inputs[i] && inputs[i].tagName.toLowerCase() === store.tag && ('string' !== typeof inputs[i].id || !inputs[i].id.length) &&
                     ('string' !== typeof inputs[i].getAttribute('name') || !inputs[i].getAttribute('name').length)) {
-                    select_1 = inputs[i];
+                    select = inputs[i];
                 }
             }
             else {
-                var selector = 'select' + (null !== store.id ? '#' + store.id : '') + (null !== store.name ? '[name="' + store.name + '"]' : '');
-                var element = document.body.querySelector(selector);
+                let selector = 'select' + (null !== store.id ? '#' + store.id : '') + (null !== store.name ? '[name="' + store.name + '"]' : '');
+                let element = document.body.querySelector(selector);
                 if (element) {
-                    select_1 = element;
+                    select = element;
                 }
             }
-            if (select_1) {
-                store.options.forEach(function (storedOption, j) {
-                    var option = select_1.querySelector('option[value="' + storedOption.value + '"]');
+            if (select) {
+                store.options.forEach((storedOption, j) => {
+                    let option = select.querySelector('option[value="' + storedOption.value + '"]');
                     if (!option &&
-                        select_1.childNodes[j] &&
-                        ('string' !== typeof select_1.childNodes[j]['value'] || !select_1.childNodes[j]['value'].length)) {
-                        option = select_1.childNodes[j];
+                        select.childNodes[j] &&
+                        ('string' !== typeof select.childNodes[j]['value'] || !select.childNodes[j]['value'].length)) {
+                        option = select.childNodes[j];
                     }
@@ -151,5 +148,4 @@ if (option && !!storedOption.selected) {
 }
-exports.__setInputValues = __setInputValues;
-function __createInputTransfer() {
-    var $inputs = __getInputValues();
+export function __createInputTransfer() {
+    const $inputs = __getInputValues();
     return function restoreInputValues() {
@@ -159,3 +155,2 @@ return __setInputValues($inputs);
 }
-exports.__createInputTransfer = __createInputTransfer;
 //# sourceMappingURL=experimental.js.map

dist/helpers.js

@@ -1,3 +0,1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 // Hot Module Replacement
@@ -7,5 +5,5 @@ function identity(val) {
 }
-function bootloader(main, before, after) {
+export function bootloader(main, before, after) {
     if (typeof main === 'object') {
-        var _main = main.main;
+        const _main = main.main;
         before = main.before;
@@ -17,3 +15,3 @@ after = main.after;
     after = after || identity;
-    var readyState = document.readyState;
+    const readyState = document.readyState;
     function __domReadyHandler() {
@@ -33,9 +31,8 @@ document.removeEventListener('DOMContentLoaded', __domReadyHandler);
 }
-exports.bootloader = bootloader;
 // create new host elements and remove the old elements
-function createNewHosts(cmps) {
-    var components = Array.prototype.map.call(cmps, function (componentNode) {
-        var newNode = document.createElement(componentNode.tagName);
-        var parentNode = componentNode.parentNode;
-        var currentDisplay = newNode.style.display;
+export function createNewHosts(cmps) {
+    const components = Array.prototype.map.call(cmps, function (componentNode) {
+        const newNode = document.createElement(componentNode.tagName);
+        const parentNode = componentNode.parentNode;
+        const currentDisplay = newNode.style.display;
         newNode.style.display = 'none';
@@ -53,29 +50,26 @@ parentNode.insertBefore(newNode, componentNode);
     return function removeOldHosts() {
-        components.forEach(function (removeOldHost) { return removeOldHost(); });
+        components.forEach((removeOldHost) => removeOldHost());
     };
 }
-exports.createNewHosts = createNewHosts;
 // remove old styles
-function removeNgStyles() {
-    var docHead = document.head;
-    var _styles = docHead.querySelectorAll('style');
-    var styles = Array.prototype.slice.call(_styles);
+export function removeNgStyles() {
+    const docHead = document.head;
+    const _styles = docHead.querySelectorAll('style');
+    const styles = Array.prototype.slice.call(_styles);
     styles
-        .filter(function (style) { return style.innerText.indexOf('_ng') !== -1; })
-        .map(function (el) { return docHead.removeChild(el); });
+        .filter((style) => style.innerText.indexOf('_ng') !== -1)
+        .map((el) => docHead.removeChild(el));
 }
-exports.removeNgStyles = removeNgStyles;
 // get input values
-function getInputValues() {
-    var _inputs = document.querySelectorAll('input');
-    var inputs = Array.prototype.slice.call(_inputs);
-    return inputs.map(function (input) { return input.value; });
+export function getInputValues() {
+    const _inputs = document.querySelectorAll('input');
+    const inputs = Array.prototype.slice.call(_inputs);
+    return inputs.map((input) => input.value);
 }
-exports.getInputValues = getInputValues;
 // set input values
-function setInputValues(_inputs) {
-    var inputs = document.querySelectorAll('input');
+export function setInputValues(_inputs) {
+    const inputs = document.querySelectorAll('input');
     if (_inputs && inputs.length === _inputs.length) {
-        _inputs.forEach(function (value, i) {
-            var el = inputs[i];
+        _inputs.forEach((value, i) => {
+            const el = inputs[i];
             el.value = value;
@@ -88,6 +82,5 @@ el.dispatchEvent(new CustomEvent('input', { detail: el.value }));
 }
-exports.setInputValues = setInputValues;
 // get/set input values
-function createInputTransfer() {
-    var _inputs = getInputValues();
+export function createInputTransfer() {
+    const _inputs = getInputValues();
     return function restoreInputValues() {
@@ -97,3 +90,2 @@ return setInputValues(_inputs);
 }
-exports.createInputTransfer = createInputTransfer;
 //# sourceMappingURL=helpers.js.map

dist/hmr.d.ts

 export declare const MODULE_CONFIG: {
-    'OnInit': string;
-    'OnStatus': string;
-    'OnCheck': string;
-    'OnDecline': string;
-    'OnDestroy': string;
-    'AfterDestroy': string;
+    OnInit: string;
+    OnStatus: string;
+    OnCheck: string;
+    OnDecline: string;
+    OnDestroy: string;
+    AfterDestroy: string;
 };
 export declare function hmrModule(MODULE_REF: any, MODULE: any, CONFIG?: {
-    'OnInit': string;
-    'OnStatus': string;
-    'OnCheck': string;
-    'OnDecline': string;
-    'OnDestroy': string;
-    'AfterDestroy': string;
+    OnInit: string;
+    OnStatus: string;
+    OnCheck: string;
+    OnDecline: string;
+    OnDestroy: string;
+    AfterDestroy: string;
 }): any;

dist/hmr.js

@@ -1,4 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MODULE_CONFIG = {
+export const MODULE_CONFIG = {
     'OnInit': 'hmrOnInit',
@@ -11,33 +9,32 @@ 'OnStatus': 'hmrOnStatus',
 };
-function hmrModule(MODULE_REF, MODULE, CONFIG) {
-    if (CONFIG === void 0) { CONFIG = exports.MODULE_CONFIG; }
+export function hmrModule(MODULE_REF, MODULE, CONFIG = MODULE_CONFIG) {
     if (MODULE['hot']) {
         MODULE['hot']['accept']();
-        if (MODULE_REF.instance[exports.MODULE_CONFIG['OnInit']]) {
+        if (MODULE_REF.instance[MODULE_CONFIG['OnInit']]) {
             if (MODULE['hot']['data']) {
-                MODULE_REF.instance[exports.MODULE_CONFIG['OnInit']](MODULE['hot']['data']);
+                MODULE_REF.instance[MODULE_CONFIG['OnInit']](MODULE['hot']['data']);
             }
         }
-        if (MODULE_REF.instance[exports.MODULE_CONFIG['OnStatus']]) {
+        if (MODULE_REF.instance[MODULE_CONFIG['OnStatus']]) {
             MODULE['hot']['apply'](function hmrOnStatus(status) {
-                MODULE_REF.instance[exports.MODULE_CONFIG['OnStatus']](status);
+                MODULE_REF.instance[MODULE_CONFIG['OnStatus']](status);
             });
         }
-        if (MODULE_REF.instance[exports.MODULE_CONFIG['OnCheck']]) {
+        if (MODULE_REF.instance[MODULE_CONFIG['OnCheck']]) {
             MODULE['hot']['check'](function hmrOnCheck(err, outdatedModules) {
-                MODULE_REF.instance[exports.MODULE_CONFIG['OnCheck']](err, outdatedModules);
+                MODULE_REF.instance[MODULE_CONFIG['OnCheck']](err, outdatedModules);
             });
         }
-        if (MODULE_REF.instance[exports.MODULE_CONFIG['OnDecline']]) {
+        if (MODULE_REF.instance[MODULE_CONFIG['OnDecline']]) {
             MODULE['hot']['decline'](function hmrOnDecline(dependencies) {
-                MODULE_REF.instance[exports.MODULE_CONFIG['OnDecline']](dependencies);
+                MODULE_REF.instance[MODULE_CONFIG['OnDecline']](dependencies);
             });
         }
         MODULE['hot']['dispose'](function hmrOnDestroy(store) {
-            if (MODULE_REF.instance[exports.MODULE_CONFIG['OnDestroy']]) {
-                MODULE_REF.instance[exports.MODULE_CONFIG['OnDestroy']](store);
+            if (MODULE_REF.instance[MODULE_CONFIG['OnDestroy']]) {
+                MODULE_REF.instance[MODULE_CONFIG['OnDestroy']](store);
             }
             MODULE_REF.destroy();
-            if (MODULE_REF.instance[exports.MODULE_CONFIG['AfterDestroy']]) {
-                MODULE_REF.instance[exports.MODULE_CONFIG['AfterDestroy']](store);
+            if (MODULE_REF.instance[MODULE_CONFIG['AfterDestroy']]) {
+                MODULE_REF.instance[MODULE_CONFIG['AfterDestroy']](store);
             }
@@ -48,3 +45,2 @@ });
 }
-exports.hmrModule = hmrModule;
 //# sourceMappingURL=hmr.js.map

dist/index.js

@@ -1,10 +0,5 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
 // Hot Module Replacement
-__export(require("./helpers"));
-__export(require("./experimental"));
-__export(require("./hmr"));
+export * from './helpers';
+export * from './experimental';
+export * from './hmr';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@angularclass/hmr",
-  "version": "2.1.3",
-  "description": "angular-hmr: Hot Module Replacement for Webpack and Angular by @AngularClass",
+  "version": "3.0.0",
+  "description": "angular-hmr: Hot Module Replacement for Webpack and Angular",
   "main": "dist/index.js",
+  "sideEffects": false,
   "types": "dist/index.d.ts",
@@ -18,21 +19,20 @@ "files": [
     "type": "git",
-    "url": "git+https://github.com/angularclass/angular-hmr.git"
+    "url": "git+https://github.com/PatrickJS/angular-hmr.git"
   },
-  "author": "PatrickJS <[e-mail]>",
+  "author": "PatrickJS <[e-mail]>",
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/angularclass/angular-hmr/issues"
+    "url": "https://github.com/PatrickJS/angular-hmr/issues"
   },
-  "homepage": "https://github.com/angularclass/angular-hmr#readme",
+  "homepage": "https://github.com/PatrickJS/angular-hmr#readme",
   "devDependencies": {
-    "@angular/core": "~4.2.4",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "^5.0.1",
-    "tslib": "^1.7.1",
-    "typescript": "^2.3.2",
-    "zone.js": "^0.8.12",
-    "webpack": "3"
+    "@angular/core": "~10.0.14",
+    "reflect-metadata": "^0.1.13",
+    "rxjs": "^6.6.2",
+    "tslib": "^2.0.1",
+    "typescript": "^3.9.5",
+    "zone.js": "^0.11.1",
+    "webpack": "4.44.1"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

README.md

 <p align="center">
-  <a href="http://courses.angularclass.com/courses/angular-2-fundamentals" target="_blank">
-    <img width="438" alt="Angular 2 Fundamentals" src="https://cloud.githubusercontent.com/assets/1016365/17200649/085798c6-543c-11e6-8ad0-2484f0641624.png">
-  </a>
-</p>
-
----
-
-<p align="center">
-  <a href="http://angularclass.com" target="_blank">
+  <a href="https://github.com/PatrickJS/angular-hmr" target="_blank">
     <img src="https://cloud.githubusercontent.com/assets/1016365/26220655/77e69902-3be1-11e7-8305-87471affe598.png" alt="Angular HMR" width="500" height="320"/>
@@ -18,9 +10,6 @@ </a>
 > Angular-HMR
-Hot Module Reloading for Webpack 2 and Angular 4. All versions of Angular will work with this module
+Hot Module Reloading for Webpack and Angular. All versions of Angular and Webpack will work with this module
 
-`npm install @angularclass/hmr @angularclass/hmr-loader`
+`npm install @angularclass/hmr`
 
-Please see repository [AngularClass/angular-seed](https://github.com/AngularClass/angular-seed) for a working example.  
-Also download [AngularClass/angular-hmr-loader](https://github.com/AngularClass/angular-hmr-loader)
-
 ![hmr-state-dom](https://cloud.githubusercontent.com/assets/1016365/18380378/e573320e-762b-11e6-99e0-cc110ffacc6a.gif)
@@ -87,3 +76,9 @@
 export function main() {
-  return platformBrowserDynamic().bootstrapModule(MainModule);
+  return platformBrowserDynamic().bootstrapModule(MainModule)
+    // use `hmrModule` or the "@angularclass/hmr-loader"
+    .then((ngModuleRef: any) => {
+      // `module` global ref for webpackhmr
+      // Don't run this in Prod
+      return hmrModule(ngModuleRef, module);
+    });
 }
@@ -115,20 +110,35 @@
 You would bootstrap your app the normal way, in production, after dom is ready. Also, in production, you should remove the loader:
-```es6
-        {
-          test: /\.ts$/,
-          loaders: [
-            'awesome-typescript-loader',
-          ].concat(prod ? [] : '@angularclass/hmr-loader')
-        },
-```
 
 ___
 
-enjoy — **AngularClass**
+## @NGRX/platform (NGRX 4.x.x)
+To hook into NGRX 4 you simply need to supply a reducer to set the state, and include it in your development metaReducers.
+```typescript
+// make sure you export for AoT
+export function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
+  return function(state: any, action: any) {
+    if (action.type === 'SET_ROOT_STATE') {
+      return action.payload;
+    }
+    return reducer(state, action);
+  };
+}
+```
+In your root reducer you can do something like this to include it in your `metaReducers`.
+You should access your environment here and only include this in development.
+```typescript
+/**
+ * By default, @ngrx/store uses combineReducers with the reducer map to compose
+ * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
+ * that will be composed to form the root meta-reducer.
+ */
+export const metaReducers: ActionReducer<any, any>[] = [stateSetter]
+```
+Simply supply the metaReducer to the `StoreModule` and your hmr is hooked in.
+```typescript
+ StoreModule.forRoot(reducers, { metaReducers }),
+```
 
-<br><br>
 
-[![AngularClass](https://cloud.githubusercontent.com/assets/1016365/9863770/cb0620fc-5af7-11e5-89df-d4b0b2cdfc43.png  "Angular Class")](https://angularclass.com)
-##[AngularClass](https://angularclass.com)
-> Learn AngularJS, Angular 2, and Modern Web Development from the best.
-> Looking for corporate Angular training, want to host us, or Angular consulting? [e-mail]
+
+enjoy — **PatrickJS**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

142

increased by7.58%

Worsened metrics

Total package byte prevSize

52676

decreased by-2.53%

Lines of code

320

decreased by-6.43%

No dependency changes