Sveltekit/TS: "class" property does not exist on type MasonryInfiniteGridOptions?

[nimmolo]

Description

TS/eslint seems to be complaining that the class attribute on the MasonryInfiniteGrid component is not valid? It's maybe not a big deal but the type might not be defined correctly. Error message:

Type '{ class: string; gap: number; items: any[]; }' is not assignable to type 'IntrinsicAttributes & MasonryInfiniteGridOptions'.
  Property 'class' does not exist on type 'IntrinsicAttributes & MasonryInfiniteGridOptions'.ts(2322)

Steps to check or reproduce

I'm using class like this:

  <MasonryInfiniteGrid
    class="grid"
    gap={5}
    {items}
    on:requestAppend={({ detail: e }) => {
      e.wait();
      newEdges = handleNext();
      setTimeout(() => {
        e.ready();
        items = [...items, ...newEdges];
      }, 1000);
    }}
    let:visibleItems
  >

[daybrush]

@nimmolo

Test @egjs/svelte-infinitegrid@4.1.2-beta.2 version.

Thank you :)

[nimmolo]

Thank you @daybrush -- That cleared up the error on class attribute.

Now with version 4.1.2-beta.2 i'm getting a minor type error on <MasonryInfiniteGrid> itself 🤔

(alias) class MasonryInfiniteGrid
import MasonryInfiniteGrid
Type '{ class: string; gap: number; items: any[]; itemBy: (item: any) => any; }' is not assignable to type 'IntrinsicAttributes & Record<string, any> & SveltInfiniteGridOptions & MasonryInfiniteGridOptions'.
  Property 'status' is missing in type '{ class: string; gap: number; items: any[]; itemBy: (item: any) => any; }' but required in type 'SveltInfiniteGridOptions'.ts(2322)

It appears I also need to set the status attribute -- maybe that should be optional? If i add status={false} it stops complaining, and there are no type errors

[nimmolo]

One more TS note, while you are working on types @daybrush - I know it is a separate issue, i am happy to open separate issue but maybe this is more convenient here.

For debugging I tried using let ig;, <MasonryInfiniteGrid bind:this={ig}> and onMount(() => { console.log(ig.getItems()); });, but this returns an error: Uncaught (in promise) TypeError: ig is undefined.

Am I declaring the variable ig incorrectly?

[daybrush]

@nimmolo

1. Oh Sorry. Try 4.1.3-beta.3 version.
2. I don't know why it's undefined. In my demo code onMount, it works well. Either element or component must be applied through bind:this.

[nimmolo]

Hi - thanks @daybrush

1. I updated to 4.1.2-beta.3 version, still getting the same error (version 4.1.3-beta.3 did not exist)
2. Ok... maybe it's because i'm loading my items async, and onMount is too early

[daybrush]

@nimmolo

Is there a status option problem in 4.1.2-beta.3?

[nimmolo]

@daybrush sorry i should have been specific. There seemed still the status problem after updating to beta.3 last night when I wrote that comment.

But i just restarted VS Code, and the status error is now gone. Thanks