Cleanup and rename, use afterNextRender for SSR

primefaces · Nov 28, 2023 · 3a72d84 · 3a72d84 · vercel · Nov 28, 2023
1 parent 80c0446
commit 3a72d84
Show file tree

Hide file tree

Showing 14 changed files with 280 additions and 348 deletions.
diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts
@@ -1,6 +1,6 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-import { AfterViewInit, Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, Renderer2, afterNextRender } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { PrimeNGConfig } from 'primeng/api';
@@ -29,13 +29,22 @@ import { AppTopBarComponent } from './topbar/app.topbar.component';
     imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent],
     providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService]
 })
-export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) {}
+export class AppComponent implements OnInit, OnDestroy {
+    constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) {
+        afterNextRender(() => {
+            if (process.env.NODE_ENV === 'production') {
+                this.injectScripts();
+            }
+
+            this.bindRouteEvents();
+        });
+    }
 
-    public themeChangeSubscription: Subscription;
-    showConfigurator : boolean = false 
+    themeChangeSubscription: Subscription;
 
-    showMenuButton : boolean = false
+    showConfigurator: boolean = false;
+
+    showMenuButton: boolean = false;
 
     ngOnInit() {
         this.primeng.ripple = true;
@@ -45,16 +54,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         });
     }
 
-    ngAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (window && window && process.env.NODE_ENV === 'production') {
-                this.injectScripts();
-            }
-
-            this.bindRouteEvents();
-        }
-    }
-
     injectScripts() {
         const script = this.renderer.createElement('script');
         script.type = 'text/javascript';
@@ -88,17 +87,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     this.switchTheme({ name: landingTheme, dark: darkMode });
                 }
             }
-            if(event instanceof NavigationEnd && event.url !== "/") {
-                this.showConfigurator = true
-                this.showMenuButton = true
-            }
-
-            else if (event instanceof NavigationEnd){
-                this.showConfigurator = false
-                this.showMenuButton = false
-
+            if (event instanceof NavigationEnd && event.url !== '/') {
+                this.showConfigurator = true;
+                this.showMenuButton = true;
+            } else if (event instanceof NavigationEnd) {
+                this.showConfigurator = false;
+                this.showMenuButton = false;
             }
-
         });
     }
 
@@ -142,4 +137,4 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             this.themeChangeSubscription.unsubscribe();
         }
     }
-}
+}
diff --git a/src/app/showcase/layout/doc/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/app.docsection-nav.component.ts
@@ -1,6 +1,6 @@
 import { DOCUMENT, Location, isPlatformBrowser } from '@angular/common';
-import { Router } from '@angular/router';
 import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { DomHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';

diff --git a/src/app/showcase/layout/menu/app.menu.component.ts b/src/app/showcase/layout/menu/app.menu.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, ElementRef, Inject, OnDestroy, PLATFORM_ID } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, OnDestroy, afterNextRender } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { DomHandler } from 'primeng/dom';
@@ -38,16 +38,10 @@ export class AppMenuComponent implements OnDestroy {
 
     private routerSubscription: Subscription;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private el: ElementRef, private router: Router) {
+    constructor(private configService: AppConfigService, private el: ElementRef, private router: Router) {
         this.menu = MenuData.data;
-    }
-
-    get isActive(): boolean {
-        return this.configService.state.menuActive;
-    }
 
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
+        afterNextRender(() => {
             setTimeout(() => {
                 this.scrollToActiveItem();
             }, 1);
@@ -58,7 +52,11 @@ export class AppMenuComponent implements OnDestroy {
                     DomHandler.unblockBodyScroll('blocked-scroll');
                 }
             });
-        }
+        });
+    }
+
+    get isActive(): boolean {
+        return this.configService.state.menuActive;
     }
 
     scrollToActiveItem() {
@@ -69,10 +67,8 @@ export class AppMenuComponent implements OnDestroy {
     }
 
     isInViewport(element) {
-        if (isPlatformBrowser(this.platformId)) {
-            const rect = element.getBoundingClientRect();
-            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth)));
-        }
+        const rect = element.getBoundingClientRect();
+        return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth)));
     }
 
     ngOnDestroy() {

diff --git a/src/app/showcase/layout/news/app.news.component.ts b/src/app/showcase/layout/news/app.news.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, afterNextRender } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { StyleClassModule } from 'primeng/styleclass';
 import News from '../../data/news.json';
@@ -11,19 +11,13 @@ import { AppConfigService } from '../../service/appconfigservice';
     templateUrl: './app.news.component.html',
     imports: [CommonModule, FormsModule, StyleClassModule]
 })
-export class AppNewsComponent implements OnInit {
+export class AppNewsComponent {
     storageKey: string = 'primeng';
 
     announcement: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService) {}
-
-    get isNewsActive(): boolean {
-        return this.configService.state.newsActive;
-    }
-
-    ngOnInit(): void {
-        if (isPlatformBrowser(this.platformId)) {
+    constructor(private configService: AppConfigService) {
+        afterNextRender(() => {
             const itemString = localStorage.getItem(this.storageKey);
 
             if (itemString) {
@@ -39,7 +33,11 @@ export class AppNewsComponent implements OnInit {
                 this.configService.state.newsActive = true;
                 this.announcement = News;
             }
-        }
+        });
+    }
+
+    get isNewsActive(): boolean {
+        return this.configService.state.newsActive;
     }
 
     hideNews() {

diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID, Renderer2 } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, Renderer2, afterNextRender } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import docsearch from '@docsearch/js';
@@ -14,7 +14,7 @@ import { AppConfigService } from '../../service/appconfigservice';
     templateUrl: './app.topbar.component.html',
     imports: [CommonModule, FormsModule, StyleClassModule, RouterModule]
 })
-export class AppTopBarComponent implements OnInit, OnDestroy {
+export class AppTopBarComponent implements OnDestroy {
     @Input() showConfigurator = true;
 
     @Input() showMenuButton = true;
@@ -27,21 +27,19 @@ export class AppTopBarComponent implements OnInit, OnDestroy {
 
     private window: Window;
 
-    constructor(@Inject(DOCUMENT) private document: Document, private el: ElementRef, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private router: Router, private configService: AppConfigService) {
+    constructor(@Inject(DOCUMENT) private document: Document, private el: ElementRef, private renderer: Renderer2, private router: Router, private configService: AppConfigService) {
         this.window = this.document.defaultView as Window;
+
+        afterNextRender(() => {
+            this.bindScrollListener();
+            this.initDocSearch();
+        });
     }
 
     get isDarkMode() {
         return this.configService.config.darkMode;
     }
 
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.bindScrollListener();
-            this.initDocSearch();
-        }
-    }
-
     toggleMenu() {
         if (this.configService.state.menuActive) {
             this.configService.hideMenu();

diff --git a/src/app/showcase/pages/landing/blocksection.component.ts b/src/app/showcase/pages/landing/blocksection.component.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'template-block',
+    selector: 'block-section',
     standalone: true,
     imports: [CommonModule],
     template: `

diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { AppConfigService } from '../../service/appconfigservice';
 
 @Component({
-    selector: 'template-features',
+    selector: 'features-section',
     standalone: true,
     imports: [CommonModule],
     template: `