Merge branch 'master' of github.com:nativescript-community/ui-lottie

Author: farfromrefug

README.md

@@ -69,6 +69,21 @@ public yourLoadedEvent(args) {
 
 ### NativeScript Angular
 
+#### Module
+
+First you need to include the `NativeScriptLottieModule` in your `app.module.ts`
+
+```typescript
+import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';
+
+@NgModule({
+    imports: [
+        NativeScriptLottieModule
+    ],
+    ...
+})
+```
+
 #### XML
 
 ```xml
@@ -81,11 +96,8 @@ public yourLoadedEvent(args) {
 
 ```typescript
 import { Component } from '@angular/core';
-import { registerElement } from 'nativescript-angular';
 import { LottieView } from '@nativescript-community/ui-lottie';
 
-registerElement('LottieView', () => LottieView);
-
 @Component({
   templateUrl: 'home.component.html',
   moduleId: module.id
@@ -118,15 +130,18 @@ export class HomeComponent {
 
 ## NativeScript Vue
 
-### Bootstrap (probably in app.js)
+### Bootstrap
 
-```typescript
-Vue.registerElement(
-  'LottieView',
-  () => require('@nativescript-community/ui-lottie').LottieView
-);
+If you want to use this plugin with Vue, do this in your `app.js` or `main.js`:
+
+```javascript
+import LottieView from '@nativescript-community/ui-lottie/vue';
+
+Vue.use(LottieView);
 ```
 
+This will install and register `LottieView` component to your `Vue` instance and now you can use the plugin.
+
 ### Component
 
 ```xml

demo-angular/App_Resources/Android/app.gradle

@@ -5,11 +5,11 @@
 //	implementation 'com.android.support:recyclerview-v7:+'
 //}
 
-android {  
-  defaultConfig {  
+android {
+  defaultConfig {
     generatedDensities = []
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}

demo-angular/package.json

@@ -6,7 +6,7 @@
   "nativescript": {
     "id": "org.nativescript.demotemp",
     "tns-android": {
-      "version": "6.0.0"
+      "version": "6.5.0"
     }
   },
   "dependencies": {
@@ -24,8 +24,8 @@
     "nativescript-theme-core": "~1.0.4",
     "reflect-metadata": "~0.1.8",
     "rxjs": "~6.4.0",
-    "@nativescript/core": "6.0.1",
-    "zone.js": "0.9.1"
+    "@nativescript/core": "6.5.0",
+    "zone.js": "0.10.2"
   },
   "devDependencies": {
     "jasmine-core": "3.3.0",

demo-angular/src/app/app.module.ts

@@ -1,16 +1,16 @@
 import {
   NgModule,
-  NgModuleFactoryLoader,
   NO_ERRORS_SCHEMA
 } from '@angular/core';
 import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
+import { NativeScriptLottieModule } from '@nativescript-community/ui-lottie/angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeModule } from './home/home.module';
 
 @NgModule({
   bootstrap: [AppComponent],
-  imports: [NativeScriptModule, AppRoutingModule, HomeModule],
+  imports: [NativeScriptModule, NativeScriptLottieModule, AppRoutingModule, HomeModule],
   declarations: [AppComponent],
   schemas: [NO_ERRORS_SCHEMA]
 })

demo-angular/src/app/home/home.component.ts

@@ -1,10 +1,7 @@
 import { Component } from '@angular/core';
-import { registerElement } from 'nativescript-angular';
 import { LottieView } from '@nativescript-community/ui-lottie';
 import { Color } from '@nativescript/core/color';
 
-registerElement('LottieView', () => LottieView);
-
 const ANDROID_WAVE_KEYPATHS = [
     ['Shirt', 'Group 5', 'Fill 1'],
     ['LeftArmWave', 'LeftArm', 'Group 6', 'Fill 1'],

demo-vue/app/app.ts

@@ -1,12 +1,9 @@
 import Vue from 'nativescript-vue';
+import LottieView from '@nativescript-community/ui-lottie/vue';
 
 import Home from './components/Home.vue';
 
-// register LottieView component for the plugin
-Vue.registerElement(
-    'lottie-view',
-    () => require('@nativescript-community/ui-lottie').LottieView
-);
+Vue.use(LottieView);
 
 new Vue({
     template: `

package.json

@@ -79,8 +79,10 @@
     "precommit": "lint-staged"
   },
   "devDependencies": {
+    "@angular/core": "^13.1.3",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
+    "@nativescript/angular": "^13.0.1",
     "@nativescript/core": "8.1.5",
     "@nativescript/types-android": "8.1.0",
     "@nativescript/types-ios": "8.1.1",
@@ -104,4 +106,4 @@
   "dependencies": {
     "ts-node": "^10.4.0"
   }
-}
+}

plugin/angular/index.d.ts

@@ -0,0 +1,4 @@
+export declare class LottieViewDirective {
+}
+export declare class NativeScriptLottieModule {
+}

plugin/vue/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(Vue: any): void;
+};
+export default _default;

src/angular/index.ts

@@ -0,0 +1,14 @@
+import { Directive, NgModule } from '@angular/core';
+import { registerElement } from '@nativescript/angular';
+import { LottieView } from '..';
+
+@Directive({ selector: 'LottieView' })
+export class LottieViewDirective {}
+
+@NgModule({
+    declarations: [LottieViewDirective],
+    exports: [LottieViewDirective]
+})
+export class NativeScriptLottieModule {}
+
+registerElement('LottieView', () => LottieView);