svelte-fast-marquee - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.js

@@ -339,3 +339,3 @@ (function (global, factory) {
     function add_css(target) {
-    	append_styles(target, "svelte-15w3e7g", ".marquee-container.svelte-15w3e7g{display:flex;width:100%;overflow-x:hidden;flex-direction:row;position:relative}.marquee.svelte-15w3e7g{flex:0 0 auto;min-width:100%;z-index:1;display:flex;flex-direction:row;align-items:center;animation:svelte-15w3e7g-scroll 10s linear 0s infinite;animation-play-state:running;animation-direction:normal}@keyframes svelte-15w3e7g-scroll{0%{transform:translateX(0%)}100%{transform:translateX(-100%)}}");
+    	append_styles(target, "svelte-9h83db", ".marquee-container.svelte-9h83db.svelte-9h83db{display:flex;width:100%;overflow-x:hidden;flex-direction:row;position:relative}.marquee-container.svelte-9h83db:hover .marquee.svelte-9h83db{animation-play-state:var(--pause-on-hover)}.marquee-container.svelte-9h83db:active .marquee.svelte-9h83db{animation-play-state:var(--pause-on-click)}.marquee.svelte-9h83db.svelte-9h83db{flex:0 0 auto;min-width:100%;z-index:1;display:flex;flex-direction:row;align-items:center;animation:svelte-9h83db-scroll 10s linear 0s infinite;animation-play-state:running;animation-direction:normal;animation-direction:var(--direction)}@keyframes svelte-9h83db-scroll{0%{transform:translateX(0%)}100%{transform:translateX(-100%)}}");
     }
@@ -349,6 +349,6 @@
     	let current;
-    	const default_slot_template = /*#slots*/ ctx[1].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[0], null);
-    	const default_slot_template_1 = /*#slots*/ ctx[1].default;
-    	const default_slot_1 = create_slot(default_slot_template_1, ctx, /*$$scope*/ ctx[0], null);
+    	const default_slot_template = /*#slots*/ ctx[6].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[5], null);
+    	const default_slot_template_1 = /*#slots*/ ctx[6].default;
+    	const default_slot_1 = create_slot(default_slot_template_1, ctx, /*$$scope*/ ctx[5], null);
 
@@ -363,5 +363,8 @@ return {
     			if (default_slot_1) default_slot_1.c();
-    			attr(div0, "class", "marquee svelte-15w3e7g");
-    			attr(div1, "class", "marquee svelte-15w3e7g");
-    			attr(div2, "class", "marquee-container svelte-15w3e7g");
+    			attr(div0, "class", "marquee svelte-9h83db");
+    			attr(div0, "style", /*_marqueeStyle*/ ctx[0]);
+    			attr(div1, "class", "marquee svelte-9h83db");
+    			attr(div1, "style", /*_marqueeStyle*/ ctx[0]);
+    			attr(div2, "class", "marquee-container svelte-9h83db");
+    			attr(div2, "style", /*_style*/ ctx[1]);
     		},
@@ -387,12 +390,24 @@ m(target, anchor) {
     			if (default_slot) {
-    				if (default_slot.p && (!current || dirty & /*$$scope*/ 1)) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[0], !current ? -1 : dirty, null, null);
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 32)) {
+    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[5], !current ? -1 : dirty, null, null);
     				}
     			}
 
+    			if (!current || dirty & /*_marqueeStyle*/ 1) {
+    				attr(div0, "style", /*_marqueeStyle*/ ctx[0]);
+    			}
+
     			if (default_slot_1) {
-    				if (default_slot_1.p && (!current || dirty & /*$$scope*/ 1)) {
-    					update_slot(default_slot_1, default_slot_template_1, ctx, /*$$scope*/ ctx[0], !current ? -1 : dirty, null, null);
+    				if (default_slot_1.p && (!current || dirty & /*$$scope*/ 32)) {
+    					update_slot(default_slot_1, default_slot_template_1, ctx, /*$$scope*/ ctx[5], !current ? -1 : dirty, null, null);
     				}
     			}
+
+    			if (!current || dirty & /*_marqueeStyle*/ 1) {
+    				attr(div1, "style", /*_marqueeStyle*/ ctx[0]);
+    			}
+
+    			if (!current || dirty & /*_style*/ 2) {
+    				attr(div2, "style", /*_style*/ ctx[1]);
+    			}
     		},
