Fix double rendering of renovated components in ssr mode angular (T12…

…55582)
DevExpress · Jan 17, 2025 · 59b246a · 59b246a
1 parent d45b84e
commit 59b246a
Show file tree

Hide file tree

Showing 84 changed files with 233 additions and 4 deletions.
diff --git a/packages/devextreme-angular/karma.test.shim.js b/packages/devextreme-angular/karma.test.shim.js
@@ -8,6 +8,6 @@ testing.TestBed.initTestEnvironment(
   browser.platformBrowserDynamicTesting(),
 );
 
-const context = require.context('./tests/dist', true, /^.\/(?!.*\/ssr-components\.spec.js$).*\.spec\.js$/);
+const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();
diff --git a/packages/devextreme-angular/src/server/render.ts b/packages/devextreme-angular/src/server/render.ts
@@ -21,15 +21,21 @@ export class DxServerModule {
           const el = infernoRenderer.createElement(component, props);
           const document = container.ownerDocument;
           const temp = document.createElement(container.tagName);
+
           temp.innerHTML = renderToString(el);
+
           const mainElement = temp.childNodes[0];
           const childString = mainElement.innerHTML;
 
           for (let i = 0; i < mainElement.attributes.length; i++) {
-            temp.setAttribute(mainElement.attributes[i].name, mainElement.attributes[i].value);
+            const attr = mainElement.attributes[i];
+
+            if (!container.hasAttribute(attr.name)) {
+              container.setAttribute(attr.name, attr.value);
+            }
           }
-          temp.innerHTML = childString;
-          container.outerHTML = temp.outerHTML;
+
+          container.innerHTML = childString;
         },
       });
     }

