Merge branch 'no-key'

Author: Georg Perhofer

.gitignore

@@ -1,11 +1,10 @@
 /node_modules/
 /example/public/build/
-dist/
 types/
+#/dist # for github package reference. 
 .idea/
 .DS_Store
 /build
-/dist
 /.svelte-kit
 /package
 .env

dist/Item.svelte

@@ -0,0 +1,39 @@
+<script>
+    import {afterUpdate, createEventDispatcher, onDestroy, onMount} from "svelte"
+
+    export let horizontal = false
+    export let uniqueKey
+    export let type = "item"
+
+    let resizeObserver
+    let itemDiv
+    let previousSize
+
+    const dispatch = createEventDispatcher()
+    const shapeKey = horizontal ? "offsetWidth" : "offsetHeight"
+
+    onMount(() => {
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(dispatchSizeChange)
+            resizeObserver.observe(itemDiv)
+        }
+    })
+    afterUpdate(dispatchSizeChange)
+    onDestroy(() => {
+        if (resizeObserver) {
+            resizeObserver.disconnect()
+            resizeObserver = null
+        }
+    })
+
+    function dispatchSizeChange() {
+        const size = itemDiv ? itemDiv[shapeKey] : 0
+        if (size === previousSize) return
+        previousSize = size
+        dispatch("resize", {id: uniqueKey, size, type})
+    }
+</script>
+
+<div bind:this={itemDiv} class="virtual-scroll-item">
+    <slot/>
+</div>

