diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index ea873d8..bd7b59e 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -28,12 +28,12 @@ jobs: # uses: nrwl/nx-set-shas@v3 - uses: actions/setup-node@v4 with: - node-version: '16' + node-version: '20' - uses: pnpm/action-setup@v2.4.0 name: Install pnpm id: pnpm-install with: - version: 7 + version: 8 run_install: false - name: Get pnpm version id: pnpm-version @@ -70,7 +70,7 @@ jobs: # uses: nrwl/nx-set-shas@v3 - uses: actions/setup-node@v4 with: - node-version: '16' + node-version: '20' - uses: pnpm/action-setup@v2.4.0 name: Install pnpm id: pnpm-install @@ -111,7 +111,7 @@ jobs: # - uses: actions/checkout@v3 # - uses: actions/setup-node@v3 # with: -# node-version: '16' +# node-version: '20' # - uses: pnpm/action-setup@v2.2.2 # name: Install pnpm # id: pnpm-install diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..bcf47f1 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,30 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# 3.0.0 (2023-12-25) + + +### Bug Fixes + +* **deps:** update angular monorepo ([0df2410](https://github.com/tsparticles/angular/commit/0df2410d75e7a5b44766f44cf81c1d38478b33a9)) +* **deps:** update angular monorepo ([7734c62](https://github.com/tsparticles/angular/commit/7734c62fa1f0dba72675296a58b5f9e99f45c790)) +* **deps:** update angular monorepo to ~15.2.0 ([d9cc057](https://github.com/tsparticles/angular/commit/d9cc0579949f025c7be095b92abb121f2f450036)) +* **deps:** update angular monorepo to ~16.2.0 ([c94af32](https://github.com/tsparticles/angular/commit/c94af3266705e56cdd68fd9709882f97bf0a95a1)) +* **deps:** update angular monorepo to v16 ([ca8f4e4](https://github.com/tsparticles/angular/commit/ca8f4e47c4476a5f4548ad25f365f56caa7ce912)) +* **deps:** update dependency @capacitor/app to v5 ([ad5a080](https://github.com/tsparticles/angular/commit/ad5a0801b2ed8b46b460b8917cc3e288a00ad479)) +* **deps:** update dependency @capacitor/haptics to v5 ([0754bb7](https://github.com/tsparticles/angular/commit/0754bb766882db012719624947ce1e9c011db649)) +* **deps:** update dependency @capacitor/keyboard to v5 ([9cb00ac](https://github.com/tsparticles/angular/commit/9cb00ac7a584a24c5693ce3fbbe8257e6eed78a6)) +* **deps:** update dependency @capacitor/status-bar to v5 ([303717a](https://github.com/tsparticles/angular/commit/303717adbd7bdf51620cb4d6bee6204803b532e2)) +* **deps:** update dependency @ionic/angular to v7 ([7650cd0](https://github.com/tsparticles/angular/commit/7650cd010916947db786d20e5c9b7cac186f3523)) +* **deps:** update dependency @ionic/core to v7 ([be06511](https://github.com/tsparticles/angular/commit/be0651198bff6b15cd990abb532ab85cc98f0885)) +* **deps:** update dependency ionicons to v7 ([b551ad4](https://github.com/tsparticles/angular/commit/b551ad4e37685000063e0258190d9d1c5ef6dcc4)) +* **deps:** update dependency zone.js to ~0.13.0 ([9eaf8c1](https://github.com/tsparticles/angular/commit/9eaf8c1e184fbe813e0f2ec4ed14d35c677bc8a3)) + + +### Features + +* added fire property to trigger confetti fire ([ba64ff5](https://github.com/tsparticles/angular/commit/ba64ff53130e0bbad18a3a4e4e2b19dc27d05020)) +* added service for initializing particles plugins ([c26e9f2](https://github.com/tsparticles/angular/commit/c26e9f2caa2038e652f2967a38ac26c6b5264a49)) +* preparing confetti and fireworks components ([a098d21](https://github.com/tsparticles/angular/commit/a098d217f7f332bfef5bda4d6d846b762ee4aea3)) diff --git a/README.md b/README.md index 9784af5..8568e41 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) -# ng-particles +# @tsparticles/angular -[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) +[![npm](https://img.shields.io/npm/v/@tsparticles/angular)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/@tsparticles/angular)](https://www.npmjs.com/package/@tsparticles/angular) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) Official [tsParticles](https://github.com/matteobruni/tsparticles) Angular component @@ -15,13 +15,13 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) Angular compo ### Install ```shell -$ npm install ng-particles tsparticles-engine +$ npm install @tsparticles/angular @tsparticles/engine ``` or ```shell -$ yarn add ng-particles tsparticles-engine +$ yarn add @tsparticles/angular @tsparticles/engine ``` ### Usage @@ -29,21 +29,19 @@ $ yarn add ng-particles tsparticles-engine _template.html_ ```html - +> - +> ``` _app.ts_ @@ -54,9 +52,10 @@ import { ClickMode, HoverMode, OutMode, -} from "tsparticles-engine"; +} from "@tsparticles/engine"; //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. -import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too. +import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. +import { NgParticlesService } from "@tsparticles/angular"; export class AppComponent { id = "tsparticles"; @@ -135,18 +134,22 @@ export class AppComponent { detectRetina: true, }; - particlesLoaded(container: Container): void { - console.log(container); - } + constructor(private readonly ngParticlesService: NgParticlesService) {} - async particlesInit(engine: Engine): Promise { - console.log(engine); + ngOnInit(): void { + this.ngParticlesService.init(async () => { + console.log(engine); - // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main) - // this loads the tsparticles package bundle, it's the easiest method for getting everything ready - // starting from v2 you can add only the features you need reducing the bundle size - //await loadFull(engine); - await loadSlim(engine); + // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main) + // this loads the tsparticles package bundle, it's the easiest method for getting everything ready + // starting from v2 you can add only the features you need reducing the bundle size + //await loadFull(engine); + await loadSlim(engine); + }); + } + + particlesLoaded(container: Container): void { + console.log(container); } } ``` @@ -154,7 +157,7 @@ export class AppComponent { _app.module.ts_ ```typescript -import { ParticlesModule } from "ng-particles"; +import { NgxParticlesModule } from "@tsparticles/angular"; import { NgModule } from "@angular/core"; @NgModule({ @@ -162,7 +165,7 @@ import { NgModule } from "@angular/core"; /* AppComponent */ ], imports: [ - /* other imports */ ParticlesModule /* ParticlesModule is required*/, + /* other imports */ NgxParticlesModule /* NgxParticlesModule is required*/, ], providers: [], bootstrap: [ diff --git a/apps/angular-demo/CHANGELOG.md b/apps/angular-demo/CHANGELOG.md index 72bb358..22a3a9d 100644 --- a/apps/angular-demo/CHANGELOG.md +++ b/apps/angular-demo/CHANGELOG.md @@ -3,7 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -# [2.12.0](https://github.com/tsparticles/angular/compare/ng-particles-demo@2.11.0...ng-particles-demo@2.12.0) (2023-08-04) +# 3.0.0 (2023-12-25) + + +### Bug Fixes + +* **deps:** update angular monorepo ([0df2410](https://github.com/tsparticles/angular/commit/0df2410d75e7a5b44766f44cf81c1d38478b33a9)) +* **deps:** update angular monorepo ([7734c62](https://github.com/tsparticles/angular/commit/7734c62fa1f0dba72675296a58b5f9e99f45c790)) +* **deps:** update angular monorepo to ~15.2.0 ([d9cc057](https://github.com/tsparticles/angular/commit/d9cc0579949f025c7be095b92abb121f2f450036)) +* **deps:** update angular monorepo to ~16.2.0 ([c94af32](https://github.com/tsparticles/angular/commit/c94af3266705e56cdd68fd9709882f97bf0a95a1)) +* **deps:** update angular monorepo to v16 ([ca8f4e4](https://github.com/tsparticles/angular/commit/ca8f4e47c4476a5f4548ad25f365f56caa7ce912)) +* **deps:** update dependency zone.js to ~0.13.0 ([9eaf8c1](https://github.com/tsparticles/angular/commit/9eaf8c1e184fbe813e0f2ec4ed14d35c677bc8a3)) + + +### Features + +* added fire property to trigger confetti fire ([ba64ff5](https://github.com/tsparticles/angular/commit/ba64ff53130e0bbad18a3a4e4e2b19dc27d05020)) +* added service for initializing particles plugins ([c26e9f2](https://github.com/tsparticles/angular/commit/c26e9f2caa2038e652f2967a38ac26c6b5264a49)) +* preparing confetti and fireworks components ([a098d21](https://github.com/tsparticles/angular/commit/a098d217f7f332bfef5bda4d6d846b762ee4aea3)) + + + + + +# [3.0.0-beta.3](https://github.com/tsparticles/angular/compare/ng-particles-demo@2.11.0...ng-particles-demo@3.0.0-beta.3) (2023-08-04) **Note:** Version bump only for package ng-particles-demo diff --git a/apps/angular-demo/package.json b/apps/angular-demo/package.json index 5fdc350..1a4ae42 100644 --- a/apps/angular-demo/package.json +++ b/apps/angular-demo/package.json @@ -1,6 +1,6 @@ { - "name": "ng-particles-demo", - "version": "2.12.0", + "name": "@tsparticles/angular-demo", + "version": "3.0.0", "scripts": { "ng": "ng", "start": "ng serve -o", @@ -11,84 +11,88 @@ }, "private": true, "dependencies": { - "@angular/animations": "~16.2.0", - "@angular/common": "~16.2.0", - "@angular/compiler": "~16.2.0", - "@angular/core": "~16.2.0", - "@angular/forms": "~16.2.0", - "@angular/platform-browser": "~16.2.0", - "@angular/platform-browser-dynamic": "~16.2.0", - "@angular/router": "~16.2.0", - "ng-confetti": "^2.12.0", - "ng-fireworks": "^2.12.0", - "ng-particles": "^3.12.0", + "@angular/animations": "~17.0.8", + "@angular/common": "~17.0.8", + "@angular/compiler": "~17.0.8", + "@angular/core": "~17.0.8", + "@angular/forms": "~17.0.8", + "@angular/platform-browser": "~17.0.8", + "@angular/platform-browser-dynamic": "~17.0.8", + "@angular/router": "~17.0.8", + "@tsparticles/angular": "workspace:^", + "@tsparticles/basic": "^3.0.2", + "@tsparticles/confetti": "^3.0.2", + "@tsparticles/configs": "^3.0.2", + "@tsparticles/effect-trail": "^3.0.2", + "@tsparticles/engine": "^3.0.2", + "@tsparticles/fireworks": "^3.0.2", + "@tsparticles/interaction-external-attract": "^3.0.2", + "@tsparticles/interaction-external-bounce": "^3.0.2", + "@tsparticles/interaction-external-bubble": "^3.0.2", + "@tsparticles/interaction-external-connect": "^3.0.2", + "@tsparticles/interaction-external-grab": "^3.0.2", + "@tsparticles/interaction-external-pause": "^3.0.2", + "@tsparticles/interaction-external-push": "^3.0.2", + "@tsparticles/interaction-external-remove": "^3.0.2", + "@tsparticles/interaction-external-repulse": "^3.0.2", + "@tsparticles/interaction-external-slow": "^3.0.2", + "@tsparticles/interaction-external-trail": "^3.0.2", + "@tsparticles/interaction-particles-attract": "^3.0.2", + "@tsparticles/interaction-particles-collisions": "^3.0.2", + "@tsparticles/interaction-particles-links": "^3.0.2", + "@tsparticles/move-base": "^3.0.2", + "@tsparticles/move-parallax": "^3.0.2", + "@tsparticles/pjs": "^3.0.2", + "@tsparticles/plugin-absorbers": "^3.0.2", + "@tsparticles/plugin-easing-quad": "^3.0.2", + "@tsparticles/plugin-emitters": "^3.0.2", + "@tsparticles/plugin-emitters-shape-circle": "^3.0.2", + "@tsparticles/plugin-emitters-shape-square": "^3.0.2", + "@tsparticles/plugin-motion": "^3.0.2", + "@tsparticles/plugin-polygon-mask": "^3.0.2", + "@tsparticles/plugin-sounds": "^3.0.2", + "@tsparticles/shape-cards": "^3.0.2", + "@tsparticles/shape-circle": "^3.0.2", + "@tsparticles/shape-emoji": "^3.0.2", + "@tsparticles/shape-heart": "^3.0.2", + "@tsparticles/shape-image": "^3.0.2", + "@tsparticles/shape-line": "^3.0.2", + "@tsparticles/shape-polygon": "^3.0.2", + "@tsparticles/shape-square": "^3.0.2", + "@tsparticles/shape-star": "^3.0.2", + "@tsparticles/shape-text": "^3.0.2", + "@tsparticles/slim": "^3.0.2", + "@tsparticles/updater-color": "^3.0.2", + "@tsparticles/updater-destroy": "^3.0.2", + "@tsparticles/updater-life": "^3.0.2", + "@tsparticles/updater-opacity": "^3.0.2", + "@tsparticles/updater-out-modes": "^3.0.2", + "@tsparticles/updater-roll": "^3.0.2", + "@tsparticles/updater-rotate": "^3.0.2", + "@tsparticles/updater-size": "^3.0.2", + "@tsparticles/updater-stroke-color": "^3.0.2", + "@tsparticles/updater-tilt": "^3.0.2", + "@tsparticles/updater-twinkle": "^3.0.2", + "@tsparticles/updater-wobble": "^3.0.2", + "angular-confetti": "workspace:^", + "angular-fireworks": "workspace:^", "rxjs": "~7.8.1", - "tslib": "^2.6.1", - "tsparticles": "^2.12.0", - "tsparticles-basic": "^2.12.0", - "tsparticles-confetti": "^2.12.0", - "tsparticles-demo-configs": "^2.12.0", - "tsparticles-engine": "^2.12.0", - "tsparticles-fireworks": "^2.12.0", - "tsparticles-interaction-external-attract": "^2.12.0", - "tsparticles-interaction-external-bounce": "^2.12.0", - "tsparticles-interaction-external-bubble": "^2.12.0", - "tsparticles-interaction-external-connect": "^2.12.0", - "tsparticles-interaction-external-grab": "^2.12.0", - "tsparticles-interaction-external-pause": "^2.12.0", - "tsparticles-interaction-external-push": "^2.12.0", - "tsparticles-interaction-external-remove": "^2.12.0", - "tsparticles-interaction-external-repulse": "^2.12.0", - "tsparticles-interaction-external-slow": "^2.12.0", - "tsparticles-interaction-external-trail": "^2.12.0", - "tsparticles-interaction-particles-attract": "^2.12.0", - "tsparticles-interaction-particles-collisions": "^2.12.0", - "tsparticles-interaction-particles-links": "^2.12.0", - "tsparticles-move-base": "^2.12.0", - "tsparticles-move-parallax": "^2.12.0", - "tsparticles-particles.js": "^2.12.0", - "tsparticles-plugin-absorbers": "^2.12.0", - "tsparticles-plugin-easing-quad": "^2.12.0", - "tsparticles-plugin-emitters": "^2.12.0", - "tsparticles-plugin-motion": "^2.12.0", - "tsparticles-plugin-polygon-mask": "^2.12.0", - "tsparticles-plugin-sounds": "^2.12.0", - "tsparticles-shape-cards": "^2.12.0", - "tsparticles-shape-circle": "^2.12.0", - "tsparticles-shape-heart": "^2.12.0", - "tsparticles-shape-image": "^2.12.0", - "tsparticles-shape-line": "^2.12.0", - "tsparticles-shape-polygon": "^2.12.0", - "tsparticles-shape-square": "^2.12.0", - "tsparticles-shape-star": "^2.12.0", - "tsparticles-shape-text": "^2.12.0", - "tsparticles-slim": "^2.12.0", - "tsparticles-updater-color": "^2.12.0", - "tsparticles-updater-destroy": "^2.12.0", - "tsparticles-updater-life": "^2.12.0", - "tsparticles-updater-opacity": "^2.12.0", - "tsparticles-updater-out-modes": "^2.12.0", - "tsparticles-updater-roll": "^2.12.0", - "tsparticles-updater-rotate": "^2.12.0", - "tsparticles-updater-size": "^2.12.0", - "tsparticles-updater-stroke-color": "^2.12.0", - "tsparticles-updater-tilt": "^2.12.0", - "tsparticles-updater-twinkle": "^2.12.0", - "tsparticles-updater-wobble": "^2.12.0", - "zone.js": "~0.13.0" + "tslib": "^2.6.2", + "tsparticles": "^3.0.2", + "zone.js": "~0.14.2" }, "devDependencies": { - "@angular-devkit/build-angular": "~16.2.0", - "@angular/cli": "~16.2.0", - "@angular/compiler-cli": "~16.2.0", - "@types/jasmine": "~4.3.5", - "@types/node": "^20.4.7", - "jasmine-core": "~5.1.0", + "@angular-devkit/build-angular": "~17.0.8", + "@angular/cli": "~17.0.8", + "@angular/compiler-cli": "~17.0.8", + "@types/jasmine": "~5.1.4", + "@types/node": "^20.10.5", + "jasmine-core": "~5.1.1", "karma": "~6.4.2", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", - "typescript": "~5.1.6" + "typescript": "~5.2.2" } } diff --git a/apps/angular-demo/src/app/app.component.html b/apps/angular-demo/src/app/app.component.html index 4406600..a9fc78e 100644 --- a/apps/angular-demo/src/app/app.component.html +++ b/apps/angular-demo/src/app/app.component.html @@ -10,8 +10,8 @@