@egjs/svelte-infinitegrid 3.2.5 → 4.0.1-beta.1

package/dist/infinitegrid.esm.js

@@ -1,60 +1,21 @@
 /*
-Copyright (c) 2019-present NAVER Corp.
+Copyright (c) NAVER Corp.
 name: @egjs/svelte-infinitegrid
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-infinitegrid
-version: 3.2.5
+version: 4.0.1-beta.0
 */
-import { SvelteComponent, init, safe_not_equal, assign, element, set_attributes, insert, group_outros, transition_out, check_outros, transition_in, get_spread_update, detach, exclude_internal_props, binding_callbacks, create_slot, create_component, mount_component, add_flush_callback, destroy_component, space, update_slot, attr, append, bind } from 'svelte/internal';
-import { onMount, createEventDispatcher, beforeUpdate, afterUpdate, onDestroy } from 'svelte';
-import VanillaInfiniteGrid, { categorize, ItemManager, INFINITEGRID_EVENTS, GridLayout as GridLayout$1, CONTAINER_CLASSNAME, INFINITEGRID_METHODS, JustifiedLayout as JustifiedLayout$1, FrameLayout as FrameLayout$1, SquareLayout as SquareLayout$1, PackingLayout as PackingLayout$1 } from '@egjs/infinitegrid';
+import { SvelteComponent, init, safe_not_equal, assign, element, set_attributes, insert, group_outros, transition_out, check_outros, transition_in, get_spread_update, detach, exclude_internal_props, binding_callbacks, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, attr } from 'svelte/internal';
+import { createEventDispatcher, beforeUpdate, onMount, afterUpdate, onDestroy } from 'svelte';
+import { Renderer, INFINITEGRID_EVENTS, mountRenderingItems, getRenderingItems, CONTAINER_CLASS_NAME, INFINITEGRID_METHODS, MasonryInfiniteGrid as MasonryInfiniteGrid$1, JustifiedInfiniteGrid as JustifiedInfiniteGrid$1, FrameInfiniteGrid as FrameInfiniteGrid$1, PackingInfiniteGrid as PackingInfiniteGrid$1 } from '@egjs/infinitegrid';
 
-/* src/LoadingChecker.svelte generated by Svelte v3.31.0 */
+const SVELTE_INFINITEGRID_PROPS = ["status", "useFirstRender", "useLoading", "usePlaceholder", "items", "itemBy", "groupBy"];
 
-function instance($$self, $$props, $$invalidate) {
-  let {
-    hasLoading = true
-  } = $$props;
-  onMount(() => {
-    $$invalidate(0, hasLoading = false);
-  });
-
-  $$self.$$set = $$props => {
-    if ("hasLoading" in $$props) $$invalidate(0, hasLoading = $$props.hasLoading);
-  };
-
-  return [hasLoading];
-}
-
-class LoadingChecker extends SvelteComponent {
-  constructor(options) {
-    super();
-    init(this, options, instance, null, safe_not_equal, {
-      hasLoading: 0
-    });
-  }
-
-}
-
-const PROP_NAMES = ["groupBy", "itemBy", "items", "useFirstRender", "loading", "status", "layoutType", "options", "layoutOptions", "_forceCount", "viewer", "container"];
-
-/* src/InfiniteGrid.svelte generated by Svelte v3.31.0 */
-
-const get_loading_slot_changes_1 = dirty => ({
-  visibleItems: dirty[0] &
-  /*visibleItems*/
-  8
-});
-
-const get_loading_slot_context_1 = ctx => ({
-  visibleItems:
-  /*visibleItems*/
-  ctx[3]
-});
+/* src/InfiniteGrid.svelte generated by Svelte v3.43.0 */
 
 const get_default_slot_changes_1 = dirty => ({
-  visibleItems: dirty[0] &
+  visibleItems: dirty &
   /*visibleItems*/
   8
 });
@@ -65,20 +26,8 @@ const get_default_slot_context_1 = ctx => ({
   ctx[3]
 });
 
-const get_loading_slot_changes = dirty => ({
-  visibleItems: dirty[0] &
-  /*visibleItems*/
-  8
-});
-
-const get_loading_slot_context = ctx => ({
-  visibleItems:
-  /*visibleItems*/
-  ctx[3]
-});
-
 const get_default_slot_changes = dirty => ({
-  visibleItems: dirty[0] &
+  visibleItems: dirty &
   /*visibleItems*/
   8
 });
