VSCode typescript complains when defining `<script client:load>`

icehaunter commented 2 years ago

[x] I have read the troubleshooting section before opening an issue.
[x] I have tried upgrading iles and vite.

Description 📖

Usage of <script client:load lang="ts"> in a Vue component displays an error in VSCode under Volar if there is no other script block. When adding such a snippet, it immediately does two things: loses all highlights of components and stuff like $frontmatter, and complains about lack of export under --isolatedModules. Removing --isolatedModules helps, however Volar will still complain about references to $frontmatter. Adding <script setup lang="ts"></script> solves the issue.

I'm not sure this is fixable, so I think this should be referenced in the docs, since the "minimal example" provided there won't work out of the box.

Reproduction 🐞

Initialize the repo using pnpm create iles@next
Open the codebase in VS Code using the Volar extension

Add the following snippet to ./src/components/Welcome.vue

<script client:only lang="ts">
console.log("test")
</script>

Observe the red squiggles

Dependencies Info

_Run `npx iles info` and `pnpm list` (or `npm list`) and provide the output:_ ``` iles v0.8.3 vite v3.0.9 devDependencies: iles 0.8.3 typescript 4.7.4 vue-tsc 0.38.9 ```

Screenshots 📷

If used without lang="ts":

If used with lang="ts": and

ElMassimo commented 2 years ago

Hi Ilia!

As in the examples of the Client Scripts section, you should always use lang="ts" for client scripts.

The empty export warning can be fixed by disabling isolatedModules in tsconfig.json, or by providing an export, such as:

export function onLoad () {
  console.log('Now visible')
}

The $frontmatter warning is related with the global properties not being registered in TypeScript.

Check that you are including the types for iles in tsconfig.json, or referencing them in an .d.ts file that is included:

/// <reference types="iles" />

ElMassimo commented 2 years ago

Converting to a discussion so that folks can find this more easily.

ElMassimo / iles