svelte-lazy - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

index.js

@@ -136,2 +136,3 @@ (function (global, factory) {
         append(node.head || node, style);
+        return style.sheet;
     }
@@ -142,3 +143,5 @@ function insert(target, node, anchor) {
     function detach(node) {
-        node.parentNode.removeChild(node);
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
     }
@@ -168,7 +171,8 @@ function element(name) {
         data = '' + data;
-        if (text.wholeText !== data)
-            text.data = data;
+        if (text.data === data)
+            return;
+        text.data = data;
     }
     function set_style(node, key, value, important) {
-        if (value === null) {
+        if (value == null) {
             node.style.removeProperty(key);
@@ -185,2 +189,5 @@ }
     }
+    function construct_svelte_component(component, props) {
+        return new component(props);
+    }
 
@@ -243,7 +250,6 @@ // we need to store the information for multiple documents because a Svelte application could also contain iframes
             managed_styles.forEach(info => {
-                const { stylesheet } = info;
-                let i = stylesheet.cssRules.length;
-                while (i--)
-                    stylesheet.deleteRule(i);
-                info.rules = {};
+                const { ownerNode } = info.stylesheet;
+                // there is no ownerNode if it runs on jsdom.
+                if (ownerNode)
+                    detach(ownerNode);
             });
@@ -261,5 +267,5 @@ managed_styles.clear();
     const binding_callbacks = [];
-    const render_callbacks = [];
+    let render_callbacks = [];
     const flush_callbacks = [];
-    const resolved_promise = Promise.resolve();
+    const resolved_promise = /* @__PURE__ */ Promise.resolve();
     let update_scheduled = false;
@@ -296,2 +302,8 @@ function schedule_update() {
     function flush() {
+        // Do not reenter flush while dirty components are updated, as this can
+        // result in an infinite loop. Instead, let the inner flush handle it.
+        // Reentrancy is ok afterwards for bindings etc.
+        if (flushidx !== 0) {
+            return;
+        }
         const saved_component = current_component;
@@ -301,8 +313,16 @@ do {
             // and update components
-            while (flushidx < dirty_components.length) {
-                const component = dirty_components[flushidx];
-                flushidx++;
-                set_current_component(component);
-                update(component.$$);
+            try {
+                while (flushidx < dirty_components.length) {
+                    const component = dirty_components[flushidx];
+                    flushidx++;
+                    set_current_component(component);
+                    update(component.$$);
+                }
             }
+            catch (e) {
+                // reset dirty state to not end up in a deadlocked state and then rethrow
+                dirty_components.length = 0;
+                flushidx = 0;
+                throw e;
+            }
             set_current_component(null);
@@ -343,2 +363,12 @@ dirty_components.length = 0;
     }
+    /**
+     * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
+     */
+    function flush_render_callbacks(fns) {
+        const filtered = [];
+        const targets = [];
+        render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
+        targets.forEach((c) => c());
+        render_callbacks = filtered;
+    }
 
@@ -400,3 +430,4 @@ let promise;
     function create_in_transition(node, fn, params) {
-        let config = fn(node, params);
+        const options = { direction: 'in' };
+        let config = fn(node, params, options);
         let running = false;
@@ -445,3 +476,3 @@ let animation_name;
                 if (is_function(config)) {
-                    config = config();
+                    config = config(options);
                     wait().then(go);
@@ -505,3 +536,3 @@ }
     function mount_component(component, target, anchor, customElement) {
-        const { fragment, on_mount, on_destroy, after_update } = component.$$;
+        const { fragment, after_update } = component.$$;
         fragment && fragment.m(target, anchor);
@@ -511,5 +542,8 @@ if (!customElement) {
             add_render_callback(() => {
-                const new_on_destroy = on_mount.map(run).filter(is_function);
-                if (on_destroy) {
-                    on_destroy.push(...new_on_destroy);
+                const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
+                // if the component was destroyed immediately
+                // it will update the `$$.on_destroy` reference to `null`.
+                // the destructured on_destroy may still reference to the old array
+                if (component.$$.on_destroy) {
+                    component.$$.on_destroy.push(...new_on_destroy);
                 }
@@ -529,2 +563,3 @@ else {
         if ($$.fragment !== null) {
+            flush_render_callbacks($$.after_update);
             run_all($$.on_destroy);
@@ -551,3 +586,3 @@ $$.fragment && $$.fragment.d(detaching);
             fragment: null,
-            ctx: null,
+            ctx: [],
             // state
@@ -617,2 +652,5 @@ props,
         $on(type, callback) {
+            if (!is_function(callback)) {
+                return noop;
+            }
             const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
@@ -645,3 +683,3 @@ callbacks.push(callback);
 
-    /* src/components/Placeholder.svelte generated by Svelte v3.49.0 */
+    /* src/components/Placeholder.svelte generated by Svelte v3.59.2 */
 
@@ -758,3 +796,3 @@ function create_if_block(ctx) {
     	if (switch_value) {
-    		switch_instance = new switch_value(switch_props());
+    		switch_instance = construct_svelte_component(switch_value, switch_props());
     	}
@@ -768,6 +806,3 @@
     		m(target, anchor) {
-    			if (switch_instance) {
-    				mount_component(switch_instance, target, anchor);
-    			}
-
+    			if (switch_instance) mount_component(switch_instance, target, anchor);
     			insert(target, switch_instance_anchor, anchor);
@@ -781,3 +816,3 @@ current = true;
 
-    			if (switch_value !== (switch_value = /*placeholder*/ ctx[0])) {
+    			if (dirty & /*placeholder*/ 1 && switch_value !== (switch_value = /*placeholder*/ ctx[0])) {
     				if (switch_instance) {
@@ -795,3 +830,3 @@ group_outros();
     				if (switch_value) {
-    					switch_instance = new switch_value(switch_props());
+    					switch_instance = construct_svelte_component(switch_value, switch_props());
     					create_component(switch_instance.$$.fragment);
@@ -924,3 +959,3 @@ transition_in(switch_instance.$$.fragment, 1);
 
-    /* src/index.svelte generated by Svelte v3.49.0 */
+    /* src/index.svelte generated by Svelte v3.59.2 */
 
@@ -974,4 +1009,4 @@ function create_if_block_2$1(ctx) {
     	let current;
-    	const default_slot_template = /*#slots*/ ctx[15].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[14], null);
+    	const default_slot_template = /*#slots*/ ctx[16].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[15], null);
     	const default_slot_or_fallback = default_slot || fallback_block();
@@ -1006,3 +1041,3 @@ let if_block = !/*contentShow*/ ctx[3] && /*placeholder*/ ctx[1] && create_if_block_1$1(ctx);
     			if (default_slot) {
-    				if (default_slot.p && (!current || dirty & /*$$scope*/ 16384)) {
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 32768)) {
     					update_slot_base(
@@ -1012,6 +1047,6 @@ default_slot,
     						ctx,
-    						/*$$scope*/ ctx[14],
+    						/*$$scope*/ ctx[15],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[14])
-    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[14], dirty, null),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[15])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[15], dirty, null),
     						null
@@ -1297,2 +1332,3 @@ );
     	let { $$slots: slots = {}, $$scope } = $$props;
+    	let { keep = false } = $$props;
     	let { height = 0 } = $$props;
@@ -1339,3 +1375,3 @@ let { offset = 150 } = $$props;
     					loadNode(node);
-    				} else {
+    				} else if (!keep) {
     					unload(node);
@@ -1444,11 +1480,12 @@ }
     	$$self.$$set = $$props => {
-    		if ('height' in $$props) $$invalidate(9, height = $$props.height);
-    		if ('offset' in $$props) $$invalidate(10, offset = $$props.offset);
+    		if ('keep' in $$props) $$invalidate(9, keep = $$props.keep);
+    		if ('height' in $$props) $$invalidate(10, height = $$props.height);
+    		if ('offset' in $$props) $$invalidate(11, 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 ('resetHeightDelay' in $$props) $$invalidate(12, resetHeightDelay = $$props.resetHeightDelay);
+    		if ('onload' in $$props) $$invalidate(13, 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 ('class' in $$props) $$invalidate(14, className = $$props.class);
+    		if ('$$scope' in $$props) $$invalidate(15, $$scope = $$props.$$scope);
     	};
@@ -1472,2 +1509,3 @@
     		load,
+    		keep,
     		height,
@@ -1488,10 +1526,11 @@ offset,
     		init(this, options, instance$1, create_fragment$1, safe_not_equal, {
-    			height: 9,
-    			offset: 10,
+    			keep: 9,
+    			height: 10,
+    			offset: 11,
     			fadeOption: 0,
-    			resetHeightDelay: 11,
-    			onload: 12,
+    			resetHeightDelay: 12,
+    			onload: 13,
     			placeholder: 1,
     			placeholderProps: 2,
-    			class: 13
+    			class: 14
     		});
@@ -1498,0 +1537,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
   "main": "index.js",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "types": "index.d.ts",
@@ -9,0 +9,0 @@ "repository": "leafOfTree/svelte-lazy",

README.md

@@ -37,2 +37,5 @@ <img src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/svelte-lazy.svg" width="60" height="60" alt="icon" align="left"/>
 
+- **keep**: *Boolean*. Default: `false`.
+  - By default elements get unloaded after leaving view, set to `true` to keep all loaded ones after first appearance.
+
 - **offset**: *Number*. Default: `150` (px). 
@@ -39,0 +42,0 @@ - Offset from the top of the component to the bottom of the viewport that triggers loading when in it.

No alert changes

Improved metrics

Total package byte prevSize

97407

increased by3.82%

Lines of code

2782

increased by2.96%

Number of lines in readme file

124

increased by2.48%

No dependency changes