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

package/dist/infinitegrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinitegrid.esm.js","sources":["../src/LoadingChecker.svelte","../src/consts.js","../src/InfiniteGrid.svelte","../src/InfiniteGrid.js","../src/layouts/GridLayout.js","../src/layouts/JustifiedLayout.js","../src/layouts/FrameLayout.js","../src/layouts/SquareLayout.js","../src/layouts/PackingLayout.js"],"sourcesContent":["<script>\nimport { onMount, onDestroy } from \"svelte\";\n\nexport let hasLoading = true;\n\nonMount(() => {\n    hasLoading = false;\n});\n</script>\n","export const PROP_NAMES = [\n\t\"groupBy\",\n\t\"itemBy\",\n\t\"items\",\n\t\"useFirstRender\",\n\t\"loading\",\n\t\"status\",\n\t\"layoutType\",\n\t\"options\",\n\t\"layoutOptions\",\n\t\"_forceCount\",\n\t\"viewer\",\n\t\"container\"\n];\n","<script lang=\"ts\">\n  import {\n    onMount,\n    onDestroy,\n    beforeUpdate,\n    afterUpdate,\n    createEventDispatcher\n  } from \"svelte\";\n  import VanillaInfiniteGrid, {\n    INFINITEGRID_EVENTS,\n    GridLayout,\n    categorize,\n    ItemManager,\n    CONTAINER_CLASSNAME\n  } from \"@egjs/infinitegrid\";\n  import type {\n    IInfiniteGridOptions,\n    ILayout,\n    IInfiniteGridStatus,\n    IInfiniteGridItem,\n  } from \"@egjs/infinitegrid\";\n  import LoadingChecker from \"./LoadingChecker.svelte\";\n  import { PROP_NAMES } from \"./consts\";\n\n  export let groupBy = (item, index) => item.groupKey;\n  export let itemBy = (item, index) => item.key;\n  export let items: any[] = [];\n  export let useFirstRender = false;\n  export let status: IInfiniteGridStatus | null = null;\n  export let layoutType: new () => ILayout = GridLayout;\n  export let options: Partial<IInfiniteGridOptions> = {};\n  export let layoutOptions: { [key: string]: any } = {};\n  export let _forceCount = 0;\n\n  const dispatch = createEventDispatcher();\n  let viewer: HTMLElement;\n  let container: HTMLElement;\n  let nextFunction = () => {};\n  let layoutState;\n  let visibleItems: any[] = [];\n  let ig: VanillaInfiniteGrid;\n  let hasLoadingElement = true;\n  let attributes = {};\n  let isFirstMount = true;\n\n  function toItems(items) {\n    return items.map((item, i) => ({\n      groupKey: groupBy(item, i),\n      itemKey: itemBy(item, i),\n      data: item\n    }));\n  }\n  function beforeSync(items) {\n    return ig.beforeSync(toItems(items));\n  }\n  function getLoadingElement() {\n    if (hasLoadingElement) {\n      const el = container || viewer;\n\n      return el!.lastElementChild;\n    }\n  }\n  function getElements() {\n    const el = container || viewer;\n    const elements = [].slice.call(el!.children);\n\n    if (hasLoadingElement) {\n      return elements.slice(0, -1);\n    }\n    return elements;\n  }\n  function updateAttributes() {\n    attributes = { ...$$props };\n\n    PROP_NAMES.forEach(name => {\n      delete attributes[name];\n    });\n  }\n\n  const groups = categorize(items);\n\n  if (status) {\n    const { startCursor, endCursor } = status._infinite;\n    visibleItems = ItemManager.pluck(\n      groups.slice(startCursor, endCursor + 1),\n      \"items\"\n    ).map(item => item.data);\n  } else if (useFirstRender) {\n    visibleItems = items;\n  }\n  beforeUpdate(() => {\n    updateAttributes();\n    if (!ig) {\n      return;\n    }\n    const result = beforeSync(items);\n\n    layoutState = result === \"relayout\" ? result : layoutState || result;\n    visibleItems = ig.getRenderingItems().map(item => item.data);\n\n    const loadingElement = getLoadingElement();\n\n    if (loadingElement) {\n      ig.setLoadingBar({\n        append: loadingElement,\n        prepend: loadingElement\n      });\n    } else {\n      ig.setLoadingBar();\n    }\n  });\n  onMount(() => {\n    ig = new VanillaInfiniteGrid(viewer!, {\n      ...options,\n      renderExternal: true\n    }).on(\"render\", ({ next }) => {\n      setTimeout(() => {\n        nextFunction = next;\n        ++_forceCount;\n      });\n    });\n    INFINITEGRID_EVENTS.forEach(name => {\n      ig.on(name as any, (e: any) => {\n        dispatch(name, e);\n      });\n    });\n    ig.setLayout(layoutType, layoutOptions);\n\n    const loadingElement = getLoadingElement();\n\n    if (loadingElement) {\n      ig.setLoadingBar({\n        append: loadingElement,\n        prepend: loadingElement\n      });\n    }\n    if (status) {\n      setStatus(status, true);\n    } else {\n      beforeSync(items);\n      ig.layout(true);\n    }\n  });\n  afterUpdate(() => {\n    if (isFirstMount) {\n      isFirstMount = false;\n      return;\n    }\n    const currentNextFunction = nextFunction;\n    nextFunction = () => {};\n    ig.sync(getElements());\n\n    if (layoutState) {\n      layoutState = \"\";\n      ig.layout(layoutState === \"relayout\");\n    }\n    currentNextFunction();\n  });\n  onDestroy(() => {\n    ig.destroy();\n  });\n\n  export function getInstance() {\n    return ig;\n  }\n  export function setStatus(status: IInfiniteGridStatus, applyScrollPos?: boolean, syncElements: HTMLElement[] = getElements()) {\n    ig.setStatus(status, applyScrollPos, syncElements);\n    return ig;\n  }\n</script>\n\n<div {...attributes} bind:this={viewer}>\n  {#if options.isOverflowScroll}\n    <div class={CONTAINER_CLASSNAME} bind:this={container}>\n      <slot {visibleItems} />\n      <slot name=\"loading\">\n        <LoadingChecker bind:hasLoading={hasLoadingElement} />\n      </slot>\n    </div>\n  {:else}\n    <slot {visibleItems} />\n    <slot name=\"loading\">\n      <LoadingChecker bind:hasLoading={hasLoadingElement} />\n    </slot>\n  {/if}\n</div>\n","import InfiniteGrid from \"./InfiniteGrid.svelte\";\nimport { INFINITEGRID_METHODS } from \"@egjs/infinitegrid\";\n\nexport default /*#__PURE__*/ (() => {\n    const prototype = InfiniteGrid.prototype;\n\n\tfor (const name in INFINITEGRID_METHODS) {\n\t\tif (name in prototype) {\n\t\t\tcontinue;\n\t\t}\n        prototype[name] = function (...args) {\n            const self = this.getInstance();\n            const result = self[name](...args);\n\n            if (result === self) {\n                return this;\n            } else {\n                return result;\n            }\n        };\n\t}\n    return InfiniteGrid;\n})();\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { GridLayout as layoutType } from \"@egjs/infinitegrid\";\n\nexport default class GridLayout extends InfiniteGrid {\n\tconstructor(options) {\n\t\toptions.props.layoutType = layoutType;\n\t\tsuper(options);\n\t}\n}\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { JustifiedLayout as layoutType } from \"@egjs/infinitegrid\";\n\nexport default class JustifiedLayout extends InfiniteGrid {\n\tconstructor(options) {\n\t\toptions.props.layoutType = layoutType;\n\t\tsuper(options);\n\t}\n}\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { FrameLayout as layoutType } from \"@egjs/infinitegrid\";\n\nexport default class FrameLayout extends InfiniteGrid {\n\tconstructor(options) {\n\t\toptions.props.layoutType = layoutType;\n\t\tsuper(options);\n\t}\n}\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { SquareLayout as layoutType } from \"@egjs/infinitegrid\";\n\nexport default class SquareLayout extends InfiniteGrid {\n\tconstructor(options) {\n\t\toptions.props.layoutType = layoutType;\n\t\tsuper(options);\n\t}\n}\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { PackingLayout as layoutType } from \"@egjs/infinitegrid\";\n\nexport default class PackingLayout extends InfiniteGrid {\n\tconstructor(options) {\n\t\toptions.props.layoutType = layoutType;\n\t\tsuper(options);\n\t}\n}\n"],"names":["hasLoading","onMount","PROP_NAMES","CONTAINER_CLASSNAME","ctx","isOverflowScroll","groupBy","item","index","groupKey","itemBy","key","items","useFirstRender","status","layoutType","GridLayout","options","layoutOptions","_forceCount","dispatch","createEventDispatcher","viewer","container","nextFunction","layoutState","visibleItems","ig","hasLoadingElement","attributes","isFirstMount","toItems","map","i","itemKey","data","beforeSync","getLoadingElement","el","lastElementChild","getElements","elements","slice","call","children","updateAttributes","$$props","forEach","name","groups","categorize","startCursor","endCursor","_infinite","ItemManager","pluck","beforeUpdate","result","getRenderingItems","loadingElement","setLoadingBar","append","prepend","VanillaInfiniteGrid","renderExternal","on","next","setTimeout","INFINITEGRID_EVENTS","e","setLayout","setStatus","layout","afterUpdate","currentNextFunction","sync","onDestroy","destroy","getInstance","applyScrollPos","syncElements","prototype","InfiniteGrid","INFINITEGRID_METHODS","args","self","constructor","props","JustifiedLayout","FrameLayout","SquareLayout","PackingLayout"],"mappings":";;;;;;;;;;;;;;;;IAGWA,UAAU,GAAG;;EAExBC,OAAO;oBACHD,UAAU,GAAG;GADV,CAAP;;;;;;;;;;;;;;;;;;;ACLO,MAAME,UAAU,GAAG,CACzB,SADyB,EAEzB,QAFyB,EAGzB,OAHyB,EAIzB,gBAJyB,EAKzB,SALyB,EAMzB,QANyB,EAOzB,YAPyB,EAQzB,SARyB,EASzB,eATyB,EAUzB,aAVyB,EAWzB,QAXyB,EAYzB,WAZyB,CAAnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBC4ISC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASuBC,GAAiB,EAAA,CAAjB;;;IAAAA,GAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;QAAjBA,GAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EANfA,GAAiB,EAAA,CAAjB;;;IAAAA,GAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;QAAjBA,GAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAJnDA,GAAO,EAAA,CAAP,CAAQC;;;;;;;;EADND,GAAU,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAVA,GAAU,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArIRE,OAAO,IAAIC,MAAMC,UAAUD,IAAI,CAACE;;;IAChCC,MAAM,IAAIH,MAAMC,UAAUD,IAAI,CAACI;;;IAC/BC,KAAK;;;IACLC,cAAc,GAAG;;;IACjBC,MAAM,GAAG;;;IACTC,UAAU,GAAGC;;;IACbC,OAAO;;;IACPC,aAAa;;;IACbC,WAAW,GAAG;;QACnBC,QAAQ,GAAGC,qBAAqB;MAClCC;MACAC;;MACAC,YAAY;;MACZC;MACAC,YAAY;MACZC;MACAC,iBAAiB,GAAG;MACpBC,UAAU;MACVC,YAAY,GAAG;;WACVC,QAAQnB;WACNA,KAAK,CAACoB,GAAN,EAAWzB,MAAM0B;MACpBxB,QAAQ,EAAEH,OAAO,CAACC,IAAD,EAAO0B,CAAP;MACjBC,OAAO,EAAExB,MAAM,CAACH,IAAD,EAAO0B,CAAP;MACfE,IAAI,EAAE5B;MAHH;;;WAMF6B,WAAWxB;WACTe,EAAE,CAACS,UAAH,CAAcL,OAAO,CAACnB,KAAD,CAArB;;;WAEFyB;QACDT;YACMU,EAAE,GAAGf,SAAS,IAAID;aACjBgB,EAAE,CAACC;;;;WAGTC;UACCF,EAAE,GAAGf,SAAS,IAAID;UAClBmB,QAAQ,MAAMC,MAAMC,KAAKL,EAAE,CAACM;;QAC9BhB;aACOa,QAAQ,CAACC,KAAT,CAAe,CAAf,GAAmB,CAAnB;;;WAEJD;;;WAEFI;oBACLhB,UAAU,QAAQiB;;IAClB5C,UAAU,CAAC6C,OAAX,CAAmBC,IAAI;aACZnB,UAAU,CAACmB,IAAD;KADrB;;;QAIEC,MAAM,GAAGC,UAAU,CAACtC,KAAD;;MACrBE;;MACQqC;MAAaC;QAActC,MAAM,CAACuC;IAC1C3B,YAAY,GAAG4B,WAAW,CAACC,KAAZ,CAAkBN,MAAM,CAACP,KAAP,CAAaS,WAAb,EAA0BC,SAAS,GAAG,CAAtC,CAAlB,EAA4D,OAA5D,EAAqEpB,GAArE,CAAyEzB,IAAI,IAAIA,IAAI,CAAC4B,IAAtF,CAAf;aAEKtB;IACLa,YAAY,GAAGd,KAAf;;;EAEJ4C,YAAY;IACRX,gBAAgB;;SACXlB;;;;UAGC8B,MAAM,GAAGrB,UAAU,CAACxB,KAAD;IACzBa,WAAW,GAAGgC,MAAM,KAAK,UAAX,GAAwBA,MAAxB,GAAiChC,WAAW,IAAIgC,MAA9D;oBACA/B,YAAY,GAAGC,EAAE,CAAC+B,iBAAH,GAAuB1B,GAAvB,CAA2BzB,IAAI,IAAIA,IAAI,CAAC4B,IAAxC;UACTwB,cAAc,GAAGtB,iBAAiB;;QACpCsB;MACAhC,EAAE,CAACiC,aAAH;QACIC,MAAM,EAAEF;QACRG,OAAO,EAAEH;OAFb;;MAMAhC,EAAE,CAACiC,aAAH;;GAhBI,CAAZ;EAmBA3D,OAAO;IACH0B,EAAE,OAAOoC,oBAAoBzC,aACtBL;MACH+C,cAAc,EAAE;OACjBC,GAAG;MAAaC;;MACfC,UAAU;QACN3C,YAAY,GAAG0C,IAAf;0BACE/C;OAFI,CAAV;MAJJ;IASAiD,mBAAmB,CAACrB,OAApB,CAA4BC,IAAI;MAC5BrB,EAAE,CAACsC,EAAH,CAAMjB,IAAN,EAAaqB,CAAC;QACVjD,QAAQ,CAAC4B,IAAD,EAAOqB,CAAP,CAAR;OADJ;KADJ;IAKA1C,EAAE,CAAC2C,SAAH,CAAavD,UAAb,EAAyBG,aAAzB;UACMyC,cAAc,GAAGtB,iBAAiB;;QACpCsB;MACAhC,EAAE,CAACiC,aAAH;QACIC,MAAM,EAAEF;QACRG,OAAO,EAAEH;OAFb;;;QAKA7C;MACAyD,SAAS,CAACzD,MAAD,EAAS,IAAT,CAAT;;MAGAsB,UAAU,CAACxB,KAAD,CAAV;MACAe,EAAE,CAAC6C,MAAH,CAAU,IAAV;;GA5BD,CAAP;EA+BAC,WAAW;QACH3C;MACAA,YAAY,GAAG,KAAf;;;;UAGE4C,mBAAmB,GAAGlD;;IAC5BA,YAAY,WAAZ;;IACAG,EAAE,CAACgD,IAAH,CAAQnC,WAAW,EAAnB;;QACIf;MACAA,WAAW,GAAG,EAAd;MACAE,EAAE,CAAC6C,MAAH,CAAU/C,WAAW,KAAK,UAA1B;;;IAEJiD,mBAAmB;GAZZ,CAAX;EAcAE,SAAS;IACLjD,EAAE,CAACkD,OAAH;GADK,CAAT;;WAGgBC;WACLnD;;;WAEK4C,UAAUzD,QAAQiE,gBAAgBC,YAAY,GAAGxC,WAAW;IACxEb,EAAE,CAAC4C,SAAH,CAAazD,MAAb,EAAqBiE,cAArB,EAAqCC,YAArC;WACOrD;;;;IAS8BC,iBAAiB,QAAjB;;;;;;MAHOL,SAAS,UAAT;;;;;;IASTK,iBAAiB,QAAjB;;;;;;MAXPN,MAAM,UAAN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvIhC,qBAAe;AAAc,CAAC,MAAM;QAC1B2D,SAAS,GAAGC,YAAY,CAACD,SAA/B;;OAEE,MAAMjC,IAAX,IAAmBmC,oBAAnB,EAAyC;QACpCnC,IAAI,IAAIiC,SAAZ,EAAuB;;;;IAGjBA,SAAS,CAACjC,IAAD,CAAT,GAAkB,UAAU,GAAGoC,IAAb,EAAmB;YAC3BC,IAAI,GAAG,KAAKP,WAAL,EAAb;YACMrB,MAAM,GAAG4B,IAAI,CAACrC,IAAD,CAAJ,CAAW,GAAGoC,IAAd,CAAf;;UAEI3B,MAAM,KAAK4B,IAAf,EAAqB;eACV,IAAP;OADJ,MAEO;eACI5B,MAAP;;KAPR;;;SAWGyB,YAAP;CAlByB,GAA7B;;ACAe,MAAMlE,UAAN,SAAyBkE,YAAzB,CAAsC;EACpDI,WAAW,CAACrE,OAAD,EAAU;IACpBA,OAAO,CAACsE,KAAR,CAAcxE,UAAd,GAA2BA,YAA3B;UACME,OAAN;;;;;ACHa,MAAMuE,eAAN,SAA8BN,YAA9B,CAA2C;EACzDI,WAAW,CAACrE,OAAD,EAAU;IACpBA,OAAO,CAACsE,KAAR,CAAcxE,UAAd,GAA2BA,iBAA3B;UACME,OAAN;;;;;ACHa,MAAMwE,WAAN,SAA0BP,YAA1B,CAAuC;EACrDI,WAAW,CAACrE,OAAD,EAAU;IACpBA,OAAO,CAACsE,KAAR,CAAcxE,UAAd,GAA2BA,aAA3B;UACME,OAAN;;;;;ACHa,MAAMyE,YAAN,SAA2BR,YAA3B,CAAwC;EACtDI,WAAW,CAACrE,OAAD,EAAU;IACpBA,OAAO,CAACsE,KAAR,CAAcxE,UAAd,GAA2BA,cAA3B;UACME,OAAN;;;;;ACHa,MAAM0E,aAAN,SAA4BT,YAA5B,CAAyC;EACvDI,WAAW,CAACrE,OAAD,EAAU;IACpBA,OAAO,CAACsE,KAAR,CAAcxE,UAAd,GAA2BA,eAA3B;UACME,OAAN;;;;;;;;"}
+{"version":3,"file":"infinitegrid.esm.js","sources":["../src/consts.js","../src/InfiniteGrid.svelte","../src/InfiniteGrid.js","../src/grids/MasonryInfiniteGrid.js","../src/grids/JustifiedInfiniteGrid.js","../src/grids/FrameInfiniteGrid.js","../src/grids/PackingInfiniteGrid.js"],"sourcesContent":["export const SVELTE_INFINITEGRID_PROPS = [\n  \"status\",\n  \"useFirstRender\",\n  \"useLoading\",\n  \"usePlaceholder\",\n  \"items\",\n  \"itemBy\",\n  \"groupBy\",\n];\n","<script>\n  /**\n   * egjs-infinitegrid\n   * Copyright (c) 2021-present NAVER Corp.\n   * MIT license\n   */\n  import {\n    onMount,\n    beforeUpdate,\n    createEventDispatcher,\n    onDestroy,\n    afterUpdate,\n  } from \"svelte\";\n  import VanillaInfiniteGrid, {\n    INFINITEGRID_EVENTS,\n    InfiniteGridOptions,\n    Renderer,\n    CONTAINER_CLASS_NAME,\n    getRenderingItems,\n    mountRenderingItems,\n  } from \"@egjs/infinitegrid\";\n  import { SVELTE_INFINITEGRID_PROPS } from \"./consts\";\n  export let GridClass;\n\n  const dispatch = createEventDispatcher();\n  const renderer = new Renderer();\n  let wrapper;\n  let container;\n  let grid;\n  let isFirstMount = false;\n  let attributes = {};\n  let visibleItems = [];\n\n  function updateAttributes() {\n    attributes = { ...$$props };\n\n    const defaultOptions = GridClass.defaultOptions;\n\n    delete attributes[\"GridClass\"];\n    for (const name in defaultOptions) {\n      delete attributes[name];\n    }\n    SVELTE_INFINITEGRID_PROPS.forEach((name) => {\n      delete attributes[name];\n    });\n  }\n  function getItemInfos() {\n    const items = $$props.items || [];\n    const itemBy = $$props.itemBy || ((item) => item.key);\n    const groupBy = $$props.groupBy || ((item) => item.groupKey);\n\n    return items.map((item, i) => {\n      return {\n        groupKey: groupBy(item, i),\n        key: itemBy(item, i),\n        data: item,\n      };\n    });\n  }\n  function updateVisibleChildren() {\n    visibleItems = getRenderingItems(getItemInfos(), {\n      grid,\n      status: $$props.status,\n      usePlaceholder: $$props.usePlaceholder,\n      useFirstRender: $$props.useFirstRender,\n      useLoading: $$props.useLoading,\n      horizontal: $$props.horizontal,\n    });\n  }\n\n  beforeUpdate(() => {\n    updateAttributes();\n    updateVisibleChildren();\n  });\n  onMount(() => {\n    const defaultOptions = GridClass.defaultOptions;\n    const options = {};\n\n    for (const name in defaultOptions) {\n      if (name in $$props) {\n        options[name] = $$props[name];\n      }\n    }\n    if (container) {\n      options.container = container;\n    }\n    options.renderer = renderer;\n    grid = new GridClass(wrapper, options);\n\n    for (const name in INFINITEGRID_EVENTS) {\n      const eventName = INFINITEGRID_EVENTS[name];\n\n      grid.on(eventName, (e) => {\n        dispatch(eventName, e);\n      });\n    }\n    renderer.on(\"requestUpdate\", () => {\n      updateVisibleChildren();\n    });\n    mountRenderingItems(getItemInfos(), {\n      grid,\n      status: $$props.status,\n      usePlaceholder: $$props.usePlaceholder,\n      useFirstRender: $$props.useFirstRender,\n      useLoading: $$props.useLoading,\n      horizontal: $$props.horizontal,\n    });\n    renderer.updated();\n  });\n  afterUpdate(() => {\n    if (isFirstMount) {\n      isFirstMount = false;\n      return;\n    }\n    const propertyTypes = GridClass.propertyTypes;\n\n    for (const name in propertyTypes) {\n      if (name in $$props) {\n        grid[name] = $$props[name];\n      }\n    }\n    renderer.updated();\n  });\n  onDestroy(() => {\n    grid?.destroy();\n  });\n  export function getInstance() {\n    return grid;\n  }\n</script>\n\n<div bind:this={wrapper} {...attributes}>\n  {#if $$props.container === true}\n    <div class={CONTAINER_CLASS_NAME} bind:this={container}>\n      <slot {visibleItems} />\n    </div>\n  {:else}\n    <slot {visibleItems} />\n  {/if}\n</div>\n","/**\n * egjs-infinitegrid\n * Copyright (c) 2021-present NAVER Corp.\n * MIT license\n */\nimport InfiniteGrid from \"./InfiniteGrid.svelte\";\nimport { INFINITEGRID_METHODS } from \"@egjs/infinitegrid\";\n\nexport default /*#__PURE__*/ (() => {\n  const prototype = InfiniteGrid.prototype;\n\n  if (prototype) {\n    INFINITEGRID_METHODS.forEach(name => {\n      if (name in prototype) {\n        return;\n      }\n      prototype[name] = function (...args) {\n        const self = this.getInstance();\n        const result = self[name](...args);\n\n        if (result === self) {\n          return this;\n        } else {\n          return result;\n        }\n      };\n    });\n  }\n  return InfiniteGrid;\n})();\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { MasonryInfiniteGrid as GridClass } from \"@egjs/infinitegrid\";\n\n\nlet MasonryInfiniteGrid;\n\nif (typeof InfiniteGrid === \"object\") {\n  MasonryInfiniteGrid = InfiniteGrid;\n} else {\n  MasonryInfiniteGrid = class MasonryInfiniteGrid extends InfiniteGrid {\n    constructor(options) {\n      options.props.GridClass = GridClass;\n      super(options);\n    }\n  }\n}\nexport { MasonryInfiniteGrid };\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { JustifiedInfiniteGrid as GridClass } from \"@egjs/infinitegrid\";\n\n\nlet JustifiedInfiniteGrid;\n\nif (typeof InfiniteGrid === \"object\") {\n  JustifiedInfiniteGrid = InfiniteGrid;\n} else {\n  JustifiedInfiniteGrid = class JustifiedInfiniteGrid extends InfiniteGrid {\n    constructor(options) {\n      options.props.GridClass = GridClass;\n      super(options);\n    }\n  }\n}\nexport { JustifiedInfiniteGrid };\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { FrameInfiniteGrid as GridClass } from \"@egjs/infinitegrid\";\n\n\nlet FrameInfiniteGrid;\n\nif (typeof InfiniteGrid === \"object\") {\n  FrameInfiniteGrid = InfiniteGrid;\n} else {\n  FrameInfiniteGrid = class FrameInfiniteGrid extends InfiniteGrid {\n    constructor(options) {\n      options.props.GridClass = GridClass;\n      super(options);\n    }\n  }\n}\nexport { FrameInfiniteGrid };\n","import InfiniteGrid from \"../InfiniteGrid.svelte\";\nimport { PackingInfiniteGrid as GridClass } from \"@egjs/infinitegrid\";\n\n\nlet PackingInfiniteGrid;\n\nif (typeof InfiniteGrid === \"object\") {\n  PackingInfiniteGrid = InfiniteGrid;\n} else {\n  PackingInfiniteGrid = class PackingInfiniteGrid extends InfiniteGrid {\n    constructor(options) {\n      options.props.GridClass = GridClass;\n      super(options);\n    }\n  }\n}\nexport { PackingInfiniteGrid };\n"],"names":["SVELTE_INFINITEGRID_PROPS","CONTAINER_CLASS_NAME","insert","ctx","container","GridClass","dispatch","createEventDispatcher","renderer","Renderer","wrapper","grid","attributes","visibleItems","updateAttributes","$$props","defaultOptions","name","forEach","getItemInfos","items","itemBy","item","key","groupBy","groupKey","map","i","data","updateVisibleChildren","getRenderingItems","status","usePlaceholder","useFirstRender","useLoading","horizontal","beforeUpdate","onMount","options","INFINITEGRID_EVENTS","eventName","on","e","mountRenderingItems","updated","afterUpdate","propertyTypes","onDestroy","destroy","getInstance","prototype","InfiniteGrid","INFINITEGRID_METHODS","args","self","result","MasonryInfiniteGrid","constructor","props","JustifiedInfiniteGrid","FrameInfiniteGrid","PackingInfiniteGrid"],"mappings":"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"}

