Skip to content

Commit

Permalink
refactor: use signals for all
Browse files Browse the repository at this point in the history
  • Loading branch information
sheikalthaf committed Jul 23, 2024
1 parent f8b5fcd commit 9a66eaa
Show file tree
Hide file tree
Showing 28 changed files with 425 additions and 559 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/nodejs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ jobs:

strategy:
matrix:
node-version: ['20', '18.13.0']
node-version: ['20', '18.19.1']

steps:
- uses: actions/checkout@v4
Expand Down
36 changes: 14 additions & 22 deletions apps/ngu-carousel-example/server.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import 'zone.js';

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { join } from 'node:path';
import { AppServerModule } from './src/main.server';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const browserDistFolder = join(process.cwd(), 'dist/apps/ngu-carousel-example/browser');
const pathToIndexHtml = join(browserDistFolder, 'index.html');
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const commonEngine = new CommonEngine();

Expand All @@ -21,21 +21,23 @@ export function app(): express.Express {
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'*.*',
'**',
express.static(browserDistFolder, {
maxAge: '1y'
maxAge: '1y',
index: 'index.html'
})
);

// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap: AppServerModule,
documentFilePath: pathToIndexHtml,
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }]
})
.then(html => res.send(html))
Expand All @@ -55,14 +57,4 @@ function run(): void {
});
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}

export * from './src/main.server';
run();
12 changes: 6 additions & 6 deletions apps/ngu-carousel-example/src/app/app-server.config.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { APP_ROUTES } from './app.routes';
import { appConfig } from './app.config';

export const appServerConfig: ApplicationConfig = {
providers: [provideRouter(APP_ROUTES), provideAnimations(), provideServerRendering()]
const serverConfig: ApplicationConfig = {
providers: [provideServerRendering()]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);
51 changes: 2 additions & 49 deletions apps/ngu-carousel-example/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,59 +1,12 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component
} from '@angular/core';
import { NguCarouselConfig } from '@ngu/carousel';
import { interval, Observable } from 'rxjs';
import { map, startWith, take } from 'rxjs/operators';
import { slider } from './slide-animation';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MainNavComponent } from './main-nav/main-nav.component';

@Component({
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [slider],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MainNavComponent]
})
export class AppComponent implements AfterViewInit {
images = ['assets/bg.jpg', 'assets/car.png', 'assets/canberra.jpg', 'assets/holi.jpg'];

public carouselTileItems$: Observable<number[]>;
public carouselTileConfig: NguCarouselConfig = {
grid: { xs: 1, sm: 1, md: 1, lg: 5, all: 0 },
speed: 250,
point: {
visible: true
},
touch: true,
loop: true,
interval: { timing: 1500 },
animation: 'lazy'
};
tempData: any[];

constructor(private cdr: ChangeDetectorRef) {
this.tempData = [];

this.carouselTileItems$ = interval(500).pipe(
startWith(-1),
take(30),
map(() => {
const data = (this.tempData = [
...this.tempData,
this.images[Math.floor(Math.random() * this.images.length)]
]);

return data;
})
);
}

ngAfterViewInit() {
this.cdr.detectChanges();
}
}
export class AppComponent {}
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<h2>Banner Vertical</h2>
<ngu-carousel
[inputs]="carouselBanner"
[dataSource]="carouselTileItems$ | async"
(onMove)="onmoveFn($event)"
>
<ngu-carousel [inputs]="carouselBanner" [dataSource]="items()" (onMove)="onmoveFn($event)">
<button NguCarouselPrev class="leftRs">&lt;</button>

