From a6582743d4b0ed7e698a87fd8924686fe3c2a4bd Mon Sep 17 00:00:00 2001 From: Santosh Yadav Date: Sun, 23 Jul 2023 13:34:03 +0200 Subject: [PATCH] Feature/390 standalone support (#471) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #close [390](https://github.com/uiuniversal/ngu-carousel/issues/390) --------- Co-authored-by: Mateusz Stefańczyk --- README.md | 6 +- .../src/app/app.component.ts | 3 +- .../src/app/app.module.ts | 4 +- .../banner-vertical/banner-vertical.module.ts | 18 +++++- .../src/app/banner/banner.module.ts | 18 +++++- .../app/tile-2-images/tile-2-images.module.ts | 20 ++++++- .../src/app/tile/tile.module.ts | 20 ++++++- .../src/app/wrapped/wrapped.module.ts | 21 ++++++- .../src/lib/ngu-carousel.directive.ts | 18 ++++-- .../carousel/src/lib/ngu-carousel.module.ts | 40 ------------- .../ngu-carousel/ngu-carousel.component.ts | 4 +- .../src/lib/ngu-item/ngu-item.component.ts | 3 +- .../src/lib/ngu-tile/ngu-tile.component.ts | 3 +- libs/ngu/carousel/src/public-api.ts | 2 - nx.json | 58 ++++--------------- package.json | 2 +- 16 files changed, 125 insertions(+), 115 deletions(-) delete mode 100644 libs/ngu/carousel/src/lib/ngu-carousel.module.ts diff --git a/README.md b/README.md index 25551a06..d1fd0aad 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,9 @@ [![npm version](https://badge.fury.io/js/%40ngu%2Fcarousel.svg)](https://badge.fury.io/js/%40ngu%2Fcarousel) + [![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors-) + Angular Universal carousel @@ -34,13 +36,13 @@ Demo available [Here](https://ngu-carousel.netlify.app) ## Usage -1. Include CarouselModule in your app module: +1. Include Carousel needed parts in your module or component (all carousel components and directives are standalone): ```typescript import { NguCarouselModule } from '@ngu/carousel'; @NgModule({ - imports: [NguCarouselModule] + imports: [NguCarousel, NguTileComponent, NguCarouselDefDirective] }) export class AppModule {} ``` diff --git a/apps/ngu-carousel-example/src/app/app.component.ts b/apps/ngu-carousel-example/src/app/app.component.ts index 8c30e497..ade44bd6 100644 --- a/apps/ngu-carousel-example/src/app/app.component.ts +++ b/apps/ngu-carousel-example/src/app/app.component.ts @@ -2,8 +2,7 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, - Component, - OnInit + Component } from '@angular/core'; import { NguCarouselConfig } from '@ngu/carousel'; import { interval, Observable } from 'rxjs'; diff --git a/apps/ngu-carousel-example/src/app/app.module.ts b/apps/ngu-carousel-example/src/app/app.module.ts index 9668085d..87009070 100644 --- a/apps/ngu-carousel-example/src/app/app.module.ts +++ b/apps/ngu-carousel-example/src/app/app.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NguCarouselModule } from '@ngu/carousel'; import { LayoutModule } from '@angular/cdk/layout'; import { MatButtonModule } from '@angular/material/button'; @@ -13,6 +12,7 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { GettingStartedComponent } from './getting-started/getting-started.component'; import { MainNavComponent } from './main-nav/main-nav.component'; +import { NguCarousel } from '@ngu/carousel'; @NgModule({ declarations: [AppComponent, MainNavComponent, GettingStartedComponent], @@ -20,7 +20,7 @@ import { MainNavComponent } from './main-nav/main-nav.component'; BrowserModule, AppRoutingModule, BrowserAnimationsModule, - NguCarouselModule, + NguCarousel, LayoutModule, MatToolbarModule, MatButtonModule, diff --git a/apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.module.ts b/apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.module.ts index 647acd9c..b4107c29 100644 --- a/apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.module.ts +++ b/apps/ngu-carousel-example/src/app/banner-vertical/banner-vertical.module.ts @@ -1,12 +1,26 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NguCarouselModule } from '@ngu/carousel'; +import { + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguItemComponent +} from '@ngu/carousel'; import { BannerVerticalRoutingModule } from './banner-vertical-routing.module'; import { BannerVerticalComponent } from './banner-vertical.component'; @NgModule({ declarations: [BannerVerticalComponent], - imports: [CommonModule, BannerVerticalRoutingModule, NguCarouselModule] + imports: [ + CommonModule, + BannerVerticalRoutingModule, + NguCarousel, + NguItemComponent, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective + ] }) export class BannerVerticalModule {} diff --git a/apps/ngu-carousel-example/src/app/banner/banner.module.ts b/apps/ngu-carousel-example/src/app/banner/banner.module.ts index b5bf857f..b4b1871b 100644 --- a/apps/ngu-carousel-example/src/app/banner/banner.module.ts +++ b/apps/ngu-carousel-example/src/app/banner/banner.module.ts @@ -1,11 +1,25 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NguCarouselModule } from '@ngu/carousel'; import { BannerRoutingModule } from './banner-routing.module'; import { BannerComponent } from './banner.component'; +import { + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguItemComponent +} from '@ngu/carousel'; @NgModule({ declarations: [BannerComponent], - imports: [CommonModule, BannerRoutingModule, NguCarouselModule] + imports: [ + CommonModule, + BannerRoutingModule, + NguCarousel, + NguItemComponent, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective + ] }) export class BannerModule {} diff --git a/apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.module.ts b/apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.module.ts index 728d3ea9..c27357ff 100644 --- a/apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.module.ts +++ b/apps/ngu-carousel-example/src/app/tile-2-images/tile-2-images.module.ts @@ -1,12 +1,28 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NguCarouselModule } from '@ngu/carousel'; +import { + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguItemComponent, + NguTileComponent +} from '@ngu/carousel'; import { Tile2RoutingModule } from './tile-routing.module'; import { Tile2ImagesComponent } from './tile-2-images.component'; @NgModule({ declarations: [Tile2ImagesComponent], - imports: [CommonModule, Tile2RoutingModule, NguCarouselModule] + imports: [ + CommonModule, + Tile2RoutingModule, + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguItemComponent, + NguTileComponent + ] }) export class Tile2ImagesModule {} diff --git a/apps/ngu-carousel-example/src/app/tile/tile.module.ts b/apps/ngu-carousel-example/src/app/tile/tile.module.ts index 972eb725..ef801eab 100644 --- a/apps/ngu-carousel-example/src/app/tile/tile.module.ts +++ b/apps/ngu-carousel-example/src/app/tile/tile.module.ts @@ -1,12 +1,28 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NguCarouselModule } from '@ngu/carousel'; +import { + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguTileComponent, + NguCarouselPointDirective +} from '@ngu/carousel'; import { TileRoutingModule } from './tile-routing.module'; import { TileComponent } from './tile.component'; @NgModule({ declarations: [TileComponent], - imports: [CommonModule, TileRoutingModule, NguCarouselModule] + imports: [ + CommonModule, + TileRoutingModule, + NguCarousel, + NguTileComponent, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguCarouselPointDirective + ] }) export class TileModule {} diff --git a/apps/ngu-carousel-example/src/app/wrapped/wrapped.module.ts b/apps/ngu-carousel-example/src/app/wrapped/wrapped.module.ts index 8cdfc238..7ce6295f 100644 --- a/apps/ngu-carousel-example/src/app/wrapped/wrapped.module.ts +++ b/apps/ngu-carousel-example/src/app/wrapped/wrapped.module.ts @@ -1,13 +1,30 @@ import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; -import { NguCarouselModule } from '@ngu/carousel'; +import { + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguItemComponent, + NguTileComponent +} from '@ngu/carousel'; import { WrappedComponent } from './wrapped.component'; import { WrappedCarouselComponent } from './wrapped-carousel/wrapped-carousel.component'; import { WrappedRoutingModule } from './wrapped-routing.module'; import { CommonModule } from '@angular/common'; @NgModule({ - imports: [WrappedRoutingModule, CommonModule, NguCarouselModule, HttpClientModule], + imports: [ + WrappedRoutingModule, + CommonModule, + NguCarousel, + NguCarouselDefDirective, + NguCarouselNextDirective, + NguCarouselPrevDirective, + NguItemComponent, + NguTileComponent, + HttpClientModule + ], exports: [], declarations: [WrappedComponent, WrappedCarouselComponent], providers: [] diff --git a/libs/ngu/carousel/src/lib/ngu-carousel.directive.ts b/libs/ngu/carousel/src/lib/ngu-carousel.directive.ts index 91b5b003..5cf97805 100644 --- a/libs/ngu/carousel/src/lib/ngu-carousel.directive.ts +++ b/libs/ngu/carousel/src/lib/ngu-carousel.directive.ts @@ -1,12 +1,14 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ - selector: '[NguCarouselItem]' + selector: '[NguCarouselItem]', + standalone: true }) export class NguCarouselItemDirective {} @Directive({ - selector: '[NguCarouselNext]' + selector: '[NguCarouselNext]', + standalone: true }) export class NguCarouselNextDirective { // @HostBinding('disabled') disabled: boolean; @@ -17,7 +19,8 @@ export class NguCarouselNextDirective { } @Directive({ - selector: '[NguCarouselPrev]' + selector: '[NguCarouselPrev]', + standalone: true }) export class NguCarouselPrevDirective { // @HostBinding('disabled') disabled: boolean; @@ -25,13 +28,15 @@ export class NguCarouselPrevDirective { } @Directive({ - selector: '[NguCarouselPoint]' + selector: '[NguCarouselPoint]', + standalone: true }) export class NguCarouselPointDirective {} @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: '[nguCarouselDef]' + selector: '[nguCarouselDef]', + standalone: true }) export class NguCarouselDefDirective { when?: (index: number, nodeData: T) => boolean; @@ -41,7 +46,8 @@ export class NguCarouselDefDirective { @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: '[nguCarouselOutlet]' + selector: '[nguCarouselOutlet]', + standalone: true }) // eslint-disable-next-line @angular-eslint/directive-class-suffix export class NguCarouselOutlet { diff --git a/libs/ngu/carousel/src/lib/ngu-carousel.module.ts b/libs/ngu/carousel/src/lib/ngu-carousel.module.ts deleted file mode 100644 index de845bd7..00000000 --- a/libs/ngu/carousel/src/lib/ngu-carousel.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { - NguCarouselDefDirective, - NguCarouselItemDirective, - NguCarouselNextDirective, - NguCarouselOutlet, - NguCarouselPointDirective, - NguCarouselPrevDirective -} from './ngu-carousel.directive'; -import { NguCarousel } from './ngu-carousel/ngu-carousel.component'; -import { NguItemComponent } from './ngu-item/ngu-item.component'; -import { NguTileComponent } from './ngu-tile/ngu-tile.component'; - -@NgModule({ - imports: [CommonModule], - exports: [ - NguCarousel, - NguItemComponent, - NguTileComponent, - NguCarouselPointDirective, - NguCarouselItemDirective, - NguCarouselNextDirective, - NguCarouselPrevDirective, - NguCarouselDefDirective, - NguCarouselOutlet - ], - declarations: [ - NguCarousel, - NguItemComponent, - NguTileComponent, - NguCarouselPointDirective, - NguCarouselItemDirective, - NguCarouselNextDirective, - NguCarouselPrevDirective, - NguCarouselDefDirective, - NguCarouselOutlet - ] -}) -export class NguCarouselModule {} diff --git a/libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts b/libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts index d95a3495..d47ff553 100644 --- a/libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts +++ b/libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts @@ -59,7 +59,9 @@ const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode; templateUrl: 'ngu-carousel.component.html', styleUrls: ['ngu-carousel.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - providers: [NguCarouselHammerManager] + providers: [NguCarouselHammerManager], + imports: [NguCarouselOutlet], + standalone: true }) // eslint-disable-next-line @angular-eslint/component-class-suffix export class NguCarousel = NgIterable> diff --git a/libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts b/libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts index 404d3959..5ff2f28f 100644 --- a/libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts +++ b/libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.ts @@ -2,7 +2,8 @@ import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'ngu-item', - templateUrl: 'ngu-item.component.html' + templateUrl: 'ngu-item.component.html', + standalone: true }) export class NguItemComponent { @HostBinding('class.item') classes = true; diff --git a/libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts b/libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts index 4ff6d800..f2273d4a 100644 --- a/libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts +++ b/libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.ts @@ -3,7 +3,8 @@ import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'ngu-tile', templateUrl: 'ngu-tile.component.html', - styleUrls: ['ngu-tile.component.scss'] + styleUrls: ['ngu-tile.component.scss'], + standalone: true }) export class NguTileComponent { @HostBinding('class.item') classes = true; diff --git a/libs/ngu/carousel/src/public-api.ts b/libs/ngu/carousel/src/public-api.ts index 2ff888c4..47b21315 100644 --- a/libs/ngu/carousel/src/public-api.ts +++ b/libs/ngu/carousel/src/public-api.ts @@ -8,8 +8,6 @@ export { NguCarouselStore } from './lib/ngu-carousel/ngu-carousel'; export { NguCarousel } from './lib/ngu-carousel/ngu-carousel.component'; -export { NguCarouselModule } from './lib/ngu-carousel.module'; - export { NguItemComponent } from './lib/ngu-item/ngu-item.component'; export { NguTileComponent } from './lib/ngu-tile/ngu-tile.component'; diff --git a/nx.json b/nx.json index 53c7dda9..5563d9af 100644 --- a/nx.json +++ b/nx.json @@ -7,27 +7,15 @@ "default": { "runner": "nx-cloud", "options": { - "cacheableOperations": [ - "build", - "test", - "lint", - "component-test", - "build-storybook" - ], + "cacheableOperations": ["build", "test", "lint", "component-test", "build-storybook"], "accessToken": "ZDc5YjI3NDItNzg5OS00YWM4LWE4ODItZjAzNjFkOWUwNzE3fHJlYWQtd3JpdGU=", - "runtimeCacheInputs": [ - "node -v", - "node ./scripts/get-os.js" - ] + "runtimeCacheInputs": ["node -v", "node ./scripts/get-os.js"] } } }, "namedInputs": { "sharedGlobals": [], - "default": [ - "{projectRoot}/**/*", - "sharedGlobals" - ], + "default": ["{projectRoot}/**/*", "sharedGlobals"], "production": [ "default", "!{projectRoot}/tsconfig.spec.json", @@ -43,53 +31,29 @@ }, "targetDefaults": { "build": { - "dependsOn": [ - "^build" - ], - "inputs": [ - "production", - "^production" - ] + "dependsOn": ["^build"], + "inputs": ["production", "^production"] }, "test": { - "inputs": [ - "default", - "^production", - "{workspaceRoot}/karma.conf.js" - ] + "inputs": ["default", "^production", "{workspaceRoot}/karma.conf.js"] }, "lint": { - "inputs": [ - "default", - "{workspaceRoot}/.eslintrc.json" - ] + "inputs": ["default", "{workspaceRoot}/.eslintrc.json"] }, "e2e": { - "inputs": [ - "default", - "^production" - ] + "inputs": ["default", "^production"] }, "component-test": { - "inputs": [ - "default", - "^production" - ] + "inputs": ["default", "^production"] }, "build-storybook": { - "inputs": [ - "default", - "^production", - "!{projectRoot}/.storybook/**/*" - ] + "inputs": ["default", "^production", "!{projectRoot}/.storybook/**/*"] } }, "cli": { "analytics": false, "packageManager": "yarn", - "schematicCollections": [ - "@angular-eslint/schematics" - ] + "schematicCollections": ["@angular-eslint/schematics"] }, "generators": { "@angular-eslint/schematics:application": { diff --git a/package.json b/package.json index a2d98c98..637e90d7 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ }, "scripts": { "ng": "nx", - "start": "nx serve", + "start": "nx serve ngu-carousel-example", "format:write": "nx format:write", "format:check": "nx format:check", "dev:ssr": "nx run ngu-carousel-example:serve-ssr"