ngx-lottie - npm Package Compare versions

Comparing version 9.0.1 to 9.1.0

index.d.ts

@@ -1,7 +0,5 @@
-/**
- * The public api for consumers of ngx-lottie
- */
 export { LottieModule } from './lib/lottie.module';
 export { LottieCacheModule } from './lib/cacheable-animation-loader/lottie-cache.module';
 export { AnimationLoader } from './lib/animation-loader';
+export { provideLottieOptions, provideCacheableAnimationLoader } from './lib/providers';
 export { BaseDirective } from './lib/base.directive';
@@ -13,1 +11,2 @@ export { LottieDirective } from './lib/lottie.directive';
 export { transformAnimationFilenameToKey } from './lib/server';
+export * from './private_export';

lib/lottie.component.d.ts

@@ -12,3 +12,3 @@ import { ElementRef, OnChanges, SimpleChanges, NgZone } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<LottieComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LottieComponent, "ng-lottie", never, { "width": "width"; "height": "height"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LottieComponent, "ng-lottie", never, { "width": "width"; "height": "height"; }, {}, never, never, true>;
 }

lib/lottie.directive.d.ts

@@ -10,3 +10,3 @@ import { ElementRef, OnChanges, SimpleChanges, NgZone } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<LottieDirective, [null, null, { self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<LottieDirective, "[lottie]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LottieDirective, "[lottie]", never, {}, {}, never, never, true>;
 }

lib/lottie.module.d.ts

 import { ModuleWithProviders } from '@angular/core';
 import { LottieOptions } from './symbols';
 import * as i0 from "@angular/core";
-import * as i1 from "./base.directive";
-import * as i2 from "./lottie.directive";
-import * as i3 from "./lottie.component";
-import * as i4 from "@angular/common";
+import * as i1 from "./lottie.directive";
+import * as i2 from "./lottie.component";
 export declare class LottieModule {
     static forRoot(options: LottieOptions): ModuleWithProviders<LottieModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LottieModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<LottieModule, [typeof i1.BaseDirective, typeof i2.LottieDirective, typeof i3.LottieComponent], [typeof i4.CommonModule], [typeof i1.BaseDirective, typeof i2.LottieDirective, typeof i3.LottieComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<LottieModule, never, [typeof i1.LottieDirective, typeof i2.LottieComponent], [typeof i1.LottieDirective, typeof i2.LottieComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<LottieModule>;
 }

package.json

 {
   "name": "ngx-lottie",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

@@ -207,2 +207,36 @@ <h1 align="center">
 
+### Standalone
+
+`ngx-lottie@9.1.0` exposes standalone components (compatible only with Angular 14+). This means you can import the Lottie component directly into your standalone component:
+
+```ts
+import { Component } from '@angular/core';
+import { AnimationItem } from 'lottie-web';
+import { AnimationOptions, LottieComponent } from 'ngx-lottie';
+
+@Component({
+  selector: 'app-root',
+  template: '<ng-lottie [options]="options"></ng-lottie>',
+  standalone: true,
+  imports: [LottieComponent],
+})
+export class AppComponent {
+  options: AnimationOptions = {
+    path: '/assets/animation.json',
+  };
+}
+```
+
+We still need to register providers, for instance, the `player` factory:
+
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideLottieOptions({
+      player: () => import(/* webpackChunkName: 'lottie-web' */ 'lottie-web'),
+    }),
+  ],
+});
+```
+
 ## Updating animation
@@ -246,3 +280,3 @@
 
-If you want to update options relying on a response from the server, then you'll have to call `markForCheck` to make sure that Angular will run the change detection if `ng-lottie` is inside a `ChangeDetectionStrategy.OnPush` component:
+If you want to update options relying on a response from the server, then you'll have to call `detectChanges` manually to ensure the change detection is run if `ng-lottie` is inside a `ChangeDetectionStrategy.OnPush` component:
 
@@ -276,3 +310,3 @@ ```ts
       this.options = options;
-      this.ref.markForCheck();
+      this.ref.detectChanges();
     });
@@ -333,3 +367,3 @@ }
 
