search

marko-js / language-server

Marko autocomplete, intellisense and editor support.
MIT License
38 stars 8 forks source link

Unable to type-check <for/> tag #228

Closed vwong closed 7 months ago

vwong commented 7 months ago

Version

All the latest Markos as of today.

"@marko/run": "^0.3.2",
"@marko/tags-api-preview": "^0.7.2",
"@marko/testing-library": "^6.1.4",
"@marko/type-check": "^1.0.2",
"@marko/vite": "^4.1.1",
"marko": "^5.32.0",

Details

@marko/type-check doesn't seem to like <for/> from the Tags API preview.

I'm trying to use <for by=...> to key for-loops with the Tags API preview. It looks like the code runs, but @marko/type-check complains about it.

Given the following sample component:

<!-- use tags -->
static interface Foo {
  id: string;
}

<let/foos=([] as Foo[])/>
<for|foo| of=foos by=(({ id }: Foo) => id)>
  <div>${foo.id}</div>
</for>

When running @marko/type-check, I get:

src/components/foo.marko:7:19 - error TS2769

   5 |
   6 | <let/foos=([] as Foo[])/>
>  7 | <for|foo| of=foos by=(({ id }: Foo) => id)>
     |                   ^^
No overload matches this call.
The last overload gave the following error.
Argument of type '{ of: Foo[]; by: ({ id }: Foo) => number; renderBody: (foo: Foo) => MarkoReturn<void>; }' is not assignable to parameter of type '({ from?: number | undefined; to: number; step?: number | undefined; } | { in: unknown; } | { of: readonly unknown[] | Iterable<unknown>; }) & { renderBody?: ((foo: Foo) => MarkoReturn<void>) | undefined; }'.
Object literal may only specify known properties, and '"by"' does not exist in type '({ from?: number | undefined; to: number; step?: number | undefined; } | { in: unknown; } | { of: readonly unknown[] | Iterable<unknown>; }) & { renderBody?: ((foo: Foo) => MarkoReturn<void>) | undefined; }'.
   8 |   <div>${foo.id}</div>
   9 | </for>
  10 |

node_modules/@marko/language-tools/marko.internal.d.ts:194:23 - error TS2771

  192 |       }): ReturnAndScope<RenderBodyScope<RenderBody>, void>;
  193 |
> 194 |       export function forTag<RenderBody extends AnyMarkoBody>(
      |                       ^^^^^^ The last overload is declared here.
  195 |         input: (
  196 |           | {
  197 |               from?: number;

It looks like it is trying to apply type-checking for the Class API syntax instead.

Out of curiosity, I also tried using key

<for|foo| of=foos>
  <div key=foo.id>
    ${foo.id}
  </div>
</for>

But I rightfully get an error that I cannot mix Class API and Tags APIs.

Your Environment

Node 20.8.1, Mac OS 13.6.2

vwong commented 7 months ago

Thanks! This works great.