package/global.d.ts

@@ -0,0 +1,8 @@
+declare module "!!raw-loader!*" {
+  const content: string;
+  export default content;
+}
+declare module "*.svelte" {
+  const content: any;
+  export default content;
+}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@egjs/svelte-infinitegrid",
-  "version": "3.2.5",
-  "description": "A Svelte component that can easily use egjs-infinitegrid",
+  "version": "4.0.1-beta.1",
+  "description": "A Svelte component that can arrange items infinitely according to the type of grids",
   "sideEffects": false,
+  "svelte": "src/index.js",
   "types": "src/index.d.ts",
   "module": "dist/infinitegrid.esm.js",
   "main": "dist/infinitegrid.cjs.js",
@@ -18,66 +19,56 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/naver/egjs-infinitegrid",
-  "peerDependencies": {
-    "react": "^15.4.2 || ^16.0.0 || ^17.0.0",
-    "react-dom": "^15.4.2 || ^16.0.0 || ^17.0.0"
-  },
   "keywords": [
     "svelte",
-    "virtual",
-    "virtualized",
-    "virtual-scroll",
-    "virtual-list",
-    "infinitegrid",
-    "infinite",
-    "scroll",
-    "layout",
-    "DOM",
-    "html",
-    "gallery",
+    "lazyloading",
+    "ready",
     "grid",
-    "pinterest",
+    "image",
+    "video",
+    "egjs",
     "masonry",
-    "GridLayout",
-    "JustifiedLayout",
-    "PackingLayout",
-    "FrameLayout",
-    "SquareLayout"
+    "justified",
+    "packing",
+    "frame",
+    "layout"
   ],
