wallabyjs / console-ninja

Repository for Console Ninja questions and issues
https://console-ninja.com
Other
385 stars 21 forks source link

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

Closed ewildee closed 6 months ago

ewildee commented 6 months ago

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, https://github.com/sveltejs/svelte/pull/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:

ArtemGovorov commented 6 months ago

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.