Create transfer-state module (#752)

* Create module transfer-state * Rename module * Update readme * Fix text in readme
DevExpress · Apr 17, 2018 · d4adc10 · d4adc10
1 parent 9cd5e4e
commit d4adc10
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -136,20 +136,20 @@ See [Angular 5.1 & More Now Available](https://blog.angular.io/angular-5-1-more-
 
 DevExtreme-angular supports caching requests on the server in the server-side rendering mode. This avoids repeatedly requesting data from the browser and renders widgets using data that is initially applied when the page is loaded for the first time.
 
-To enable caching, import the `ServerTransferStateModule` module in the server module's .ts file (usually *src/app.server.module.ts*):
+To enable caching, import the `DxServerTransferStateModule` module in the module's .ts file (usually *src/app.module.ts*):
 
 ```js
-import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
+import { DxServerTransferStateModule } from 'devextreme-angular';
 
 @NgModule({
+    ...
     imports: [
-        AppModule,
-        ServerModule,
-        ServerTransferStateModule,
-        ModuleMapLoaderModule
-    ],
-    bootstrap: [AppComponent],
+        ...
+        DxServerTransferStateModule,
+        ...
+    ]
 })
+export class AppModule {}
 ```
 
 Also, ensure that the application module is bootstrapped when the document has been loaded (the *main.ts* file should contain the code below). Otherwise, caching does not work correctly.
@@ -529,7 +529,7 @@ Angular has a built-in `template` directive. To define the `template` property o
 <dxo-master-detail [template]="'masterDetail'"></dxo-master-detail>
 ```
 
-Note that some options with an object type are not implemented as nested components - for example, 
+Note that some options with an object type are not implemented as nested components - for example,
 [editorOptions of dxDataGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/#editorOptions), [editorOptions of dxForm](https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxForm/Item_Types/SimpleItem/#editorOptions), [the widget option of dxToolbar](https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxToolbar/Default_Item_Template/#options).
 
 ### <a name="accessing-widget-instance"></a>Accessing a DevExtreme Widget Instance ###

diff --git a/src/core/http-request.ts b/src/core/http-request.ts
@@ -1,15 +1,10 @@
-import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { XhrFactory } from '@angular/common/http';
-import { isPlatformServer } from '@angular/common';
 import * as httpRequest from 'devextreme/core/http_request';
-import * as ajax from 'devextreme/core/utils/ajax';
-import * as deferred from 'devextreme/core/utils/deferred';
-import { TransferState, makeStateKey } from '@angular/platform-browser';
 
 @Injectable()
 export class NgHttp {
-    constructor(xhrFactory: XhrFactory, private state: TransferState, @Inject(PLATFORM_ID) private platformId: any) {
-        let that = this;
+    constructor(xhrFactory: XhrFactory) {
         httpRequest.inject({
             getXhr: function() {
                 let _xhr = xhrFactory.build();
@@ -20,47 +15,5 @@ export class NgHttp {
                 return _xhr;
             }
         });
-
-        ajax.inject({
-            sendRequest: function(...args) {
-                let key = makeStateKey(that.generateKey(args)),
-                    сaсhedData = that.state.get(key, null as any);
-
-                if (isPlatformServer(that.platformId)) {
-                    let result = this.callBase.apply(this, args);
-                    result.always((data, status) => {
-                        let dataForCache = {
-                            data: data,
-                            status: status
-                        };
-                        that.state.set(key, dataForCache as any);
-                    });
-                    return result;
-                } else {
-                    if (сaсhedData) {
-                        let d = new deferred.Deferred();
-                        d.resolve(сaсhedData.data, сaсhedData.status);
-                        that.state.set(key, null as any);
-
-                        return d.promise();
-                    }
-                    return this.callBase.apply(this, args);
-                }
-            }
-        });
-    }
-
-    generateKey(args) {
-        let keyValue = '';
-        for (let key in args) {
-            if (typeof args[key] === 'object') {
-                let objKey = this.generateKey(args[key]);
-                keyValue += key + objKey;
-            } else {
-                keyValue += key + args[key];
-            }
-        }
-
-        return keyValue;
     }
 }
diff --git a/src/core/transfer-state.ts b/src/core/transfer-state.ts
@@ -0,0 +1,61 @@
+import { PLATFORM_ID, Inject, NgModule } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import * as ajax from 'devextreme/core/utils/ajax';
+import * as deferred from 'devextreme/core/utils/deferred';
+import { TransferState, makeStateKey, BrowserTransferStateModule } from '@angular/platform-browser';
+import { ServerTransferStateModule } from '@angular/platform-server';
+
+@NgModule({
+  imports: [
+    ServerTransferStateModule,
+    BrowserTransferStateModule
+  ]
+})
+
+export class DxServerTransferStateModule {
+    constructor(private state: TransferState, @Inject(PLATFORM_ID) private platformId: any) {
+        let that = this;
+
+        ajax.inject({
+            sendRequest: function(...args) {
+                let key = makeStateKey(that.generateKey(args)),
+                    сaсhedData = that.state.get(key, null as any);
+
+                if (isPlatformServer(that.platformId)) {
+                    let result = this.callBase.apply(this, args);
+                    result.always((data, status) => {
+                        let dataForCache = {
+                            data: data,
+                            status: status
+                        };
+                        that.state.set(key, dataForCache as any);
+                    });
+                    return result;
+                } else {
+                    if (сaсhedData) {
+                        let d = new deferred.Deferred();
+                        d.resolve(сaсhedData.data, сaсhedData.status);
+                        that.state.set(key, null as any);
+
+                        return d.promise();
+                    }
+                    return this.callBase.apply(this, args);
+                }
+            }
+        });
+    }
+
+    generateKey(args) {
+        let keyValue = '';
+        for (let key in args) {
+            if (typeof args[key] === 'object') {
+                let objKey = this.generateKey(args[key]);
+                keyValue += key + objKey;
+            } else {
+                keyValue += key + args[key];
+            }
+        }
+
+        return keyValue;
+    }
+ }
diff --git a/tests/src/server/ssr-ajax.spec.ts b/tests/src/server/ssr-ajax.spec.ts
@@ -4,13 +4,13 @@ import { Component, PLATFORM_ID } from '@angular/core';
 
 import { isPlatformServer } from '@angular/common';
 
+import { DxServerTransferStateModule, NgHttp } from '../../../dist';
+
 import * as def from 'devextreme/core/utils/deferred';
 import * as ajax from 'devextreme/core/utils/ajax';
 
-import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
-import { BrowserModule, BrowserTransferStateModule, TransferState, makeStateKey } from '@angular/platform-browser';
-
-import { NgHttp } from '../../../dist';
+import { ServerModule } from '@angular/platform-server';
+import { BrowserModule, TransferState, makeStateKey } from '@angular/platform-browser';
 
 import {
     TestBed,
@@ -45,8 +45,7 @@ describe('Universal', () => {
             {
                 declarations: [TestContainerComponent],
                 imports: [ServerModule,
-                    ServerTransferStateModule,
-                    BrowserTransferStateModule,
+                    DxServerTransferStateModule,
                     BrowserModule.withServerTransition({appId: 'appid'})],
                     providers: [NgHttp]
             });