marko-type-check errors on attribute tags

[AngusMorton]

Version

Using the latest versions for everything:

"marko": "^5.32.2"
"@marko/run": "^0.4.0",
"@marko/type-check": "^1.0.7",
"typescript": "^5.3.3"

// tsconfig.json
{
    "compilerOptions": {
      "strict": true,
      "target": "es6",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "resolveJsonModule": true,
      "lib": ["es2018", "dom"]
    },
    "include": ["src/**/*", ".marko-run/**/*"]
}

Details

@marko/type-check is throwing an error at each of attr tags of the <await> tag.

For example, using the example from the <await> docs here,

$ const personPromise: Promise<{ name: string }> = new Promise(
    (resolve, reject) => {
        setTimeout(() => resolve({ name: "Frank" }), 1000);
    },
);

<await(personPromise) client-reorder>
    <@placeholder>
        <label>
            Loading…
            <progress/>
        </label>
    </@placeholder>

    <@then|person|>
        <p>Hello ${person.name}</p>
        <div>
            <button>Next</button>
        </div>
    </@then>

    <@catch|err: unknown|>
        error: ${err}
    </@catch>
</await>

Full marko-type-check output:

> zero-config-example@0.0.1 build
> marko-type-check && marko-run build

src\routes\+page.marko - error TS1323
Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

src\routes\+page.marko:20:8 - error TS2353

  18 |
  19 |     <await(personPromise) client-reorder=true>
> 20 |       <@placeholder>
     |        ^^^^^^^^^^^^ Object literal may only specify known properties, and '[/*@placeholder*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[], void>; }'.
  21 |         <!-- Displays while promise is pending -->
  22 |         <label>
  23 |           Loading…

node_modules\marko\src\core-tags\core\await\index.d.marko:5:3 - message TS6500

  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
> 5 |   placeholder?: { renderBody: Marko.Body };
    |   ^^^^^^^^^^^ The expected type comes from property 'placeholder' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;
  8 |   timeout?: number;

src\routes\+page.marko:28:8 - error TS2353

  26 |       </@placeholder>
  27 |
> 28 |       <@then|person|>
     |        ^^^^^ Object literal may only specify known properties, and '[/*@then*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[{ name: string; }], void>; }'.
  29 |         <!-- Displays if promise resolves -->
  30 |         <p>Hello ${person.name}</p>
  31 |         <div>

node_modules\marko\src\core-tags\core\await\index.d.marko:3:3 - message TS6500

  1 | export interface Input<T> {
  2 |   value: readonly [T];
> 3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
    |   ^^^^ The expected type comes from property 'then' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;

src\routes\+page.marko:37:11 - error TS18046

  35 |
  36 |       <@catch|err|>
> 37 |         ${err.name} error: ${err.message}
     |           ^^^ 'err' is of type 'unknown'.
  38 |       </@catch>
  39 |     </await>
  40 |   </body>

src\routes\+page.marko:37:30 - error TS18046

  35 |
  36 |       <@catch|err|>
> 37 |         ${err.name} error: ${err.message}
     |                              ^^^ 'err' is of type 'unknown'.
  38 |       </@catch>
  39 |     </await>
  40 |   </body>

src\routes\+page.marko:36:8 - error TS2353

  34 |       </@then>
  35 |
> 36 |       <@catch|err|>
     |        ^^^^^^ Object literal may only specify known properties, and '[/*@catch*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[unknown], void>; }'.
  37 |         ${err.name} error: ${err.message}
  38 |       </@catch>
  39 |     </await>

node_modules\marko\src\core-tags\core\await\index.d.marko:4:3 - message TS6500

  2 |   value: readonly [T];
  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
> 4 |   catch?: { renderBody: Marko.Body<[unknown]> };
    |   ^^^^^ The expected type comes from property 'catch' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;

src\routes\components\await-error.marko - error TS1323
Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

src\routes\components\await-error.marko:8:6 - error TS2353

   6 |
   7 | <await(personPromise) client-reorder>
>  8 |     <@placeholder>
     |      ^^^^^^^^^^^^ Object literal may only specify known properties, and '[/*@placeholder*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[], void>; }'.
   9 |         <label>
  10 |             Loading…
  11 |             <progress/>

node_modules\marko\src\core-tags\core\await\index.d.marko:5:3 - message TS6500

  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
> 5 |   placeholder?: { renderBody: Marko.Body };
    |   ^^^^^^^^^^^ The expected type comes from property 'placeholder' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;
  8 |   timeout?: number;

src\routes\components\await-error.marko:15:6 - error TS2353

  13 |     </@placeholder>
  14 |
> 15 |     <@then|person|>
     |      ^^^^^ Object literal may only specify known properties, and '[/*@then*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[{ name: string; }], void>; }'.
  16 |         <p>Hello ${person.name}</p>
  17 |         <div>
  18 |             <button>Next</button>

node_modules\marko\src\core-tags\core\await\index.d.marko:3:3 - message TS6500

  1 | export interface Input<T> {
  2 |   value: readonly [T];
> 3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
    |   ^^^^ The expected type comes from property 'then' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;

src\routes\components\await-error.marko:22:6 - error TS2353

  20 |     </@then>
  21 |
> 22 |     <@catch|err: unknown|>
     |      ^^^^^^ Object literal may only specify known properties, and '[/*@catch*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[unknown], void>; }'.
  23 |         error: ${err}
  24 |     </@catch>
  25 | </await>

node_modules\marko\src\core-tags\core\await\index.d.marko:4:3 - message TS6500

  2 |   value: readonly [T];
  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
> 4 |   catch?: { renderBody: Marko.Body<[unknown]> };
    |   ^^^^^ The expected type comes from property 'catch' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;

Your Environment

Node 18.18.2, Windows 11

[DylanPiercey]

Should be fixed in latest Marko, thanks!