@@ -419,9 +434,32 @@ i(local) {
     function instance($$self, $$props, $$invalidate) {
+    	let _style;
+    	let _marqueeStyle;
     	let { $$slots: slots = {}, $$scope } = $$props;
+    	let { pauseOnHover = false } = $$props;
+    	let { pauseOnClick = false } = $$props;
+    	let { direction = 'left' } = $$props;
 
     	$$self.$$set = $$props => {
-    		if ('$$scope' in $$props) $$invalidate(0, $$scope = $$props.$$scope);
+    		if ('pauseOnHover' in $$props) $$invalidate(2, pauseOnHover = $$props.pauseOnHover);
+    		if ('pauseOnClick' in $$props) $$invalidate(3, pauseOnClick = $$props.pauseOnClick);
+    		if ('direction' in $$props) $$invalidate(4, direction = $$props.direction);
+    		if ('$$scope' in $$props) $$invalidate(5, $$scope = $$props.$$scope);
     	};
 
-    	return [$$scope, slots];
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*pauseOnHover, pauseOnClick*/ 12) {
+    			$$invalidate(1, _style = `
+		--pause-on-hover: ${pauseOnHover ? 'paused' : 'running'};
+		--pause-on-click: ${pauseOnClick ? 'paused' : 'running'};
+	`);
+    		}
+
+    		if ($$self.$$.dirty & /*direction*/ 16) {
+    			$$invalidate(0, _marqueeStyle = `
+		--direction: ${direction === 'left' ? 'normal' : 'reverse'};
+	`);
+    		}
+    	};
+
+    	return [_marqueeStyle, _style, pauseOnHover, pauseOnClick, direction, $$scope, slots];
     }
@@ -432,3 +470,16 @@
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, {}, add_css);
+
+    		init(
+    			this,
+    			options,
+    			instance,
+    			create_fragment,
+    			safe_not_equal,
+    			{
+    				pauseOnHover: 2,
+    				pauseOnClick: 3,
+    				direction: 4
+    			},
+    			add_css
+    		);
     	}
@@ -435,0 +486,0 @@ }

package.json

 {
 	"name": "svelte-fast-marquee",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "A Marquee component for Svelte inspired by react-fast-marquee.",
@@ -8,2 +8,3 @@ "main": "dist/index.js",
 	"svelte": "src/index.js",
+	"types": "types/index.d.ts",
 	"type": "module",
@@ -13,4 +14,10 @@ "scripts": {
 		"build:watch": "rollup -c -w",
-		"prepublishOnly": "npm run build"
+		"svelte-check": "svelte-check",
+		"prepublishOnly": "npm run svelte-check && npm run build"
 	},
+	"files": [
+		"types",
+		"dist",
+		"src"
+	],
 	"keywords": [
@@ -40,4 +47,6 @@ "svelte",
 		"rollup-plugin-svelte": "^7.1.0",
-		"svelte": "^3.40.2"
+		"sveld": "^0.8.2",
+		"svelte": "^3.40.2",
+		"svelte-check": "^2.2.3"
 	}
 }

README.md

@@ -21,6 +21,37 @@ # Svelte Fast Marquee
 ## Usage
-To use the component, first import Marquee into your file:
 
+To use the component, first import `Marquee` into your file:
+
 ```js
 import Marquee from "svelte-fast-marquee";
 ```
+
+Then wrap the `<Marquee>` tags around any component or text you'd like to slide.
+
+```js
+<Marquee>
+  I can be a Svelte component, multiple Svelte components, or just some text.
+</Marquee>
+```
+
+A sample file might look like this:
+
+```js
+<script>
+    import MyComponent from "../components/MyComponent";
+    import Marquee from "react-fast-marquee";
+</script>
+<Marquee>
+    <MyComponent />
+    <MyComponent />
+    <MyComponent />
+</Marquee>
+```
+
+## Props
+
+| Property        | Type                        | Default           | Description                                              |
+| :-------------- | :-------------------------- | :---------------- | :------------------------------------------------------- |
+| `pauseOnHover`  | `boolean`                   | `false`           | Whether to pause the marquee when hovered                |
+| `pauseOnClick`  | `boolean`                   | `false`           | Whether to pause the marquee when clicked                |
+| `direction`     | `"left"` or `"right"`       | `"left"`          | The direction the marquee is sliding                     |

src/index.js

@@ -1,1 +0,3 @@
-export { default as default } from './Marquee.svelte';
+import Marquee from './Marquee.svelte'
+
+export default Marquee

No alert changes

Improved metrics

Total package byte prevSize

37623

increased by18.01%

Number of package files

9

increased by12.5%

Lines of code

944

increased by12.51%

Number of lines in readme file

57

increased by119.23%

Worsened metrics

Dev dependency count

6

increased by50%

No dependency changes