taiga-family · splincode · Dec 13, 2024
@@ -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"
     }

@@ -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,

@@ -26,6 +26,7 @@
         <div>
             <tui-multi-select
                 formControlName="multiSelectControl"
+                ngSkipHydration
                 tuiHintContent="Write house building"
                 [editable]="false"
                 [rows]="1"

@@ -1,4 +1,5 @@
 <tui-input-range
+    ngSkipHydration
     [formControl]="control"
     [max]="max"
     [min]="min"

@@ -1,4 +1,5 @@
 <tui-input-range
+    ngSkipHydration
     [formControl]="control"
     [max]="max"
     [min]="min"

@@ -1,4 +1,5 @@
 <tui-input-range
+    ngSkipHydration
     [formControl]="control"
     [leftValueContent]="valueContent"
     [max]="10"

@@ -1,5 +1,6 @@
 <div class="wrapper">
     <tui-input-range
+        ngSkipHydration
         [formControl]="control"
         [max]="100"
         [min]="0"

@@ -1,6 +1,7 @@
 <div class="wrapper">
     <tui-input-range
         id="input-range-with-key-steps"
+        ngSkipHydration
         [formControl]="control"
         [keySteps]="keySteps"
         [max]="max"

@@ -1,5 +1,6 @@
 <tui-input-range
     absTransformer
+    ngSkipHydration
     class="tui-space_bottom-8"
     [formControl]="control"
     [leftValueContent]="control.value?.[0] ? '' : 'Today'"

@@ -86,6 +86,7 @@
         <tui-doc-example
             id="key-steps"
             heading="KeySteps"
+            ngSkipHydration
             [component]="5 | tuiComponent"
             [content]="5 | tuiExample"
         >
@@ -100,6 +101,7 @@
         <tui-doc-example
             id="negative"
             heading="Using negative values without minus sign"
+            ngSkipHydration
             [component]="6 | tuiComponent"
             [content]="6 | tuiExample: 'html,ts'"
         />
@@ -109,6 +111,7 @@
         <tui-doc-demo [control]="control">
             <ng-template>
                 <tui-input-range
+                    ngSkipHydration
                     [formControl]="control"
                     [keySteps]="keySteps"
                     [leftValueContent]="leftValueContent"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     [formControl]="control"
     [max]="max"
     [min]="min"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     [formControl]="control"
     [max]="max"
     [min]="min"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     [formControl]="control"
     [keySteps]="keySteps"
     [max]="max"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     tuiHintContent="Select the answer to see how the right custom content changes"
     [max]="10"
     [min]="0"

@@ -1,5 +1,6 @@
 <section class="control">
     <tui-input-slider
+        ngSkipHydration
         tuiTextfieldSize="m"
         [formControl]="smallControl"
         [max]="max"
@@ -17,6 +18,7 @@
 </section>
 
 <tui-input-slider
+    ngSkipHydration
     class="control"
     [formControl]="bigControl"
     [max]="max"

@@ -97,6 +97,7 @@
         <tui-doc-demo [control]="control">
             <ng-template>
                 <tui-input-slider
+                    ngSkipHydration
                     [focusable]="focusable"
                     [formControl]="control"
                     [keySteps]="keySteps"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     placeholder="Ignored text"
     [formControl]="control"
     [tagValidator]="tagValidator"

@@ -1,6 +1,7 @@
 <span class="tui-text_body-l">Strings:</span>
 
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_top-5"
     [editable]="false"
     [formControl]="itemStringControl"
@@ -18,6 +19,7 @@
 </tui-multi-select>
 
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_vertical-5"
     [disabledItemHandler]="disableHandler"
     [editable]="false"
@@ -36,6 +38,7 @@
 
 <span class="tui-text_body-l">Objects (stringify):</span>
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_top-5"
     [editable]="false"
     [formControl]="itemControl"
@@ -54,6 +57,7 @@
 </tui-multi-select>
 
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_top-5"
     [disabledItemHandler]="disableItemHandler"
     [editable]="false"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     [tuiTextfieldLabelOutside]="true"
     [valueContent]="valueContent"
     [(ngModel)]="value"
@@ -11,6 +12,7 @@
 </tui-multi-select>
 
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_top-4"
     [valueContent]="content"
     [(ngModel)]="value"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     [editable]="false"
     [tuiTextfieldLabelOutside]="true"
     [(ngModel)]="value"

@@ -1,4 +1,7 @@
-<tui-multi-select [(ngModel)]="value">
+<tui-multi-select
+    ngSkipHydration
+    [(ngModel)]="value"
+>
     Multiple lines
     <tui-data-list-wrapper
         *tuiDataList
@@ -7,7 +10,10 @@
     />
 </tui-multi-select>
 <p>
