Variables created with Pug/Svelte mixin +each are not recognized by Typescript

[braindefender]

Problem

Variables created with Pug/Svelte mixin (i.e. +each('links as link')) are not recognized by Typescript analyzer
and cause "Cannot find name 'link'. Did you mean 'links'?" error.

Example code:

<template lang="pug">
ul.nav
  +each('links as link')
    li(class:active="{ link.active }")
      a(href!="{ link.link }") { link.title }
</template>

<script lang="ts">
interface Link {
  active: boolean 
  link: string
  title: string
}

let links: Link[] = [
  { active: false, link: '#', title: 'Test Link 1' }, 
  { active: false, link: '#', title: 'Test Link 2' }, 
  { active: false, link: '#', title: 'Test Link 3' }, 
]
</script>

Context

Editor: VS Code or NVim
Used preprocessors: Typescript, Pug, Sass.
svelte-preprocess version: 4.0.9

[dummdidumm]

If your build is running fine, then this is actually a problem with the language service not preprocessing the template before running type checks. See this issue for more info.

[bdombro]

@dummdidumm so is there a path forward right now, or is the status = WIP?

[dummdidumm]

There are two things that make this hard to implement.
The first thing is that preprocessing can be asynchronous, but we need it to be synchronous - we somehow have to work around that. We don't have a good solution to this yet. Related: sveltejs/language-tools#339
The other thing is that the results in case of an error will likely be suboptimal, because pug does not provide source maps, so the line numbers will be all wrong. There seems to be a npm package that does this, since it's not part of pug itself, it may be cumbersome to integrate.

[braebo]

Has there been any update on this issue?

[fedorovvvv]

Hi, it's been a year) The problem is not solved?🥲

[magdasmircea]

this issue still persists