Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

svelte-lazy

Package Overview
Dependencies
Maintainers
1
Versions
40
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.2 to 1.0.3

852

index.js

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

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

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

}
function create_slot(definition, ctx, fn) {
function is_empty(obj) {
return Object.keys(obj).length === 0;
}
function create_slot(definition, ctx, $$scope, fn) {
if (definition) {
const slot_ctx = get_slot_context(definition, ctx, fn);
const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
return definition[0](slot_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_context(definition, ctx, $$scope, fn) {
return definition[1] && fn
? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
: $$scope.ctx;
}
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 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 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 action_destroyer(action_result) {
return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
}

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

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

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

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

@@ -118,3 +144,3 @@ }

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

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

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

@@ -149,8 +174,7 @@ 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;

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

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

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

return;
let i = stylesheet.cssRules.length;
while (i--)
stylesheet.deleteRule(i);
current_rules = {};
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();
});

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

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

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

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

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

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

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

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

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

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

@@ -365,7 +405,8 @@ animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -510,6 +563,5 @@

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

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

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

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

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

@@ -548,10 +600,7 @@ 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) {

@@ -561,8 +610,4 @@ 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);

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

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

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

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

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

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

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

function create_fragment(ctx) {
var div, current_block_type_index, if_block, current;
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 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;
function select_block_type(ctx, dirty) {
if (typeof /*placeholder*/ ctx[0] === "string") return 0;
if (typeof /*placeholder*/ ctx[0] === "function") return 1;
return -1;

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

},
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;
current_block_type_index = select_block_type(ctx);
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(changed, ctx);
if (~current_block_type_index) {
if_blocks[current_block_type_index].p(ctx, dirty);
}
} else {
if (if_block) {
group_outros();
transition_out(if_blocks[previous_block_index], 1, 1, () => {
if_blocks[previous_block_index] = null;
});
check_outros();

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

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

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

}
transition_in(if_block, 1);

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

},
i(local) {

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

},
o(local) {

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

},
d(detaching) {
if (detaching) detach(div);
d(detaching) {
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();
}

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

const placeholderClass = 'placeholder';
const placeholderClass = "svelte-lazy-placeholder";

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

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

@@ -714,27 +756,20 @@

super();
init(this, options, instance, create_fragment, safe_not_equal, ["placeholder"]);
init(this, options, instance, create_fragment, safe_not_equal, { placeholder: 0 });
}
}
/* src/index.svelte generated by Svelte v3.6.10 */
const { document: document_1 } = globals;
/* src/index.svelte generated by Svelte v3.24.1 */
function add_css() {
var style = element("style");
style.id = 'svelte-a4s1lu-style';
style.textContent = ".hide.svelte-a4s1lu{display:none}";
append(document_1.head, style);
}
// (12:2) {:else}
function create_else_block(ctx) {
var current;
let placeholder_1;
let current;
var placeholder_1 = new Placeholder({ props: { placeholder: ctx.placeholder } });
placeholder_1 = new Placeholder({
props: { placeholder: /*placeholder*/ ctx[1] }
});
return {
c() {
placeholder_1.$$.fragment.c();
create_component(placeholder_1.$$.fragment);
},
m(target, anchor) {

@@ -744,16 +779,12 @@ mount_component(placeholder_1, target, anchor);

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

@@ -763,3 +794,2 @@ transition_out(placeholder_1.$$.fragment, local);

},
d(detaching) {

@@ -773,41 +803,30 @@ destroy_component(placeholder_1, detaching);

function create_if_block$1(ctx) {
var div, t0, div_intro, t1, if_block_anchor, current;
let div;
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[3] === "hide" && create_if_block_1$1(ctx);
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) {
t0 = text("Lazy load content");
}
if (default_slot) default_slot.c();
t1 = space();
if (default_slot_or_fallback) default_slot_or_fallback.c();
t = space();
if (if_block) if_block.c();
if_block_anchor = empty();
attr(div, "class", "" + ctx.contentClass + " svelte-a4s1lu");
attr(div, "class", contentClass);
attr(div, "style", /*contentStyle*/ ctx[4]);
},
l(nodes) {
if (default_slot) default_slot.l(div_nodes);
},
m(target, anchor) {
insert(target, div, anchor);
if (!default_slot) {
append(div, t0);
if (default_slot_or_fallback) {
default_slot_or_fallback.m(div, null);
}
else {
default_slot.m(div, null);
}
insert(target, t1, anchor);
insert(target, t, anchor);
if (if_block) if_block.m(target, anchor);

@@ -817,16 +836,20 @@ insert(target, if_block_anchor, anchor);

},
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));
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);
}
}
if (!current || changed.contentClass) {
attr(div, "class", "" + ctx.contentClass + " svelte-a4s1lu");
if (!current || dirty & /*contentStyle*/ 16) {
attr(div, "style", /*contentStyle*/ ctx[4]);
}
if (ctx.contentDisplay === 'hide') {
if (/*contentDisplay*/ ctx[3] === "hide") {
if (if_block) {
if_block.p(changed, ctx);
transition_in(if_block, 1);
if_block.p(ctx, dirty);
if (dirty & /*contentDisplay*/ 8) {
transition_in(if_block, 1);
}
} else {

@@ -840,16 +863,17 @@ 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, local);
transition_in(default_slot_or_fallback, local);
if (!div_intro) {
add_render_callback(() => {
div_intro = create_in_transition(div, fade, ctx.fadeOption || {});
div_intro = create_in_transition(div, fade, /*fadeOption*/ ctx[0] || {});
div_intro.start();

@@ -862,25 +886,30 @@ });

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

@@ -890,13 +919,15 @@ };

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

@@ -906,16 +937,12 @@ mount_component(placeholder_1, target, anchor);

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

@@ -925,3 +952,2 @@ transition_out(placeholder_1.$$.fragment, local);

},
d(detaching) {

@@ -934,13 +960,14 @@ destroy_component(placeholder_1, detaching);

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

@@ -956,25 +983,30 @@ }

if_block.c();
attr(div, "class", "" + ctx.rootClass + " svelte-a4s1lu");
attr(div, "class", /*rootClass*/ ctx[5]);
},
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;
current_block_type_index = select_block_type(ctx);
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(changed, ctx);
if_blocks[current_block_type_index].p(ctx, dirty);
} else {
group_outros();
transition_out(if_blocks[previous_block_index], 1, 1, () => {
if_blocks[previous_block_index] = null;
});
check_outros();
if_block = if_blocks[current_block_type_index];
if_block = if_blocks[current_block_type_index];
if (!if_block) {

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

}
transition_in(if_block, 1);

@@ -989,3 +1022,2 @@ if_block.m(div, null);

},
i(local) {

@@ -996,3 +1028,2 @@ if (current) return;

},
o(local) {

@@ -1002,10 +1033,7 @@ transition_out(if_block);

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

@@ -1015,182 +1043,210 @@ };