-    <tui-multi-select [(ngModel)]="value">
+    <tui-multi-select
+        ngSkipHydration
+        [(ngModel)]="value"
+    >
         Scrollable with fade
         <tui-data-list-wrapper
             *tuiDataList
@@ -28,7 +34,10 @@
         </ng-template>
     </tui-multi-select>
 </p>
-<tui-multi-select [(ngModel)]="value">
+<tui-multi-select
+    ngSkipHydration
+    [(ngModel)]="value"
+>
     Ellipsis
     <tui-data-list-wrapper
         *tuiDataList

@@ -2,6 +2,7 @@
     Type a name:
     <tui-multi-select
         *tuiLet="items$ | async as items"
+        ngSkipHydration
         placeholder="Find by ..."
         [formControl]="testValue"
         [rows]="1"

@@ -1,5 +1,6 @@
 <form>
     <tui-multi-select
+        ngSkipHydration
         tuiTextfieldSize="s"
         [formControl]="control"
         [identityMatcher]="identityMatcher"
@@ -22,6 +23,7 @@
         </tui-data-list>
     </tui-multi-select>
     <tui-multi-select
+        ngSkipHydration
         tuiTextfieldSize="m"
         class="tui-space_top-2"
         [editable]="false"
@@ -47,6 +49,7 @@
         </tui-data-list>
     </tui-multi-select>
     <tui-multi-select
+        ngSkipHydration
         class="tui-space_top-2"
         [editable]="false"
         [formControl]="control"

@@ -1,5 +1,6 @@
 <tui-multi-select
     *tuiLet="items$ | async as items"
+    ngSkipHydration
     [formControl]="control"
     [stringify]="(stringify$ | async)!"
     [tuiTextfieldLabelOutside]="true"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     [editable]="false"
     [rows]="1"
     [tuiTextfieldLabelOutside]="true"
@@ -33,6 +34,7 @@
 </tui-multi-select>
 
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_top-5"
     [editable]="false"
     [rows]="1"
@@ -67,6 +69,7 @@
 </tui-multi-select>
 
 <tui-multi-select
+    ngSkipHydration
     class="tui-space_top-5"
     [editable]="false"
     [rows]="1"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     class="input"
     [tuiTextfieldCleaner]="true"
     [tuiTextfieldLabelOutside]="true"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     [editable]="false"
     [valueContent]="content"
     [(ngModel)]="value"

@@ -1,5 +1,6 @@
 <form>
     <tui-multi-select
+        ngSkipHydration
         tuiTextfieldSize="m"
         [editable]="false"
         [formControl]="testValue"
@@ -14,6 +15,7 @@
         />
     </tui-multi-select>
     <tui-multi-select
+        ngSkipHydration
         class="tui-space_top-2"
         [editable]="false"
         [formControl]="testValue"

@@ -38,6 +38,7 @@
             <label class="tui-col_md-12">
                 Star Wars persons
                 <tui-multi-select
+                    ngSkipHydration
                     [formControl]="testValue"
                     [rows]="1"
                     [tuiTextfieldCleaner]="true"

@@ -22,6 +22,7 @@
         <tui-doc-demo [control]="control">
             <ng-template>
                 <tui-multi-select
+                    ngSkipHydration
                     [autoColor]="autoColor"
                     [disabledItemHandler]="disabledItemHandler"
                     [editable]="editable"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     tuiTextfieldSize="m"
     class="slider"
     [max]="length - 1"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     tuiTextfieldSize="m"
     class="slider"
     [max]="6"

@@ -1,4 +1,5 @@
 <tui-input-slider
+    ngSkipHydration
     tuiTextfieldSize="m"
     class="slider"
     [max]="6"

@@ -26,6 +26,7 @@
 </tui-select>
 
 <tui-multi-select
+    ngSkipHydration
     tuiDropdownMobile
     class="tui-space_vertical-4"
     [stringify]="stringify"

@@ -8,6 +8,7 @@
 </tui-textfield>
 
 <tui-input-range
+    ngSkipHydration
     class="tui-space_top-4"
     [max]="30"
     [min]="1"

@@ -89,6 +89,7 @@ <h3 class="tui-form__header tui-form__header_margin-top_none">A header</h3>
                 <div class="tui-form__row">
                     <tui-input-slider
                         formControlName="quantityValue"
+                        ngSkipHydration
                         tuiTextfieldPostfix="₽"
                         [max]="3000000"
                         [min]="50000"

@@ -1,4 +1,5 @@
 <tui-multi-select
+    ngSkipHydration
     placeholder="Ignored text"
     [formControl]="control"
     [tuiTextfieldLabelOutside]="true"

@@ -99,6 +99,10 @@ export function makeWebpackConfig({server}: Options): WebpackConf {
                 module: {
                     ...ngConfigs.module,
                     rules: [
+                        {
+                            test: /.node$/,
+                            loader: 'node-loader',
+                        },
                         {
                             include: globSync(
                                 path.resolve(