dist/Item.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  ItemProps */
+/** @typedef {typeof __propDef.events}  ItemEvents */
+/** @typedef {typeof __propDef.slots}  ItemSlots */
+export default class Item extends SvelteComponentTyped<{
+    uniqueKey: any;
+    horizontal?: boolean | undefined;
+    type?: string | undefined;
+}, {
+    resize: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ItemProps = typeof __propDef.props;
+export type ItemEvents = typeof __propDef.events;
+export type ItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        uniqueKey: any;
+        horizontal?: boolean | undefined;
+        type?: string | undefined;
+    };
+    events: {
+        resize: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

dist/VirtualScroll.svelte

@@ -0,0 +1,284 @@
+<script>
+    import Virtual, {isBrowser} from "./virtual"
+    import Item from "./Item.svelte"
+    import {createEventDispatcher, onDestroy, onMount} from "svelte"
+
+    /**
+     * Source for list
+     * @type {Array<any>}
+     */
+    export let data
+    /**
+     * Count of rendered items
+     * @type {number}
+     */
+    export let keeps = 30
+    /**
+     * Estimate size of each item, needs for smooth scrollbar
+     * @type {number}
+     */
+    export let estimateSize = 50
+    /**
+     * Scroll direction
+     * @type {boolean}
+     */
+    export let isHorizontal = false
+    /**
+     * scroll position start index
+     */
+    export let start = 0
+    /**
+     * scroll position offset
+     */
+    export let offset = 0
+    /**
+     * Let virtual list using global document to scroll through the list
+     * @type {boolean}
+     */
+    export let pageMode = false
+    /**
+     * The threshold to emit `top` event, attention to multiple calls.
+     * @type {number}
+     */
+    export let topThreshold = 0
+    /**
+     * The threshold to emit `bottom` event, attention to multiple calls.
+     * @type {number}
+     */
+    export let bottomThreshold = 0
+
+    let displayItems = []
+    let paddingStyle
+    let directionKey = isHorizontal ? "scrollLeft" : "scrollTop"
+    let range = null
+    let virtual = new Virtual({
+        slotHeaderSize: 0,
+        slotFooterSize: 0,
+        keeps: keeps,
+        estimateSize: estimateSize,
+        buffer: Math.round(keeps / 3), // recommend for a third of keeps
+        uniqueIds: getUniqueIdFromDataSources(),
+    }, onRangeChanged)
+    let root
+    let shepherd
+    const dispatch = createEventDispatcher()
+
+    /**
+     * @type {(id: number) => number}
+     */
+    export function getSize(id) {
+        return virtual.sizes.get(id)
+    }
+
+    /**
+     * Count of items
+     * @type {() => number}
+     */
+    export function getSizes() {
+        return virtual.sizes.size
+    }
+
+    /**
+     * @type {() => number}
+     */
+    export function getOffset() {
+        if (pageMode && isBrowser()) {
+            return document.documentElement[directionKey] || document.body[directionKey]
+        } else {
+            return root ? Math.ceil(root[directionKey]) : 0
+        }
+    }
+
+    /**
+     * @type {() => number}
+     */
+    export function getClientSize() {
+        const key = isHorizontal ? "clientWidth" : "clientHeight"
+        if (pageMode && isBrowser()) {
+            return document.documentElement[key] || document.body[key]
+        } else {
+            return root ? Math.ceil(root[key]) : 0
+        }
+    }
+
+    /**
+     * @type {() => number}
+     */
+    export function getScrollSize() {
+        const key = isHorizontal ? "scrollWidth" : "scrollHeight"
+        if (pageMode && isBrowser()) {
+            return document.documentElement[key] || document.body[key]
+        } else {
+            return root ? Math.ceil(root[key]) : 0
+        }
+    }
+
+    /**
+     * @type {() => void}
+     */
+    export function updatePageModeFront() {
+        if (root && isBrowser()) {
+            const rect = root.getBoundingClientRect()
+            const {defaultView} = root.ownerDocument
+            const offsetFront = isHorizontal ? (rect.left + defaultView.pageXOffset) : (rect.top + defaultView.pageYOffset)
+            virtual.updateParam("slotHeaderSize", offsetFront)
+        }
+    }
+
+    /**
+     * @type {(offset: number) => void}
+     */
+    export function scrollToOffset(offset) {
+        if (!isBrowser()) return
+        if (pageMode) {
+            document.body[directionKey] = offset
+            document.documentElement[directionKey] = offset
+        } else if (root) {
+            root[directionKey] = offset
+        }
+    }
+
+    /**
+     * @type {(index: number) => void}
+     */
+    export function scrollToIndex(index) {
+        if (index >= data.length - 1) {
+            scrollToBottom()
+        } else {
+            const offset = virtual.getOffset(index)
+            scrollToOffset(offset)
+        }
+    }
+
+    /**
+     * @type {() => void}
+     */
+    export function scrollToBottom() {
+        if (shepherd) {
+            const offset = shepherd[isHorizontal ? "offsetLeft" : "offsetTop"]
+            scrollToOffset(offset)
+
+            // check if it's really scrolled to the bottom
+            // maybe list doesn't render and calculate to last range,
+            // so we need retry in next event loop until it really at bottom
+            setTimeout(() => {
+                if (getOffset() + getClientSize() + 1 < getScrollSize()) {
+                    scrollToBottom()
+                }
+            }, 3)
+        }
+    }
+
+    onMount(() => {
+        if (start) {
+            scrollToIndex(start)
+        } else if (offset) {
+            scrollToOffset(offset)
+        }
+
+        if (pageMode) {
+            updatePageModeFront()
+
+            document.addEventListener("scroll", onScroll, {
+                passive: false,
+            })
+        }
+    })
+
+    onDestroy(() => {
+        virtual.destroy()
+        if (pageMode && isBrowser()) {
+            document.removeEventListener("scroll", onScroll)
+        }
+    })
+
+    function getUniqueIdFromDataSources() {
+        return data.map((dataSource, i) => i)
+    }
+
+    function onItemResized(event) {
+        const {id, size, type} = event.detail
+        if (type === "item")
+            virtual.saveSize(id, size)
+        else if (type === "slot") {
+            if (id === "header")
+                virtual.updateParam("slotHeaderSize", size)
+            else if (id === "footer")
+                virtual.updateParam("slotFooterSize", size)
+
+            // virtual.handleSlotSizeChange()
+        }
+    }
+
+    function onRangeChanged(range_) {
+        range = range_
+        paddingStyle = paddingStyle = isHorizontal ? `0px ${range.padBehind}px 0px ${range.padFront}px` : `${range.padFront}px 0px ${range.padBehind}px`
+        displayItems = data.slice(range.start, range.end + 1)
+    }
+
+    function onScroll(event) {
+        const offset = getOffset()
+        const clientSize = getClientSize()
+        const scrollSize = getScrollSize()
+
+        // iOS scroll-spring-back behavior will make direction mistake
+        if (offset < 0 || (offset + clientSize > scrollSize) || !scrollSize) {
+            return
+        }
+
+        virtual.handleScroll(offset)
+        emitEvent(offset, clientSize, scrollSize, event)
+    }
+
+    function emitEvent(offset, clientSize, scrollSize, event) {
+        dispatch("scroll", {event, range: virtual.getRange()})
+
+        if (virtual.isFront() && !!data.length && (offset - topThreshold <= 0)) {
+            dispatch("top")
+        } else if (virtual.isBehind() && (offset + clientSize + bottomThreshold >= scrollSize)) {
+            dispatch("bottom")
+        }
+    }
+
+    $: scrollToOffset(offset)
+    $: scrollToIndex(start)
+    $: handleKeepsChange(keeps)
+
+    function handleKeepsChange(keeps) {
+        virtual.updateParam("keeps", keeps)
+        virtual.handleSlotSizeChange()
+    }
+
+    $: handleDataSourcesChange(data)
+
+    async function handleDataSourcesChange(data) {
+        virtual.updateParam("uniqueIds", getUniqueIdFromDataSources())
+        virtual.handleDataSourcesChange()
+    }
+</script>
+
+<div bind:this={root} on:scroll={onScroll} style="overflow-y: auto; height: inherit" class="virtual-scroll-root">
+    {#if $$slots.header}
+        <Item on:resize={onItemResized} type="slot" uniqueKey="header">
+            <slot name="header"/>
+        </Item>
+    {/if}
+    <div style="padding: {paddingStyle}" class="virtual-scroll-wrapper">
+        {#each displayItems as dataItem, dataIndex}
+            <Item
+                    on:resize={onItemResized}
+                    uniqueKey={dataIndex}
+                    horizontal={isHorizontal}
+                    type="item">
+                <slot data={dataItem} index={dataIndex} />
+            </Item>
+        {/each}
+    </div>
+    {#if $$slots.footer}
+        <Item on:resize={onItemResized} type="slot" uniqueKey="footer">
+            <slot name="footer"/>
+        </Item>
+    {/if}
+    <div bind:this={shepherd} class="shepherd"
+         style="width: {isHorizontal ? '0px' : '100%'};height: {isHorizontal ? '100%' : '0px'}"></div>
+</div>