ng-auto-animate 0.1.1 → 0.2.0

package/README.md

@@ -1,30 +1,46 @@
 # ng-auto-animate
 
-An Angular Directive to use FormKit's [`auto-animate`](https://auto-animate.formkit.com) library, within Angular projects.
+An Angular Directive to use FormKit's [`auto-animate`](https://auto-animate.formkit.com) library within Angular projects.
+
+## Highlights
 
-### Highlights:
 - ✅ Standalone Directive, for Angular v14 and above. Tested on Node 18.x, but should work on previous versions.
 - ✅ Custom `InjectionToken` for configuring global settings and plugins.
 
-### Why a new wrapper library?
-A publishable library for Angular needs [`ng-packagr`](https://github.com/ng-packagr/ng-packagr) and Angular CLI for proper scaffolding and finalized formatting. Migrating the repository structure for `auto-animate` is a non-trivial ask, and would need an unbiased build system like [Nx](https://nx.dev) (which I am using here) or some other similar tool.
+## Why a new wrapper library?
+
+A publishable library for Angular needs [`ng-packagr`](https://github.com/ng-packagr/ng-packagr) and Angular CLI for proper scaffolding and finalized formatting. Migrating the repository structure for `auto-animate` is a non-trivial task and would need an unbiased build system like [Nx](https://nx.dev) (which I am using here) or some other similar tool.
 
 [Justin Schroeder](https://github.com/justin-schroeder), the creator of [`auto-animate`](https://auto-animate.formkit.com), has been supportive towards [contributions](https://github.com/formkit/auto-animate/pull/38) for Angular integration, but he [does not work with Angular](https://github.com/formkit/auto-animate/issues/72#issuecomment-1222732238) and is unable to work towards this actively. I, too, would not be able to do much in his shoes, especially when it requires replacing all build actions, scripts and the project structure, all to support a single framework.
 
-If there is a simpler solution, I would be willing to submit a PR with my changes here to the original project, especially the support fot global options/plugin via an `InjectionToken`.
+If there is a simpler solution, I would be willing to submit a PR with my changes here to the original project, especially the support for global options/plugin via an `InjectionToken`.
+
+## Installation
 
-### Installation
 1. Install the peer dependency.
+
     ```bash
     npm i @formkit/auto-animate
     ```
+
 1. Install this package.
+
     ```bash
     npm i ng-auto-animate
     ```
 
-### Usage
+## Usage
+
+### Principle
+
+Add the directive to the parent tag, within which DOM elements are being shown or hidden dynamically.
+
+Adding the directive to the same tag which is being hidden will do nothing since it will look for changes in child nodes only.
+
+### Variants
+
 1. Default usage:
+
     ```html
     <article auto-animate>
       <p *ngFor="let paragraph of paragraphs">
@@ -32,7 +48,9 @@ If there is a simpler solution, I would be willing to submit a PR with my change
       </p>
     </article>
     ```
+
 1. Pass one-off options:
+
     ```html
     <article [auto-animate]="{ duration: 750 }">
       <p *ngFor="let paragraph of paragraphs">
@@ -40,7 +58,9 @@ If there is a simpler solution, I would be willing to submit a PR with my change
       </p>
     </article>
     ```
+
 1. Configure global default options:
+
     ```ts
     // src/app/app.config.ts
     import { ApplicationConfig } from '@angular/core';
@@ -69,6 +89,7 @@ If there is a simpler solution, I would be willing to submit a PR with my change
       console.error(err)
     );
     ```
+
     ```html
     <article auto-animate> <!-- Default usage -->
       <p *ngFor="let paragraph of paragraphs">
@@ -76,20 +97,23 @@ If there is a simpler solution, I would be willing to submit a PR with my change
       </p>
     </article>
     ```
+
 1. Pass a custom plugin
-    > See example here in the [demo app](https://github.com/ajitzero/ng-auto-animate/blob/db96f472e479b21167853c644483a90b18c2b513/apps/demo/src/app/app.component.ts#L68).
+    > See the example here in the [demo app](https://github.com/ajitzero/ng-auto-animate/blob/0f305d97a9a30ab715b1c41304572519f0d27894/apps/demo/src/app/app.component.ts#L68) for a "bouncy" effect.
+
     ```ts
     customPlugin: AutoAnimationPlugin = (...) => {...};
     ```
+
     ```html
     <article [auto-animate]="customPlugin">...</article>
     ```
 
-### Missing support for something?
+## Missing support for something?
 
 Go through existing issues if your problem is already being tracked; otherwise, [raise an issue!](https://github.com/ajitzero/ng-auto-animate/issues/new/choose)
 
-### License
+## License
 
 [MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "ng-auto-animate",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Add motion to your apps with a single line of code. An Angular Directive to use FormKit's auto-animate library.",
   "repository": "https://github.com/ajitzero/ng-auto-animate.git",
+  "homepage": "https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate#readme",
   "author": "Ajit Panigrahi <hello@ajitpanigrahi.com>",
   "license": "MIT",
   "peerDependencies": {
@@ -14,6 +15,9 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "module": "fesm2022/ng-auto-animate.mjs",
   "typings": "index.d.ts",
   "exports": {