Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: Support Svelte 5 snippets and native TypeScript #300

Closed
ewildee opened this issue May 7, 2024 · 1 comment
Closed

[Feature]: Support Svelte 5 snippets and native TypeScript #300

ewildee opened this issue May 7, 2024 · 1 comment

Comments

@ewildee
Copy link

ewildee commented May 7, 2024

Describe the feature you'd like.

Currently, it seems that Svelte 5 is partially supported and console.log(...) works as long as a component does not use any snippets ({#snippet mySnippet()}...{/snippet} + {@render mySnippet()}) or 'native' TypeScript within the markup (supported since Svelte 5.0.0-next.9, sveltejs/svelte#9482). Whenever one appears within a .svelte file, Console Ninja no longer injects any logging functions into the code generated by Vite (noticeable when saving a file with and without a snippet and looking at the HMR code sent to the browser).

This works:

<svelte:options runes={true} />

<script lang="ts">
  console.log('hello log output'); // <-- Output appears in VSCode
  const items = [{ name: 'world' }];
</script>

<h1>Hello</h1>

<input type="text" bind:value={items[0].name} />

This does not work; I added an exclamation mark to the last line to make the TypeScript linter happy. The page renders correctly in the browser, but Console Ninja no longer injects nor logs anything within this file:

<svelte:options runes={true} />

<script lang="ts">
  console.log('hello log output'); // <-- Output does not appear in VSCode
  const items = [{ name: 'world' }];
</script>

<h1>Hello</h1>

<!-- Added `!` after `items[0]` to suppress the 'Object is possibly undefined' error -->
<input type="text" bind:value={items[0]!.name} />

Neither does this; A simple snippet:

<svelte:options runes={true} />

<script lang="ts">
  console.log('hello'); // <-- Output does not appear in VSCode
</script>

<h1>Hello</h1>

{#snippet hello(name)}
  Hello {name}
{/snippet}

{@render hello('Etienne')}

Nor this; an (unnecessary) type cast within the markup:

<svelte:options runes={true} />

<script lang="ts">
  console.log('hello'); // <-- Output does not appear in VSCode
</script>

<h1>Hello</h1>

<!-- TypeScript type cast -->
<input type="text" value={"hello world" as string} />

I'm running:

  • VSCode 1.89.0
  • Console Ninja 1.0.319
  • TypeScript 5.4.5
  • Vite 5.2.11
  • Svelte 5.0.0-next.123
  • SvelteKit 2.5.7
@ArtemGovorov
Copy link
Member

Thanks for providing the detailed issue report. We have added Svelte 5 support (including the listed scenarios) and have released it in v1.0.321.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants