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

Comparing version 1.0.4 to 1.0.5

dist/svelte-tiny-virtual-list.js

@@ -454,6 +454,15 @@ (function (global, factory) {
 
-    const DEFAULT_STYLE_ITEM = 'top:0;left:0;width:100%;';
-    const STYLE_ITEM = DEFAULT_STYLE_ITEM + 'position:absolute;';
-    const STYLE_STICKY_ITEM = DEFAULT_STYLE_ITEM + 'position:sticky;z-index:1;';
+    const STYLE_ITEM = {
+    	position: 'absolute',
+    	top:      0,
+    	left:     0,
+    	width:    '100%',
+    };
 
+    const STYLE_STICKY_ITEM = {
+    	...STYLE_ITEM,
+    	position:  'sticky',
+    	'z-index': 1,
+    };
+
     const SCROLL_PROP = {
@@ -475,9 +484,9 @@ [DIRECTION.VERTICAL]:   'scrollTop',
     const MARGIN_PROP = {
-    	[DIRECTION.VERTICAL]:   'marginTop',
-    	[DIRECTION.HORIZONTAL]: 'marginLeft',
+    	[DIRECTION.VERTICAL]:   'margin-top',
+    	[DIRECTION.HORIZONTAL]: 'margin-left',
     };
 
     const OPPOSITE_MARGIN_PROP = {
-    	[DIRECTION.VERTICAL]:   'marginBottom',
-    	[DIRECTION.HORIZONTAL]: 'marginRight',
+    	[DIRECTION.VERTICAL]:   'margin-bottom',
+    	[DIRECTION.HORIZONTAL]: 'margin-right',
     };
@@ -857,3 +866,3 @@
 
-    // (327:2) {#each items as item (item.index)}
+    // (336:2) {#each items as item (item.index)}
     function create_each_block(key_1, ctx) {
@@ -1194,3 +1203,6 @@ let first;
     		if (stickyIndices != null && stickyIndices.length !== 0) {
-    			stickyIndices.forEach(index => updatedItems.push({ index, style: getStyle(index, true) }));
+    			for (let i = 0; i < stickyIndices.length; i++) {
+    				const index = stickyIndices[i];
+    				updatedItems.push({ index, style: getStyle(index, true) });
+    			}
 
@@ -1265,5 +1277,20 @@ if (scrollDirection === DIRECTION.HORIZONTAL) {
 
-    		return styleCache[index] = sticky
-    		? STYLE_STICKY_ITEM + SIZE_PROP[scrollDirection] + ":" + cssVal(size) + ";" + MARGIN_PROP[scrollDirection] + ":" + cssVal(offset) + ";" + OPPOSITE_MARGIN_PROP[scrollDirection] + ":" + cssVal(-(offset + size)) + ";"
-    		: STYLE_ITEM + SIZE_PROP[scrollDirection] + ":" + cssVal(size) + ";" + POSITION_PROP[scrollDirection] + ":" + cssVal(offset) + ";";
+    		return styleCache[index] = Object.entries(sticky
+    		? {
+    				...STYLE_STICKY_ITEM,
+    				[SIZE_PROP[scrollDirection]]: size,
+    				[MARGIN_PROP[scrollDirection]]: offset,
+    				[OPPOSITE_MARGIN_PROP[scrollDirection]]: -(offset + size)
+    			}
+    		: {
+    				...STYLE_ITEM,
+    				[SIZE_PROP[scrollDirection]]: size,
+    				[POSITION_PROP[scrollDirection]]: offset
+    			}).reduce(
+    			(prev, [key, val], i) => {
+    				const curr = key + ":" + cssVal(val) + ";";
+    				return i === 0 ? curr : prev + curr;
+    			},
+    			""
+    		);
     	}
@@ -1270,0 +1297,0 @@

package.json

 {
   "name": "svelte-tiny-virtual-list",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "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,6 +18,15 @@ export const ALIGNMENT = {
 
-const DEFAULT_STYLE_ITEM = 'top:0;left:0;width:100%;';
-export const STYLE_ITEM = DEFAULT_STYLE_ITEM + 'position:absolute;';
-export const STYLE_STICKY_ITEM = DEFAULT_STYLE_ITEM + 'position:sticky;z-index:1;';
+export const STYLE_ITEM = {
+	position: 'absolute',
+	top:      0,
+	left:     0,
+	width:    '100%',
+};
 
+export const STYLE_STICKY_ITEM = {
+	...STYLE_ITEM,
+	position:  'sticky',
+	'z-index': 1,
+};
+
 export const SCROLL_PROP = {
@@ -39,9 +48,9 @@ [DIRECTION.VERTICAL]:   'scrollTop',
 export const MARGIN_PROP = {
-	[DIRECTION.VERTICAL]:   'marginTop',
-	[DIRECTION.HORIZONTAL]: 'marginLeft',
+	[DIRECTION.VERTICAL]:   'margin-top',
+	[DIRECTION.HORIZONTAL]: 'margin-left',
 };
 
 export const OPPOSITE_MARGIN_PROP = {
-	[DIRECTION.VERTICAL]:   'marginBottom',
-	[DIRECTION.HORIZONTAL]: 'marginRight',
+	[DIRECTION.VERTICAL]:   'margin-bottom',
+	[DIRECTION.HORIZONTAL]: 'margin-right',
 };

No alert changes

Improved metrics

Total package byte prevSize

115519

increased by0.51%

Lines of code

2916

increased by2.1%

No dependency changes