svelte-lazy - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

index.js

@@ -62,4 +62,3 @@ (function (global, factory) {
     }
-    function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
-        const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
+    function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
         if (slot_changes) {
@@ -70,2 +69,13 @@ const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
     }
+    function get_all_dirty_from_scope($$scope) {
+        if ($$scope.ctx.length > 32) {
+            const dirty = [];
+            const length = $$scope.ctx.length / 32;
+            for (let i = 0; i < length; i++) {
+                dirty[i] = -1;
+            }
+            return dirty;
+        }
+        return -1;
+    }
     function action_destroyer(action_result) {
@@ -109,6 +119,22 @@ return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
     }
-
     function append(target, node) {
         target.appendChild(node);
     }
+    function get_root_for_style(node) {
+        if (!node)
+            return document;
+        const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
+        if (root && root.host) {
+            return root;
+        }
+        return node.ownerDocument;
+    }
+    function append_empty_stylesheet(node) {
+        const style_element = element('style');
+        append_stylesheet(get_root_for_style(node), style_element);
+        return style_element.sheet;
+    }
+    function append_stylesheet(node, style) {
+        append(node.head || node, style);
+    }
     function insert(target, node, anchor) {
@@ -147,11 +173,18 @@ target.insertBefore(node, anchor || null);
     function set_style(node, key, value, important) {
-        node.style.setProperty(key, value, important ? 'important' : '');
+        if (value === null) {
+            node.style.removeProperty(key);
+        }
+        else {
+            node.style.setProperty(key, value, important ? 'important' : '');
+        }
     }
-    function custom_event(type, detail) {
+    function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
         const e = document.createEvent('CustomEvent');
-        e.initCustomEvent(type, false, false, detail);
+        e.initCustomEvent(type, bubbles, cancelable, detail);
         return e;
     }
 
-    const active_docs = new Set();
+    // we need to store the information for multiple documents because a Svelte application could also contain iframes
+    // https://github.com/sveltejs/svelte/issues/3624
+    const managed_styles = new Map();
     let active = 0;
@@ -166,2 +199,7 @@ // https://github.com/darkskyapp/string-hash/blob/master/index.js
     }
+    function create_style_information(doc, node) {
+        const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
+        managed_styles.set(doc, info);
+        return info;
+    }
     function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
@@ -176,12 +214,10 @@ const step = 16.666 / duration;
         const name = `__svelte_${hash(rule)}_${uid}`;
-        const doc = node.ownerDocument;
-        active_docs.add(doc);
-        const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = doc.head.appendChild(element('style')).sheet);
-        const current_rules = doc.__svelte_rules || (doc.__svelte_rules = {});
-        if (!current_rules[name]) {
-            current_rules[name] = true;
+        const doc = get_root_for_style(node);
+        const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
+        if (!rules[name]) {
+            rules[name] = true;
             stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
         }
         const animation = node.style.animation || '';
-        node.style.animation = `${animation ? `${animation}, ` : ``}${name} ${duration}ms linear ${delay}ms 1 both`;
+        node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`;
         active += 1;
@@ -208,10 +244,10 @@ return name;
                 return;
-            active_docs.forEach(doc => {
-                const stylesheet = doc.__svelte_stylesheet;
+            managed_styles.forEach(info => {
+                const { stylesheet } = info;
                 let i = stylesheet.cssRules.length;
                 while (i--)
                     stylesheet.deleteRule(i);
-                doc.__svelte_rules = {};
+                info.rules = {};
             });
-            active_docs.clear();
+            managed_styles.clear();
         });
@@ -240,17 +276,36 @@ }
     }
-    let flushing = false;
+    // flush() calls callbacks in this order:
+    // 1. All beforeUpdate callbacks, in order: parents before children
+    // 2. All bind:this callbacks, in reverse order: children before parents.
+    // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+    //    for afterUpdates called during the initial onMount, which are called in
+    //    reverse order: children before parents.
+    // Since callbacks might update component values, which could trigger another
+    // call to flush(), the following steps guard against this:
+    // 1. During beforeUpdate, any updated components will be added to the
+    //    dirty_components array and will cause a reentrant call to flush(). Because
+    //    the flush index is kept outside the function, the reentrant call will pick
+    //    up where the earlier call left off and go through all dirty components. The
+    //    current_component value is saved and restored so that the reentrant call will
+    //    not interfere with the "parent" flush() call.
+    // 2. bind:this callbacks cannot trigger new flush() calls.
+    // 3. During afterUpdate, any updated components will NOT have their afterUpdate
+    //    callback called a second time; the seen_callbacks set, outside the flush()
+    //    function, guarantees this behavior.
     const seen_callbacks = new Set();
+    let flushidx = 0; // Do *not* move this inside the flush() function
     function flush() {
-        if (flushing)
-            return;
-        flushing = true;
+        const saved_component = current_component;
         do {
             // first, call beforeUpdate functions
             // and update components
-            for (let i = 0; i < dirty_components.length; i += 1) {
-                const component = dirty_components[i];
+            while (flushidx < dirty_components.length) {
+                const component = dirty_components[flushidx];
+                flushidx++;
                 set_current_component(component);
                 update(component.$$);
             }
+            set_current_component(null);
             dirty_components.length = 0;
+            flushidx = 0;
             while (binding_callbacks.length)
@@ -275,4 +330,4 @@ binding_callbacks.pop()();
         update_scheduled = false;
-        flushing = false;
         seen_callbacks.clear();
+        set_current_component(saved_component);
     }
@@ -339,2 +394,5 @@ function update($$) {
         }
+        else if (callback) {
+            callback();
+        }
     }
@@ -384,2 +442,3 @@ const null_transition = { duration: 0 };
                     return;
+                started = true;
                 delete_rule(node);
@@ -445,18 +504,20 @@ if (is_function(config)) {
     }
-    function mount_component(component, target, anchor) {
+    function mount_component(component, target, anchor, customElement) {
         const { fragment, on_mount, on_destroy, after_update } = component.$$;
         fragment && fragment.m(target, anchor);
-        // onMount happens before the initial afterUpdate
-        add_render_callback(() => {
-            const new_on_destroy = on_mount.map(run).filter(is_function);
-            if (on_destroy) {
-                on_destroy.push(...new_on_destroy);
-            }
-            else {
-                // Edge case - component was destroyed immediately,
-                // most likely as a result of a binding initialising
-                run_all(new_on_destroy);
-            }
-            component.$$.on_mount = [];
-        });
+        if (!customElement) {
+            // onMount happens before the initial afterUpdate
+            add_render_callback(() => {
+                const new_on_destroy = on_mount.map(run).filter(is_function);
+                if (on_destroy) {
+                    on_destroy.push(...new_on_destroy);
+                }
+                else {
+                    // Edge case - component was destroyed immediately,
+                    // most likely as a result of a binding initialising
+                    run_all(new_on_destroy);
+                }
+                component.$$.on_mount = [];
+            });
+        }
         after_update.forEach(add_render_callback);
@@ -483,6 +544,5 @@ }
     }
-    function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
+    function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
         const parent_component = current_component;
         set_current_component(component);
-        const prop_values = options.props || {};
         const $$ = component.$$ = {
@@ -499,13 +559,16 @@ fragment: null,
             on_destroy: [],
+            on_disconnect: [],
             before_update: [],
             after_update: [],
-            context: new Map(parent_component ? parent_component.$$.context : []),
+            context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
             // everything else
             callbacks: blank_object(),
             dirty,
-            skip_bound: false
+            skip_bound: false,
+            root: options.target || parent_component.$$.root
         };
+        append_styles && append_styles($$.root);
         let ready = false;
         $$.ctx = instance
-            ? instance(component, prop_values, (i, ret, ...rest) => {
+            ? instance(component, options.props || {}, (i, ret, ...rest) => {
                 const value = rest.length ? rest[0] : ret;
@@ -539,3 +602,3 @@ if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
                 transition_in(component.$$.fragment);
-            mount_component(component, options.target, options.anchor);
+            mount_component(component, options.target, options.anchor, options.customElement);
             flush();
@@ -545,2 +608,5 @@ }
     }
+    /**
+     * Base class for Svelte components. Used when dev=false.
+     */
     class SvelteComponent {
@@ -569,3 +635,3 @@ $destroy() {
 
-    function fade(node, { delay = 0, duration = 400, easing = identity }) {
+    function fade(node, { delay = 0, duration = 400, easing = identity } = {}) {
         const o = +getComputedStyle(node).opacity;
@@ -580,3 +646,3 @@ return {
 
-    /* src/components/Placeholder.svelte generated by Svelte v3.24.1 */
+    /* src/components/Placeholder.svelte generated by Svelte v3.49.0 */
 
@@ -593,4 +659,5 @@ function create_if_block(ctx) {
     	function select_block_type(ctx, dirty) {
-    		if (typeof /*placeholder*/ ctx[0] === "string") return 0;
-    		if (dirty & /*placeholder*/ 1) show_if = !!["function", "object"].includes(typeof /*placeholder*/ ctx[0]);
+    		if (dirty & /*placeholder*/ 1) show_if = null;
+    		if (typeof /*placeholder*/ ctx[0] === 'string') return 0;
+    		if (show_if == null) show_if = !!['function', 'object'].includes(typeof /*placeholder*/ ctx[0]);
     		if (show_if) return 1;
@@ -644,2 +711,4 @@ return -1;
     						if_block.c();
+    					} else {
+    						if_block.p(ctx, dirty);
     					}
@@ -833,3 +902,3 @@
 
-    const placeholderClass = "svelte-lazy-placeholder";
+    const placeholderClass = 'svelte-lazy-placeholder';
 
@@ -841,4 +910,4 @@ function instance($$self, $$props, $$invalidate) {
     	$$self.$$set = $$props => {
-    		if ("placeholder" in $$props) $$invalidate(0, placeholder = $$props.placeholder);
-    		if ("placeholderProps" in $$props) $$invalidate(1, placeholderProps = $$props.placeholderProps);
+    		if ('placeholder' in $$props) $$invalidate(0, placeholder = $$props.placeholder);
+    		if ('placeholderProps' in $$props) $$invalidate(1, placeholderProps = $$props.placeholderProps);
     	};
@@ -856,3 +925,3 @@
 
-    /* src/index.svelte generated by Svelte v3.24.1 */
+    /* src/index.svelte generated by Svelte v3.49.0 */
 
@@ -906,6 +975,6 @@ function create_if_block_2$1(ctx) {
     	let current;
-    	const default_slot_template = /*$$slots*/ ctx[15].default;
+    	const default_slot_template = /*#slots*/ ctx[15].default;
     	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[14], null);
     	const default_slot_or_fallback = default_slot || fallback_block();
-    	let if_block = !/*contentShow*/ ctx[4] && /*placeholder*/ ctx[1] && create_if_block_1$1(ctx);
+    	let if_block = !/*contentShow*/ ctx[3] && /*placeholder*/ ctx[1] && create_if_block_1$1(ctx);
 
@@ -934,6 +1003,17 @@ return {
     		},
-    		p(ctx, dirty) {
+    		p(new_ctx, dirty) {
+    			ctx = new_ctx;
+
     			if (default_slot) {
-    				if (default_slot.p && dirty & /*$$scope*/ 16384) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[14], dirty, null, null);
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 16384)) {
+    					update_slot_base(
+    						default_slot,
+    						default_slot_template,
+    						ctx,
+    						/*$$scope*/ ctx[14],
+    						!current
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[14])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[14], dirty, null),
+    						null
+    					);
     				}
@@ -946,7 +1026,7 @@ }
 
-    			if (!/*contentShow*/ ctx[4] && /*placeholder*/ ctx[1]) {
+    			if (!/*contentShow*/ ctx[3] && /*placeholder*/ ctx[1]) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
 
-    					if (dirty & /*contentShow, placeholder*/ 18) {
+    					if (dirty & /*contentShow, placeholder*/ 10) {
     						transition_in(if_block, 1);
@@ -1069,3 +1149,3 @@ }
     	function select_block_type(ctx, dirty) {
-    		if (/*loaded*/ ctx[3]) return 0;
+    		if (/*loaded*/ ctx[4]) return 0;
     		if (/*placeholder*/ ctx[1]) return 1;
@@ -1125,2 +1205,4 @@ return -1;
     						if_block.c();
+    					} else {
+    						if_block.p(ctx, dirty);
     					}
@@ -1157,12 +1239,12 @@
 
-    const contentClass = "svelte-lazy-content";
+    const contentClass = 'svelte-lazy-content';
 
     function addListeners(handler) {
-    	document.addEventListener("scroll", handler, true);
-    	window.addEventListener("resize", handler);
+    	document.addEventListener('scroll', handler, true);
+    	window.addEventListener('resize', handler);
     }
 
     function removeListeners(handler) {
-    	document.removeEventListener("scroll", handler, true);
-    	window.removeEventListener("resize", handler);
+    	document.removeEventListener('scroll', handler, true);
+    	window.removeEventListener('resize', handler);
     }
@@ -1217,2 +1299,4 @@
     function instance$1($$self, $$props, $$invalidate) {
+    	let contentStyle;
+    	let { $$slots: slots = {}, $$scope } = $$props;
     	let { height = 0 } = $$props;
@@ -1225,4 +1309,4 @@ let { offset = 150 } = $$props;
     	let { placeholderProps = null } = $$props;
-    	let { class: className = "" } = $$props;
-    	const rootClass = "svelte-lazy" + (className ? " " + className : "");
+    	let { class: className = '' } = $$props;
+    	const rootClass = 'svelte-lazy' + (className ? ' ' + className : '');
     	const rootInitialHeight = getStyleHeight();
@@ -1241,6 +1325,3 @@ let loaded = false;
     				if (nodeTop <= expectedTop) {
-    					$$invalidate(3, loaded = true);
-    					resetHeight(node);
-    					onload && onload(node);
-    					removeListeners(loadHandler);
+    					loadNode(node, loadHandler);
     				}
@@ -1255,2 +1336,3 @@ },
     			loadHandler();
+    			observeNode(node, loadHandler);
     		});
@@ -1265,4 +1347,26 @@
 
+    	function observeNode(node, loadHandler) {
+    		const observer = new IntersectionObserver(entries => {
+    				if (entries[0].intersectionRatio > 0) {
+    					loadNode(node, loadHandler);
+    					observer.unobserve(entries[0].target);
+    				}
+    			});
+
+    		observer.observe(node);
+    	}
+
+    	function loadNode(node, loadHandler) {
+    		$$invalidate(4, loaded = true);
+    		resetHeight(node);
+
+    		if (onload) {
+    			onload(node);
+    		}
+
+    		removeListeners(loadHandler);
+    	}
+
     	function getStyleHeight() {
-    		return typeof height === "number" ? height + "px" : height;
+    		return typeof height === 'number' ? height + 'px' : height;
     	}
@@ -1282,3 +1386,3 @@
     				if (!isLoading) {
-    					node.style.height = "auto";
+    					node.style.height = 'auto';
     				}
@@ -1291,3 +1395,3 @@ },
     	function checkImgLoadingStatus(node) {
-    		const img = node.querySelector("img");
+    		const img = node.querySelector('img');
 
@@ -1299,11 +1403,11 @@ if (!img) {
     		if (!img.complete) {
-    			$$invalidate(4, contentShow = false);
+    			$$invalidate(3, contentShow = false);
 
     			node.addEventListener(
-    				"load",
+    				'load',
     				() => {
     					// Use auto height if loading successfully
-    					$$invalidate(4, contentShow = true);
+    					$$invalidate(3, contentShow = true);
 
-    					node.style.height = "auto";
+    					node.style.height = 'auto';
     				},
@@ -1314,6 +1418,6 @@ { capture: true, once: true }
     			node.addEventListener(
-    				"error",
+    				'error',
     				() => {
     					// Show content with fixed height if there is error
-    					$$invalidate(4, contentShow = true);
+    					$$invalidate(3, contentShow = true);
     				},
@@ -1334,21 +1438,17 @@ { capture: true, once: true }
 
-    	let { $$slots = {}, $$scope } = $$props;
-
     	$$self.$$set = $$props => {
-    		if ("height" in $$props) $$invalidate(9, height = $$props.height);
-    		if ("offset" in $$props) $$invalidate(10, offset = $$props.offset);
-    		if ("fadeOption" in $$props) $$invalidate(0, fadeOption = $$props.fadeOption);
-    		if ("resetHeightDelay" in $$props) $$invalidate(11, resetHeightDelay = $$props.resetHeightDelay);
-    		if ("onload" in $$props) $$invalidate(12, onload = $$props.onload);
-    		if ("placeholder" in $$props) $$invalidate(1, placeholder = $$props.placeholder);
-    		if ("placeholderProps" in $$props) $$invalidate(2, placeholderProps = $$props.placeholderProps);
-    		if ("class" in $$props) $$invalidate(13, className = $$props.class);
-    		if ("$$scope" in $$props) $$invalidate(14, $$scope = $$props.$$scope);
+    		if ('height' in $$props) $$invalidate(9, height = $$props.height);
+    		if ('offset' in $$props) $$invalidate(10, offset = $$props.offset);
+    		if ('fadeOption' in $$props) $$invalidate(0, fadeOption = $$props.fadeOption);
+    		if ('resetHeightDelay' in $$props) $$invalidate(11, resetHeightDelay = $$props.resetHeightDelay);
+    		if ('onload' in $$props) $$invalidate(12, onload = $$props.onload);
+    		if ('placeholder' in $$props) $$invalidate(1, placeholder = $$props.placeholder);
+    		if ('placeholderProps' in $$props) $$invalidate(2, placeholderProps = $$props.placeholderProps);
+    		if ('class' in $$props) $$invalidate(13, className = $$props.class);
+    		if ('$$scope' in $$props) $$invalidate(14, $$scope = $$props.$$scope);
     	};
 
-    	let contentStyle;
-
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*contentShow*/ 16) {
-    			 $$invalidate(5, contentStyle = !contentShow ? "display: none" : "");
+    		if ($$self.$$.dirty & /*contentShow*/ 8) {
+    			 $$invalidate(5, contentStyle = !contentShow ? 'display: none' : '');
     		}
@@ -1361,4 +1461,4 @@ };
     		placeholderProps,
+    		contentShow,
     		loaded,
-    		contentShow,
     		contentStyle,
@@ -1374,3 +1474,3 @@ rootClass,
     		$$scope,
-    		$$slots
+    		slots
     	];
@@ -1377,0 +1477,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
   "main": "index.js",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "types": "index.d.ts",
@@ -21,3 +21,3 @@ "repository": "leafOfTree/svelte-lazy",
     "node-static": "^0.7.11",
-    "puppeteer": "^5.2.1",
+    "puppeteer": "^19.6.3",
     "rollup": "^1.32.1",
@@ -27,4 +27,4 @@ "rollup-plugin-livereload": "^1.3.0",
     "rollup-plugin-serve": "^1.0.3",
-    "rollup-plugin-svelte": "^5.2.3",
-    "svelte": "^3.24.1"
+    "rollup-plugin-svelte": "^6.1.1",
+    "svelte": "^3.49.0"
   },
@@ -44,4 +44,3 @@ "peerDependencies": {
     "index.d.ts"
-  ],
-  "dependencies": {}
+  ]
 }

README.md

 <img src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/svelte-lazy.svg" width="60" height="60" alt="icon" align="left"/>
 
-# svelte-lazy [![Build Status][1]][2] [![npm version][3]][4]
+# svelte-lazy [![npm version][3]][4]
 
@@ -5,0 +5,0 @@ A svelte component to lazyload any content including images. [Demo on svelte.dev/repl][5].

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

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

Improved metrics

Total package byte prevSize

93022

increased by9.13%

Lines of code

2674

increased by7.82%

No dependency changes