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.0.1 to 1.0.2

858

index.js

@@ -5,3 +5,3 @@ (function (global, factory) {

(global = global || self, global.Lazy = factory());
}(this, (function () { 'use strict';
}(this, function () { 'use strict';

@@ -31,47 +31,18 @@ function noop() { }

}
function is_empty(obj) {
return Object.keys(obj).length === 0;
}
function create_slot(definition, ctx, $$scope, fn) {
function create_slot(definition, ctx, fn) {
if (definition) {
const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
const slot_ctx = get_slot_context(definition, ctx, fn);
return definition[0](slot_ctx);
}
}
function get_slot_context(definition, ctx, $$scope, fn) {
return definition[1] && fn
? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
: $$scope.ctx;
function get_slot_context(definition, ctx, fn) {
return definition[1]
? assign({}, assign(ctx.$$scope.ctx, definition[1](fn ? fn(ctx) : {})))
: ctx.$$scope.ctx;
}
function get_slot_changes(definition, $$scope, dirty, fn) {
if (definition[2] && fn) {
const lets = definition[2](fn(dirty));
if ($$scope.dirty === undefined) {
return lets;
}
if (typeof lets === 'object') {
const merged = [];
const len = Math.max($$scope.dirty.length, lets.length);
for (let i = 0; i < len; i += 1) {
merged[i] = $$scope.dirty[i] | lets[i];
}
return merged;
}
return $$scope.dirty | lets;
}
return $$scope.dirty;
function get_slot_changes(definition, ctx, changed, fn) {
return definition[1]
? assign({}, assign(ctx.$$scope.changed || {}, definition[1](fn ? fn(changed) : {})))
: ctx.$$scope.changed || {};
}
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);
if (slot_changes) {
const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
slot.p(slot_context, slot_changes);
}
}
function null_to_empty(value) {
return value == null ? '' : value;
}
function action_destroyer(action_result) {
return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
}

@@ -82,26 +53,26 @@ const is_client = typeof window !== 'undefined';

: () => Date.now();
let raf = is_client ? cb => requestAnimationFrame(cb) : noop;
let raf = cb => requestAnimationFrame(cb);
const tasks = new Set();
function run_tasks(now) {
let running = false;
function run_tasks() {
tasks.forEach(task => {
if (!task.c(now)) {
if (!task[0](now())) {
tasks.delete(task);
task.f();
task[1]();
}
});
if (tasks.size !== 0)
running = tasks.size > 0;
if (running)
raf(run_tasks);
}
/**
* Creates a new task that runs on each raf frame
* until it returns a falsy value or is aborted
*/
function loop(callback) {
function loop(fn) {
let task;
if (tasks.size === 0)
if (!running) {
running = true;
raf(run_tasks);
}
return {
promise: new Promise(fulfill => {
tasks.add(task = { c: callback, f: fulfill });
promise: new Promise(fulfil => {
tasks.add(task = [fn, fulfil]);
}),

@@ -138,3 +109,3 @@ abort() {

node.removeAttribute(attribute);
else if (node.getAttribute(attribute) !== value)
else
node.setAttribute(attribute, value);

@@ -147,3 +118,3 @@ }

data = '' + data;
if (text.wholeText !== data)
if (text.data !== data)
text.data = data;

@@ -157,4 +128,5 @@ }

const active_docs = new Set();
let stylesheet;
let active = 0;
let current_rules = {};
// https://github.com/darkskyapp/string-hash/blob/master/index.js

@@ -177,7 +149,8 @@ function hash(str) {

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]) {
if (!stylesheet) {
const style = element('style');
document.head.appendChild(style);
stylesheet = style.sheet;
}
current_rules[name] = true;

@@ -192,14 +165,11 @@ stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);

function delete_rule(node, name) {
const previous = (node.style.animation || '').split(', ');
const next = previous.filter(name
node.style.animation = (node.style.animation || '')
.split(', ')
.filter(name
? anim => anim.indexOf(name) < 0 // remove specific animation
: anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations
);
const deleted = previous.length - next.length;
if (deleted) {
node.style.animation = next.join(', ');
active -= deleted;
if (!active)
clear_rules();
}
)
.join(', ');
if (name && !--active)
clear_rules();
}

@@ -210,10 +180,6 @@ function clear_rules() {

return;
active_docs.forEach(doc => {
const stylesheet = doc.__svelte_stylesheet;
let i = stylesheet.cssRules.length;
while (i--)
stylesheet.deleteRule(i);
doc.__svelte_rules = {};
});
active_docs.clear();
let i = stylesheet.cssRules.length;
while (i--)
stylesheet.deleteRule(i);
current_rules = {};
});

@@ -242,17 +208,12 @@ }

}
let flushing = false;
const seen_callbacks = new Set();
function flush() {
if (flushing)
return;
flushing = true;
const seen_callbacks = new Set();
do {
// first, call beforeUpdate functions
// and update components
for (let i = 0; i < dirty_components.length; i += 1) {
const component = dirty_components[i];
while (dirty_components.length) {
const component = dirty_components.shift();
set_current_component(component);
update(component.$$);
}
dirty_components.length = 0;
while (binding_callbacks.length)

@@ -266,5 +227,5 @@ binding_callbacks.pop()();

if (!seen_callbacks.has(callback)) {
callback();
// ...so guard against infinite loops
seen_callbacks.add(callback);
callback();
}

@@ -278,12 +239,9 @@ }

update_scheduled = false;
flushing = false;
seen_callbacks.clear();
}
function update($$) {
if ($$.fragment !== null) {
$$.update();
if ($$.fragment) {
$$.update($$.dirty);
run_all($$.before_update);
const dirty = $$.dirty;
$$.dirty = [-1];
$$.fragment && $$.fragment.p($$.ctx, dirty);
$$.fragment.p($$.dirty, $$.ctx);
$$.dirty = null;
$$.after_update.forEach(add_render_callback);

@@ -343,3 +301,2 @@ }

}
const null_transition = { duration: 0 };
function create_in_transition(node, fn, params) {

@@ -356,3 +313,3 @@ let config = fn(node, params);

function go() {
const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;
const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config;
if (css)

@@ -409,13 +366,6 @@ animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);

const globals = (typeof window !== 'undefined'
? window
: typeof globalThis !== 'undefined'
? globalThis
: global);
function create_component(block) {
block && block.c();
}
const globals = (typeof window !== 'undefined' ? window : global);
function mount_component(component, target, anchor) {
const { fragment, on_mount, on_destroy, after_update } = component.$$;
fragment && fragment.m(target, anchor);
fragment.m(target, anchor);
// onMount happens before the initial afterUpdate

@@ -437,24 +387,23 @@ add_render_callback(() => {

function destroy_component(component, detaching) {
const $$ = component.$$;
if ($$.fragment !== null) {
run_all($$.on_destroy);
$$.fragment && $$.fragment.d(detaching);
if (component.$$.fragment) {
run_all(component.$$.on_destroy);
component.$$.fragment.d(detaching);
// TODO null out other refs, including component.$$ (but need to
// preserve final state?)
$$.on_destroy = $$.fragment = null;
$$.ctx = [];
component.$$.on_destroy = component.$$.fragment = null;
component.$$.ctx = {};
}
}
function make_dirty(component, i) {
if (component.$$.dirty[0] === -1) {
function make_dirty(component, key) {
if (!component.$$.dirty) {
dirty_components.push(component);
schedule_update();
component.$$.dirty.fill(0);
component.$$.dirty = blank_object();
}
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
component.$$.dirty[key] = true;
}
function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
function init(component, options, instance, create_fragment, not_equal, prop_names) {
const parent_component = current_component;
set_current_component(component);
const prop_values = options.props || {};
const props = options.props || {};
const $$ = component.$$ = {

@@ -464,3 +413,3 @@ fragment: null,

// state
props,
props: prop_names,
update: noop,

@@ -477,33 +426,27 @@ not_equal,

callbacks: blank_object(),
dirty,
skip_bound: false
dirty: null
};
let ready = false;
$$.ctx = instance
? instance(component, prop_values, (i, ret, ...rest) => {
const value = rest.length ? rest[0] : ret;
if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
if (!$$.skip_bound && $$.bound[i])
$$.bound[i](value);
? instance(component, props, (key, value) => {
if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {
if ($$.bound[key])
$$.bound[key](value);
if (ready)
make_dirty(component, i);
make_dirty(component, key);
}
return ret;
})
: [];
: props;
$$.update();
ready = true;
run_all($$.before_update);
// `false` as a special case of no DOM component
$$.fragment = create_fragment ? create_fragment($$.ctx) : false;
$$.fragment = create_fragment($$.ctx);
if (options.target) {
if (options.hydrate) {
const nodes = children(options.target);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment.l(nodes);
nodes.forEach(detach);
$$.fragment.l(children(options.target));
}
else {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment.c();
$$.fragment.c();
}

@@ -531,12 +474,8 @@ if (options.intro)

}
$set($$props) {
if (this.$$set && !is_empty($$props)) {
this.$$.skip_bound = true;
this.$$set($$props);
this.$$.skip_bound = false;
}
$set() {
// overridden by instance, if it has props
}
}
function fade(node, { delay = 0, duration = 400, easing = identity }) {
function fade(node, { delay = 0, duration = 400 }) {
const o = +getComputedStyle(node).opacity;

@@ -546,3 +485,2 @@ return {

duration,
easing,
css: t => `opacity: ${t * o}`

@@ -552,10 +490,10 @@ };

/* src/components/Placeholder.svelte generated by Svelte v3.24.1 */
/* src/components/Placeholder.svelte generated by Svelte v3.6.10 */
// (4:46)
function create_if_block_1(ctx) {
let switch_instance;
let switch_instance_anchor;
let current;
var switch_value = /*placeholder*/ ctx[0];
var switch_instance_anchor, current;
var switch_value = ctx.placeholder;
function switch_props(ctx) {

@@ -566,3 +504,3 @@ return {};

if (switch_value) {
switch_instance = new switch_value(switch_props());
var switch_instance = new switch_value(switch_props());
}

@@ -572,5 +510,6 @@

c() {
if (switch_instance) create_component(switch_instance.$$.fragment);
if (switch_instance) switch_instance.$$.fragment.c();
switch_instance_anchor = empty();
},
m(target, anchor) {

@@ -584,12 +523,11 @@ if (switch_instance) {

},
p(ctx, dirty) {
if (switch_value !== (switch_value = /*placeholder*/ ctx[0])) {
p(changed, ctx) {
if (switch_value !== (switch_value = ctx.placeholder)) {
if (switch_instance) {
group_outros();
const old_component = switch_instance;
transition_out(old_component.$$.fragment, 1, 0, () => {
destroy_component(old_component, 1);
});
check_outros();

@@ -600,3 +538,4 @@ }

switch_instance = new switch_value(switch_props());
create_component(switch_instance.$$.fragment);
switch_instance.$$.fragment.c();
transition_in(switch_instance.$$.fragment, 1);

@@ -609,7 +548,10 @@ mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);

},
i(local) {
if (current) return;
if (switch_instance) transition_in(switch_instance.$$.fragment, local);
current = true;
},
o(local) {

@@ -619,4 +561,8 @@ if (switch_instance) transition_out(switch_instance.$$.fragment, local);

},
d(detaching) {
if (detaching) detach(switch_instance_anchor);
if (detaching) {
detach(switch_instance_anchor);
}
if (switch_instance) destroy_component(switch_instance, detaching);

@@ -629,4 +575,3 @@ }

function create_if_block(ctx) {
let div;
let t;
var div, t;

@@ -636,4 +581,5 @@ return {

div = element("div");
t = text(/*placeholder*/ ctx[0]);
t = text(ctx.placeholder);
},
m(target, anchor) {

@@ -643,9 +589,16 @@ insert(target, div, anchor);

},
p(ctx, dirty) {
if (dirty & /*placeholder*/ 1) set_data(t, /*placeholder*/ ctx[0]);
p(changed, ctx) {
if (changed.placeholder) {
set_data(t, ctx.placeholder);
}
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
if (detaching) {
detach(div);
}
}

@@ -656,12 +609,14 @@ };

function create_fragment(ctx) {
let div;
let current_block_type_index;
let if_block;
let current;
const if_block_creators = [create_if_block, create_if_block_1];
const if_blocks = [];
var div, current_block_type_index, if_block, current;
function select_block_type(ctx, dirty) {
if (typeof /*placeholder*/ ctx[0] === "string") return 0;
if (typeof /*placeholder*/ ctx[0] === "function") return 1;
var if_block_creators = [
create_if_block,
create_if_block_1
];
var if_blocks = [];
function select_block_type(ctx) {
if (typeof ctx.placeholder === 'string') return 0;
if (typeof ctx.placeholder === 'function') return 1;
return -1;

@@ -680,27 +635,20 @@ }

},
m(target, anchor) {
insert(target, div, anchor);
if (~current_block_type_index) {
if_blocks[current_block_type_index].m(div, null);
}
if (~current_block_type_index) if_blocks[current_block_type_index].m(div, null);
current = true;
},
p(ctx, [dirty]) {
let previous_block_index = current_block_type_index;
p(changed, ctx) {
var previous_block_index = current_block_type_index;
current_block_type_index = select_block_type(ctx);
if (current_block_type_index === previous_block_index) {
if (~current_block_type_index) {
if_blocks[current_block_type_index].p(ctx, dirty);
}
if (~current_block_type_index) if_blocks[current_block_type_index].p(changed, ctx);
} else {
if (if_block) {
group_outros();
transition_out(if_blocks[previous_block_index], 1, 1, () => {
if_blocks[previous_block_index] = null;
});
check_outros();

@@ -711,3 +659,2 @@ }

if_block = if_blocks[current_block_type_index];
if (!if_block) {

@@ -717,3 +664,2 @@ if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

}
transition_in(if_block, 1);

@@ -726,2 +672,3 @@ if_block.m(div, null);

},
i(local) {

@@ -732,2 +679,3 @@ if (current) return;

},
o(local) {

@@ -737,8 +685,9 @@ transition_out(if_block);

},
d(detaching) {
if (detaching) detach(div);
if (detaching) {
detach(div);
}
if (~current_block_type_index) {
if_blocks[current_block_type_index].d();
}
if (~current_block_type_index) if_blocks[current_block_type_index].d();
}

@@ -748,3 +697,3 @@ };

const placeholderClass = "placeholder";
const placeholderClass = 'placeholder';

@@ -754,7 +703,7 @@ function instance($$self, $$props, $$invalidate) {

$$self.$$set = $$props => {
if ("placeholder" in $$props) $$invalidate(0, placeholder = $$props.placeholder);
$$self.$set = $$props => {
if ('placeholder' in $$props) $$invalidate('placeholder', placeholder = $$props.placeholder);
};
return [placeholder];
return { placeholder };
}

@@ -765,8 +714,7 @@

super();
init(this, options, instance, create_fragment, safe_not_equal, { placeholder: 0 });
init(this, options, instance, create_fragment, safe_not_equal, ["placeholder"]);
}
}
/* src/index.svelte generated by Svelte v3.24.1 */
/* src/index.svelte generated by Svelte v3.6.10 */
const { document: document_1 } = globals;

@@ -776,4 +724,4 @@

var style = element("style");
style.id = "svelte-u9r2nm-style";
style.textContent = ".hide.svelte-u9r2nm{display:none}";
style.id = 'svelte-a4s1lu-style';
style.textContent = ".hide.svelte-a4s1lu{display:none}";
append(document_1.head, style);

@@ -784,13 +732,11 @@ }

function create_else_block(ctx) {
let placeholder_1;
let current;
var current;
placeholder_1 = new Placeholder({
props: { placeholder: /*placeholder*/ ctx[1] }
});
var placeholder_1 = new Placeholder({ props: { placeholder: ctx.placeholder } });
return {
c() {
create_component(placeholder_1.$$.fragment);
placeholder_1.$$.fragment.c();
},
m(target, anchor) {

@@ -800,12 +746,16 @@ mount_component(placeholder_1, target, anchor);

},
p(ctx, dirty) {
const placeholder_1_changes = {};
if (dirty & /*placeholder*/ 2) placeholder_1_changes.placeholder = /*placeholder*/ ctx[1];
p(changed, ctx) {
var placeholder_1_changes = {};
if (changed.placeholder) placeholder_1_changes.placeholder = ctx.placeholder;
placeholder_1.$set(placeholder_1_changes);
},
i(local) {
if (current) return;
transition_in(placeholder_1.$$.fragment, local);
current = true;
},
o(local) {

@@ -815,2 +765,3 @@ transition_out(placeholder_1.$$.fragment, local);

},
d(detaching) {

@@ -824,30 +775,41 @@ destroy_component(placeholder_1, detaching);

function create_if_block$1(ctx) {
let div;
let div_class_value;
let div_intro;
let t;
let if_block_anchor;
let current;
const default_slot_template = /*$$slots*/ ctx[13].default;
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[12], null);
const default_slot_or_fallback = default_slot || fallback_block();
let if_block = /*contentDisplay*/ ctx[2] === "hide" && create_if_block_1$1(ctx);
var div, t0, div_intro, t1, if_block_anchor, current;
const default_slot_1 = ctx.$$slots.default;
const default_slot = create_slot(default_slot_1, ctx, null);
var if_block = (ctx.contentDisplay === 'hide') && create_if_block_1$1(ctx);
return {
c() {
div = element("div");
if (default_slot_or_fallback) default_slot_or_fallback.c();
t = space();
if (!default_slot) {
t0 = text("Lazy load content");
}
if (default_slot) default_slot.c();
t1 = space();
if (if_block) if_block.c();
if_block_anchor = empty();
attr(div, "class", div_class_value = "" + (null_to_empty(/*contentClass*/ ctx[4]) + " svelte-u9r2nm"));
attr(div, "class", "" + ctx.contentClass + " svelte-a4s1lu");
},
l(nodes) {
if (default_slot) default_slot.l(div_nodes);
},
m(target, anchor) {
insert(target, div, anchor);
if (default_slot_or_fallback) {
default_slot_or_fallback.m(div, null);
if (!default_slot) {
append(div, t0);
}
insert(target, t, anchor);
else {
default_slot.m(div, null);
}
insert(target, t1, anchor);
if (if_block) if_block.m(target, anchor);

@@ -857,20 +819,16 @@ insert(target, if_block_anchor, anchor);

},
p(ctx, dirty) {
if (default_slot) {
if (default_slot.p && dirty & /*$$scope*/ 4096) {
update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[12], dirty, null, null);
}
p(changed, ctx) {
if (default_slot && default_slot.p && changed.$$scope) {
default_slot.p(get_slot_changes(default_slot_1, ctx, changed, null), get_slot_context(default_slot_1, ctx, null));
}
if (!current || dirty & /*contentClass*/ 16 && div_class_value !== (div_class_value = "" + (null_to_empty(/*contentClass*/ ctx[4]) + " svelte-u9r2nm"))) {
attr(div, "class", div_class_value);
if (!current || changed.contentClass) {
attr(div, "class", "" + ctx.contentClass + " svelte-a4s1lu");
}
if (/*contentDisplay*/ ctx[2] === "hide") {
if (ctx.contentDisplay === 'hide') {
if (if_block) {
if_block.p(ctx, dirty);
if (dirty & /*contentDisplay*/ 4) {
transition_in(if_block, 1);
}
if_block.p(changed, ctx);
transition_in(if_block, 1);
} else {

@@ -884,17 +842,16 @@ if_block = create_if_block_1$1(ctx);

group_outros();
transition_out(if_block, 1, 1, () => {
if_block = null;
});
check_outros();
}
},
i(local) {
if (current) return;
transition_in(default_slot_or_fallback, local);
transition_in(default_slot, local);
if (!div_intro) {
add_render_callback(() => {
div_intro = create_in_transition(div, fade, /*fadeOption*/ ctx[0] || {});
div_intro = create_in_transition(div, fade, ctx.fadeOption || {});
div_intro.start();

@@ -907,30 +864,25 @@ });

},
o(local) {
transition_out(default_slot_or_fallback, local);
transition_out(default_slot, local);
transition_out(if_block);
current = false;
},
d(detaching) {
if (detaching) detach(div);
if (default_slot_or_fallback) default_slot_or_fallback.d(detaching);
if (detaching) detach(t);
if (detaching) {
detach(div);
}
if (default_slot) default_slot.d(detaching);
if (detaching) {
detach(t1);
}
if (if_block) if_block.d(detaching);
if (detaching) detach(if_block_anchor);
}
};
}
// (7:12) Lazy load content
function fallback_block(ctx) {
let t;
return {
c() {
t = text("Lazy load content");
},
m(target, anchor) {
insert(target, t, anchor);
},
d(detaching) {
if (detaching) detach(t);
if (detaching) {
detach(if_block_anchor);
}
}

@@ -942,13 +894,11 @@ };

function create_if_block_1$1(ctx) {
let placeholder_1;
let current;
var current;
placeholder_1 = new Placeholder({
props: { placeholder: /*placeholder*/ ctx[1] }
});
var placeholder_1 = new Placeholder({ props: { placeholder: ctx.placeholder } });
return {
c() {
create_component(placeholder_1.$$.fragment);
placeholder_1.$$.fragment.c();
},
m(target, anchor) {

@@ -958,12 +908,16 @@ mount_component(placeholder_1, target, anchor);

},
p(ctx, dirty) {
const placeholder_1_changes = {};
if (dirty & /*placeholder*/ 2) placeholder_1_changes.placeholder = /*placeholder*/ ctx[1];
p(changed, ctx) {
var placeholder_1_changes = {};
if (changed.placeholder) placeholder_1_changes.placeholder = ctx.placeholder;
placeholder_1.$set(placeholder_1_changes);
},
i(local) {
if (current) return;
transition_in(placeholder_1.$$.fragment, local);
current = true;
},
o(local) {

@@ -973,2 +927,3 @@ transition_out(placeholder_1.$$.fragment, local);

},
d(detaching) {

@@ -981,15 +936,13 @@ destroy_component(placeholder_1, detaching);

function create_fragment$1(ctx) {
let div;
let current_block_type_index;
let if_block;
let div_class_value;
let load_action;
let current;
let mounted;
let dispose;
const if_block_creators = [create_if_block$1, create_else_block];
const if_blocks = [];
var div, current_block_type_index, if_block, load_action, current;
function select_block_type(ctx, dirty) {
if (/*loaded*/ ctx[3]) return 0;
var if_block_creators = [
create_if_block$1,
create_else_block
];
var if_blocks = [];
function select_block_type(ctx) {
if (ctx.loaded) return 0;
return 1;

@@ -1005,30 +958,25 @@ }

if_block.c();
attr(div, "class", div_class_value = "" + (null_to_empty(/*rootClass*/ ctx[5]) + " svelte-u9r2nm"));
attr(div, "class", "" + ctx.rootClass + " svelte-a4s1lu");
},
m(target, anchor) {
insert(target, div, anchor);
if_blocks[current_block_type_index].m(div, null);
load_action = ctx.load.call(null, div) || {};
current = true;
},
if (!mounted) {
dispose = action_destroyer(load_action = /*load*/ ctx[6].call(null, div));
mounted = true;
}
},
p(ctx, [dirty]) {
let previous_block_index = current_block_type_index;
p(changed, ctx) {
var previous_block_index = current_block_type_index;
current_block_type_index = select_block_type(ctx);
if (current_block_type_index === previous_block_index) {
if_blocks[current_block_type_index].p(ctx, dirty);
if_blocks[current_block_type_index].p(changed, ctx);
} else {
group_outros();
transition_out(if_blocks[previous_block_index], 1, 1, () => {
if_blocks[previous_block_index] = null;
});
check_outros();
check_outros();
if_block = if_blocks[current_block_type_index];
if (!if_block) {

@@ -1038,3 +986,2 @@ if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

}
transition_in(if_block, 1);

@@ -1044,2 +991,3 @@ if_block.m(div, null);

},
i(local) {

@@ -1050,2 +998,3 @@ if (current) return;

},
o(local) {

@@ -1055,7 +1004,10 @@ transition_out(if_block);

},
d(detaching) {
if (detaching) detach(div);
if (detaching) {
detach(div);
}
if_blocks[current_block_type_index].d();
mounted = false;
dispose();
if (load_action && typeof load_action.destroy === 'function') load_action.destroy();
}

@@ -1065,169 +1017,145 @@ };

function getExpectedTop(e, offset) {
const height = getContainerHeight(e);
return height + offset;
}
function getContainerHeight(e) {
if (e && e.target && e.target.getBoundingClientRect) {
return e.target.getBoundingClientRect().bottom;
} else {
return window.innerHeight;
}
if (e && e.target && e.target.getBoundingClientRect) {
return e.target.getBoundingClientRect().bottom;
} else {
return window.innerHeight;
}
}
// From underscore souce code
function throttle(func, wait, options) {
let context, args, result;
let timeout = null;
let previous = 0;
if (!options) options = {};
let context, args, result;
let timeout = null;
let previous = 0;
if (!options) options = {};
const later = function() {
previous = options.leading === false ? 0 : new Date();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
const later = function () {
previous = options.leading === false ? 0 : new Date();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function (event) {
const now = new Date();
if (!previous && options.leading === false) previous = now;
const remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
return function(event) {
const now = new Date();
if (!previous && options.leading === false) previous = now;
const remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
function instance$1($$self, $$props, $$invalidate) {
let { height = 0 } = $$props;
let { offset = 150 } = $$props;
let { fadeOption = { delay: 0, duration: 400 } } = $$props;
let { resetHeightDelay = 0 } = $$props;
let { onload = null } = $$props;
let { placeholder = null } = $$props;
let { class: className = "" } = $$props;
const rootClass = "svelte-lazy" + (className ? " " + className : "");
let contentDisplay = "";
let loaded = false;
let { height = 0, offset = 150, fadeOption = {
delay: 0,
duration: 400,
}, resetHeightDelay = 0, onload = null, placeholder = null, class: className = '' } = $$props;
function load(node) {
setHeight(node);
const rootClass = 'svelte-lazy'
+ (className ? ' ' + className : '');
let contentDisplay = '';
let loaded = false;
const loadHandler = throttle(
e => {
const top = node.getBoundingClientRect().top;
const expectedTop = getExpectedTop(e, offset);
function load(node) {
setHeight(node);
if (top <= expectedTop) {
$$invalidate(3, loaded = true);
resetHeight(node);
onload && onload(node);
removeListeners();
}
},
200
);
const loadHandler = throttle(e => {
const nodeTop = node.getBoundingClientRect().top;
const expectedTop = getContainerHeight(e) + offset;
loadHandler();
addListeners();
if (nodeTop <= expectedTop) {
$$invalidate('loaded', loaded = true);
resetHeight(node);
onload && onload(node);
removeListeners();
}
}, 200);
function addListeners() {
document.addEventListener("scroll", loadHandler, true);
window.addEventListener("resize", loadHandler);
}
loadHandler();
addListeners();
function removeListeners() {
document.removeEventListener("scroll", loadHandler, true);
window.removeEventListener("resize", loadHandler);
}
function addListeners() {
document.addEventListener('scroll', loadHandler, true);
window.addEventListener('resize', loadHandler);
}
return {
destroy: () => {
removeListeners();
}
};
}
function removeListeners() {
document.removeEventListener('scroll', loadHandler, true);
window.removeEventListener('resize', loadHandler);
}
function setHeight(node) {
if (height) {
node.style.height = typeof height === "number" ? height + "px" : height;
}
}
return {
destroy: () => {
removeListeners();
},
};
}
function resetHeight(node) {
// Add delay for remote resources like images to load
setTimeout(
() => {
const handled = handleImgContent(node);
function setHeight(node) {
if (height) {
node.style.height = (typeof height === 'number')
? height + 'px'
: height;
}
}
if (!handled) {
node.style.height = "auto";
}
},
resetHeightDelay
);
}
function resetHeight(node) {
// Add delay for remote resources like images to load
setTimeout(() => {
const handled = handleImgContent(node);
if (!handled) {
node.style.height = 'auto';
}
}, resetHeightDelay);
}
function handleImgContent(node) {
const img = node.querySelector("img");
function handleImgContent(node) {
const img = node.querySelector('img');
if (img) {
if (!img.complete) {
$$invalidate('contentDisplay', contentDisplay = 'hide');
if (img) {
if (!img.complete) {
$$invalidate(2, contentDisplay = "hide");
node.addEventListener('load', () => {
$$invalidate('contentDisplay', contentDisplay = '');
node.style.height = 'auto';
}, { capture: true, once: true });
node.addEventListener(
"load",
() => {
$$invalidate(2, contentDisplay = "");
node.style.height = "auto";
},
{ capture: true, once: true }
);
node.addEventListener('error', () => {
// Keep height if there is error
$$invalidate('contentDisplay', contentDisplay = '');
}, { capture: true, once: true });
node.addEventListener(
"error",
() => {
// Keep height if there is error
$$invalidate(2, contentDisplay = "");
},
{ capture: true, once: true }
);
return true;
} else {
if (img.naturalHeight === 0) {
// Keep height if img has zero height
return true;
}
}
}
}
return true;
} else {
if (img.naturalHeight === 0) {
// Keep height if img has zero height
return true;
}
}
}
}
let { $$slots = {}, $$scope } = $$props;
$$self.$$set = $$props => {
if ("height" in $$props) $$invalidate(7, height = $$props.height);
if ("offset" in $$props) $$invalidate(8, offset = $$props.offset);
if ("fadeOption" in $$props) $$invalidate(0, fadeOption = $$props.fadeOption);
if ("resetHeightDelay" in $$props) $$invalidate(9, resetHeightDelay = $$props.resetHeightDelay);
if ("onload" in $$props) $$invalidate(10, onload = $$props.onload);
if ("placeholder" in $$props) $$invalidate(1, placeholder = $$props.placeholder);
if ("class" in $$props) $$invalidate(11, className = $$props.class);
if ("$$scope" in $$props) $$invalidate(12, $$scope = $$props.$$scope);
$$self.$set = $$props => {
if ('height' in $$props) $$invalidate('height', height = $$props.height);
if ('offset' in $$props) $$invalidate('offset', offset = $$props.offset);
if ('fadeOption' in $$props) $$invalidate('fadeOption', fadeOption = $$props.fadeOption);
if ('resetHeightDelay' in $$props) $$invalidate('resetHeightDelay', resetHeightDelay = $$props.resetHeightDelay);
if ('onload' in $$props) $$invalidate('onload', onload = $$props.onload);
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);
};

@@ -1237,45 +1165,35 @@

$$self.$$.update = () => {
if ($$self.$$.dirty & /*contentDisplay*/ 4) {
$$invalidate(4, contentClass = "svelte-lazy-content" + (contentDisplay ? " " + contentDisplay : ""));
}
$$self.$$.update = ($$dirty = { contentDisplay: 1 }) => {
if ($$dirty.contentDisplay) { $$invalidate('contentClass', contentClass = 'svelte-lazy-content'
+ (contentDisplay ? ' ' + contentDisplay : '')); }
};
return [
return {
height,
offset,
fadeOption,
resetHeightDelay,
onload,
placeholder,
className,
rootClass,
contentDisplay,
loaded,
load,
contentClass,
rootClass,
load,
height,
offset,
resetHeightDelay,
onload,
className,
$$scope,
$$slots
];
$$slots,
$$scope
};
}
class Src extends SvelteComponent {
class Index extends SvelteComponent {
constructor(options) {
super();
if (!document_1.getElementById("svelte-u9r2nm-style")) add_css();
init(this, options, instance$1, create_fragment$1, safe_not_equal, {
height: 7,
offset: 8,
fadeOption: 0,
resetHeightDelay: 9,
onload: 10,
placeholder: 1,
class: 11
});
if (!document_1.getElementById("svelte-a4s1lu-style")) add_css();
init(this, options, instance$1, create_fragment$1, safe_not_equal, ["height", "offset", "fadeOption", "resetHeightDelay", "onload", "placeholder", "class"]);
}
}
return Src;
return Index;
})));
}));

2

package.json

@@ -6,3 +6,3 @@ {

"main": "index.js",
"version": "1.0.1",
"version": "1.0.2",
"repository": "leafOfTree/svelte-lazy",

@@ -9,0 +9,0 @@ "scripts": {

2

README.md

@@ -56,3 +56,3 @@ # svelte-lazy [![Build Status][1]][2] [![npm version][3]][4]

```
in viewport / no image -> loaded
enter viewport / no image -> loaded
not loaded --------------->

@@ -59,0 +59,0 @@ \ with image -> load event -> loaded

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