svelte-tiny-virtual-list - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/svelte-tiny-virtual-list.js

@@ -454,16 +454,2 @@ (function (global, factory) {
 
-    const STYLE_ITEM = {
-    	position: 'absolute',
-    	top:      0,
-    	left:     0,
-    	width:    '100%',
-    	height:   '100%',
-    };
-
-    const STYLE_STICKY_ITEM = {
-    	...STYLE_ITEM,
-    	position:  'sticky',
-    	'z-index': 1,
-    };
-
     const SCROLL_PROP = {
@@ -474,22 +460,2 @@ [DIRECTION.VERTICAL]:   'scrollTop',
 
-    const SIZE_PROP = {
-    	[DIRECTION.VERTICAL]:   'height',
-    	[DIRECTION.HORIZONTAL]: 'width',
-    };
-
-    const POSITION_PROP = {
-    	[DIRECTION.VERTICAL]:   'top',
-    	[DIRECTION.HORIZONTAL]: 'left',
-    };
-
-    const MARGIN_PROP = {
-    	[DIRECTION.VERTICAL]:   'margin-top',
-    	[DIRECTION.HORIZONTAL]: 'margin-left',
-    };
-
-    const OPPOSITE_MARGIN_PROP = {
-    	[DIRECTION.VERTICAL]:   'margin-bottom',
-    	[DIRECTION.HORIZONTAL]: 'margin-right',
-    };
-
     /* Forked from react-virtualized 💖 */
@@ -914,4 +880,4 @@
     	var style = element("style");
-    	style.id = "svelte-13gd94c-style";
-    	style.textContent = ".virtual-list-wrapper.svelte-13gd94c{overflow:auto;will-change:transform;-webkit-overflow-scrolling:touch}.virtual-list-inner.svelte-13gd94c{position:relative;width:100%;min-height:100%}";
+    	style.id = "svelte-1he1ex4-style";
+    	style.textContent = ".virtual-list-wrapper.svelte-1he1ex4{overflow:auto;will-change:transform;-webkit-overflow-scrolling:touch}.virtual-list-inner.svelte-1he1ex4{position:relative;display:flex;width:100%;min-height:100%}";
     	append(document.head, style);
@@ -942,3 +908,3 @@ }
 
-    // (318:2) {#each items as item (item.index)}
+    // (319:2) {#each items as item (item.index)}
     function create_each_block(key_1, ctx) {
@@ -1025,5 +991,5 @@ let first;
     			if (footer_slot) footer_slot.c();
-    			attr(div0, "class", "virtual-list-inner svelte-13gd94c");
+    			attr(div0, "class", "virtual-list-inner svelte-1he1ex4");
     			attr(div0, "style", /*innerStyle*/ ctx[3]);
-    			attr(div1, "class", "virtual-list-wrapper svelte-13gd94c");
+    			attr(div1, "class", "virtual-list-wrapper svelte-1he1ex4");
     			attr(div1, "style", /*wrapperStyle*/ ctx[2]);
@@ -1264,6 +1230,11 @@ },
     		let updatedItems = [];
-    		$$invalidate(2, wrapperStyle = "height:" + cssVal(height) + ";width:" + cssVal(width) + ";");
-    		$$invalidate(3, innerStyle = SIZE_PROP[scrollDirection] + ":" + cssVal(sizeAndPositionManager.getTotalSize()) + ";");
+    		$$invalidate(2, wrapperStyle = "height:" + cssVal(height) + ";width:" + cssVal(width));
 
-    		if (stickyIndices != null && stickyIndices.length !== 0) {
+    		$$invalidate(3, innerStyle = (scrollDirection === DIRECTION.VERTICAL
+    		? "flex-direction:column;height:"
+    		: "width:") + cssVal(sizeAndPositionManager.getTotalSize()));
+
+    		const hasStickyIndices = stickyIndices != null && stickyIndices.length !== 0;
+
+    		if (hasStickyIndices) {
     			for (let i = 0; i < stickyIndices.length; i++) {
@@ -1273,6 +1244,2 @@ const index = stickyIndices[i];
     			}
-
-    			$$invalidate(3, innerStyle += "display:flex;" + (scrollDirection === DIRECTION.VERTICAL
-    			? "flex-direction:column;"
-    			: ""));
     		}
@@ -1282,3 +1249,3 @@
     			for (let index = start; index <= stop; index++) {
-    				if (stickyIndices != null && stickyIndices.includes(index)) {
+    				if (hasStickyIndices && stickyIndices.includes(index)) {
     					continue;
@@ -1340,24 +1307,25 @@ }
     	function getStyle(index, sticky) {
-    		const style = styleCache[index];
-    		if (style) return style;
+    		if (styleCache[index]) return styleCache[index];
     		const { size, offset } = sizeAndPositionManager.getSizeAndPositionForIndex(index);
+    		let style;
 
-    		return styleCache[index] = Object.entries(sticky
-    		? {
-    				...STYLE_STICKY_ITEM,
-    				[SIZE_PROP[scrollDirection]]: cssVal(size),
-    				[MARGIN_PROP[scrollDirection]]: cssVal(offset),
-    				[OPPOSITE_MARGIN_PROP[scrollDirection]]: cssVal(-(offset + size))
+    		if (scrollDirection === DIRECTION.VERTICAL) {
+    			style = "left:0;width:100%;height:" + cssVal(size);
+
+    			if (sticky) {
+    				style += ";position:sticky;z-index:1;top:0;margin-top:" + cssVal(offset) + ";margin-bottom:" + cssVal(-(offset + size)) + ";";
+    			} else {
+    				style += ";position:absolute;top:" + cssVal(offset) + ";";
     			}
-    		: {
-    				...STYLE_ITEM,
-    				[SIZE_PROP[scrollDirection]]: cssVal(size),
-    				[POSITION_PROP[scrollDirection]]: cssVal(offset)
-    			}).reduce(
-    			(prev, [key, val], i) => {
-    				const curr = key + ":" + val + ";";
-    				return i === 0 ? curr : prev + curr;
-    			},
-    			""
-    		);
+    		} else {
+    			style = "top:0;width:" + cssVal(size);
+
+    			if (sticky) {
+    				style += ";position:sticky;z-index:1;left:0;margin-left:" + cssVal(offset) + ";margin-right:" + cssVal(-(offset + size)) + ";";
+    			} else {
+    				style += ";position:absolute;height:100%;left:" + cssVal(offset) + ";";
+    			}
+    		}
+
+    		return styleCache[index] = style;
     	}
@@ -1424,3 +1392,3 @@
     		super();
-    		if (!document.getElementById("svelte-13gd94c-style")) add_css();
+    		if (!document.getElementById("svelte-1he1ex4-style")) add_css();
 
@@ -1427,0 +1395,0 @@ init(

package.json

 {
   "name": "svelte-tiny-virtual-list",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪",
@@ -5,0 +5,0 @@ "svelte": "src/index.js",

src/constants.js

@@ -18,39 +18,5 @@ export const ALIGNMENT = {
 
-export const STYLE_ITEM = {
-	position: 'absolute',
-	top:      0,
-	left:     0,
-	width:    '100%',
-	height:   '100%',
-};
-
-export const STYLE_STICKY_ITEM = {
-	...STYLE_ITEM,
-	position:  'sticky',
-	'z-index': 1,
-};
-
 export const SCROLL_PROP = {
 	[DIRECTION.VERTICAL]:   'scrollTop',
 	[DIRECTION.HORIZONTAL]: 'scrollLeft',
-};
-
-export const SIZE_PROP = {
-	[DIRECTION.VERTICAL]:   'height',
-	[DIRECTION.HORIZONTAL]: 'width',
-};
-
-export const POSITION_PROP = {
-	[DIRECTION.VERTICAL]:   'top',
-	[DIRECTION.HORIZONTAL]: 'left',
-};
-
-export const MARGIN_PROP = {
-	[DIRECTION.VERTICAL]:   'margin-top',
-	[DIRECTION.HORIZONTAL]: 'margin-left',
-};
-
-export const OPPOSITE_MARGIN_PROP = {
-	[DIRECTION.VERTICAL]:   'margin-bottom',
-	[DIRECTION.HORIZONTAL]: 'margin-right',
 };

No alert changes

Worsened metrics

Total package byte prevSize

118192

decreased by-1.42%

Lines of code

2993

decreased by-2.86%

No dependency changes