Merge remote-tracking branch 'origin/master' into feature/init-lerna

README.md

@@ -106,6 +106,141 @@ Add the element `tgs-player` and set the `src` property to a URL pointing to a v
 </tgs-player>
 ```
 
+### 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           |
@@ -119,7 +254,7 @@ Add the element `tgs-player` and set the `src` property to a URL pointing to a v
 | `loop`                | `loop`                | Whether to loop animation.          | `boolean`                            | `false`           |
 | `mode`                | `mode`                | Play mode.                          | `PlayMode.Bounce \| PlayMode.Normal` | `PlayMode.Normal` |
 | `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"`         |
 | `speed`               | `speed`               | Animation speed.                    | `number`                             | `1`               |
 | `src` _(required)_    | `src`                 | Bodymovin JSON data or URL to JSON. | `string`                             | `undefined`       |
 

babel.config.js

@@ -0,0 +1,25 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      "@babel/preset-typescript",
+      [
+        "@babel/preset-env",
+        {
+          targets: {
+            edge: "17",
+            firefox: "60",
+            chrome: "67",
+            safari: "11.1",
+            esmodules: true,
+          },
+        },
+      ],
+    ],
+    plugins: [
+      ["@babel/plugin-proposal-decorators", { legacy: true }],
+      ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ],
+  };
+};

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@lottiefiles/lottie-player",
-  "version": "0.5.1",
+  "version": "1.0.3",
   "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",
   "homepage": "https://lottiefiles.com/web-player",
   "repository": "https://github.com/LottieFiles/lottie-player.git",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@types/pako": "^1.0.1",
     "lit-element": "^2.3.1",
-    "lottie-web": "^5.6.6",
+    "lottie-web": "^5.7.8",
     "pako": "^1.0.11",
     "resize-observer-polyfill": "^1.5.1",
     "shx": "^0.3.3"

rollup-tgs.config.js

@@ -0,0 +1,68 @@
+import babel from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import copy from "rollup-plugin-copy";
+import filesize from "rollup-plugin-filesize";
+import resolve from "@rollup/plugin-node-resolve";
+import serve from "rollup-plugin-serve";
+import { terser } from "rollup-plugin-terser";
+import typescript2 from "rollup-plugin-typescript2";
+
+const production = !process.env.ROLLUP_WATCH;
+const extensions = [".js", ".jsx", ".ts", ".tsx", ".mjs"];
+const outputDir = "./dist/";
+
+export default {
+  input: "./src/tgs-player.ts",
+  treeshake: !!production,
+  output: [
+    {
+      file: "./dist/tgs-player.esm.js",
+      // dir: outputDir,
+      format: "es",
+      sourcemap: true,
+    },
+    {
+      file: "./dist/tgs-player.js",
+      format: "umd",
+      name: "lottie-player",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve({ extensions }),
+    commonjs({ include: /node_modules/ }),
+    typescript2({
+      check: false,
+    }),
+    babel({
+      extensions: extensions,
+      exclude: ["./node_modules/@babel/**/*", "./node_modules/core-js/**/*"],
+    }),
+    !production &&
+      copy({
+        targets: [
+          { src: "./src/index.html", dest: outputDir },
+          { src: "./src/sticker.tgs", dest: outputDir },
+          {
+            src: "./node_modules/@webcomponents/webcomponentsjs/bundles/",
+            dest: outputDir,
+          },
+          {
+            src:
+              "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
+            dest: outputDir,
+          },
+        ],
+      }),
+    filesize(),
+    !production &&
+      serve({
+        contentBase: [outputDir],
+        open: true,
+        host: "localhost",
+        port: 10001,
+      }),
+
+    production && terser(),
+  ],
+};

rollup.config.js

@@ -0,0 +1,68 @@
+import babel from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import copy from "rollup-plugin-copy";
+import filesize from "rollup-plugin-filesize";
+import resolve from "@rollup/plugin-node-resolve";
+import serve from "rollup-plugin-serve";
+import { terser } from "rollup-plugin-terser";
+import typescript2 from "rollup-plugin-typescript2";
+
+const production = !process.env.ROLLUP_WATCH;
+const extensions = [".js", ".jsx", ".ts", ".tsx", ".mjs"];
+const outputDir = "./dist/";
+
+export default {
+  input: "./src/lottie-player.ts",
+  treeshake: false,
+  output: [
+    {
+      file: "./dist/lottie-player.esm.js",
+      // dir: outputDir,
+      format: "es",
+      sourcemap: true,
+    },
+    {
+      file: "./dist/lottie-player.js",
+      format: "umd",
+      name: "lottie-player",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve({ extensions }),
+    commonjs({ include: /node_modules/ }),
+    typescript2({
+      check: false,
+    }),
+    babel({
+      extensions: extensions,
+      exclude: ["./node_modules/@babel/**/*", "./node_modules/core-js/**/*"],
+    }),
+    !production &&
+      copy({
+        targets: [
+          { src: "./src/index.html", dest: outputDir },
+          { src: "./src/sticker.tgs", dest: outputDir },
+          {
+            src: "./node_modules/@webcomponents/webcomponentsjs/bundles/",
+            dest: outputDir,
+          },
+          {
+            src:
+              "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
+            dest: outputDir,
+          },
+        ],
+      }),
+    filesize(),
+    !production &&
+      serve({
+        contentBase: [outputDir],
+        open: true,
+        host: "localhost",
+        port: 10000,
+      }),
+
+    production && terser(),
+  ],
+};