+  "scripts": {
+    "build": "rollup -c rollup.build.config.js",
+    "storybook": "start-storybook -p 6010 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@egjs/build-helper": "0.0.5",
-    "@pyoner/svelte-ts-preprocess": "^1.2.1",
+    "@egjs/build-helper": "^0.1.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/svelte": "^6.1.11",
     "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/svelte": "^3.0.3",
-    "@types/jest": "^26.0.19",
-    "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
-    "print-coveralls": "^1.2.2",
-    "rollup": "^1.12.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "babel-loader": "^8.2.2",
+    "raw-loader": "^4.0.2",
+    "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^5.1.2",
-    "sirv-cli": "^0.4.4",
-    "svelte": "^3.31.0",
-    "svelte-jester": "^1.3.0",
-    "svelte-preprocess": "^4.6.1",
-    "ts-jest": "^26.4.4",
-    "tslib": "^1.10.0",
-    "typescript": "^3.9.7"
+    "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^1.0.0",
+    "storybook-addon-preview": "^2.1.1",
+    "storybook-dark-mode": "^1.0.7",
+    "svelte": "^3.0.0",
+    "svelte-check": "^1.0.0",
+    "svelte-loader": "^2.13.6",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@egjs/infinitegrid": "~3.8.4"
-  },
-  "scripts": {
-    "build": "rollup -c rollup.build.config.js",
-    "dev": "rollup -c -w",
-    "start": "sirv public --single",
-    "start:dev": "sirv public --single --dev",
-    "build:dev": "rollup -c",
-    "test": "jest --watchAll",
-    "coverage": "jest --coverage && print-coveralls --sort=desc"
+    "@egjs/infinitegrid": "~4.0.0"
   }
 }

