Sveltekit console log in component not working

[smblee]

Hello - for sveltekit, seems like console.log doesn't work in components (.svelte files).

I have tried regular syntax (console.log($data)), reactive statement ($: console.log($data)), and within a click handler (<button on:click={...}>hi</button>).

The behavior is... upon server start, the log will show up, but after that, none of the changes or refreshes will be detected. The browser console does show the logs with a randomized string following it.

But I noticed It does work pretty well within SSR (+page.ts).

some trace logs

info buildHook-10970 allowed tools: vite, jest, webpack, next.js, cypress, http-server, serve, nuxt, hydrogen, live-server, live-preview
info buildHook-10970 running tools: vite
info buildHook-10970 file processed (stat): 0 log points, error handler: true
info buildHook-10970 file processed (stat): 1 log points, error handler: false
info buildHook-10970 file processed (sync): 1 log points, error handler: false
info buildHook-10970 file processed (sync): 0 log points, error handler: false
info buildHook-10970 file processed (stat): 1 log points, error handler: false

[ArtemGovorov]

We've just tried in a freshly generated SvelteKit app (with header and counter components), and everything seems to be working as expected:

Mind creating a sample repo demonstrating the issue or sharing your package.json and some source code files so we can create one from the freshly generated SvelteKit app?

[smcenlly]

Closing this issue as we haven't heard back. If you're still having problems, please ensure you are using the latest version and then provide the details requested above.

[ewildee]

First of all, thank you very much for another great tool!

Inlay hints in .svelte files work correctly indeed, both with console.log and breakpoints. However, the tooltip/hover containing the complete output does not appear. The hover functionality does work in other (ts/js) files in the same project.

When I change the Language Mode from Svelte to TypeScript, the hover does appear (in the .svelte file). It doesn't matter whether the Svelte plugin is activated. Perhaps the plugin does not register a hover provider for the 'svelte' language?

The hover also isn't shown when in CoffeeScript or plain text mode. However, it does work (as expected) in TS/JS TSX, HTML and Vue mode - even despite not having the Vue plugin installed.

[smcenlly]

Thanks for letting us know about the hovers and commands not displaying in .svelte files. This has been fixed in the latest version of Console Ninja, v.0.0.79.

[ewildee]

@smcenlly Thanks for the quick resolution; it works like a charm!

Logging a variable with an inline breakpoint directly from within the HTML-ish syntax doesn't work yet. The readme says that the Logpoint feature is compatible with JSX syntax, but it probably doesn't work with precompiled code like the one Svelte generates?

As a workaround, I use a simple tap function that calls console.log for every passing value. This works fine, but displaying the log output on the original line would be very valuable, especially when logging multiple values (and to avoid the additional boilerplate code).

<script lang="ts">
  const tap = <T>(cb?: (a: T) => void) => <A extends T>(a: A): A => (cb?.(a), a);

  const greeting = 'good morning';
  const tapValue = tap(v => console.log(v)); // displays: `good morning`
</script>

<div>Hi and {tapValue(greeting)}</div>

I guess that Ninja can't determine the new breakpoint location after Svelte has compiled the markup code into JavaScript? The code below is the (simplified) compiled output from the greeting example above. I've also tried using a component written in JS (instead of TypeScript) to check if the generated sourcemap caused a problem, which it doesn't seem to. Is there anything I can do to help?

// ...
function create_fragment(ctx) {
    let div;
    return {
        c() {
            div = element("div");
            div.textContent = `Hi and ${greeting}`;
        },
        m(target, anchor) {
            insert(target, div, anchor);
        },
        p: noop,
        i: noop,
        o: noop,
        d(detaching) {
            if (detaching) detach(div);
        }
    };
}
const greeting = 'good morning';
//...

[smcenlly]

While it may look like valid JSX, it's not actually JSX...

We've added a new issue to track adding support for Template Syntax parts of svelte files: https://github.com/wallabyjs/console-ninja/issues/109

[SadWood]

The same situation exists in vuejs v3, which also does not work in jsx-enabled components

[smcenlly]

@SadWood - could you please create a new feature request to add support for VueJS v3 JSX-enabled components and provide a sample repo that has an example of it not working?

[SadWood]

@SadWood - could you please create a new feature request to add support for VueJS v3 JSX-enabled components and provide a sample repo that has an example of it not working?

yes,look this https://github.com/SadWood/vue3-tsx-ninja

[ArtemGovorov]

@SadWood Thanks for providing the repo. The issue is fixed and the fix is published in v1.0.121+ of the extension.

[NikGovorov]

@SadWood, @ewildee We have recently implemented logpoint support in Vue and Svelte templates.