Add renderedOnServer flag for integration (#727)

* Add renderedOnServer flag for integration

* Fix tests

* Fix lint

* Change key and name of constant

* Add test for integration option

* Refactoring

* Import key from component

src/core/component.ts

@@ -3,6 +3,8 @@ import {
     NgZone,
     QueryList,
     SimpleChanges,
+    PLATFORM_ID,
+    Inject,
 
     OnChanges,
     OnInit,
@@ -12,6 +14,8 @@ import {
 } from '@angular/core';
 
 import { ɵgetDOM as getDOM } from '@angular/platform-browser';
+import { isPlatformServer } from '@angular/common';
+import { TransferState, makeStateKey } from '@angular/platform-browser';
 
 import { DxTemplateDirective } from './template';
 import { IDxTemplateHost, DxTemplateHost } from './template-host';
@@ -25,6 +29,8 @@ import {
     CollectionNestedOptionContainerImpl
 } from './nested-option';
 
+export const IS_PLATFORM_SERVER = makeStateKey<any>('DX_isPlatformServer');
+
 export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterContentChecked, AfterViewInit,
     INestedOptionContainer, ICollectionNestedOptionContainer, IDxTemplateHost {
     private _initialOptions: any = {};
@@ -59,6 +65,15 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
         this._initialOptions.eventsStrategy = this.eventHelper.strategy;
         this._initialOptions.integrationOptions.watchMethod = this.watcherHelper.getWatchMethod();
     }
+
+    private _initPlatform() {
+        if (this.transferState.hasKey(IS_PLATFORM_SERVER)) {
+            this._initialOptions.integrationOptions.renderedOnServer = this.transferState.get(IS_PLATFORM_SERVER, null);
+        } else if (isPlatformServer(this.platformId)) {
+            this.transferState.set(IS_PLATFORM_SERVER, true);
+        }
+    }
+
     protected _createEventEmitters(events) {
         events.forEach(event => {
             this.eventHelper.createEmitter(event.emit, event.subscribe);
@@ -109,6 +124,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     protected abstract _createInstance(element, options)
     protected _createWidget(element: any) {
         this._initialOptions.integrationOptions = {};
+        this._initPlatform();
         this._initOptions();
 
         let createInstanceOnInit = this.createInstanceOnInit;
@@ -130,7 +146,12 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
             getDOM().remove(element);
         }
     }
-    constructor(protected element: ElementRef, private ngZone: NgZone, templateHost: DxTemplateHost, private watcherHelper: WatcherHelper) {
+    constructor(protected element: ElementRef,
+        private ngZone: NgZone,
+        templateHost: DxTemplateHost,
+        private watcherHelper: WatcherHelper,
+        private transferState: TransferState,
+        @Inject(PLATFORM_ID) private platformId: any) {
         this.templates = [];
         templateHost.setHost(this);
         this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));

templates/component.tst

@@ -13,13 +13,16 @@
 import { HttpClientModule } from '@angular/common/http';
 
 import { BrowserTransferStateModule } from '@angular/platform-browser';
-
+import { TransferState } from '@angular/platform-browser';
 
 import {
     Component,
     NgModule,
     ElementRef,
     NgZone,
+    PLATFORM_ID,
+    Inject,
+
     Input,
     Output,
     OnDestroy,
@@ -129,9 +132,11 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
 
     constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, injector: Injector,
             <#? collectionProperties.length #>private <#?#>_watcherHelper: WatcherHelper<#? collectionProperties.length #>,
-            private _idh: IterableDifferHelper<#?#>, optionHost: NestedOptionHost) {
+            private _idh: IterableDifferHelper<#?#>, optionHost: NestedOptionHost,
+            transferState: TransferState,
+            @Inject(PLATFORM_ID) platformId: any) {
 
-        super(elementRef, ngZone, templateHost, _watcherHelper);
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
         injector.get(EventsRegistrator);
         injector.get(NgDomAdapter);
         injector.get(NgHttp);

tests/src/core/component-extension.spec.ts

@@ -5,9 +5,14 @@ import {
     ElementRef,
     ViewChildren,
     NgZone,
-    QueryList
+    QueryList,
+    PLATFORM_ID,
+    Inject
 } from '@angular/core';
 
+import { TransferState } from '@angular/platform-browser';
+import { BrowserTransferStateModule } from '@angular/platform-browser';
+
 import {
     TestBed,
     async
@@ -33,8 +38,13 @@ let DxTestExtension = DxButton['inherit']({
     providers: [DxTemplateHost, WatcherHelper]
 })
 export class DxTestExtensionComponent extends DxComponentExtension {
-    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper) {
-        super(elementRef, ngZone, templateHost, _watcherHelper);
+    constructor(elementRef: ElementRef,
+        ngZone: NgZone,
+        templateHost: DxTemplateHost,
+        _watcherHelper: WatcherHelper,
+        transferState: TransferState,
+        @Inject(PLATFORM_ID) platformId: any) {
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
 
         this._events = [];
     }
@@ -58,6 +68,7 @@ describe('DevExtreme Angular component extension', () => {
     beforeEach(() => {
         TestBed.configureTestingModule(
             {
+                imports: [BrowserTransferStateModule],
                 declarations: [TestContainerComponent, DxTestExtensionComponent]
             });
     });

tests/src/core/component.spec.ts

@@ -9,9 +9,14 @@ import {
     Input,
     Output,
     QueryList,
-    OnDestroy
+    OnDestroy,
+    PLATFORM_ID,
+    Inject
 } from '@angular/core';
 
+import { TransferState } from '@angular/platform-browser';
+import { BrowserTransferStateModule } from '@angular/platform-browser';
+
 import {
     TestBed,
     async,
@@ -67,8 +72,13 @@ export class DxTestWidgetComponent extends DxComponent implements OnDestroy {
     @Output() testOptionChange = new EventEmitter<any>();
     @Output() textChange = new EventEmitter<any>();
 
-    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper) {
-        super(elementRef, ngZone, templateHost, _watcherHelper);
+    constructor(elementRef: ElementRef,
+        ngZone: NgZone,
+        templateHost: DxTemplateHost,
+        _watcherHelper: WatcherHelper,
+         transferState: TransferState,
+        @Inject(PLATFORM_ID) platformId: any) {
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
 
         this._createEventEmitters([
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
@@ -116,6 +126,7 @@ describe('DevExtreme Angular widget', () => {
     beforeEach(() => {
         TestBed.configureTestingModule(
             {
+                imports: [BrowserTransferStateModule],
                 declarations: [TestContainerComponent, DxTestWidgetComponent]
             });
     });

tests/src/core/nested-option.spec.ts

@@ -14,9 +14,13 @@ import {
     QueryList,
     Host,
     SkipSelf,
-    AfterViewInit
+    AfterViewInit,
+    PLATFORM_ID
 } from '@angular/core';
 
+import { TransferState } from '@angular/platform-browser';
+import { BrowserTransferStateModule } from '@angular/platform-browser';
+
 import { DOCUMENT } from '@angular/common';
 
 import {
@@ -200,8 +204,9 @@ export class DxTestWidgetComponent extends DxComponent {
     @Output() testCollectionOptionWithTemplateChange = new EventEmitter<any>();
 
     constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private _noh: NestedOptionHost,
-        _watcherHelper: WatcherHelper) {
-        super(elementRef, ngZone, templateHost, _watcherHelper);
+        _watcherHelper: WatcherHelper, transferState: TransferState,
+        @Inject(PLATFORM_ID) platformId: any) {
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
 
         this._events = [
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
@@ -233,6 +238,7 @@ describe('DevExtreme Angular widget', () => {
     beforeEach(() => {
         TestBed.configureTestingModule(
             {
+                imports: [BrowserTransferStateModule],
                 declarations: [
                     TestContainerComponent,
                     DxTestWidgetComponent,

tests/src/core/template.spec.ts

@@ -9,9 +9,14 @@ import {
     Input,
     Output,
     QueryList,
-    AfterViewInit
+    AfterViewInit,
+    PLATFORM_ID,
+    Inject
 } from '@angular/core';
 
+import { TransferState } from '@angular/platform-browser';
+import { BrowserTransferStateModule } from '@angular/platform-browser';
+
 import {
     TestBed,
     async
@@ -50,8 +55,13 @@ export class DxTestWidgetComponent extends DxComponent {
     @Output() onOptionChanged = new EventEmitter<any>();
     @Output() testTemplateChange = new EventEmitter<any>();
 
-    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper) {
-        super(elementRef, ngZone, templateHost, _watcherHelper);
+    constructor(elementRef: ElementRef,
+        ngZone: NgZone,
+        templateHost: DxTemplateHost,
+        _watcherHelper: WatcherHelper,
+        transferState: TransferState,
+        @Inject(PLATFORM_ID) platformId: any) {
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
 
         this._createEventEmitters([
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
@@ -72,8 +82,13 @@ export class DxTestWidgetComponent extends DxComponent {
 export class DxTestComponent extends DxComponent implements AfterViewInit {
     templates: DxTemplateDirective[];
 
-    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper) {
-        super(elementRef, ngZone, templateHost, _watcherHelper);
+    constructor(elementRef: ElementRef,
+        ngZone: NgZone,
+        templateHost: DxTemplateHost,
+        _watcherHelper: WatcherHelper,
+        transferState: TransferState,
+        @Inject(PLATFORM_ID) platformId: any) {
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
     }
 
     protected _createInstance(element, options) {
@@ -105,7 +120,7 @@ describe('DevExtreme Angular widget\'s template', () => {
         TestBed.configureTestingModule(
             {
                 declarations: [TestContainerComponent, DxTestWidgetComponent, DxTestComponent],
-                imports: [DxTemplateModule]
+                imports: [DxTemplateModule, BrowserTransferStateModule]
             });
     });
 

tests/src/server/ssr.spec.ts

@@ -1,9 +1,18 @@
 /* tslint:disable:component-selector */
 
 import {
-    Component
+    Component,
+    PLATFORM_ID
 } from '@angular/core';
 
+import { isPlatformServer } from '@angular/common';
+
+import { TransferState } from '@angular/platform-browser';
+
+import { IS_PLATFORM_SERVER } from '../../../dist';
+
+import DxButton from 'devextreme/ui/button';
+
 import {
     TestBed
 } from '@angular/core/testing';
@@ -21,6 +30,11 @@ class TestContainerComponent {
 
 describe('Universal', () => {
 
+    function getWidget(fixture) {
+        let widgetElement = fixture.nativeElement.querySelector('.dx-button') || fixture.nativeElement;
+        return DxButton['getInstance'](widgetElement) as any;
+    }
+
     beforeEach(() => {
         TestBed.configureTestingModule(
             {
@@ -41,4 +55,40 @@ describe('Universal', () => {
         expect(fixture.detectChanges.bind(fixture)).not.toThrow();
     });
 
+    it('should set transfer state for rendererdOnServer option of integration', () => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `<dx-button></dx-button>`
+            }
+        });
+        let platformID = TestBed.get(PLATFORM_ID);
+        if (isPlatformServer(platformID)) {
+            let fixture = TestBed.createComponent(TestContainerComponent);
+            fixture.detectChanges();
+
+            const transferState: TransferState = TestBed.get(TransferState);
+
+            expect(transferState.hasKey(IS_PLATFORM_SERVER)).toBe(true);
+            expect(transferState.get(IS_PLATFORM_SERVER, null as any)).toEqual(true);
+        }
+    });
+
+    it('should set rendererdOnServer option of integration', () => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `<dx-button></dx-button>`
+            }
+        });
+
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        const transferState: TransferState = TestBed.get(TransferState);
+
+        transferState.set(IS_PLATFORM_SERVER, true as any);
+
+        fixture.detectChanges();
+
+        let instance = getWidget(fixture);
+
+        expect(instance.option('integrationOptions.renderedOnServer')).toBe(true);
+    });
 });