Socket
Socket
Sign inDemoInstall

svelte-lazy

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-lazy - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

296

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 @@ }

11

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": {}
]
}

2

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].

index.mjs

Sorry, the diff of this file is not supported yet

src/index.svelte

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc