svelte-lazy - npm Package Compare versions

Comparing version 0.1.14 to 0.1.15

index.js

@@ -286,104 +286,61 @@ (function (global, factory) {
     }
-    function create_bidirectional_transition(node, fn, params, intro) {
+    function create_in_transition(node, fn, params) {
         let config = fn(node, params);
-        let t = intro ? 0 : 1;
-        let running_program = null;
-        let pending_program = null;
-        let animation_name = null;
-        function clear_animation() {
+        let running = false;
+        let animation_name;
+        let task;
+        let uid = 0;
+        function cleanup() {
             if (animation_name)
                 delete_rule(node, animation_name);
         }
-        function init(program, duration) {
-            const d = program.b - t;
-            duration *= Math.abs(d);
-            return {
-                a: t,
-                b: program.b,
-                d,
-                duration,
-                start: program.start,
-                end: program.start + duration,
-                group: program.group
-            };
-        }
-        function go(b) {
+        function go() {
             const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config;
-            const program = {
-                start: now() + delay,
-                b
-            };
-            if (!b) {
-                // @ts-ignore todo: improve typings
-                program.group = outros;
-                outros.r += 1;
-            }
-            if (running_program) {
-                pending_program = program;
-            }
-            else {
-                // if this is an intro, and there's a delay, we need to do
-                // an initial tick and/or apply CSS animation immediately
-                if (css) {
-                    clear_animation();
-                    animation_name = create_rule(node, t, b, duration, delay, easing, css);
-                }
-                if (b)
-                    tick(0, 1);
-                running_program = init(program, duration);
-                add_render_callback(() => dispatch(node, b, 'start'));
-                loop(now => {
-                    if (pending_program && now > pending_program.start) {
-                        running_program = init(pending_program, duration);
-                        pending_program = null;
-                        dispatch(node, running_program.b, 'start');
-                        if (css) {
-                            clear_animation();
-                            animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);
-                        }
+            if (css)
+                animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
+            tick(0, 1);
+            const start_time = now() + delay;
+            const end_time = start_time + duration;
+            if (task)
+                task.abort();
+            running = true;
+            add_render_callback(() => dispatch(node, true, 'start'));
+            task = loop(now => {
+                if (running) {
+                    if (now >= end_time) {
+                        tick(1, 0);
+                        dispatch(node, true, 'end');
+                        cleanup();
+                        return running = false;
                     }
-                    if (running_program) {
-                        if (now >= running_program.end) {
-                            tick(t = running_program.b, 1 - t);
-                            dispatch(node, running_program.b, 'end');
-                            if (!pending_program) {
-                                // we're done
-                                if (running_program.b) {
-                                    // intro — we can tidy up immediately
-                                    clear_animation();
-                                }
-                                else {
-                                    // outro — needs to be coordinated
-                                    if (!--running_program.group.r)
-                                        run_all(running_program.group.c);
-                                }
-                            }
-                            running_program = null;
-                        }
-                        else if (now >= running_program.start) {
-                            const p = now - running_program.start;
-                            t = running_program.a + running_program.d * easing(p / running_program.duration);
-                            tick(t, 1 - t);
-                        }
+                    if (now >= start_time) {
+                        const t = easing((now - start_time) / duration);
+                        tick(t, 1 - t);
                     }
-                    return !!(running_program || pending_program);
-                });
-            }
+                }
+                return running;
+            });
         }
+        let started = false;
         return {
-            run(b) {
+            start() {
+                if (started)
+                    return;
+                delete_rule(node);
                 if (is_function(config)) {
-                    wait().then(() => {
-                        // @ts-ignore
-                        config = config();
-                        go(b);
-                    });
+                    config = config();
+                    wait().then(go);
                 }
                 else {
-                    go(b);
+                    go();
                 }
             },
+            invalidate() {
+                started = false;
+            },
             end() {
-                clear_animation();
-                running_program = pending_program = null;
+                if (running) {
+                    cleanup();
+                    running = false;
+                }
             }
@@ -511,3 +468,3 @@ };
 
-    // (12:46) 
+    // (15:46) 
     function create_if_block_3(ctx) {
@@ -586,3 +543,3 @@ var switch_instance_anchor, current;
 
-    // (10:44) 
+    // (13:44) 
     function create_if_block_2(ctx) {
@@ -693,3 +650,3 @@ var div, t;
 
-    // (7:4) {:else}
+    // (10:4) {:else}
     function create_else_block(ctx) {
@@ -757,3 +714,3 @@ var t, current;
     function create_if_block_1(ctx) {
-    	var div, t, div_transition, current;
+    	var div, t, div_intro, current;
 
@@ -804,6 +761,8 @@ const default_slot_1 = ctx.$$slots.default;
 
-    			add_render_callback(() => {
-    				if (!div_transition) div_transition = create_bidirectional_transition(div, fade, ctx.fadeOption, true);
-    				div_transition.run(1);
-    			});
+    			if (!div_intro) {
+    				add_render_callback(() => {
+    					div_intro = create_in_transition(div, fade, ctx.fadeOption);
+    					div_intro.start();
+    				});
+    			}
 
@@ -815,6 +774,2 @@ current = true;
     			transition_out(default_slot, local);
-
-    			if (!div_transition) div_transition = create_bidirectional_transition(div, fade, ctx.fadeOption, false);
-    			div_transition.run(0);
-
     			current = false;
@@ -829,6 +784,2 @@ },
     			if (default_slot) default_slot.d(detaching);
-
-    			if (detaching) {
-    				if (div_transition) div_transition.end();
-    			}
     		}
@@ -864,3 +815,3 @@ };
     			if (if_block) if_block.c();
-    			attr(div, "class", "svelte-lazy");
+    			attr(div, "class", ctx.rootClassName);
     		},
@@ -975,4 +926,6 @@
         duration: 400, 
-      }, resetHeightDelay = 0, onload = null, placeholder = null } = $$props;
+      }, resetHeightDelay = 0, onload = null, placeholder = null, class: className = '' } = $$props;
 
+      let rootClassName = 'svelte-lazy' 
+        + (className ? ' ' + className : '');
       let loaded = false;
@@ -1017,3 +970,5 @@
         if (height) {
-          node.style.height = (typeof height === 'number') ? height + 'px' : height;
+          node.style.height = (typeof height === 'number') 
+            ? height + 'px' 
+            : height;
         }
@@ -1036,2 +991,3 @@ }
     		if ('placeholder' in $$props) $$invalidate('placeholder', placeholder = $$props.placeholder);
+    		if ('class' in $$props) $$invalidate('className', className = $$props.class);
     		if ('$$scope' in $$props) $$invalidate('$$scope', $$scope = $$props.$$scope);
@@ -1047,2 +1003,4 @@ };
     		placeholder,
+    		className,
+    		rootClassName,
     		loaded,
@@ -1058,3 +1016,3 @@ load,
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, ["height", "offset", "fadeOption", "resetHeightDelay", "onload", "placeholder"]);
+    		init(this, options, instance, create_fragment, safe_not_equal, ["height", "offset", "fadeOption", "resetHeightDelay", "onload", "placeholder", "class"]);
     	}