<ngu-item *nguCarouselDef="let item; index as i; let ani = animate" [@slider]="ani">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, afterNextRender, signal } from '@angular/core';
import { NguCarouselConfig } from '@ngu/carousel';
import { interval, Observable } from 'rxjs';
import { map, startWith, take } from 'rxjs/operators';
import { slider } from '../slide-animation';
import { AsyncPipe } from '@angular/common';
import {
NguItemComponent,
NguCarouselPrevDirective,
Expand All @@ -24,8 +21,7 @@ import {
NguCarouselPrevDirective,
NguCarouselDefDirective,
NguItemComponent,
NguCarouselNextDirective,
AsyncPipe
NguCarouselNextDirective
]
})
export class BannerVerticalComponent {
Expand All @@ -52,23 +48,23 @@ export class BannerVerticalComponent {
};
tempData: any[];

public carouselTileItems$: Observable<number[]>;
public items = signal<string[]>([]);

constructor() {
this.tempData = [];

this.carouselTileItems$ = interval(500).pipe(
startWith(-1),
take(30),
map(() => {
const data = (this.tempData = [
...this.tempData,
this.images[Math.floor(Math.random() * this.images.length)]
]);
this.addItem();
afterNextRender(() => {
const id = setInterval(() => {
this.addItem();
if (this.items().length >= 30) {
clearInterval(id);
}
}, 500);
});
}

return data;
})
);
addItem() {
const i = Math.floor(Math.random() * this.images.length);
this.items.update(items => [...items, this.images[i]]);
}

/* It will be triggered on every slide*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h2>Banner</h2>
<ngu-carousel
[inputs]="carouselBanner"
[dataSource]="carouselTileItems$ | async"
[dataSource]="items()"
(onMove)="onmoveFn($event)"
[trackBy]="trackCarousel"
>
Expand Down
36 changes: 16 additions & 20 deletions apps/ngu-carousel-example/src/app/banner/banner.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, afterNextRender, signal } from '@angular/core';
import { NguCarouselConfig } from '@ngu/carousel';
import { interval, Observable } from 'rxjs';
import { map, startWith, take } from 'rxjs/operators';
import { slider } from '../slide-animation';
import { AsyncPipe } from '@angular/common';
import {
NguItemComponent,
NguCarouselPrevDirective,
Expand All @@ -24,8 +21,7 @@ import {
NguCarouselPrevDirective,
NguCarouselDefDirective,
NguItemComponent,
NguCarouselNextDirective,
AsyncPipe
NguCarouselNextDirective
]
})
export class BannerComponent {
Expand All @@ -52,23 +48,23 @@ export class BannerComponent {
};
tempData: any[];

public carouselTileItems$: Observable<number[]>;
public items = signal<string[]>([]);

constructor() {
this.tempData = [];

this.carouselTileItems$ = interval(500).pipe(
startWith(-1),
take(30),
map(() => {
const data = (this.tempData = [
...this.tempData,
this.images[Math.floor(Math.random() * this.images.length)]
]);
this.addItem();
afterNextRender(() => {
const id = setInterval(() => {
this.addItem();
if (this.items().length >= 30) {
clearInterval(id);
}
}, 500);
});
}

return data;
})
);
addItem() {
const i = Math.floor(Math.random() * this.images.length);
this.items.update(items => [...items, this.images[i]]);
}

/* It will be triggered on every slide*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false"
[attr.role]="isHandset() ? 'dialog' : 'navigation'"
[mode]="isHandset() ? 'over' : 'side'"
[opened]="isHandset() === false"
>
<mat-toolbar>Banner Types</mat-toolbar>
<mat-nav-list>
Expand All @@ -18,7 +18,7 @@
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
@if (isHandset$ | async) {
@if (isHandset()) {
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
Expand Down
13 changes: 5 additions & 8 deletions apps/ngu-carousel-example/src/app/main-nav/main-nav.component.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import { AsyncPipe } from '@angular/common';
import { toSignal } from '@angular/core/rxjs-interop';
import { MatIcon } from '@angular/material/icon';
import { MatIconButton, MatAnchor } from '@angular/material/button';
import { RouterLink, RouterOutlet } from '@angular/router';
import { MatNavList, MatListItem } from '@angular/material/list';
import { MatToolbar } from '@angular/material/toolbar';
import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
import { map } from 'rxjs';

@Component({
standalone: true,
Expand All @@ -27,14 +26,12 @@ import { MatSidenavContainer, MatSidenav, MatSidenavContent } from '@angular/mat
MatIconButton,
MatIcon,
MatAnchor,
RouterOutlet,
AsyncPipe
RouterOutlet
]
})
export class MainNavComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map(result => result.matches),
shareReplay()
isHandset = toSignal(
this.breakpointObserver.observe(Breakpoints.Handset).pipe(map(result => result.matches))
);

constructor(private breakpointObserver: BreakpointObserver) {}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ngu-carousel #myCarousel [inputs]="carouselTileConfig" [dataSource]="carouselTileItems$ | async">
<button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5 : 1">
<ngu-carousel #myCarousel [inputs]="carouselTileConfig" [dataSource]="carouselItems()">
<button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst() ? 0.5 : 1">
&lt;
</button>

Expand All @@ -9,13 +9,13 @@ <h1>{{ i + 1 }}</h1>
</div>
</ngu-tile>

<button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5 : 1">
<button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast() ? 0.5 : 1">
&gt;
</button>

<ul class="myPoint" NguCarouselPoint>
@for (i of myCarousel.pointNumbers; track i) {
<li [class.active]="i === myCarousel.activePoint" (click)="myCarousel.moveTo(i)"></li>
@for (i of myCarousel.pointNumbers(); track i) {
<li [class.active]="i === myCarousel.activePoint()" (click)="myCarousel.moveTo(i)"></li>
}
</ul>
</ngu-carousel>
Loading

0 comments on commit 9a66eaa

Please sign in to comment.