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

Comparing version 2.0.5 to 2.1.0

dist/svelte-tiny-virtual-list.js

@@ -101,2 +101,3 @@ (function (global, factory) {
         append(node.head || node, style);
+        return style.sheet;
     }
@@ -107,3 +108,5 @@ function insert(target, node, anchor) {
     function detach(node) {
-        node.parentNode.removeChild(node);
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
     }
@@ -146,8 +149,37 @@ function element(name) {
     }
+    /**
+     * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
+     * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
+     * it can be called from an external module).
+     *
+     * `onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
+     *
+     * https://svelte.dev/docs#run-time-svelte-onmount
+     */
     function onMount(fn) {
         get_current_component().$$.on_mount.push(fn);
     }
+    /**
+     * Schedules a callback to run immediately before the component is unmounted.
+     *
+     * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
+     * only one that runs inside a server-side component.
+     *
+     * https://svelte.dev/docs#run-time-svelte-ondestroy
+     */
     function onDestroy(fn) {
         get_current_component().$$.on_destroy.push(fn);
     }
+    /**
+     * Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-eventname).
+     * Event dispatchers are functions that can take two arguments: `name` and `detail`.
+     *
+     * Component events created with `createEventDispatcher` create a
+     * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
+     * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
+     * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
+     * property and can contain any type of data.
+     *
+     * https://svelte.dev/docs#run-time-svelte-createeventdispatcher
+     */
     function createEventDispatcher() {
@@ -172,5 +204,5 @@ const component = get_current_component();
     const binding_callbacks = [];
-    const render_callbacks = [];
+    let render_callbacks = [];
     const flush_callbacks = [];
-    const resolved_promise = Promise.resolve();
+    const resolved_promise = /* @__PURE__ */ Promise.resolve();
     let update_scheduled = false;
@@ -207,2 +239,8 @@ function schedule_update() {
     function flush() {
+        // Do not reenter flush while dirty components are updated, as this can
+        // result in an infinite loop. Instead, let the inner flush handle it.
+        // Reentrancy is ok afterwards for bindings etc.
+        if (flushidx !== 0) {
+            return;
+        }
         const saved_component = current_component;
@@ -212,8 +250,16 @@ do {
             // and update components
-            while (flushidx < dirty_components.length) {
-                const component = dirty_components[flushidx];
-                flushidx++;
-                set_current_component(component);
-                update(component.$$);
+            try {
+                while (flushidx < dirty_components.length) {
+                    const component = dirty_components[flushidx];
+                    flushidx++;
+                    set_current_component(component);
+                    update(component.$$);
+                }
             }
+            catch (e) {
+                // reset dirty state to not end up in a deadlocked state and then rethrow
+                dirty_components.length = 0;
+                flushidx = 0;
+                throw e;
+            }
             set_current_component(null);
@@ -254,2 +300,12 @@ dirty_components.length = 0;
     }
+    /**
+     * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
+     */
+    function flush_render_callbacks(fns) {
+        const filtered = [];
+        const targets = [];
+        render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c));
+        targets.forEach((c) => c());
+        render_callbacks = filtered;
+    }
     const outroing = new Set();
@@ -291,2 +347,5 @@ let outros;
         }
+        else if (callback) {
+            callback();
+        }
     }
@@ -308,2 +367,3 @@ function outro_and_destroy_block(block, lookup) {
         const deltas = new Map();
+        const updates = [];
         i = n;
@@ -319,3 +379,4 @@ while (i--) {
             else if (dynamic) {
-                block.p(child_ctx, dirty);
+                // defer updates until all the DOM shuffling is done
+                updates.push(() => block.p(child_ctx, dirty));
             }
@@ -373,6 +434,7 @@ new_lookup.set(key, new_blocks[i] = block);
             insert(new_blocks[n - 1]);
+        run_all(updates);
         return new_blocks;
     }
     function mount_component(component, target, anchor, customElement) {
-        const { fragment, on_mount, on_destroy, after_update } = component.$$;
+        const { fragment, after_update } = component.$$;
         fragment && fragment.m(target, anchor);
@@ -382,5 +444,8 @@ if (!customElement) {
             add_render_callback(() => {
-                const new_on_destroy = on_mount.map(run).filter(is_function);
-                if (on_destroy) {
-                    on_destroy.push(...new_on_destroy);
+                const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
+                // if the component was destroyed immediately
+                // it will update the `$$.on_destroy` reference to `null`.
+                // the destructured on_destroy may still reference to the old array
+                if (component.$$.on_destroy) {
+                    component.$$.on_destroy.push(...new_on_destroy);
                 }
@@ -400,2 +465,3 @@ else {
         if ($$.fragment !== null) {
+            flush_render_callbacks($$.after_update);
             run_all($$.on_destroy);
@@ -422,3 +488,3 @@ $$.fragment && $$.fragment.d(detaching);
             fragment: null,
-            ctx: null,
+            ctx: [],
             // state
@@ -488,2 +554,5 @@ props,
         $on(type, callback) {
+            if (!is_function(callback)) {
+                return noop;
+            }
             const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
@@ -948,3 +1017,3 @@ callbacks.push(callback);
 
-    /* src/VirtualList.svelte generated by Svelte v3.48.0 */
+    /* src/VirtualList.svelte generated by Svelte v3.59.2 */
 
@@ -977,3 +1046,3 @@ function add_css(target) {
 
-    // (331:2) {#each items as item (getKey ? getKey(item.index) : item.index)}
+    // (335:2) {#each items as item (getKey ? getKey(item.index) : item.index)}
     function create_each_block(key_1, ctx) {
@@ -1090,3 +1159,5 @@ let first;
     			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].m(div0, null);
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(div0, null);
+    				}
     			}
@@ -1332,6 +1403,8 @@
     		if (scrollDirection === DIRECTION.VERTICAL) {
-    			$$invalidate(3, wrapperStyle = `height:${height}px;width:${width};`);
+    			const unit = typeof height === 'number' ? 'px' : '';
+    			$$invalidate(3, wrapperStyle = `height:${height}${unit};width:${width};`);
     			$$invalidate(4, innerStyle = `flex-direction:column;height:${totalSize}px;`);
     		} else {
-    			$$invalidate(3, wrapperStyle = `height:${height};width:${width}px`);
+    			const unit = typeof width === 'number' ? 'px' : '';
+    			$$invalidate(3, wrapperStyle = `height:${height};width:${width}${unit}`);
     			$$invalidate(4, innerStyle = `min-height:100%;width:${totalSize}px;`);
@@ -1545,2 +1618,119 @@ }
 
+    	get height() {
+    		return this.$$.ctx[5];
+    	}
+
+    	set height(height) {
+    		this.$$set({ height });
+    		flush();
+    	}
+
+    	get width() {
+    		return this.$$.ctx[6];
+    	}
+
+    	set width(width) {
+    		this.$$set({ width });
+    		flush();
+    	}
+
+    	get itemCount() {
+    		return this.$$.ctx[7];
+    	}
+
+    	set itemCount(itemCount) {
+    		this.$$set({ itemCount });
+    		flush();
+    	}
+
+    	get itemSize() {
+    		return this.$$.ctx[8];
+    	}
+
+    	set itemSize(itemSize) {
+    		this.$$set({ itemSize });
+    		flush();
+    	}
+
+    	get estimatedItemSize() {
+    		return this.$$.ctx[9];
+    	}
+
+    	set estimatedItemSize(estimatedItemSize) {
+    		this.$$set({ estimatedItemSize });
+    		flush();
+    	}
+
+    	get stickyIndices() {
+    		return this.$$.ctx[10];
+    	}
+
+    	set stickyIndices(stickyIndices) {
+    		this.$$set({ stickyIndices });
+    		flush();
+    	}
+
+    	get getKey() {
+    		return this.$$.ctx[0];
+    	}
+
+    	set getKey(getKey) {
+    		this.$$set({ getKey });
+    		flush();
+    	}
+
+    	get scrollDirection() {
+    		return this.$$.ctx[11];
+    	}
+
+    	set scrollDirection(scrollDirection) {
+    		this.$$set({ scrollDirection });
+    		flush();
+    	}
+
+    	get scrollOffset() {
+    		return this.$$.ctx[12];
+    	}
+
+    	set scrollOffset(scrollOffset) {
+    		this.$$set({ scrollOffset });
+    		flush();
+    	}
+
+    	get scrollToIndex() {
+    		return this.$$.ctx[13];
+    	}
+
+    	set scrollToIndex(scrollToIndex) {
+    		this.$$set({ scrollToIndex });
+    		flush();
+    	}
+
+    	get scrollToAlignment() {
+    		return this.$$.ctx[14];
+    	}
+
+    	set scrollToAlignment(scrollToAlignment) {
+    		this.$$set({ scrollToAlignment });
+    		flush();
+    	}
+
+    	get scrollToBehaviour() {
+    		return this.$$.ctx[15];
+    	}
+
+    	set scrollToBehaviour(scrollToBehaviour) {
+    		this.$$set({ scrollToBehaviour });
+    		flush();
+    	}
+
+    	get overscanCount() {
+    		return this.$$.ctx[16];
+    	}
+
+    	set overscanCount(overscanCount) {
+    		this.$$set({ overscanCount });
+    		flush();
+    	}
+
     	get recomputeSizes() {
@@ -1547,0 +1737,0 @@ return this.$$.ctx[17];

package.json

 {
   "name": "svelte-tiny-virtual-list",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪",
@@ -9,9 +9,2 @@ "svelte": "src/index.js",
   "types": "types/index.d.ts",
-  "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint src/** test/**",
-    "test": "jest test",
-    "test:watch": "npm run test -- --watch",
-    "prepublishOnly": "npm run build"
-  },
   "devDependencies": {
@@ -36,2 +29,9 @@ "@babel/core": "^7.12.10",
   ],
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "svelte": "./src/index.js",
+      "default": "./dist/svelte-tiny-virtual-list.js"
+    }
+  },
   "keywords": [
@@ -61,3 +61,9 @@ "svelte",
   },
-  "homepage": "https://github.com/Skayo/svelte-tiny-virtual-list"
-}
+  "homepage": "https://github.com/Skayo/svelte-tiny-virtual-list",
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint src/** test/**",
+    "test": "jest test",
+    "test:watch": "npm run test -- --watch"
+  }
+}

README.md

@@ -136,3 +136,3 @@ <p align="center"><img src="https://raw.githubusercontent.com/Skayo/svelte-tiny-virtual-list/master/assets/ListLogo.svg" alt="ListLogo" width="225"></p>
 | scrollToAlignment | `string`                                          |           | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
-| scrollToBehaviour | `string`                                          |           | Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'` (default), `'smooth'` or `'instant'`.                                                                                                                                                                                                                                                                                   |
+| scrollToBehaviour | `string`                                          |           | Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling. One of: `'auto'`, `'smooth'` or `'instant'` (default).                                                                                                                                                                                                                                                                                   |
 | stickyIndices     | `number[]`                                        |           | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`)                                                                                                                                                                                                                                                                                                                             |
@@ -139,0 +139,0 @@ | overscanCount     | `number`                                          |           | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices.                                                                                                                                                                                                                                                                                    |

types/index.d.ts

@@ -68,3 +68,3 @@ /// <reference types="svelte" />
 	 * Used in combination with `scrollToIndex`, this prop controls the behaviour of the scrolling.
-	 * One of: `'auto'` (default), `'smooth'` or `'instant'`.
+	 * One of: `'auto'`, `'smooth'` or `'instant'` (default).
 	 */
@@ -71,0 +71,0 @@ scrollToBehaviour?: ScrollBehaviour;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

182516

increased by41.58%

Number of package files

20

increased by100%

Lines of code

4636

increased by43.57%

No dependency changes