Svelte: Feature request: Call JSON.stringify before displaying objects

[daveroberts]

<script>
  let arr = [{"name": "Alice"},{"name":"Bob"}]
</script>
{arr}

will display

[object Object],[object Object]

Instead, it would be very helpful for debugging if it displayed the output of JSON.stringify:

[{"name": "Alice"},{"name":"Bob"}]

[Conduitry]

Svelte can't generally tell at compile time whether something is an array/POJO/etc. Adding this would introduce an additional runtime cost for everyone, as the component would need to check the type of each thing it's displaying. (Not to mention it being a breaking change, if someone were for example relying on the current way that arrays are stringified.)

You can access globals directly from the template as well though, so you could just use something like {JSON.stringify(arr)} if you know you want to be displaying the stringified version of something.

[daveroberts]

I expect there would be a runtime hit. Perhaps only in debug mode. Sorry to hear this won't be considered, it's a great feature in other frameworks

[Rich-Harris]

We definitely don't want behaviour to differ between dev and prod in a significant way like that, because it would result in broken apps in production 😀 It's always better to be predictable and explicit than to save a few keystrokes

[daveroberts]

We definitely don't want behaviour to differ between dev and prod in a significant way like that, because it would result in broken apps in production

I certainly understand and agree with this. Thanks for the consideration.

[kylecordes]

How about a bit of template syntax which means "print a JSON string instead, using a cycle-safe and stable JSON printer rather than the lousy one built in to JS" ? As a compiler feature, it would cost nothing for programs that don't use it.

[marceloadsj]

Maybe build something like the @html expression:
{@json myObject}

What do you think?

[thgh]

I'm writing {JSON.stringify(list, null, 2)} quite often. A shorthand would definitely save time here. How about {@json list} or {@list}?

[sanderhahn]

You could configure your editor with a snippet (in VSCode):

    "Insert json stringify": {
        "prefix": "json",
        "body": "JSON.stringify($1$TM_SELECTED_TEXT, null, 2)"
    }

https://code.visualstudio.com/docs/editor/userdefinedsnippets

[ftonato]

You always can create a component like this one - https://www.npmjs.com/package/svelte-debugger

<Debugger
  data={example}
  indent={2}
  colorOptions={{ falseColor: '#ff3e00', trueColor: '#40b3ff' }}
/>

[FSou1]

@ftonato I tried to use the Debugger component with a binding mechanism but it seems like the output is static. Is there a chance to keep it consistent (e.g. reevaluate the component output based on input changes updates)?

[ftonato]

@ftonato I tried to use the Debugger component with a binding mechanism but it seems like the output is static. Is there a chance to keep it consistent (e.g. reevaluate the component output based on input changes updates)?

Hello master,
Thanks for sharing, this should already be working, I will open an issue, and I will notify you when it is ready, can you provide an example to reproduce the problem? it will be great!