diff --git a/packages/devextreme-angular/src/ui/accordion/index.ts b/packages/devextreme-angular/src/ui/accordion/index.ts
@@ -57,6 +57,7 @@ import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/neste
 @Component({
     selector: 'dx-accordion',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/action-sheet/index.ts b/packages/devextreme-angular/src/ui/action-sheet/index.ts
@@ -57,6 +57,7 @@ import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/
 @Component({
     selector: 'dx-action-sheet',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/autocomplete/index.ts b/packages/devextreme-angular/src/ui/autocomplete/index.ts
@@ -103,6 +103,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-autocomplete',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/bar-gauge/index.ts b/packages/devextreme-angular/src/ui/bar-gauge/index.ts
@@ -89,6 +89,7 @@ import { DxoBarGaugeTooltipBorderModule } from 'devextreme-angular/ui/bar-gauge/
     selector: 'dx-bar-gauge',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/box/index.ts b/packages/devextreme-angular/src/ui/box/index.ts
@@ -58,6 +58,7 @@ import { DxiBoxItemComponent } from 'devextreme-angular/ui/box/nested';
 @Component({
     selector: 'dx-box',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/bullet/index.ts b/packages/devextreme-angular/src/ui/bullet/index.ts
@@ -60,6 +60,7 @@ import { DxoBulletTooltipModule } from 'devextreme-angular/ui/bullet/nested';
     selector: 'dx-bullet',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/button-group/index.ts b/packages/devextreme-angular/src/ui/button-group/index.ts
@@ -54,6 +54,7 @@ import { DxiButtonGroupItemComponent } from 'devextreme-angular/ui/button-group/
 @Component({
     selector: 'dx-button-group',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/button/index.ts b/packages/devextreme-angular/src/ui/button/index.ts
@@ -44,6 +44,7 @@ import {
 @Component({
     selector: 'dx-button',
     template: '<ng-content></ng-content>',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/calendar/index.ts b/packages/devextreme-angular/src/ui/calendar/index.ts
@@ -60,6 +60,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-calendar',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/chart/index.ts b/packages/devextreme-angular/src/ui/chart/index.ts
@@ -242,6 +242,7 @@ import { DxiChartValueAxisComponent } from 'devextreme-angular/ui/chart/nested';
     selector: 'dx-chart',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/chat/index.ts b/packages/devextreme-angular/src/ui/chat/index.ts
@@ -73,6 +73,7 @@ import { DxiChatTypingUserComponent } from 'devextreme-angular/ui/chat/nested';
 @Component({
     selector: 'dx-chat',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/check-box/index.ts b/packages/devextreme-angular/src/ui/check-box/index.ts
@@ -60,6 +60,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-check-box',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/circular-gauge/index.ts b/packages/devextreme-angular/src/ui/circular-gauge/index.ts
@@ -100,6 +100,7 @@ import { DxoCircularGaugeValueIndicatorModule } from 'devextreme-angular/ui/circ
     selector: 'dx-circular-gauge',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/color-box/index.ts b/packages/devextreme-angular/src/ui/color-box/index.ts
@@ -95,6 +95,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-color-box',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/context-menu/index.ts b/packages/devextreme-angular/src/ui/context-menu/index.ts
@@ -88,6 +88,7 @@ import { DxiContextMenuItemComponent } from 'devextreme-angular/ui/context-menu/
 @Component({
     selector: 'dx-context-menu',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts
@@ -219,6 +219,7 @@ import { DxiDataGridSortByGroupSummaryInfoComponent } from 'devextreme-angular/u
 @Component({
     selector: 'dx-data-grid',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/date-box/index.ts b/packages/devextreme-angular/src/ui/date-box/index.ts
@@ -102,6 +102,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-date-box',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/date-range-box/index.ts b/packages/devextreme-angular/src/ui/date-range-box/index.ts
@@ -101,6 +101,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-date-range-box',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/defer-rendering/index.ts b/packages/devextreme-angular/src/ui/defer-rendering/index.ts
@@ -63,6 +63,7 @@ import { DxoDeferRenderingToModule } from 'devextreme-angular/ui/defer-rendering
 @Component({
     selector: 'dx-defer-rendering',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/diagram/index.ts b/packages/devextreme-angular/src/ui/diagram/index.ts
@@ -103,6 +103,7 @@ import { DxiDiagramCustomShapeComponent } from 'devextreme-angular/ui/diagram/ne
 @Component({
     selector: 'dx-diagram',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/draggable/index.ts b/packages/devextreme-angular/src/ui/draggable/index.ts
@@ -46,6 +46,7 @@ import { DxoDraggableCursorOffsetModule } from 'devextreme-angular/ui/draggable/
 @Component({
     selector: 'dx-draggable',
     template: '<ng-content></ng-content>',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/drawer/index.ts b/packages/devextreme-angular/src/ui/drawer/index.ts
@@ -44,6 +44,7 @@ import {
 @Component({
     selector: 'dx-drawer',
     template: '<ng-content></ng-content>',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/drop-down-box/index.ts b/packages/devextreme-angular/src/ui/drop-down-box/index.ts
@@ -100,6 +100,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-drop-down-box',
     template: '<ng-content></ng-content>',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/drop-down-button/index.ts b/packages/devextreme-angular/src/ui/drop-down-button/index.ts
@@ -83,6 +83,7 @@ import { DxiDropDownButtonItemComponent } from 'devextreme-angular/ui/drop-down-
 @Component({
     selector: 'dx-drop-down-button',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/file-manager/index.ts b/packages/devextreme-angular/src/ui/file-manager/index.ts
@@ -71,6 +71,7 @@ import { DxoFileManagerUploadModule } from 'devextreme-angular/ui/file-manager/n
 @Component({
     selector: 'dx-file-manager',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/file-uploader/index.ts b/packages/devextreme-angular/src/ui/file-uploader/index.ts
@@ -61,6 +61,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-file-uploader',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/filter-builder/index.ts b/packages/devextreme-angular/src/ui/filter-builder/index.ts
@@ -77,6 +77,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-filter-builder',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/form/index.ts b/packages/devextreme-angular/src/ui/form/index.ts
@@ -86,6 +86,7 @@ import { DxiFormTabbedItemComponent } from 'devextreme-angular/ui/form/nested';
 @Component({
     selector: 'dx-form',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/funnel/index.ts b/packages/devextreme-angular/src/ui/funnel/index.ts
@@ -100,6 +100,7 @@ import { DxoFunnelTooltipBorderModule } from 'devextreme-angular/ui/funnel/neste
     selector: 'dx-funnel',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/gallery/index.ts b/packages/devextreme-angular/src/ui/gallery/index.ts
@@ -57,6 +57,7 @@ import { DxiGalleryItemComponent } from 'devextreme-angular/ui/gallery/nested';
 @Component({
     selector: 'dx-gallery',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/gantt/index.ts b/packages/devextreme-angular/src/ui/gantt/index.ts
@@ -101,6 +101,7 @@ import { DxiGanttStripLineComponent } from 'devextreme-angular/ui/gantt/nested';
 @Component({
     selector: 'dx-gantt',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/html-editor/index.ts b/packages/devextreme-angular/src/ui/html-editor/index.ts
@@ -88,6 +88,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-html-editor',
     template: '<ng-content></ng-content>',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/linear-gauge/index.ts b/packages/devextreme-angular/src/ui/linear-gauge/index.ts
@@ -102,6 +102,7 @@ import { DxoLinearGaugeWidthModule } from 'devextreme-angular/ui/linear-gauge/ne
     selector: 'dx-linear-gauge',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/list/index.ts b/packages/devextreme-angular/src/ui/list/index.ts
@@ -74,6 +74,7 @@ import { DxiListMenuItemComponent } from 'devextreme-angular/ui/list/nested';
 @Component({
     selector: 'dx-list',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/load-indicator/index.ts b/packages/devextreme-angular/src/ui/load-indicator/index.ts
@@ -43,6 +43,7 @@ import {
 @Component({
     selector: 'dx-load-indicator',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/load-panel/index.ts b/packages/devextreme-angular/src/ui/load-panel/index.ts
@@ -68,6 +68,7 @@ import { DxoLoadPanelToModule } from 'devextreme-angular/ui/load-panel/nested';
 @Component({
     selector: 'dx-load-panel',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/lookup/index.ts b/packages/devextreme-angular/src/ui/lookup/index.ts
@@ -100,6 +100,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-lookup',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/map/index.ts b/packages/devextreme-angular/src/ui/map/index.ts
@@ -69,6 +69,7 @@ import { DxiMapRouteComponent } from 'devextreme-angular/ui/map/nested';
 @Component({
     selector: 'dx-map',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/menu/index.ts b/packages/devextreme-angular/src/ui/menu/index.ts
@@ -87,6 +87,7 @@ import { DxiMenuItemComponent } from 'devextreme-angular/ui/menu/nested';
 @Component({
     selector: 'dx-menu',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/multi-view/index.ts b/packages/devextreme-angular/src/ui/multi-view/index.ts
@@ -57,6 +57,7 @@ import { DxiMultiViewItemComponent } from 'devextreme-angular/ui/multi-view/nest
 @Component({
     selector: 'dx-multi-view',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/number-box/index.ts b/packages/devextreme-angular/src/ui/number-box/index.ts
@@ -71,6 +71,7 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
 @Component({
     selector: 'dx-number-box',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/pagination/index.ts b/packages/devextreme-angular/src/ui/pagination/index.ts
@@ -48,6 +48,7 @@ import {
 @Component({
     selector: 'dx-pagination',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/pie-chart/index.ts b/packages/devextreme-angular/src/ui/pie-chart/index.ts
@@ -123,6 +123,7 @@ import { DxiPieChartSeriesComponent } from 'devextreme-angular/ui/pie-chart/nest
     selector: 'dx-pie-chart',
     template: '',
     styles: [ ' :host {  display: block; }'],
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts
@@ -58,6 +58,7 @@ import { DxoPivotGridFieldChooserTextsModule } from 'devextreme-angular/ui/pivot
 @Component({
     selector: 'dx-pivot-grid-field-chooser',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,

diff --git a/packages/devextreme-angular/src/ui/pivot-grid/index.ts b/packages/devextreme-angular/src/ui/pivot-grid/index.ts
@@ -73,6 +73,7 @@ import { DxoPivotGridTextsModule } from 'devextreme-angular/ui/pivot-grid/nested
 @Component({
     selector: 'dx-pivot-grid',
     template: '',
+    host: { ngSkipHydration: 'true' },
     providers: [
         DxTemplateHost,
         WatcherHelper,