@egjs/svelte-infinitegrid 4.7.0 → 4.7.1

package/dist/infinitegrid.cjs.js

@@ -4,7 +4,7 @@ name: @egjs/svelte-infinitegrid
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-infinitegrid
-version: 4.7.0
+version: 4.7.1
 */
 'use strict';
 
@@ -14,7 +14,7 @@ var infinitegrid = require('@egjs/infinitegrid');
 
 const SVELTE_INFINITEGRID_PROPS = ["status", "useFirstRender", "useLoading", "usePlaceholder", "items", "itemBy", "groupBy"];
 
-/* src/InfiniteGrid.svelte generated by Svelte v3.49.0 */
+/* src/InfiniteGrid.svelte generated by Svelte v3.50.0 */
 
 const get_default_slot_changes_1 = dirty => ({
   visibleItems: dirty &

package/dist/infinitegrid.esm.js

@@ -4,7 +4,7 @@ name: @egjs/svelte-infinitegrid
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-infinitegrid
-version: 4.7.0
+version: 4.7.1
 */
 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';
@@ -12,7 +12,7 @@ import { Renderer, INFINITEGRID_EVENTS, mountRenderingItems, getRenderingItems,
 
 const SVELTE_INFINITEGRID_PROPS = ["status", "useFirstRender", "useLoading", "usePlaceholder", "items", "itemBy", "groupBy"];
 
-/* src/InfiniteGrid.svelte generated by Svelte v3.49.0 */
+/* src/InfiniteGrid.svelte generated by Svelte v3.50.0 */
 
 const get_default_slot_changes_1 = dirty => ({
   visibleItems: dirty &

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/svelte-infinitegrid",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "description": "A Svelte component that can arrange items infinitely according to the type of grids",
   "sideEffects": false,
   "svelte": "src/index.js",
@@ -19,6 +19,11 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/naver/egjs-infinitegrid",
+  "files": [
+    "./*",
+    "src/*",
+    "dist/*"
+  ],
   "keywords": [
     "svelte",
     "lazyloading",
@@ -69,6 +74,6 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@egjs/infinitegrid": "~4.7.0"
+    "@egjs/infinitegrid": "~4.7.1"
   }
 }

package/.storybook/main.js

@@ -1,32 +0,0 @@
-const autoPreprocess = require('svelte-preprocess');
-const path = require("path");
-
-module.exports = {
-  webpackFinal: (config) => {
-    const svelteLoader = config.module.rules.find(
-      r => r.loader && r.loader.includes('svelte-loader'),
-    );
-    svelteLoader.options.preprocess = autoPreprocess({
-      less: { includePaths: ['src', 'node_modules'] },
-      css: { includePaths: ['src', 'node_modules'] },
-      typescript: {
-        tsconfigFile: './tsconfig.json',
-        transpileOnly: true,
-      },
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    config.resolve.alias["@egjs/infinitegrid"] = path.resolve(__dirname, '../../../dist/infinitegrid.esm.js');
-    return config;
-  },
-  stories: [
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  addons: [
-    // "@storybook/addon-knobs/register",
-    "@storybook/addon-docs/register",
-    "@storybook/addon-controls/register",
-    "@storybook/addon-viewport/register",
-    "storybook-addon-preview/register",
-    "storybook-dark-mode/register",
-  ],
-};

package/.storybook/manager.js

@@ -1,5 +0,0 @@
-import { addons } from "@storybook/addons";
-
-addons.setConfig({
-  panelPosition: "right",
-});

package/.storybook/preview.js

@@ -1,25 +0,0 @@
-import { themes } from "@storybook/theming";
-import {
-    INITIAL_VIEWPORTS,
-    // or MINIMAL_VIEWPORTS,
-} from "@storybook/addon-viewport";
-
-// or global addParameters
-export const parameters = {
-    controls: {
-        passArgsFirst: true,
-        expanded: true,
-        hideNoControlsWarning: true,
-    },
-    viewport: {
-        viewports: {
-            ...INITIAL_VIEWPORTS,
-        },
-    },
-    darkMode: {
-        // Override the default light theme
-        light: { ...themes.normal },
-        // Override the default dark theme
-        dark: { ...themes.dark },
-    },
-};

package/CHANGELOG.md

@@ -1,47 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [4.6.0](https://github.com/naver/egjs-infinitegrid/compare/@egjs/svelte-infinitegrid@4.5.0...@egjs/svelte-infinitegrid@4.6.0) (2022-07-26)
-
-
-### :mega: Other
-
-* update packages versions ([d4aa615](https://github.com/naver/egjs-infinitegrid/commit/d4aa615a8cd3e25b621500e2a7b243dcc9696eef))
-
-
-
-## [4.5.0](https://github.com/naver/egjs-infinitegrid/compare/@egjs/svelte-infinitegrid@4.4.0...@egjs/svelte-infinitegrid@4.5.0) (2022-06-23)
-
-
-### :mega: Other
-
-* update packages versions ([171bb74](https://github.com/naver/egjs-infinitegrid/commit/171bb74f708110a2fd986276c9b8d65472fa64ab))
-
-
-
-## [4.4.0](https://github.com/naver/egjs-infinitegrid/compare/@egjs/svelte-infinitegrid@4.3.1...@egjs/svelte-infinitegrid@4.4.0) (2022-05-25)
-
-
-### :mega: Other
-
-* update packages versions ([29bdea0](https://github.com/naver/egjs-infinitegrid/commit/29bdea08f334113e4a73180dd5f9e803c4befc99))
-
-
-
-## [4.3.1](https://github.com/naver/egjs-infinitegrid/compare/@egjs/svelte-infinitegrid@4.3.0...@egjs/svelte-infinitegrid@4.3.1) (2022-05-17)
-
-
-### :mega: Other
-
-* update packages versions ([47f9348](https://github.com/naver/egjs-infinitegrid/commit/47f9348042e19c789b986ec936ed042a3838afc8))
-
-
-
-## [4.3.0](https://github.com/naver/egjs-infinitegrid/compare/@egjs/svelte-infinitegrid@4.2.1...@egjs/svelte-infinitegrid@4.3.0) (2022-05-13)
-
-
-### :mega: Other
-
-* update packages versions ([bc07e37](https://github.com/naver/egjs-infinitegrid/commit/bc07e37a5fb40e94f87cd1b07f1f7a843ddbe7e8))

package/global.d.ts

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

package/public/global.css

@@ -1,63 +0,0 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-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;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}

package/public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
-
-	<title>Svelte app</title>
-
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
-
-	<script defer src='/build/bundle.js'></script>
-</head>
-
-<body>
-</body>
-</html>

package/rollup.build.config.js

@@ -1,32 +0,0 @@
-import buildHelper from "@egjs/build-helper";
-import svelte from "rollup-plugin-svelte";
-import sveltePreprocess from "svelte-preprocess";
-
-const defaultOptions = {
-	tsconfig: "",
-	commonjs: true,
-	external: {
-		svelte: "svelte",
-	},
-	plugins: [
-		svelte({
-			preprocess: sveltePreprocess(),
-		}),
-	],
-};
-
-export default buildHelper([
-	{
-		...defaultOptions,
-		input: "./src/index.umd.js",
-		output: "dist/infinitegrid.cjs.js",
-		format: "cjs",
-	},
-	{
-		...defaultOptions,
-		input: "./src/index.js",
-		output: "dist/infinitegrid.esm.js",
-		format: "es",
-		exports: "named",
-	},
-]);

package/rollup.config.js

@@ -1,83 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-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 css from 'rollup-plugin-css-only';
-
-const production = !process.env.ROLLUP_WATCH;
-
-function serve() {
-	let server;
-
-	function toExit() {
-		if (server) server.kill(0);
-	}
-
-	return {
-		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
-
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
-}
-
-export default {
-	input: 'src/main.ts',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/build/bundle.js'
-	},
-	plugins: [
-		svelte({
-			preprocess: sveltePreprocess({ sourceMap: !production }),
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			}
-		}),
-		// we'll extract any component CSS out into
-		// a separate file - better for performance
-		css({ output: 'bundle.css' }),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
-		typescript({
-			sourceMap: !production,
-			inlineSources: !production
-		}),
-
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
-
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
-};

package/stories/1-MasonryInfiniteGrid/0-MasonryInfiniteGrid.stories.ts

@@ -1,4 +0,0 @@
-export default {
-  title: "Examples/MasonryInfiniteGrid",
-};
-export * from "./1-MasonryInfiniteGrid.stories";

package/stories/1-MasonryInfiniteGrid/1-MasonryInfiniteGrid.stories.ts

@@ -1,27 +0,0 @@
-import MasonryInfiniteGridApp from "./apps/SvelteMasonryInfiniteGridApp.svelte";
-// import RawMasonryInfiniteGridApp from "!!raw-loader!./apps/SvelteMasonryInfiniteGridApp.svelte";
-// import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls";
-// import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils";
-import "../../../../stories/templates/default.css";
-
-
-export const MasonryInfiniteGridTemplate = (props) => ({
-  Component: MasonryInfiniteGridApp,
-  props,
-});
-
-MasonryInfiniteGridTemplate.storyName = "MasonryInfiniteGrid";
-// MasonryInfiniteGridTemplate.argTypes = MASONRY_GRID_CONTROLS;
-// MasonryInfiniteGridTemplate.args = {
-//   ...makeArgs(MasonryInfiniteGridTemplate.argTypes),
-// };
-
-// MasonryInfiniteGridTemplate.parameters = {
-//   preview: [
-//     {
-//       tab: "Svelte",
-//       template: convertSvelteTemplate(convertPath(RawMasonryInfiniteGridApp, "src", "@egjs/svelte-grid")),
-//       language: "html",
-//     },
-//   ],
-// };

package/stories/1-MasonryInfiniteGrid/apps/SvelteMasonryInfiniteGridApp.svelte

@@ -1,42 +0,0 @@
-<script>
-  import { MasonryInfiniteGrid } from "../../../src";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<MasonryInfiniteGrid
-  class="container"
-  gap={5}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    items = [...items, ...getItems(nextGroupKey, 10)];
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    <div class="item">
-      <div class="thumbnail">
-        <img
-          src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-            (item.key % 33) + 1
-          }.jpg`}
-          alt="egjs"
-        />
-      </div>
-      <div class="info">{`egjs ${item.key}`}</div>
-    </div>
-  {/each}
-</MasonryInfiniteGrid>

package/stories/2-JustifiedInfiniteGrid/0-JustifiedInfiniteGrid.stories.ts

@@ -1,5 +0,0 @@
-export default {
-  title: "Examples/JustifiedInfiniteGrid",
-};
-export * from "./1-JustifiedInfiniteGrid.stories";
-

package/stories/2-JustifiedInfiniteGrid/1-JustifiedInfiniteGrid.stories.ts

@@ -1,10 +0,0 @@
-import JustifiedInfiniteGridApp from "./apps/SvelteJustifiedInfiniteGridApp.svelte";
-import "../../../../stories/templates/default.css";
-
-
-export const JustifiedInfiniteGridTemplate = (props) => ({
-  Component: JustifiedInfiniteGridApp,
-  props,
-});
-
-JustifiedInfiniteGridTemplate.storyName = "JustifiedInfiniteGrid";

package/stories/2-JustifiedInfiniteGrid/apps/SvelteJustifiedInfiniteGridApp.svelte

@@ -1,43 +0,0 @@
-<script>
-  import { JustifiedInfiniteGrid } from "../../../src";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<JustifiedInfiniteGrid
-  class="container"
-  gap={5}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    items = [...items, ...getItems(nextGroupKey, 10)];
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    <div class="item">
-      <div class="thumbnail">
-        <img
-          src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-            (item.key % 33) + 1
-          }.jpg`}
-          alt="egjs"
-          data-grid-maintained-target="true"
-        />
-      </div>
-      <div class="info">{`egjs ${item.key}`}</div>
-    </div>
-  {/each}
-</JustifiedInfiniteGrid>

package/stories/3-FrameInfiniteGrid/0-FrameInfiniteGrid.stories.ts

@@ -1,5 +0,0 @@
-export default {
-  title: "Examples/FrameInfiniteGrid",
-};
-export * from "./1-FrameInfiniteGrid.stories";
-

package/stories/3-FrameInfiniteGrid/1-FrameInfiniteGrid.stories.ts

@@ -1,10 +0,0 @@
-import FrameInfiniteGridApp from "./apps/SvelteFrameInfiniteGridApp.svelte";
-import "../../../../stories/templates/default.css";
-
-
-export const FrameInfiniteGridTemplate = (props) => ({
-  Component: FrameInfiniteGridApp,
-  props,
-});
-
-FrameInfiniteGridTemplate.storyName = "FrameInfiniteGrid";

package/stories/3-FrameInfiniteGrid/apps/SvelteFrameInfiniteGridApp.svelte

@@ -1,44 +0,0 @@
-<script>
-  import { FrameInfiniteGrid } from "../../../src";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<FrameInfiniteGrid
-  class="container"
-  gap={5}
-  frame={[
-    [1, 1, 2, 2, 3],
-    [1, 1, 4, 5, 5],
-  ]}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    items = [...items, ...getItems(nextGroupKey, 10)];
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    <div class="item">
-      <img
-        src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-          (item.key % 33) + 1
-        }.jpg`}
-        alt="egjs"
-        style="width: 100%; height: 100%"
-      />
-    </div>
-  {/each}
-</FrameInfiniteGrid>

package/stories/4-PackingInfiniteGrid/0-PackingInfiniteGrid.stories.ts

@@ -1,5 +0,0 @@
-export default {
-  title: "Examples/PackingInfiniteGrid",
-};
-export * from "./1-PackingInfiniteGrid.stories";
-

package/stories/4-PackingInfiniteGrid/1-PackingInfiniteGrid.stories.ts

@@ -1,10 +0,0 @@
-import PackingInfiniteGridApp from "./apps/SveltePackingInfiniteGridApp.svelte";
-import "../../../../stories/templates/default.css";
-
-
-export const PackingInfiniteGridTemplate = (props) => ({
-  Component: PackingInfiniteGridApp,
-  props,
-});
-
-PackingInfiniteGridTemplate.storyName = "PackingInfiniteGrid";

package/stories/4-PackingInfiniteGrid/apps/SveltePackingInfiniteGridApp.svelte

@@ -1,40 +0,0 @@
-<script>
-  import { PackingInfiniteGrid } from "../../../src";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<PackingInfiniteGrid
-  class="container"
-  gap={5}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    items = [...items, ...getItems(nextGroupKey, 10)];
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    <div class="item">
-      <img
-        src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-          (item.key % 33) + 1
-        }.jpg`}
-        alt="egjs"
-        style="width: 100%; height: 100%"
-      />
-    </div>
-  {/each}
-</PackingInfiniteGrid>

package/stories/5-DataLoading/0-DataLoading.stories.ts

@@ -1,7 +0,0 @@
-export default {
-  title: "Examples/Data Loading",
-};
-export * from "./1-WaitNReady.stories";
-export * from "./2-Placeholder.stories";
-export * from "./3-Loading.stories";
-

package/stories/5-DataLoading/1-WaitNReady.stories.ts

@@ -1,10 +0,0 @@
-import WaitNReadyApp from "./apps/SvelteWaitNReadyApp.svelte";
-import "../../../../stories/templates/default.css";
-
-
-export const WaitNReadyTemplate = (props) => ({
-  Component: WaitNReadyApp,
-  props,
-});
-
-WaitNReadyTemplate.storyName = "Wait & Ready";

package/stories/5-DataLoading/2-Placeholder.stories.ts

@@ -1,10 +0,0 @@
-import PlaceholderApp from "./apps/SveltePlaceholderApp.svelte";
-import "../../../../stories/templates/default.css";
-
-
-export const PlaceholderTemplate = (props) => ({
-  Component: PlaceholderApp,
-  props,
-});
-
-PlaceholderTemplate.storyName = "Placeholder";

package/stories/5-DataLoading/3-Loading.stories.ts

@@ -1,10 +0,0 @@
-import LoadingApp from "./apps/SvelteLoadingApp.svelte";
-import "../../../../stories/templates/default.css";
-
-
-export const LoadingTemplate = (props) => ({
-  Component: LoadingApp,
-  props,
-});
-
-LoadingTemplate.storyName = "Loading";

package/stories/5-DataLoading/apps/SvelteLoadingApp.svelte

@@ -1,54 +0,0 @@
-<script>
-  import { ITEM_TYPE } from "@egjs/infinitegrid";
-  import { MasonryInfiniteGrid } from "../../../src";
-import { LoadingTemplate } from "../3-Loading.stories";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<MasonryInfiniteGrid
-  class="container"
-  gap={5}
-  useLoading={true}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    e.wait();
-
-    setTimeout(() => {
-      e.ready();
-      items = [...items, ...getItems(nextGroupKey, 10)];
-    }, 200);
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    {#if item.type === ITEM_TYPE.NORMAL}
-      <div class="item">
-        <div class="thumbnail">
-          <img
-            src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-              (item.key % 33) + 1
-            }.jpg`}
-            alt="egjs"
-          />
-        </div>
-        <div class="info">{`egjs ${item.key}`}</div>
-      </div>
-    {:else if item.type === ITEM_TYPE.LOADING}
-      <div class="loading">Loading...</div>
-    {/if}
-  {/each}
-</MasonryInfiniteGrid>

package/stories/5-DataLoading/apps/SveltePlaceholderApp.svelte

@@ -1,54 +0,0 @@
-<script>
-  import { ITEM_TYPE } from "@egjs/infinitegrid";
-  import { MasonryInfiniteGrid } from "../../../src";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<MasonryInfiniteGrid
-  class="container"
-  gap={5}
-  usePlaceholder={true}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    e.wait();
-    e.currentTarget.appendPlaceholders(10, nextGroupKey);
-
-    setTimeout(() => {
-      e.ready();
-      items = [...items, ...getItems(nextGroupKey, 10)];
-    }, 200);
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    {#if item.type === ITEM_TYPE.NORMAL}
-      <div class="item">
-        <div class="thumbnail">
-          <img
-            src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-              (item.key % 33) + 1
-            }.jpg`}
-            alt="egjs"
-          />
-        </div>
-        <div class="info">{`egjs ${item.key}`}</div>
-      </div>
-    {:else if item.type === ITEM_TYPE.VIRTUAL}
-      <div class="placeholder" />
-    {/if}
-  {/each}
-</MasonryInfiniteGrid>

package/stories/5-DataLoading/apps/SvelteWaitNReadyApp.svelte

@@ -1,47 +0,0 @@
-<script>
-  import { MasonryInfiniteGrid } from "../../../src";
-
-  let items = getItems(0, 10);
-
-  function getItems(nextGroupKey, count) {
-    const nextItems = [];
-
-    for (let i = 0; i < count; ++i) {
-      const nextKey = nextGroupKey * count + i;
-
-      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
-    }
-    return nextItems;
-  }
-</script>
-
-<MasonryInfiniteGrid
-  class="container"
-  gap={5}
-  {items}
-  on:requestAppend={({ detail: e }) => {
-    const nextGroupKey = (+e.groupKey || 0) + 1;
-
-    e.wait();
-
-    setTimeout(() => {
-      e.ready();
-      items = [...items, ...getItems(nextGroupKey, 10)];;
-    }, 1000);
-  }}
-  let:visibleItems
->
-  {#each visibleItems as item (item.key)}
-    <div class="item">
-      <div class="thumbnail">
-        <img
-          src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
-            (item.key % 33) + 1
-          }.jpg`}
-          alt="egjs"
-        />
-      </div>
-      <div class="info">{`egjs ${item.key}`}</div>
-    </div>
-  {/each}
-</MasonryInfiniteGrid>

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*", "./global.d.ts", "stories/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}