package/public/global.css

@@ -32,6 +32,7 @@ label {
 input, button, select, textarea {
 	font-family: inherit;
 	font-size: inherit;
+	-webkit-padding: 0.4em 0;
 	padding: 0.4em;
 	margin: 0 0 0.5em 0;
 	box-sizing: border-box;
@@ -43,17 +44,17 @@ input:disabled {
 	color: #ccc;
 }
 
-input[type="range"] {
-	height: 0;
-}
-
 button {
 	color: #333;
 	background-color: #f4f4f4;
 	outline: none;
 }
 
-button:active {
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
 	background-color: #ddd;
 }
 

package/public/index.html

@@ -1,8 +1,8 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
 	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
 	<title>Svelte app</title>
 

package/rollup.config.js

@@ -1,10 +1,10 @@
 import svelte from 'rollup-plugin-svelte';
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
-import typescript from 'rollup-plugin-typescript';
+import typescript from '@rollup/plugin-typescript';
 import css from 'rollup-plugin-css-only';
 
 const production = !process.env.ROLLUP_WATCH;
@@ -31,7 +31,7 @@ function serve() {
 }
 
 export default {
-	input: 'src/demo/main.js',
+	input: 'src/main.ts',
 	output: {
 		sourcemap: true,
 		format: 'iife',
@@ -40,10 +40,11 @@ export default {
 	},
 	plugins: [
 		svelte({
-			preprocess: sveltePreprocess(),
+			preprocess: sveltePreprocess({ sourceMap: !production }),
 			compilerOptions: {
 				// enable run-time checks when not in production
-				dev: !production
+				dev: !production,
+        generate: "ssr",
 			}
 		}),
 		// we'll extract any component CSS out into

package/src/InfiniteGrid.js

@@ -1,23 +1,30 @@
+/**
+ * egjs-infinitegrid
+ * Copyright (c) 2021-present NAVER Corp.
+ * MIT license
+ */
 import InfiniteGrid from "./InfiniteGrid.svelte";
 import { INFINITEGRID_METHODS } from "@egjs/infinitegrid";
 
 export default /*#__PURE__*/ (() => {
-    const prototype = InfiniteGrid.prototype;
+  const prototype = InfiniteGrid.prototype;
 
-	for (const name in INFINITEGRID_METHODS) {
-		if (name in prototype) {
-			continue;
-		}
-        prototype[name] = function (...args) {
-            const self = this.getInstance();
-            const result = self[name](...args);
+  if (prototype) {
+    INFINITEGRID_METHODS.forEach(name => {
+      if (name in prototype) {
+        return;
+      }
+      prototype[name] = function (...args) {
+        const self = this.getInstance();
+        const result = self[name](...args);
 
-            if (result === self) {
-                return this;
-            } else {
-                return result;
-            }
-        };
-	}
-    return InfiniteGrid;
+        if (result === self) {
+          return this;
+        } else {
+          return result;
+        }
+      };
+    });
+  }
+  return InfiniteGrid;
 })();

package/src/InfiniteGrid.svelte

@@ -1,186 +1,139 @@
-<script lang="ts">
+<script>
+  /**
+   * egjs-infinitegrid
+   * Copyright (c) 2021-present NAVER Corp.
+   * MIT license
+   */
   import {
     onMount,
-    onDestroy,
     beforeUpdate,
+    createEventDispatcher,
+    onDestroy,
     afterUpdate,
-    createEventDispatcher
   } from "svelte";
-  import VanillaInfiniteGrid, {
+  import {
     INFINITEGRID_EVENTS,
-    GridLayout,
-    categorize,
-    ItemManager,
-    CONTAINER_CLASSNAME
+    Renderer,
+    CONTAINER_CLASS_NAME,
+    getRenderingItems,
+    mountRenderingItems,
   } from "@egjs/infinitegrid";
-  import type {
-    IInfiniteGridOptions,
-    ILayout,
-    IInfiniteGridStatus,
-    IInfiniteGridItem,
-  } from "@egjs/infinitegrid";
-  import LoadingChecker from "./LoadingChecker.svelte";
-  import { PROP_NAMES } from "./consts";
-
-  export let groupBy = (item, index) => item.groupKey;
-  export let itemBy = (item, index) => item.key;
-  export let items: any[] = [];
-  export let useFirstRender = false;
-  export let status: IInfiniteGridStatus | null = null;
-  export let layoutType: new () => ILayout = GridLayout;
-  export let options: Partial<IInfiniteGridOptions> = {};
-  export let layoutOptions: { [key: string]: any } = {};
-  export let _forceCount = 0;
+  import { SVELTE_INFINITEGRID_PROPS } from "./consts";
+  export let GridClass;
 
   const dispatch = createEventDispatcher();
-  let viewer: HTMLElement;
-  let container: HTMLElement;
-  let nextFunction = () => {};
-  let layoutState;
-  let visibleItems: any[] = [];
-  let ig: VanillaInfiniteGrid;
-  let hasLoadingElement = true;
+  const renderer = new Renderer();
+  let wrapper;
+  let container;
+  let grid;
+  let isFirstMount = false;
   let attributes = {};
-  let isFirstMount = true;
-
-  function toItems(items) {
-    return items.map((item, i) => ({
-      groupKey: groupBy(item, i),
-      itemKey: itemBy(item, i),
-      data: item
-    }));
-  }
-  function beforeSync(items) {
-    return ig.beforeSync(toItems(items));
-  }
-  function getLoadingElement() {
-    if (hasLoadingElement) {
-      const el = container || viewer;
-
-      return el!.lastElementChild;
-    }
-  }
-  function getElements() {
-    const el = container || viewer;
-    const elements = [].slice.call(el!.children);
+  let visibleItems = [];
 
-    if (hasLoadingElement) {
-      return elements.slice(0, -1);
-    }
-    return elements;
-  }
   function updateAttributes() {
     attributes = { ...$$props };
 
-    PROP_NAMES.forEach(name => {
+    const defaultOptions = GridClass.defaultOptions;
+
+    delete attributes["GridClass"];
+    for (const name in defaultOptions) {
+      delete attributes[name];
+    }
+    SVELTE_INFINITEGRID_PROPS.forEach((name) => {
       delete attributes[name];
     });
   }
-
-  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 getItemInfos() {
+    const items = $$props.items || [];
+    const itemBy = $$props.itemBy || ((item) => item.key);
+    const groupBy = $$props.groupBy || ((item) => item.groupKey);
+
+    return items.map((item, i) => {
+      return {
+        groupKey: groupBy(item, i),
+        key: itemBy(item, i),
+        data: item,
+      };
+    });
   }
+  function updateVisibleChildren() {
+    visibleItems = getRenderingItems(getItemInfos(), {
+      grid,
+      status: $$props.status,
+      usePlaceholder: $$props.usePlaceholder,
+      useFirstRender: $$props.useFirstRender,
+      useLoading: $$props.useLoading,
+      horizontal: $$props.horizontal,
+    });
+  }
+
   beforeUpdate(() => {
     updateAttributes();
-    if (!ig) {
-      return;
-    }
-    const result = beforeSync(items);
+    updateVisibleChildren();
+  });
+  onMount(() => {
+    const defaultOptions = GridClass.defaultOptions;
+    const options = {};
 
-    layoutState = result === "relayout" ? result : layoutState || result;
-    visibleItems = ig.getRenderingItems().map(item => item.data);
+    for (const name in defaultOptions) {
+      if (name in $$props) {
+        options[name] = $$props[name];
+      }
+    }
+    if (container) {
+      options.container = container;
+    }
+    options.renderer = renderer;
+    grid = new GridClass(wrapper, options);
 
-    const loadingElement = getLoadingElement();
+    for (const name in INFINITEGRID_EVENTS) {
+      const eventName = INFINITEGRID_EVENTS[name];
 
-    if (loadingElement) {
-      ig.setLoadingBar({
-        append: loadingElement,
-        prepend: loadingElement
+      grid.on(eventName, (e) => {
+        dispatch(eventName, e);
       });
-    } else {
-      ig.setLoadingBar();
     }
-  });
-  onMount(() => {
-    ig = new VanillaInfiniteGrid(viewer!, {
-      ...options,
-      renderExternal: true
-    }).on("render", ({ next }) => {
-      setTimeout(() => {
-        nextFunction = next;
-        ++_forceCount;
-      });
+    renderer.on("requestUpdate", () => {
+      updateVisibleChildren();
     });
-    INFINITEGRID_EVENTS.forEach(name => {
-      ig.on(name as any, (e: any) => {
-        dispatch(name, e);
-      });
+    mountRenderingItems(getItemInfos(), {
+      grid,
+      status: $$props.status,
+      usePlaceholder: $$props.usePlaceholder,
+      useFirstRender: $$props.useFirstRender,
+      useLoading: $$props.useLoading,
+      horizontal: $$props.horizontal,
     });
-    ig.setLayout(layoutType, layoutOptions);
-
-    const loadingElement = getLoadingElement();
-
-    if (loadingElement) {
-      ig.setLoadingBar({
-        append: loadingElement,
-        prepend: loadingElement
-      });
-    }
-    if (status) {
-      setStatus(status, true);
-    } else {
-      beforeSync(items);
-      ig.layout(true);
-    }
+    renderer.updated();
   });
   afterUpdate(() => {
     if (isFirstMount) {
       isFirstMount = false;
       return;
     }
-    const currentNextFunction = nextFunction;
-    nextFunction = () => {};
-    ig.sync(getElements());
+    const propertyTypes = GridClass.propertyTypes;
 
-    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();
   });
-
   export function getInstance() {
-    return ig;
-  }
-  export function setStatus(status: IInfiniteGridStatus, applyScrollPos?: boolean, syncElements: HTMLElement[] = getElements()) {
-    ig.setStatus(status, applyScrollPos, syncElements);
-    return ig;
+    return grid;
   }
 </script>
 
-<div {...attributes} bind:this={viewer}>
-  {#if options.isOverflowScroll}
-    <div class={CONTAINER_CLASSNAME} bind:this={container}>
+<div bind:this={wrapper} {...attributes}>
+  {#if $$props.container === true}
+    <div class={CONTAINER_CLASS_NAME} bind:this={container}>
       <slot {visibleItems} />
-      <slot name="loading">
-        <LoadingChecker bind:hasLoading={hasLoadingElement} />
-      </slot>
     </div>
   {:else}
     <slot {visibleItems} />
-    <slot name="loading">
-      <LoadingChecker bind:hasLoading={hasLoadingElement} />
-    </slot>
   {/if}
 </div>

package/src/consts.js

@@ -1,14 +1,9 @@
-export const PROP_NAMES = [
-	"groupBy",
-	"itemBy",
-	"items",
-	"useFirstRender",
-	"loading",
-	"status",
-	"layoutType",
-	"options",
-	"layoutOptions",
-	"_forceCount",
-	"viewer",
-	"container"
+export const SVELTE_INFINITEGRID_PROPS = [
+  "status",
+  "useFirstRender",
+  "useLoading",
+  "usePlaceholder",
+  "items",
+  "itemBy",
+  "groupBy",
 ];

package/src/grids/FrameInfiniteGrid.js

@@ -0,0 +1,17 @@
+import InfiniteGrid from "../InfiniteGrid.svelte";
+import { FrameInfiniteGrid as GridClass } from "@egjs/infinitegrid";
+
+
+let FrameInfiniteGrid;
+
+if (typeof InfiniteGrid === "object") {
+  FrameInfiniteGrid = InfiniteGrid;
+} else {
+  FrameInfiniteGrid = class FrameInfiniteGrid extends InfiniteGrid {
+    constructor(options) {
+      options.props.GridClass = GridClass;
+      super(options);
+    }
+  }
+}
+export { FrameInfiniteGrid };

package/src/grids/JustifiedInfiniteGrid.js

@@ -0,0 +1,17 @@
+import InfiniteGrid from "../InfiniteGrid.svelte";
+import { JustifiedInfiniteGrid as GridClass } from "@egjs/infinitegrid";
+
+
+let JustifiedInfiniteGrid;
+
+if (typeof InfiniteGrid === "object") {
+  JustifiedInfiniteGrid = InfiniteGrid;
+} else {
+  JustifiedInfiniteGrid = class JustifiedInfiniteGrid extends InfiniteGrid {
+    constructor(options) {
+      options.props.GridClass = GridClass;
+      super(options);
+    }
+  }
+}
+export { JustifiedInfiniteGrid };