add support for lottie light player

README.md

@@ -21,6 +21,9 @@ npm install --save react-lottie-player
 ```jsx
 import React from 'react'
 import Lottie from 'react-lottie-player'
+// Alternatively:
+// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'
+
 
 import lottieJson from './my-lottie.json'
 
@@ -59,6 +62,10 @@ const MyComponent = () => {
 }
 ```
 
+## LottiePlayerLight
+
+The default lottie player uses `eval`. If you don't want eval to be used in your code base, you can instead import `react-lottie-player/dist/LottiePlayerLight`. For more discussion see [#39](https://github.com/mifi/react-lottie-player/pull/39).
+
 See also [#11](https://github.com/mifi/react-lottie-player/issues/11)
 
 ## Lottie animation track scrolling div

example/src/Test.js

@@ -1,4 +1,5 @@
 import Lottie from 'react-lottie-player'
+import LottieLight from 'react-lottie-player/dist/LottiePlayerLight'
 
 import React from 'react';
 
@@ -22,6 +23,22 @@ const Test = () => {
       />
     );
 
+    case '/test/3': return (
+      <LottieLight
+        goTo={60}
+        animationData={lottieJson}
+        style={{ width: 150, height: 150 }}
+      />
+    );
+
+    case '/test/4': return (
+      <LottieLight
+        goTo={60}
+        path="/26514-check-success-animation.json"
+        style={{ width: 150, height: 150 }}
+      />
+    );
+
     default: return null;
   }
 }

example/yarn.lock

@@ -6414,6 +6414,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"

package.json

@@ -5,18 +5,17 @@
   "author": "mifi",
   "license": "MIT",
   "repository": "mifi/react-lottie-player",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.js",
+  "main": "dist/LottiePlayer.js",
+  "module": "dist/LottiePlayer.modern.js",
   "engines": {
     "node": ">=10"
   },
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs && cp src/index.d.ts dist",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "build": "rm -rf dist && microbundle-crl src/LottiePlayer.js src/LottiePlayerLight.js --no-compress --format modern,cjs -o dist && cp src/index.d.ts dist",
+    "start": "rm -rf dist && microbundle-crl watch src/LottiePlayer.js src/LottiePlayerLight.js --no-compress --format modern,cjs -o dist",
     "prepare": "run-s build",
-    "test": "run-s test:lint test:unit test:build",
+    "test": "run-s test:lint test:build test:unit",
     "test:build": "run-s build",
     "test:lint": "eslint .",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",

src/LottiePlayer.js

@@ -0,0 +1,4 @@
+import lottie from 'lottie-web'
+import makeLottiePlayer from './makeLottiePlayer'
+
+export default makeLottiePlayer(lottie)

src/index.test.js → src/LottiePlayer.test.js

@@ -10,7 +10,7 @@ beforeAll(() => {
 
 const baseUrl = 'http://localhost:3000'
 
-describe('screenshots', () => {
+describe('lottie player screenshots', () => {
   let browser
   let craProcess
 
@@ -22,24 +22,34 @@ describe('screenshots', () => {
     await waitOn({ resources: [baseUrl] })
   })
 
-  it('renders with animationData', async () => {
+  async function runScreenshotTest(path) {
     const page = await browser.newPage()
     await page.setViewport({ width: 150, height: 150 })
-    await page.goto(`${baseUrl}/test/1`)
+    await page.goto(`${baseUrl}${path}`)
     await page.waitForTimeout(500) // Sometimes page is white
     const image = await page.screenshot()
 
     expect(image).toMatchImageSnapshot()
+  }
+
+  describe('lottie player main', () => {
+    it('renders with animationData', async () => {
+      await runScreenshotTest('/test/1')
+    })
+
+    it('renders with path', async () => {
+      await runScreenshotTest('/test/2')
+    })
   })
 
-  it('renders with path', async () => {
-    const page = await browser.newPage()
-    await page.setViewport({ width: 150, height: 150 })
-    await page.goto(`${baseUrl}/test/2`)
-    await page.waitForTimeout(500) // Sometimes page is white
-    const image = await page.screenshot()
+  describe('lottie player light', () => {
+    it('renders with animationData', async () => {
+      await runScreenshotTest('/test/3')
+    })
 
-    expect(image).toMatchImageSnapshot()
+    it('renders with path', async () => {
+      await runScreenshotTest('/test/4')
+    })
   })
 
   afterAll(async () => {

src/LottiePlayerLight.js

@@ -0,0 +1,4 @@
+import lottie from 'lottie-web/build/player/lottie_light'
+import makeLottiePlayer from './makeLottiePlayer'
+
+export default makeLottiePlayer(lottie)