const contentClass = "svelte-lazy-content";
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 = {};
const later = function() {
previous = options.leading === false ? 0 : new Date();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
let context, args, result;
let timeout = null;
let previous = 0;
if (!options) options = {};
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;
};
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;
};
}
function instance$1($$self, $$props, $$invalidate) {
let { height = 0, offset = 150, fadeOption = {
delay: 0,
duration: 400,
}, resetHeightDelay = 0, onload = null, placeholder = null, class: className = '' } = $$props;
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 loaded = false;
let contentDisplay = "";
const rootClass = 'svelte-lazy'
+ (className ? ' ' + className : '');
let contentDisplay = '';
let loaded = false;
function load(node) {
setHeight(node);
function load(node) {
setHeight(node);
const loadHandler = throttle(
e => {
const nodeTop = node.getBoundingClientRect().top;
const expectedTop = getContainerHeight(e) + offset;
const loadHandler = throttle(e => {
const nodeTop = node.getBoundingClientRect().top;
const expectedTop = getContainerHeight(e) + offset;
if (nodeTop <= expectedTop) {
$$invalidate(2, loaded = true);
resetHeight(node);
onload && onload(node);
removeListeners();
}
},
200
);
if (nodeTop <= expectedTop) {
$$invalidate('loaded', loaded = true);
resetHeight(node);
onload && onload(node);
removeListeners();
}
}, 200);
loadHandler();
addListeners();
loadHandler();
addListeners();
function addListeners() {
document.addEventListener("scroll", loadHandler, true);
window.addEventListener("resize", loadHandler);
}
function addListeners() {
document.addEventListener('scroll', loadHandler, true);
window.addEventListener('resize', loadHandler);
}
function removeListeners() {
document.removeEventListener("scroll", loadHandler, true);
window.removeEventListener("resize", loadHandler);
}
function removeListeners() {
document.removeEventListener('scroll', loadHandler, true);
window.removeEventListener('resize', loadHandler);
}
return {
destroy: () => {
removeListeners();
}
};
}
return {
destroy: () => {
removeListeners();
},
};
}
function setHeight(node) {
if (height) {
node.style.height = typeof height === "number" ? height + "px" : height;
}
}
function setHeight(node) {
if (height) {
node.style.height = (typeof height === 'number')
? height + 'px'
: height;
}
}
function resetHeight(node) {
// Add delay for remote resources like images to load
setTimeout(
() => {
const handled = handleImgContent(node);
function resetHeight(node) {
// Add delay for remote resources like images to load
setTimeout(() => {
const handled = handleImgContent(node);
if (!handled) {
node.style.height = 'auto';
}
}, resetHeightDelay);
}
if (!handled) {
node.style.height = "auto";
}
},
resetHeightDelay
);
}
function handleImgContent(node) {
const img = node.querySelector('img');
if (img) {
if (!img.complete) {
$$invalidate('contentDisplay', contentDisplay = 'hide');
function handleImgContent(node) {
const img = node.querySelector("img");
node.addEventListener('load', () => {
$$invalidate('contentDisplay', contentDisplay = '');
node.style.height = 'auto';
}, { capture: true, once: true });
if (img) {
if (!img.complete) {
$$invalidate(3, contentDisplay = "hide");
node.addEventListener('error', () => {
// Keep height if there is error
$$invalidate('contentDisplay', contentDisplay = '');
}, { capture: true, once: true });
node.addEventListener(
"load",
() => {
$$invalidate(3, contentDisplay = "");
node.style.height = "auto";
},
{ capture: true, once: true }
);
return true;
} else {
if (img.naturalHeight === 0) {
// Keep height if img has zero height
return true;
}
}
}
}
node.addEventListener(
"error",
() => {
// Keep passed height if there is error
$$invalidate(3, contentDisplay = "");
},
{ capture: true, once: true }
);
return true;
} else if (img.naturalHeight === 0) {
// Keep passed height if img has zero height
return true;
}
}
}
let { $$slots = {}, $$scope } = $$props;
$$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);
$$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);
};
let contentClass;
let contentStyle;
$$self.$$.update = ($$dirty = { contentDisplay: 1 }) => {
if ($$dirty.contentDisplay) { $$invalidate('contentClass', contentClass = 'svelte-lazy-content'
+ (contentDisplay ? ' ' + contentDisplay : '')); }
$$self.$$.update = () => {
if ($$self.$$.dirty & /*contentDisplay*/ 8) {
$$invalidate(4, contentStyle = contentDisplay === "hide" ? "display: none" : "");
}
};
return {
return [
fadeOption,
placeholder,
loaded,
contentDisplay,
contentStyle,
rootClass,
load,
height,
offset,
fadeOption,
resetHeightDelay,
onload,
placeholder,
className,
rootClass,
contentDisplay,
loaded,
load,
contentClass,
$$slots,
$$scope
};
$$scope,
$$slots
];
}
class Index extends SvelteComponent {
class Src extends SvelteComponent {
constructor(options) {
super();
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"]);
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
});
}
}
return Index;
return Src;
}));
})));

2

package.json

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

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

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

16

README.md

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

## DOM structure
Before load
```html
<div class="svelte-lazy ${class}">
<div class="svelte-lazy-placeholder">...</div>
</div>
```
After load
```html
<div class="svelte-lazy ${class}">
<div class="svelte-lazy-content">...</div>
</div>
```
## Demo

@@ -65,0 +81,0 @@ 

index.mjs

Sorry, the diff of this file is not supported yet

src/components/Placeholder.svelte

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