-I made such a design decision because animation items can emit hundreds and thousands of events every second. The `lottie-web` emits some events asynchronously by wrapping them into `setTimeout` internally. If thousands of events occur during a single second, then Angular will run change detection a thousand times, drastically decreasing performance.
+I made such a design decision because animation items can emit hundreds and thousands of events every second. The `lottie-web` emits some events asynchronously by wrapping them into `setTimeout` internally. Suppose thousands of events occur during a single second. In that case, Angular will run change detection a thousand times, drastically decreasing performance.
 
@@ -359,8 +393,4 @@ Therefore, event handlers will be called outside of the Angular zone:
 
-Therefore you need:
+Therefore you need to re-enter the Angular execution context and call change detection manually via `ChangeDetectorRef.detectChanges()`:
 
-- either call `NgZone.run()`
-- either call change detection manually via `ChangeDetectorRef.detectChanges()`
-- either mark component to be checked via `ChangeDetectorRef.markForCheck()`
-
 ```ts
@@ -370,5 +400,2 @@ import { Component, ChangeDetectionStrategy, NgZone, ChangeDetectorRef } from '@angular/core';
 
-// Angular 9+
-import { ɵdetectChanges as detectChanges, ɵmarkDirty as markDirty } from '@angular/core';
-
 @Component({
@@ -392,18 +419,6 @@ selector: 'app-root',
   onLoopComplete(): void {
-    // * first option via `NgZone.run()`
     this.ngZone.run(() => {
       this.onLoopCompleteCalledTimes++;
+      this.ref.detectChanges();
     });
-
-    // * second option via `ChangeDetectorRef.detectChanges()`
-    this.onLoopCompleteCalledTimes++;
-    this.ref.detectChanges();
-    // Angular 9+
-    detectChanges(this);
-
-    // * third option via `ChangeDetectorRef.markForCheck()`
-    this.onLoopCompleteCalledTimes++;
-    this.ref.markForCheck();
-    // Angular 9+
-    markDirty(this);
   }
@@ -431,4 +446,19 @@ }
 
-This will enable cache under the hood. Since the cache is enabled, `ngx-lottie` will load your JSON file only once.
+This will enable the internal cache. The `ngx-lottie` will load JSON files only once since the cache is enabled.
 
+`ngx-lottie@9.1.0` exposes a function that registers DI provider if you're going module-less approach and using standalone components in your app:
+
+```ts
+import { provideLottieOptions, provideCacheableAnimationLoader } from 'ngx-lottie';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideLottieOptions({
+      player: () => import(/* webpackChunkName: 'lottie-web' */ 'lottie-web'),
+    }),
+    provideCacheableAnimationLoader(),
+  ],
+});
+```
+
 ## API
@@ -596,3 +626,3 @@
 
-`ngx-lottie/server` package gives you the opportunity to preload animation data and cache it using `TransferState`.
+The `ngx-lottie/server` package allows you to preload animation data and cache it using `TransferState`.
 
@@ -631,3 +661,3 @@ ### How2?
 
-Don't forget to import the `BrowserTransferStateModule` into your `AppModule`. Let's look at these options. `animations` is an array of JSON files that contain animation data that Node.js should read on the server-side, cache and transfer to the client. `folder` is a path where your JSON files are located, but you should use it properly, this path is joined with the `process.cwd()`. Assume such a project structure:
+Don't forget to import the `BrowserTransferStateModule` (not required as of Angular 14) into your `AppModule`. Let's look at these options. `animations` is an array of JSON files that contain animation data that Node.js should read on the server-side, cache, and transfer to the client. `folder` is a path where your JSON files are located. Still, you should use it properly. This path is joined with the `process.cwd()`. Consider the following project structure:
 
@@ -650,3 +680,3 @@ ```
 
-You now can inject the `LottieTransferState` in your components from the `ngx-lottie` package. It's tree-shakable by default and won't get bundled until you inject it anywhere:
+You can now inject the `LottieTransferState` into your components from the `ngx-lottie` package. It's tree-shakable by default and won't get bundled until you inject it anywhere:
 
@@ -653,0 +683,0 @@ ```typescript

No alert changes

Improved metrics

Total package byte prevSize

245562

increased by2.68%

Number of package files

48

increased by9.09%

Lines of code

1796

increased by3.16%

Number of lines in readme file

706

increased by4.44%

No dependency changes