chore(demo): add provideClientHydration

taiga-family · Dec 17, 2024 · 0a49eae · 0a49eae
1 parent a16071a
commit 0a49eae
Show file tree

Hide file tree

Showing 7 changed files with 1,854 additions and 1,981 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/demo/package.json b/projects/demo/package.json
@@ -22,6 +22,7 @@
         "@types/express": "5.0.0",
         "date-fns": "4.1.0",
         "express": "4.21.2",
+        "node-loader": "2.1.0",
         "rxjs": "7.8.1",
         "terser-webpack-plugin": "5.3.11"
     }

diff --git a/projects/demo/src/modules/app/app.config.ts b/projects/demo/src/modules/app/app.config.ts
@@ -3,6 +3,7 @@ import {HttpClient, provideHttpClient} from '@angular/common/http';
 import type {ApplicationConfig} from '@angular/core';
 import {inject, PLATFORM_ID, provideZoneChangeDetection} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
+import {provideClientHydration} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import type {UrlTree} from '@angular/router';
 import {provideRouter, withInMemoryScrolling} from '@angular/router';
@@ -55,6 +56,7 @@ import {exampleContentProcessor} from './utils';
 
 export const config: ApplicationConfig = {
     providers: [
+        provideClientHydration(),
         provideAnimations(),
         provideRouter(
             ROUTES,

diff --git a/projects/demo/src/modules/components/input-slider/index.html b/projects/demo/src/modules/components/input-slider/index.html
@@ -17,9 +17,11 @@
             </a>
         </p>
 
+        <!-- drop ngSkipHydration after upgrade angular -->
         <tui-doc-example
             id="base"
             heading="Basic"
+            ngSkipHydration
             [component]="1 | tuiComponent"
             [content]="1 | tuiExample: 'html,ts'"
             [description]="stepQuantumDescription"
@@ -38,6 +40,7 @@
         <tui-doc-example
             id="slider-segments"
             heading="With slider segments + ticks labels"
+            ngSkipHydration
             [component]="2 | tuiComponent"
             [content]="2 | tuiExample"
         >
@@ -51,6 +54,7 @@
         <tui-doc-example
             id="key-steps"
             heading="KeySteps"
+            ngSkipHydration
             [component]="3 | tuiComponent"
             [content]="3 | tuiExample"
         >
@@ -65,13 +69,15 @@
         <tui-doc-example
             id="right-label"
             heading="With right label"
+            ngSkipHydration
             [component]="4 | tuiComponent"
             [content]="4 | tuiExample"
         />
 
         <tui-doc-example
             id="min-max-labels"
             heading="With min and max labels"
+            ngSkipHydration
             [component]="5 | tuiComponent"
             [content]="5 | tuiExample"
             [description]="valueContentDescription"
@@ -97,6 +103,7 @@
         <tui-doc-demo [control]="control">
             <ng-template>
                 <tui-input-slider
+                    ngSkipHydration
                     [focusable]="focusable"
                     [formControl]="control"
                     [keySteps]="keySteps"

diff --git a/projects/demo/src/modules/components/multi-select/index.html b/projects/demo/src/modules/components/multi-select/index.html
@@ -9,8 +9,10 @@
             is a textfield with a dropdown for choosing several items
         </div>
 
+        <!-- drop ngSkipHydration after upgrade angular -->
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
+            ngSkipHydration
             [component]="index + 1 | tuiComponent"
             [content]="index + 1 | tuiExample"
             [heading]="example"

diff --git a/projects/demo/src/modules/directives/fluid-typography/index.html b/projects/demo/src/modules/directives/fluid-typography/index.html
@@ -6,8 +6,10 @@
     <ng-template pageTab>
         <p>A directive that adjusts font size for the text to fit in the container</p>
 
+        <!-- drop ngSkipHydration after upgrade angular -->
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
+            ngSkipHydration
             [component]="index + 1 | tuiComponent"
             [content]="index + 1 | tuiExample: 'html,ts'"
             [heading]="example"

diff --git a/projects/demo/webpack.config.ts b/projects/demo/webpack.config.ts
@@ -99,6 +99,10 @@ export function makeWebpackConfig({server}: Options): WebpackConf {
                 module: {
                     ...ngConfigs.module,
                     rules: [
+                        {
+                            test: /.node$/,
+                            loader: 'node-loader',
+                        },
                         {
                             include: globSync(
                                 path.resolve(