@@ -87,30 +36,20 @@ const get_default_slot_context = ctx => ({
   visibleItems:
   /*visibleItems*/
   ctx[3]
-}); // (147:2) {:else}
+}); // (137:2) {:else}
 
 
 function create_else_block(ctx) {
-  let t;
   let current;
   const default_slot_template =
   /*#slots*/
-  ctx[17].default;
+  ctx[8].default;
   const default_slot = create_slot(default_slot_template, ctx,
   /*$$scope*/
-  ctx[16], get_default_slot_context_1);
-  const loading_slot_template =
-  /*#slots*/
-  ctx[17].loading;
-  const loading_slot = create_slot(loading_slot_template, ctx,
-  /*$$scope*/
-  ctx[16], get_loading_slot_context_1);
-  const loading_slot_or_fallback = loading_slot || fallback_block_1(ctx);
+  ctx[7], get_default_slot_context_1);
   return {
     c() {
       if (default_slot) default_slot.c();
-      t = space();
-      if (loading_slot_or_fallback) loading_slot_or_fallback.c();
     },
 
     m(target, anchor) {
@@ -118,39 +57,21 @@ function create_else_block(ctx) {
         default_slot.m(target, anchor);
       }
 
-      insert(target, t, anchor);
-
-      if (loading_slot_or_fallback) {
-        loading_slot_or_fallback.m(target, anchor);
-      }
-
       current = true;
     },
 
     p(ctx, dirty) {
       if (default_slot) {
-        if (default_slot.p && dirty[0] &
+        if (default_slot.p && (!current || dirty &
         /*$$scope, visibleItems*/
-        65544) {
-          update_slot(default_slot, default_slot_template, ctx,
+        136)) {
+          update_slot_base(default_slot, default_slot_template, ctx,
           /*$$scope*/
-          ctx[16], dirty, get_default_slot_changes_1, get_default_slot_context_1);
-        }
-      }
-
-      if (loading_slot) {
-        if (loading_slot.p && dirty[0] &
-        /*$$scope, visibleItems*/
-        65544) {
-          update_slot(loading_slot, loading_slot_template, ctx,
+          ctx[7], !current ? get_all_dirty_from_scope(
           /*$$scope*/
-          ctx[16], dirty, get_loading_slot_changes_1, get_loading_slot_context_1);
-        }
-      } else {
-        if (loading_slot_or_fallback && loading_slot_or_fallback.p && dirty[0] &
-        /*hasLoadingElement*/
-        16) {
-          loading_slot_or_fallback.p(ctx, dirty);
+          ctx[7]) : get_slot_changes(default_slot_template,
+          /*$$scope*/
+          ctx[7], dirty, get_default_slot_changes_1), get_default_slot_context_1);
         }
       }
     },
@@ -158,50 +79,36 @@ function create_else_block(ctx) {
     i(local) {
       if (current) return;
       transition_in(default_slot, local);
-      transition_in(loading_slot_or_fallback, local);
       current = true;
     },
 
     o(local) {
       transition_out(default_slot, local);
-      transition_out(loading_slot_or_fallback, local);
       current = false;
     },
 
     d(detaching) {
       if (default_slot) default_slot.d(detaching);
-      if (detaching) detach(t);
-      if (loading_slot_or_fallback) loading_slot_or_fallback.d(detaching);
     }
 
   };
-} // (140:2) {#if options.isOverflowScroll}
+} // (133:2) {#if $$props.container === true}
 
 
 function create_if_block(ctx) {
   let div;
-  let t;
   let current;
   const default_slot_template =
   /*#slots*/
-  ctx[17].default;
+  ctx[8].default;
   const default_slot = create_slot(default_slot_template, ctx,
   /*$$scope*/
-  ctx[16], get_default_slot_context);
-  const loading_slot_template =
-  /*#slots*/
-  ctx[17].loading;
-  const loading_slot = create_slot(loading_slot_template, ctx,
-  /*$$scope*/
-  ctx[16], get_loading_slot_context);
-  const loading_slot_or_fallback = loading_slot || fallback_block(ctx);
+  ctx[7], get_default_slot_context);
   return {
     c() {
       div = element("div");
       if (default_slot) default_slot.c();
-      t = space();
-      if (loading_slot_or_fallback) loading_slot_or_fallback.c();
-      attr(div, "class", CONTAINER_CLASSNAME);
+      attr(div, "class", CONTAINER_CLASS_NAME);
     },
 
     m(target, anchor) {
@@ -210,43 +117,25 @@ function create_if_block(ctx) {
       if (default_slot) {
         default_slot.m(div, null);
       }
-
-      append(div, t);
-
-      if (loading_slot_or_fallback) {
-        loading_slot_or_fallback.m(div, null);
-      }
       /*div_binding*/
 
 
-      ctx[19](div);
+      ctx[9](div);
       current = true;
     },
 
     p(ctx, dirty) {
       if (default_slot) {
-        if (default_slot.p && dirty[0] &
+        if (default_slot.p && (!current || dirty &
         /*$$scope, visibleItems*/
-        65544) {
-          update_slot(default_slot, default_slot_template, ctx,
+        136)) {
+          update_slot_base(default_slot, default_slot_template, ctx,
           /*$$scope*/
-          ctx[16], dirty, get_default_slot_changes, get_default_slot_context);
-        }
-      }
-
-      if (loading_slot) {
-        if (loading_slot.p && dirty[0] &
-        /*$$scope, visibleItems*/
-        65544) {
-          update_slot(loading_slot, loading_slot_template, ctx,
+          ctx[7], !current ? get_all_dirty_from_scope(
           /*$$scope*/
-          ctx[16], dirty, get_loading_slot_changes, get_loading_slot_context);
-        }
-      } else {
-        if (loading_slot_or_fallback && loading_slot_or_fallback.p && dirty[0] &
-        /*hasLoadingElement*/
-        16) {
-          loading_slot_or_fallback.p(ctx, dirty);
+          ctx[7]) : get_slot_changes(default_slot_template,
+          /*$$scope*/
+          ctx[7], dirty, get_default_slot_changes), get_default_slot_context);
         }
       }
     },
@@ -254,161 +143,20 @@ function create_if_block(ctx) {
     i(local) {
       if (current) return;
       transition_in(default_slot, local);
-      transition_in(loading_slot_or_fallback, local);
       current = true;
     },
 
     o(local) {
       transition_out(default_slot, local);
-      transition_out(loading_slot_or_fallback, local);
       current = false;
     },
 
     d(detaching) {
       if (detaching) detach(div);
       if (default_slot) default_slot.d(detaching);
-      if (loading_slot_or_fallback) loading_slot_or_fallback.d(detaching);
       /*div_binding*/
 
-      ctx[19](null);
-    }
-
-  };
-} // (149:25)        
-
-
-function fallback_block_1(ctx) {
-  let loadingchecker;
-  let updating_hasLoading;
-  let current;
-
-  function loadingchecker_hasLoading_binding_1(value) {
-    /*loadingchecker_hasLoading_binding_1*/
-    ctx[20].call(null, value);
-  }
-
-  let loadingchecker_props = {};
-
-  if (
-  /*hasLoadingElement*/
-  ctx[4] !== void 0) {
-    loadingchecker_props.hasLoading =
-    /*hasLoadingElement*/
-    ctx[4];
-  }
-
-  loadingchecker = new LoadingChecker({
-    props: loadingchecker_props
-  });
-  binding_callbacks.push(() => bind(loadingchecker, "hasLoading", loadingchecker_hasLoading_binding_1));
-  return {
-    c() {
-      create_component(loadingchecker.$$.fragment);
-    },
-
-    m(target, anchor) {
-      mount_component(loadingchecker, target, anchor);
-      current = true;
-    },
-
-    p(ctx, dirty) {
-      const loadingchecker_changes = {};
-
-      if (!updating_hasLoading && dirty[0] &
-      /*hasLoadingElement*/
-      16) {
-        updating_hasLoading = true;
-        loadingchecker_changes.hasLoading =
-        /*hasLoadingElement*/
-        ctx[4];
-        add_flush_callback(() => updating_hasLoading = false);
-      }
-
-      loadingchecker.$set(loadingchecker_changes);
-    },
-
-    i(local) {
-      if (current) return;
-      transition_in(loadingchecker.$$.fragment, local);
-      current = true;
-    },
-
-    o(local) {
-      transition_out(loadingchecker.$$.fragment, local);
-      current = false;
-    },
-
-    d(detaching) {
-      destroy_component(loadingchecker, detaching);
-    }
-
-  };
-} // (143:27)          
-
-
-function fallback_block(ctx) {
-  let loadingchecker;
-  let updating_hasLoading;
-  let current;
-
-  function loadingchecker_hasLoading_binding(value) {
-    /*loadingchecker_hasLoading_binding*/
-    ctx[18].call(null, value);
-  }
-
-  let loadingchecker_props = {};
-
-  if (
-  /*hasLoadingElement*/
-  ctx[4] !== void 0) {
-    loadingchecker_props.hasLoading =
-    /*hasLoadingElement*/
-    ctx[4];
-  }
-
-  loadingchecker = new LoadingChecker({
-    props: loadingchecker_props
-  });
-  binding_callbacks.push(() => bind(loadingchecker, "hasLoading", loadingchecker_hasLoading_binding));
-  return {
-    c() {
-      create_component(loadingchecker.$$.fragment);
-    },
-
-    m(target, anchor) {
-      mount_component(loadingchecker, target, anchor);
-      current = true;
-    },
-
-    p(ctx, dirty) {
-      const loadingchecker_changes = {};
-
-      if (!updating_hasLoading && dirty[0] &
-      /*hasLoadingElement*/
-      16) {
-        updating_hasLoading = true;
-        loadingchecker_changes.hasLoading =
-        /*hasLoadingElement*/
-        ctx[4];
-        add_flush_callback(() => updating_hasLoading = false);
-      }
-
-      loadingchecker.$set(loadingchecker_changes);
-    },
-
-    i(local) {
-      if (current) return;
-      transition_in(loadingchecker.$$.fragment, local);
-      current = true;
-    },
-
-    o(local) {
-      transition_out(loadingchecker.$$.fragment, local);
-      current = false;
-    },
-
-    d(detaching) {
-      destroy_component(loadingchecker, detaching);
+      ctx[9](null);
     }
 
   };
@@ -424,8 +172,8 @@ function create_fragment(ctx) {
 
   function select_block_type(ctx, dirty) {
     if (
-    /*options*/
-    ctx[0].isOverflowScroll) return 0;
+    /*$$props*/
+    ctx[4].container === true) return 0;
     return 1;
   }
 
@@ -433,7 +181,7 @@ function create_fragment(ctx) {
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   let div_levels = [
   /*attributes*/
-  ctx[5]];
+  ctx[2]];
   let div_data = {};
 
   for (let i = 0; i < div_levels.length; i += 1) {
@@ -452,11 +200,11 @@ function create_fragment(ctx) {
       if_blocks[current_block_type_index].m(div, null);
       /*div_binding_1*/
 
-      ctx[21](div);
+      ctx[10](div);
       current = true;
     },
 
-    p(ctx, dirty) {
+    p(ctx, [dirty]) {
       let previous_block_index = current_block_type_index;
       current_block_type_index = select_block_type(ctx);
 
@@ -481,11 +229,11 @@ function create_fragment(ctx) {
         if_block.m(div, null);
       }
 
-      set_attributes(div, div_data = get_spread_update(div_levels, [dirty[0] &
+      set_attributes(div, div_data = get_spread_update(div_levels, [dirty &
       /*attributes*/
-      32 &&
+      4 &&
       /*attributes*/
-      ctx[5]]));
+      ctx[2]]));
     },
 
     i(local) {
@@ -504,327 +252,255 @@ function create_fragment(ctx) {
       if_blocks[current_block_type_index].d();
       /*div_binding_1*/
 
-      ctx[21](null);
+      ctx[10](null);
     }
 
   };
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance($$self, $$props, $$invalidate) {
   let {
     $$slots: slots = {},
     $$scope
   } = $$props;
   let {
-    groupBy = (item, index) => item.groupKey
-  } = $$props;
-  let {
-    itemBy = (item, index) => item.key
-  } = $$props;
-  let {
-    items = []
-  } = $$props;
-  let {
-    useFirstRender = false
-  } = $$props;
-  let {
-    status = null
-  } = $$props;
-  let {
-    layoutType = GridLayout$1
-  } = $$props;
-  let {
-    options = {}
-  } = $$props;
-  let {
-    layoutOptions = {}
-  } = $$props;
-  let {
-    _forceCount = 0
+    GridClass
   } = $$props;
   const dispatch = createEventDispatcher();
-  let viewer;
+  const renderer = new Renderer();
+  let wrapper;
   let container;
-
-  let nextFunction = () => {};
-
-  let layoutState;
-  let visibleItems = [];
-  let ig;
-  let hasLoadingElement = true;
+  let grid;
   let attributes = {};
-  let isFirstMount = true;
-
-  function toItems(items) {
-    return items.map((item, i) => ({
-      groupKey: groupBy(item, i),
-      itemKey: itemBy(item, i),
-      data: item
-    }));
-  }
+  let visibleItems = [];
 
-  function beforeSync(items) {
-    return ig.beforeSync(toItems(items));
-  }
+  function updateAttributes() {
+    $$invalidate(2, attributes = { ...$$props
+    });
+    const defaultOptions = GridClass.defaultOptions;
+    delete attributes["GridClass"];
 
-  function getLoadingElement() {
-    if (hasLoadingElement) {
-      const el = container || viewer;
-      return el.lastElementChild;
+    for (const name in defaultOptions) {
+      delete attributes[name];
     }
+
+    SVELTE_INFINITEGRID_PROPS.forEach(name => {
+      delete attributes[name];
+    });
   }
 
-  function getElements() {
-    const el = container || viewer;
-    const elements = [].slice.call(el.children);
+  function getItemInfos() {
+    const items = $$props.items || [];
 
-    if (hasLoadingElement) {
-      return elements.slice(0, -1);
-    }
+    const itemBy = $$props.itemBy || (item => item.key);
 
-    return elements;
-  }
+    const groupBy = $$props.groupBy || (item => item.groupKey);
 
-  function updateAttributes() {
-    $$invalidate(5, attributes = { ...$$props
-    });
-    PROP_NAMES.forEach(name => {
-      delete attributes[name];
+    return items.map((item, i) => {
+      return {
+        groupKey: groupBy(item, i),
+        key: itemBy(item, i),
+        data: item
+      };
     });
   }
 
-  const groups = categorize(items);
-
-  if (status) {
-    const {
-      startCursor,
-      endCursor
-    } = status._infinite;
-    visibleItems = ItemManager.pluck(groups.slice(startCursor, endCursor + 1), "items").map(item => item.data);
-  } else if (useFirstRender) {
-    visibleItems = items;
+  function updateVisibleChildren() {
+    $$invalidate(3, visibleItems = getRenderingItems(getItemInfos(), {
+      grid,
+      status: $$props.status,
+      usePlaceholder: $$props.usePlaceholder,
+      useFirstRender: $$props.useFirstRender,
+      useLoading: $$props.useLoading,
+      horizontal: $$props.horizontal
+    }));
   }
 
   beforeUpdate(() => {
     updateAttributes();
+    updateVisibleChildren();
+  });
+  onMount(() => {
+    const defaultOptions = GridClass.defaultOptions;
+    const options = {};
 
-    if (!ig) {
-      return;
+    for (const name in defaultOptions) {
+      if (name in $$props) {
+        options[name] = $$props[name];
+      }
     }
 
-    const result = beforeSync(items);
-    layoutState = result === "relayout" ? result : layoutState || result;
-    $$invalidate(3, visibleItems = ig.getRenderingItems().map(item => item.data));
-    const loadingElement = getLoadingElement();
-
-    if (loadingElement) {
-      ig.setLoadingBar({
-        append: loadingElement,
-        prepend: loadingElement
-      });
-    } else {
-      ig.setLoadingBar();
+    if (container) {
+      options.container = container;
     }
-  });
-  onMount(() => {
-    ig = new VanillaInfiniteGrid(viewer, { ...options,
-      renderExternal: true
-    }).on("render", ({
-      next
-    }) => {
-      setTimeout(() => {
-        nextFunction = next;
-        $$invalidate(6, ++_forceCount);
-      });
-    });
-    INFINITEGRID_EVENTS.forEach(name => {
-      ig.on(name, e => {
-        dispatch(name, e);
-      });
-    });
-    ig.setLayout(layoutType, layoutOptions);
-    const loadingElement = getLoadingElement();
 
-    if (loadingElement) {
-      ig.setLoadingBar({
-        append: loadingElement,
-        prepend: loadingElement
+    options.renderer = renderer;
+    grid = new GridClass(wrapper, options);
+
+    for (const name in INFINITEGRID_EVENTS) {
+      const eventName = INFINITEGRID_EVENTS[name];
+      grid.on(eventName, e => {
+        dispatch(eventName, e);
       });
     }
 
-    if (status) {
-      setStatus(status, true);
-    } else {
-      beforeSync(items);
-      ig.layout(true);
-    }
+    renderer.on("requestUpdate", () => {
+      updateVisibleChildren();
+    });
+    mountRenderingItems(getItemInfos(), {
+      grid,
+      status: $$props.status,
+      usePlaceholder: $$props.usePlaceholder,
+      useFirstRender: $$props.useFirstRender,
+      useLoading: $$props.useLoading,
+      horizontal: $$props.horizontal
+    });
+    renderer.updated();
   });
   afterUpdate(() => {
-    if (isFirstMount) {
-      isFirstMount = false;
-      return;
-    }
-
-    const currentNextFunction = nextFunction;
 
-    nextFunction = () => {};
+    const propertyTypes = GridClass.propertyTypes;
 
-    ig.sync(getElements());
-
-    if (layoutState) {
-      layoutState = "";
-      ig.layout(layoutState === "relayout");
+    for (const name in propertyTypes) {
+      if (name in $$props) {
+        grid[name] = $$props[name];
+      }
     }
 
-    currentNextFunction();
+    renderer.updated();
   });
   onDestroy(() => {
-    ig.destroy();
+    grid?.destroy();
   });
 
   function getInstance() {
-    return ig;
-  }
-
-  function setStatus(status, applyScrollPos, syncElements = getElements()) {
-    ig.setStatus(status, applyScrollPos, syncElements);
-    return ig;
-  }
-
-  function loadingchecker_hasLoading_binding(value) {
-    hasLoadingElement = value;
-    $$invalidate(4, hasLoadingElement);
+    return grid;
   }
 
   function div_binding($$value) {
-    binding_callbacks[$$value ? "unshift" : "push"](() => {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       container = $$value;
-      $$invalidate(2, container);
+      $$invalidate(1, container);
     });
   }
 
-  function loadingchecker_hasLoading_binding_1(value) {
-    hasLoadingElement = value;
-    $$invalidate(4, hasLoadingElement);
-  }
-
   function div_binding_1($$value) {
-    binding_callbacks[$$value ? "unshift" : "push"](() => {
-      viewer = $$value;
-      $$invalidate(1, viewer);
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      wrapper = $$value;
+      $$invalidate(0, wrapper);
     });
   }
 
   $$self.$$set = $$new_props => {
-    $$invalidate(33, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
-    if ("groupBy" in $$new_props) $$invalidate(7, groupBy = $$new_props.groupBy);
-    if ("itemBy" in $$new_props) $$invalidate(8, itemBy = $$new_props.itemBy);
-    if ("items" in $$new_props) $$invalidate(9, items = $$new_props.items);
-    if ("useFirstRender" in $$new_props) $$invalidate(10, useFirstRender = $$new_props.useFirstRender);
-    if ("status" in $$new_props) $$invalidate(11, status = $$new_props.status);
-    if ("layoutType" in $$new_props) $$invalidate(12, layoutType = $$new_props.layoutType);
-    if ("options" in $$new_props) $$invalidate(0, options = $$new_props.options);
-    if ("layoutOptions" in $$new_props) $$invalidate(13, layoutOptions = $$new_props.layoutOptions);
-    if ("_forceCount" in $$new_props) $$invalidate(6, _forceCount = $$new_props._forceCount);
-    if ("$$scope" in $$new_props) $$invalidate(16, $$scope = $$new_props.$$scope);
+    $$invalidate(4, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+    if ('GridClass' in $$new_props) $$invalidate(5, GridClass = $$new_props.GridClass);
+    if ('$$scope' in $$new_props) $$invalidate(7, $$scope = $$new_props.$$scope);
   };
 
   $$props = exclude_internal_props($$props);
-  return [options, viewer, container, visibleItems, hasLoadingElement, attributes, _forceCount, groupBy, itemBy, items, useFirstRender, status, layoutType, layoutOptions, getInstance, setStatus, $$scope, slots, loadingchecker_hasLoading_binding, div_binding, loadingchecker_hasLoading_binding_1, div_binding_1];
+  return [wrapper, container, attributes, visibleItems, $$props, GridClass, getInstance, $$scope, slots, div_binding, div_binding_1];
 }
 
-class InfiniteGrid extends SvelteComponent {
+class InfiniteGrid$1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance$1, create_fragment, safe_not_equal, {
-      groupBy: 7,
-      itemBy: 8,
-      items: 9,
-      useFirstRender: 10,
-      status: 11,
-      layoutType: 12,
-      options: 0,
-      layoutOptions: 13,
-      _forceCount: 6,
-      getInstance: 14,
-      setStatus: 15
-    }, [-1, -1]);
+    init(this, options, instance, create_fragment, safe_not_equal, {
+      GridClass: 5,
+      getInstance: 6
+    });
   }
 
   get getInstance() {
-    return this.$$.ctx[14];
-  }
-
-  get setStatus() {
-    return this.$$.ctx[15];
+    return this.$$.ctx[6];
   }
 
 }
 
-var InfiniteGrid$1 = /*#__PURE__*/
-(() => {
-  const prototype = InfiniteGrid.prototype;
-
-  for (const name in INFINITEGRID_METHODS) {
-    if (name in prototype) {
-      continue;
-    }
+/**
+ * egjs-infinitegrid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
+var InfiniteGrid = /*#__PURE__*/(() => {
+  const prototype = InfiniteGrid$1.prototype;
+
+  if (prototype) {
+    INFINITEGRID_METHODS.forEach(name => {
+      if (name in prototype) {
+        return;
+      }
 
-    prototype[name] = function (...args) {
-      const self = this.getInstance();
-      const result = self[name](...args);
+      prototype[name] = function (...args) {
+        const self = this.getInstance();
+        const result = self[name](...args);
 
-      if (result === self) {
-        return this;
-      } else {
-        return result;
-      }
-    };
+        if (result === self) {
+          return this;
+        } else {
+          return result;
+        }
+      };
+    });
   }
 
-  return InfiniteGrid;
+  return InfiniteGrid$1;
 })();
 
-class GridLayout extends InfiniteGrid {
-  constructor(options) {
-    options.props.layoutType = GridLayout$1;
-    super(options);
-  }
-
-}
+let MasonryInfiniteGrid;
 
-class JustifiedLayout extends InfiniteGrid {
-  constructor(options) {
-    options.props.layoutType = JustifiedLayout$1;
-    super(options);
-  }
+if (typeof InfiniteGrid$1 === "object") {
+  MasonryInfiniteGrid = InfiniteGrid$1;
+} else {
+  MasonryInfiniteGrid = class MasonryInfiniteGrid extends InfiniteGrid$1 {
+    constructor(options) {
+      options.props.GridClass = MasonryInfiniteGrid$1;
+      super(options);
+    }
 
+  };
 }
 
-class FrameLayout extends InfiniteGrid {
-  constructor(options) {
-    options.props.layoutType = FrameLayout$1;
-    super(options);
-  }
+let JustifiedInfiniteGrid;
+
+if (typeof InfiniteGrid$1 === "object") {
+  JustifiedInfiniteGrid = InfiniteGrid$1;
+} else {
+  JustifiedInfiniteGrid = class JustifiedInfiniteGrid extends InfiniteGrid$1 {
+    constructor(options) {
+      options.props.GridClass = JustifiedInfiniteGrid$1;
+      super(options);
+    }
 
+  };
 }
 
-class SquareLayout extends InfiniteGrid {
-  constructor(options) {
-    options.props.layoutType = SquareLayout$1;
-    super(options);
-  }
+let FrameInfiniteGrid;
+
+if (typeof InfiniteGrid$1 === "object") {
+  FrameInfiniteGrid = InfiniteGrid$1;
+} else {
+  FrameInfiniteGrid = class FrameInfiniteGrid extends InfiniteGrid$1 {
+    constructor(options) {
+      options.props.GridClass = FrameInfiniteGrid$1;
+      super(options);
+    }
 
+  };
 }
 
-class PackingLayout extends InfiniteGrid {
-  constructor(options) {
-    options.props.layoutType = PackingLayout$1;
-    super(options);
-  }
+let PackingInfiniteGrid;
 
+if (typeof InfiniteGrid$1 === "object") {
+  PackingInfiniteGrid = InfiniteGrid$1;
+} else {
+  PackingInfiniteGrid = class PackingInfiniteGrid extends InfiniteGrid$1 {
+    constructor(options) {
+      options.props.GridClass = PackingInfiniteGrid$1;
+      super(options);
+    }
+
+  };
 }
 
-export default InfiniteGrid$1;
-export { FrameLayout, GridLayout, JustifiedLayout, PackingLayout, SquareLayout };
+export { FrameInfiniteGrid, InfiniteGrid, JustifiedInfiniteGrid, MasonryInfiniteGrid, PackingInfiniteGrid };
 //# sourceMappingURL=infinitegrid.esm.js.map