vue3-lottie - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "vue3-lottie",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",
   "scripts": {
-    "dev": "vite",
-    "prepare": "husky install",
-    "build": "vue-tsc --noEmit && rollup -c rollup.config.js",
-    "serve": "vite preview",
+    "dev": "vue-cli-service serve dev/serve.ts",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
+    "prebuild": "rimraf ./dist",
+    "prepublish": "npm run build",
     "lint": "eslint \"{packages,playground}/**/*.{ts,tsx,vue,js,jsx,html}\"",
@@ -23,5 +26,5 @@ "prepublishOnly": "npm run build",
   "files": [
-    "es",
-    "lib",
-    "packages"
+    "dist/*",
+    "src/**/*.vue",
+    "types/*"
   ],
@@ -32,12 +35,6 @@ "repository": {
   },
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "exports": {
-    ".": {
-      "import": "./es/index.js",
-      "require": "./lib/index.js"
-    }
-  },
-  "typings": "lib/index.d.ts",
-  "type": "module",
+  "main": "dist/vue3-lottie.ssr.js",
+  "module": "dist/vue3-lottie.esm.js",
+  "browser": "dist/vue3-lottie.esm.js",
+  "unpkg": "dist/vue3-lottie.min.js",
   "devDependencies": {
@@ -47,5 +44,7 @@ "@commitlint/cli": "^12.1.1",
     "@rollup/plugin-alias": "^3.1.5",
+    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-replace": "^3.0.1",
     "@types/lodash-es": "^4.17.4",
@@ -57,3 +56,2 @@ "@types/node": "^15.3.1",
     "@vitejs/plugin-vue-jsx": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-standard": "^6.0.0",
@@ -83,4 +81,30 @@ "@vue/eslint-config-typescript": "^7.0.0",
     "vite": "^2.5.6",
-    "vue-tsc": "^0.3.0"
-  }
+    "vue-tsc": "^0.3.0",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.11",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "minimist": "^1.2.5",
+    "postcss": "^8.2.10",
+    "rollup": "^2.52.8",
+    "vue": "^3.0.5",
+    "vue-server-renderer": "^2.6.14"
+  },
+  "bugs": {
+    "url": "https://github.com/megasanjay/vue3-lottie/issues",
+    "email": "[e-mail]"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "homepage": "https://vue3-lottie.vercel.app/",
+  "keywords": [
+    "vue3",
+    "marquee"
+  ],
+  "sideEffects": false
 }

README.md

@@ -1,47 +0,78 @@
-# Vue 3 + TypeScript Library Template
-A simple but complete library template for Vue 3 + TypeScript
+# vue3-marquee
 
-## Getting started
-Getting the code by `git clone` or click `Use this template` right above.
+[![npm](https://img.shields.io/npm/v/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Downloads](https://img.shields.io/npm/dt/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Stars](https://img.shields.io/github/stars/megasanjay/vue3-lottie.svg?style=flat-square)](https://github.com/megasanjay/vue3-lottie/stargazers) [![License](https://img.shields.io/npm/l/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/blob/main/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/megasanjay/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/issues)
 
-Then use `yarn` or other package manager to install dependencies.
+A simple lottie component with ZERO dependencies for Vue 3. This component was originally developed for internal use but I figured this could be useful to someone else as well. This component is modeled after a React lottie component I found called [React Fast lottie](https://github.com/justin-chu/react-fast-lottie). To keep a smooth animation running, clones of the content can be created for seamless transitions with no sudden jarring appearences or empty spaces in between content.
 
-## CSS
-This template includes `Scss` with it. Scoped style in Vue SFC is also supported. All the styles will be build into a `index.css` right in the project root.
+# Warning
 
-When using your library by npm package in another project, you can import this css by
+The latest version of vue3-lottie is in the experimental stage. I'm looking for users with typescript applications to verify the use of this library before I update the version numbers.
+
+# Demos
+
+View the live demos here: [https://vue3-lottie.vercel.app/examples.html](https://vue3-lottie.vercel.app/examples.html)
+
+# Installation
+
+If you are using npm:
+
+```shell
+npm install vue3-lottie
 ```
-import '{YOUR_LIB_NAME}/index.css'
-```
 
-## Dev server
-The dev server is provided by `Vite`. To start the dev server, run
+If you are using yarn:
 
+```shell
+yarn add vue3-lottie
 ```
-yarn dev
-```
 
-## Writing packages
-Simply creating a folder in `packages` and add it to `packages/index.ts`, and it's done.
+# Usage
 
-## Build your packages
+The most common use case is to register the component globally.
+
+```js
+// main.js
+import { createApp } from "vue";
+import Vue3Marquee from "vue3-lottie";
+
+createApp(App).use(Vue3Marquee).mount("#app");
 ```
-yarn build
-```
 
-Will build your packages in two format ( `esm` and `CommonJS` ) using *rollup* instead of *Vite* due to the issue when generating `.d.ts` file.
+Alternatively you can import the marquee component locally.
 
-Once everything done, you can pack your library by `npm pack` or publish it by `npm publish`
+```js
+import Vue3Marquee from "vue3-marquee";
 
-## External dependencies
-If you want to exclude your dependencies from your build result:
+export default {
+  components: {
+    Vue3Marquee,
+  },
+};
+```
 
-1. Add the package to `peerDependencies` in `package.json`
-2. Add the package to `external` in `rollup.config.js`
+You can then use the component in your template. A common use case is an image marquee for logos but you can also use it for scrolling text.
 
-When using this library, remember to install these `peerDependencies`.
+```html
+<vue3-marquee>
+  <img height="200" width="300" src="...img" />
+  <img height="200" width="300" src="...img" />
+  <img height="200" width="300" src="...img" />
+</vue3-marquee>
+```
 
-## About `d.ts`
-TypeScript declaration files will generated into `lib` folder once you build this template. That means the decalration files will be published in the npm package.
+# Props and options
 
-Also, `.vue.d.ts` will be generated for Vue SFC.
+| Prop          | Type                                   | Default Value   | Description                                                                            |
+| ------------- | -------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
+| direction     | String of either 'normal' or 'reverse' | "normal"        | The direction for the content to move in                                               |
+| duration      | Number                                 | 20              | The time taken for the marquee content to move the width of the container (in seconds) |
+| delay         | Number                                 | 0               | A delay before the animation starts (in seconds)                                       |
+| loop          | Number                                 | 0               | The number of instances that the marquee animation should run (0 is infinite)          |
+| gradient      | Boolean                                | false           | Whether to show a gradient overlay                                                     |
+| gradientColor | Array of 3 RGB values                  | [255, 255, 255] | The RGB colors for the color of the gradient                                           |
+| gradientWidth | String                                 | 200px           | Length of portion of the container edges that should be taken by the gradient overlay  |
+| pauseOnHover  | Boolean                                | false           | Whether to pause the marquee on hover                                                  |
+| pauseOnClick  | Boolean                                | false           | Whether to pause the marquee when you hold the right click button                      |
+| clone         | Boolean                                | false           | Whether to clone the content if you want no empty spaces in the animation              |
+
+[![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)

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

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

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

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 bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1388264

increased by7044.22%

Lines of code

29952

increased by21142.55%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-66.67%

Number of lines in readme file

79

increased by68.09%

Worsened metrics

Dev dependency count

52

increased by36.84%

Number of package files

8

decreased by-50%

Number of medium supply chain risk alerts

3

increased byInfinity%

Is type module

No

No dependency changes