Import not working with svelte-typescript

[AnanduSuresh]

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?

[vaheqelyan]

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.

[conanchen]

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>

{dataItem.id}

[m93a]

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;
}

[rmkane]

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.

[chinmay-inaza]

In which file should I add this code? Is this issue fixed? I am still not able to import the library in my project.

I am getting this error message: Cannot find module 'svelte-grid@latest' or its corresponding type declarations.ts(2307)