Add Animation.fromURL method

README.md

@@ -18,11 +18,9 @@ yarn add @lottiefiles/lottie-js@0.0.1
 import { Lottie } from '@lottiefiles/lottie-js';
 
 async function loadAnimation() {
-  const result = await fetch('https://assets1.lottiefiles.com/packages/lf20_u4j3xm6r.json');
-  const json = await result.json();
-
-  // Create Lottie instance
-  const anim = Animation.fromJSON(json);
+  // Create Lottie instance 
+  // (you can also use Animation.fromJSON method if you already have the Lottie JSON loaded)
+  const anim = Animation.fromURL('https://assets1.lottiefiles.com/packages/lf20_u4j3xm6r.json');
 
   // Print some data of the animation
   console.log('Frame Rate', anim.frameRate);

package.json

@@ -8,6 +8,7 @@
   "repository": "https://github.com/LottieFiles/lottie-js",
   "license": "UNLICENSED",
   "keywords": [],
+  "author": "Jawish Hameed <jawish@lottiefiles.com>",
   "scripts": {
     "build": "rollup -c",
     "docs": "typedoc src",
@@ -18,14 +19,15 @@
   "engines": {
     "node": ">=8.9"
   },
-  "dependencies": {},
+  "dependencies": {
+    "cross-fetch": "^3.0.6"
+  },
   "devDependencies": {
     "@rollup/plugin-strip": "2.0.0",
     "@types/jest": "26.0.14",
     "@types/node": "14.11.2",
     "@typescript-eslint/eslint-plugin": "4.2.0",
     "@typescript-eslint/parser": "4.2.0",
-    "cross-fetch": "3.0.6",
     "esbuild": "0.7.13",
     "eslint": "7.10.0",
     "eslint-config-prettier": "6.12.0",

rollup.config.js

@@ -3,27 +3,31 @@ import dts from 'rollup-plugin-dts';
 import esbuild from 'rollup-plugin-esbuild';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const package_ = require('./package.json');
+const pkg = require('./package.json');
 
 export default [
   {
     input: './src/index.ts',
     output: [
       {
-        file: package_.main,
+        file: pkg.main,
         format: 'umd',
         name: 'Lottie',
         exports: 'named',
         sourcemap: true,
+
+        globals: {
+          'cross-fetch': 'Cross Fetch',
+        },
       },
       {
-        file: package_.module,
+        file: pkg.module,
         format: 'es',
         sourcemap: true,
       },
     ],
 
-    external: Object.keys(package_.dependencies || {}),
+    external: Object.keys(pkg.dependencies || {}),
 
     plugins: [
       // Remove debugger statements and console.log calls
@@ -35,7 +39,7 @@ export default [
         target: 'esnext', // default, or 'es20XX', 'esnext'
 
         define: {
-          __GENERATOR__: `'${package_.name} ${package_.version}'`,
+          __GENERATOR__: `'${pkg.name} ${pkg.version}'`,
         },
       }),
     ],

src/animation/animation.ts

@@ -1,3 +1,5 @@
+import fetch from 'cross-fetch';
+
 import { Asset, createAssetFromJSON } from '../assets';
 import { PropertyType } from '../constants';
 import { createLayerFromJSON, Layer } from '../layers';
@@ -37,7 +39,7 @@ export class Animation {
    */
   public static fromJSON(json: Record<string, any>): Animation {
     if (Animation.isLottie(json) === false) {
-      throw new Error(`The given object is not a valid Lottie JSON structure.`);
+      throw new Error(`The given object is not a valid Lottie JSON structure`);
     }
 
     const animation = new Animation();
@@ -62,6 +64,34 @@ export class Animation {
     return animation;
   }
 
+  /**
+   * Create a class instance from the URL to the Lottie JSON.
+   *
+   * @param url     URL string
+   * @returns       Animation instance
+   */
+  public static async fromURL(url: string): Promise<Animation> {
+    if (typeof url !== 'string') {
+      throw new Error(`The url value must be a string`);
+    }
+
+    let json;
+
+    try {
+      // Try construct an absolute URL from the src URL
+      const srcUrl: URL = new URL(url);
+
+      // Fetch the JSON file from the URL
+      const result = await fetch(srcUrl.toString());
+      json = await result.json();
+    } catch (err) {
+      throw new Error(`An error occurred while trying to load the Lottie file from URL`);
+    }
+
+    // Parse the JSON and return animation
+    return Animation.fromJSON(json);
+  }
+
   /**
    * Returns whether the given object looks like a valid Lottie JSON structure.
    *

yarn.lock

@@ -1585,7 +1585,7 @@ cosmiconfig@7.0.0, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cross-fetch@3.0.6:
+cross-fetch@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c"
   integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==