@lottiefiles/lottie-player - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0

package.json

 {
   "name": "@lottiefiles/lottie-player",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "description": "Lottie animation and Telegram Sticker player web components.",
   "main": "dist/lottie-player.js",
-  "module": "dist/lottie-player.js",
+  "module": "dist/lottie-player.esm.js",
   "types": "dist/lottie-player.d.ts",
@@ -14,6 +14,9 @@ "homepage": "https://lottiefiles.com/web-player",
   "scripts": {
-    "build": "yarn build-lottie && yarn build-tgs",
-    "build-lottie": "parcel build src/lottie-player.ts --detailed-report 50 --out-file lottie-player.js",
-    "build-tgs": "parcel build src/tgs-player.ts --detailed-report 50 --out-file tgs-player.js",
-    "start": "parcel src/index.html"
+    "start": "npm run cleanup && rollup -c --watch",
+    "build": "npm run cleanup && npm run build-lottie && npm run build-tgs",
+    "build-lottie": "rollup -c ",
+    "build-tgs": "rollup -c rollup-tgs.config.js",
+    "watch-lottie": "npm run cleanup && rollup -c --watch",
+    "watch-tgs": "npm run cleanup && rollup -c rollup-tgs.config.js --watch",
+    "cleanup": "rm -rf dist && mkdir dist"
   },
@@ -29,3 +32,18 @@ "dependencies": {
     "parcel-bundler": "^1.12.4",
-    "typescript": "^3.4.5"
+    "typescript": "^3.4.5",
+    "@babel/core": "^7.11.0",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-typescript": "^7.10.4",
+    "@rollup/plugin-babel": "^5.1.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "rollup": "^2.23.0",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-filesize": "^9.0.2",
+    "rollup-plugin-serve": "^1.0.3",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "rollup-plugin-visualizer": "^4.0.4"
   },
@@ -32,0 +50,0 @@ "files": [

README.md

@@ -109,6 +109,141 @@ ## lottie-player Web Component
 
+### ReactJS & VueJS
+
+Import the player either as
+
+```js
+import * as LottiePlayer from "@lottiefiles/lottie-player";
+```
+
+or
+
+```js
+require("@lottiefiles/lottie-player");
+```
+
+Use as follows
+
+```html
+<lottie-player
+  autoplay
+  controls
+  loop
+  mode="normal"
+  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  style="width: 320px"
+></lottie-player>
+```
+
+### Typescript ReactJS
+
+Import the player either as
+
+```js
+import * as LottiePlayer from "@lottiefiles/lottie-player";
+```
+
+or
+
+```js
+require("@lottiefiles/lottie-player");
+```
+
+Use as follows
+
+```html
+<lottie-player
+  autoplay
+  controls
+  loop
+  mode="normal"
+  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  style="width: 320px"
+></lottie-player>
+```
+
+For typescript projects an added step is required. The component must be declared as a JSX intrinsic element. Create a file 'declarations.d.ts' in the root of your project and add the code below to the file.
+
+```js
+declare namespace JSX {
+  interface IntrinsicElements {
+    "lottie-player": any;
+  }
+}
+```
+
+### NuxtJS
+
+The process for NuxtJS is slightly different. Create a lottie-player.js file in project root inside a folder named 'plugins'. Add the code below to the file
+
+```js
+import * as LottiePlayer from "@lottiefiles/lottie-player";
+```
+
+Open nuxt.config.js file and adjust the plugins array as shown below
+
+```js
+plugins: [{ src: "~/plugins/lottie-player.js", mode: "client" }],
+```
+
+You would then be able to use the player as follows inside any component
+
+```html
+<lottie-player
+  autoplay
+  controls
+  loop
+  style="width:400px"
+  src="https://assets3.lottiefiles.com/packages/lf20_RItkEz.json"
+  speed="1"
+  debug
+></lottie-player>
+```
+
+This is because the player script needs to be rendered on the browser/client side and we must configure nuxtjs to load the script on the client side only.
+
+### NextJS
+
+The process to import in NextJS is similar to NuxtJS in the sense that on SSR mode, the library must be declared as a client side module. To do this, import the library within a react useEffect hook.
+
+```javascript
+import React, { useRef } from "react";
+
+export default function Home() {
+  const ref = useRef(null);
+  React.useEffect(() => {
+    import("@lottiefiles/lottie-player");
+  });
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <lottie-player
+          id="firstLottie"
+          ref={ref}
+          autoplay
+          controls
+          loop
+          mode="normal"
+          src="https://assets4.lottiefiles.com/packages/lf20_gb5bmwlm.json"
+          style={{ width: "300px", height: "300px" }}
+        ></lottie-player>
+      </main>
+    </div>
+  );
+}
+```
+
+Do add a declaration file named declaration.d.ts to the root of the project as well
+
+```javascript
+declare namespace JSX {
+  interface IntrinsicElements {
+    "lottie-player": any;
+  }
+}
+```
+
 ## Properties
 
 | Property              | Attribute             | Description                         | Type                                 | Default           |
-| --------------------- | --------------------- | ----------------------------------- | ------------------------------------ | ----------------- |
+| --------------------- | --------------------- | ----------------------------------- | ------------------------------------ | ----------------- | ------- |
 | `autoplay`            | `autoplay`            | Autoplay animation on load.         | `boolean`                            | `false`           |
@@ -123,3 +258,3 @@ | `background`          | `background`          | Background color.                   | `string`                             | `undefined`       |
 | `preserveAspectRatio` | `preserveAspectRatio` | Valid preserve aspect ratio value.  | `string`                             | `'xMidYMid meet'` |
-| `renderer`            | `renderer`            | Renderer to use.                    | `"svg" | "canvas"`                   | `'svg'`           |
+| `renderer`            | `renderer`            | Renderer to use.                    | `"svg"                               | "canvas"`         | `'svg'` |
 | `speed`               | `speed`               | Animation speed.                    | `number`                             | `1`               |
@@ -126,0 +261,0 @@ | `src` _(required)_    | `src`                 | Bodymovin JSON data or URL to JSON. | `string`                             | `undefined`       |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6404318

increased by111.5%

Number of package files

19

increased by111.11%

Lines of code

5798

increased by23.18%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

424

increased by46.71%

Number of low supply chain risk alerts

1

decreased by-80%

Number of medium supply chain risk alerts

2

decreased by-50%

Worsened metrics

Dev dependency count

17

increased by750%

No dependency changes