svelte-grid

svelte-grid copied to clipboard

Used 'yarn add svelte-grid -W' instead of npm command. "svelte-grid": "^5.1.1" is added under dependencies in my package.json file. Node module is also updated. Found svelte-grid folder inside node module. Tried to follow the example given with 'https://svelte-grid.vercel.app/usage' Following import statements are used for creating grid items.

import Grid from "svelte-grid"; import gridHelp from "svelte-grid/build/helper/index.mjs";

But I got 'Cannot find module 'svelte-grid' or its corresponding type declarations.ts(2307)' with the import statements. How to resolve this?

Well, i created a Svelte TypeScript project from scratch, with these following commands

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

yarn add svelte-grid -W
yarn dev

i do not know if this is the right way to create a svelte/ts project. (Generally i have never tried to use svelte with ts)

It is also may be related to https://github.com/vaheqelyan/svelte-grid/issues/101

it would be great if you provide a minimal repo.

1. just create a js file named e.g. svelte-grid.js

import Grid from "svelte-grid";
import gridHelp from "svelte-grid/build/helper/index.mjs";


export { Grid, gridHelp }

2. include svelte-grid.js in my typescript file

<script lang="ts">
  import { Grid, gridHelp } from "$lib/js/svelte-grid";

  const id = () => "_" + Math.random().toString(36).substr(2, 9);

  let items = [
    {
      6: gridHelp.item({
        x: 0,
        y: 0,
        w: 2,
        h: 2,
      }),
      id: id(),
    },

    {
      6: gridHelp.item({
        x: 2,
        y: 0,
        w: 2,
        h: 2,
      }),
      id: id(),
    },
  ];

  const cols = [[1200, 6]];
</script>

<div class="demo-container">
  <Grid bind:items rowHeight={100} let:item let:dataItem {cols}>
    <div class="demo-widget">{dataItem.id}</div>
  </Grid>
</div>

Incomplete type definitions for the library that I've come up with:

declare module "svelte-grid" {
  import type { SvelteComponentTyped } from "svelte";

  export interface Size {
    w: number;
    h: number;
  }

  export interface Positon {
    x: number;
    y: number;
  }

  interface ItemLayout extends Size, Positon {
    fixed?: boolean;
    resizable?: boolean;
    draggable?: boolean;
    customDragger?: boolean;
    customResizer?: boolean;
    min?: Size;
    max?: Size;
  }

  export type Item<T> = T & { [width: number]: ItemLayout };
  export type FilledItem<T> = T & { [width: number]: Required<ItemLayout> };

  export interface Props<T> {
    fillSpace?: boolean;
    items: FilledItem<T>[];
    rowHeight: number;
    cols: [number, number][];
    gap?: [number, number];
    fastStart?: boolean;
    throttleUpdate?: number;
    throttleResize?: number;

    scroller?: undefined;
    sensor?: number;
  }

  export interface Slots<T> {
    default: { item: ItemLayout, dataItem: Item<T> };
  }

  export default class Grid<T = {}> extends SvelteComponentTyped<Props<T>, {}, Slots<T>> {}
}

declare module "svelte-grid/build/helper/index.mjs" {
  import { ItemLayout } from "svelte-grid";

  const x: {
    normalize(items: any[], col: any): unknown[],
    adjust(items: any[], col: any): unknown[],
    findSpace(item: any, items: any, cols: any): unknown,

    item<T>(obj: ItemLayout): Required<ItemLayout>,
  };

  export default x;
}

Incomplete type definitions for the library that I've come up with:

declare module "svelte-grid" {
  import type { SvelteComponentTyped } from "svelte";

  export interface Size {
    w: number;
    h: number;
  }

  export interface Positon {
    x: number;
    y: number;
  }

  interface ItemLayout extends Size, Positon {
    fixed?: boolean;
    resizable?: boolean;
    draggable?: boolean;
    customDragger?: boolean;
    customResizer?: boolean;
    min?: Size;
    max?: Size;
  }

  export type Item<T> = T & { [width: number]: ItemLayout };
  export type FilledItem<T> = T & { [width: number]: Required<ItemLayout> };

  export interface Props<T> {
    fillSpace?: boolean;
    items: FilledItem<T>[];
    rowHeight: number;
    cols: [number, number][];
    gap?: [number, number];
    fastStart?: boolean;
    throttleUpdate?: number;
    throttleResize?: number;

    scroller?: undefined;
    sensor?: number;
  }

  export interface Slots<T> {
    default: { item: ItemLayout, dataItem: Item<T> };
  }

  export default class Grid<T = {}> extends SvelteComponentTyped<Props<T>, {}, Slots<T>> {}
}

declare module "svelte-grid/build/helper/index.mjs" {
  import { ItemLayout } from "svelte-grid";

  const x: {
    normalize(items: any[], col: any): unknown[],
    adjust(items: any[], col: any): unknown[],
    findSpace(item: any, items: any, cols: any): unknown,

    item<T>(obj: ItemLayout): Required<ItemLayout>,
  };

  export default x;
}

Would be nice if this was published to npm as @types/svelte-grid.