Merge pull request #81 from crashmax-dev/refactor-angular

crashmax-dev · web-flow · commit b7c89cdbfa8b · 2022-10-04T22:21:55.000+08:00
refactor(packages/angular): ng directive
diff --git a/examples/with-angular/package.json b/examples/with-angular/package.json
@@ -9,7 +9,6 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@fireworks-js/angular": "workspace:*",
     "@angular/animations": "^14.0.0",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
@@ -18,6 +17,7 @@
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
+    "@fireworks-js/angular": "workspace:*",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
diff --git a/examples/with-angular/src/app/app.component.css b/examples/with-angular/src/app/app.component.css
@@ -1,4 +1,8 @@
-.btn {
-  position: absolute;
-  z-index: 1;
+.fireworks {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: #000;
 }
diff --git a/examples/with-angular/src/app/app.component.html b/examples/with-angular/src/app/app.component.html
@@ -1,2 +1,5 @@
-<button (click)="toggleFireworks()" class="btn">{{ enabled ? 'Enabled' : 'Disabled' }}</button>
-<ng-fireworks [options]="options" class="fireworks" *ngIf="enabled"></ng-fireworks>
+<div style="position: absolute; z-index: 999;">
+  <button (click)="toggleFireworks()">{{ enabled ? 'Mounted' : 'Unmounted' }}</button>
+  <button (click)="waitStop()">waitStop</button>
+</div>
+<ng-fireworks #fireworks="ngFireworks" [options]="options" class="fireworks" *ngIf="enabled"></ng-fireworks>
diff --git a/examples/with-angular/src/app/app.component.ts b/examples/with-angular/src/app/app.component.ts
@@ -1,5 +1,8 @@
-import { Component } from '@angular/core'
-import type { FireworksProps } from '@fireworks-js/angular'
+import { Component, ViewChild } from '@angular/core'
+import type {
+  FireworksDirective,
+  FireworksOptions
+} from '@fireworks-js/angular'
 
 @Component({
   selector: 'app-root',
@@ -8,11 +11,17 @@ import type { FireworksProps } from '@fireworks-js/angular'
 })
 export class AppComponent {
   enabled = true
-  options: FireworksProps = {
+  options: FireworksOptions = {
     opacity: 0.5
   }
 
+  @ViewChild('fireworks') fireworks?: FireworksDirective
+
   public toggleFireworks(): void {
     this.enabled = !this.enabled
   }
+
+  public waitStop(): void {
+    this.fireworks?.waitStop()
+  }
 }
diff --git a/examples/with-angular/src/favicon.ico b/examples/with-angular/src/favicon.ico
diff --git a/examples/with-angular/src/index.html b/examples/with-angular/src/index.html
@@ -1,15 +1,13 @@
 <!doctype html>
 <html lang="en">
-
 <head>
   <meta charset="utf-8">
   <title>@fireworks-js/angular</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-
 <body>
   <app-root></app-root>
 </body>
-
 </html>
diff --git a/examples/with-angular/src/styles.css b/examples/with-angular/src/styles.css
@@ -1,9 +1 @@
 /* You can add global styles to this file, and also import other style files */
-.fireworks > div {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  background: #000;
-}
diff --git a/package.json b/package.json
@@ -6,10 +6,11 @@
   "description": "A simple fireworks library!",
   "homepage": "https://fireworks.js.org",
   "scripts": {
+    "dev": "turbo run dev --filter='./packages/fireworks-js'",
+    "build": "turbo run build --filter='./packages/*'",
     "dev:website": "turbo run dev --filter='./website'",
-    "dev:examples": "turbo run dev --filter='./examples/*'",
     "build:website": "turbo run build --filter='./website'",
-    "build:packages": "turbo run build --filter='./packages/*'",
+    "dev:examples": "turbo run dev --filter='./examples/*'",
     "build:examples": "turbo run build --filter='./examples/*'",
     "format": "prettier --write --ignore-unknown **"
   },
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -31,7 +31,7 @@
     "@angular/platform-browser": "^14.1.2",
     "@angular/platform-browser-dynamic": "^14.1.2",
     "@angular/router": "^14.1.2",
-    "fireworks-js": "workspace:2.2.0",
+    "fireworks-js": "workspace:2.2.1",
     "rxjs": "~7.5.6",
     "tslib": "2.4.0",
     "zone.js": "~0.11.8"
diff --git a/packages/angular/projects/ng-fireworks/package.json b/packages/angular/projects/ng-fireworks/package.json
@@ -27,7 +27,7 @@
     "@angular/core": "^14.0.0"
   },
   "dependencies": {
-    "fireworks-js": "workspace:2.2.0",
+    "fireworks-js": "workspace:2.2.1",
     "tslib": "2.4.0"
   }
 }
diff --git a/packages/angular/projects/ng-fireworks/src/lib/ng-fireworks.component.ts b/packages/angular/projects/ng-fireworks/src/lib/ng-fireworks.component.ts
diff --git a/packages/angular/projects/ng-fireworks/src/lib/ng-fireworks.directive.ts b/packages/angular/projects/ng-fireworks/src/lib/ng-fireworks.directive.ts
@@ -0,0 +1,25 @@
+import { Fireworks } from 'fireworks-js'
+import type { FireworksOptions } from 'fireworks-js'
+import { Directive, ElementRef, Input } from '@angular/core'
+
+@Directive({
+  selector: '[ngFireworks], ng-fireworks',
+  exportAs: 'ngFireworks'
+})
+export class FireworksDirective extends Fireworks {
+  constructor(elRef: ElementRef) {
+    super(elRef.nativeElement)
+  }
+
+  @Input() options!: FireworksOptions
+
+  private ngOnInit() {
+    this.updateOptions(this.options)
+    this.updateSize()
+    this.start()
+  }
+
+  private ngOnDestroy(): void {
+    this.stop()
+  }
+}
diff --git a/packages/angular/projects/ng-fireworks/src/lib/ng-fireworks.module.ts b/packages/angular/projects/ng-fireworks/src/lib/ng-fireworks.module.ts
@@ -1,13 +1,10 @@
 import { NgModule } from '@angular/core'
-import {
-  FireworksComponent,
-  NgFireworksComponent
-} from './ng-fireworks.component'
-import type { FireworksProps } from './ng-fireworks.component'
+import { FireworksDirective } from './ng-fireworks.directive'
+
+export type { FireworksOptions } from 'fireworks-js'
 
 @NgModule({
-  declarations: [NgFireworksComponent, FireworksComponent],
-  exports: [NgFireworksComponent, FireworksComponent]
+  declarations: [FireworksDirective],
+  exports: [FireworksDirective]
 })
 export class NgFireworksModule {}
-export type { FireworksProps }
diff --git a/packages/angular/projects/ng-fireworks/src/public-api.ts b/packages/angular/projects/ng-fireworks/src/public-api.ts
@@ -1,2 +1,2 @@
-export * from './lib/ng-fireworks.component'
+export * from './lib/ng-fireworks.directive'
 export * from './lib/ng-fireworks.module'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`"@angular/core": "^14.0.0"`
`28`	`28`	`},`
`29`	`29`	`"dependencies": {`
`30`		`- "fireworks-js": "workspace:2.2.0",`
	`30`	`+ "fireworks-js": "workspace:2.2.1",`
`31`	`31`	`"tslib": "2.4.0"`
`32`	`32`	`}`
`33`	`33`	`}`