@@ -1061,0 +1019,0 @@ }

package.json

@@ -6,7 +6,7 @@ {
   "main": "index.js",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "repository": "leafOfTree/svelte-lazy",
   "scripts": {
     "start": "rollup -c ./test/rollup.config.js -w",
-    "test": "npm run start",
+    "test": "rollup -c ./test/rollup.config.js",
     "build": "rollup -c",
@@ -13,0 +13,0 @@ "prepublishOnly": "npm run build"

README.md

@@ -9,4 +9,8 @@ # svelte-lazy
 
-## Install
+## Installation
 
+<a href="https://www.npmjs.com/package/svelte-lazy">
+    <img src="https://img.shields.io/npm/v/svelte-lazy.svg" alt="npm version" >
+</a>
+
     npm i svelte-lazy
@@ -37,3 +41,3 @@
 
-- `placeholder: String|Component` Default: `null`. Placeholder before the component is loaded.
+- `class: String` Default: `''`. Additional class for the container div. It will be `svelte-lazy ${class}`.
 
@@ -44,2 +48,4 @@ - `fadeOption: Object` Default: `{ delay: 0, duration: 400 }`. Option for the fade transition. Set `null` to disable it.
 
+- `placeholder: String|Component` Default: `null`. Placeholder before the component is loaded.
+
 - `resetHeightDelay: Number` Default: `0` (milliseconds). Delay to reset the component height to `auto` after it is loaded. Might be useful for remote resources like images to load first.
@@ -46,0 +52,0 @@

No alert changes

Improved metrics

Number of lines in readme file

64

increased by10.34%

Worsened metrics

Total package byte prevSize

60393

decreased by-5.87%

Lines of code

1794

decreased by-4.17%

No dependency changes