[FR] Support console in the template

[wenfangdu]

What problem does this feature solve?

I don't understand, why console can't be used in the template since Vue 2, it makes template debugging much more complicated than it needs to be, Svelte supports console in the template out of the box, can Vue be more user friendly in this regard?

What does the proposed API look like?

<template>
  <!-- just works, no more `console` doesn't exist -->
  <button @click="console.log">Log</button>
</template>

If we want to discourage console usage in the templates, it can be achieved using eslint lint rules, but not usable at all is a complete overkill.

[sxzz]

Console API is not a built-in JavaScript API and I think the most important is that it has side effects. It will be executed multiple times when re-rendering, so it's not suitable to use it in <template>.

[wenfangdu]

@sxzz Does Svelte have the same issue?

It will be executed multiple times when re-rendering

console in the template is meant for debugging purposes, I don't see a huge negative impact if it's triggered on every render.

If the template console use case is legit and frequent, I think it makes sense to allow it in the template, besides we can always disallow them in production code through eslint rules.

[edison1105]

see #3450 (comment)
another PR #6508

[wenfangdu]

One of the first things we do when we encounter bugs is to console log the errors, also, the first thing in programming that we learn is to print something. It's just ridiculous such a fundamental thing can't used be in the template, we do console log in JSX and in the Svelte template all the time, and it doesn't hurt anybody. If the template is deliberately made so limited, no wonder some JSX fans call it a toy.

[smallnine9]

But I want know does console work in render() function? like
h('div', {onClik: console.log('hi')}, 'hi')

[smallnine9]

But I want know does console work in render() function? like h('div', {onClik: console.log('hi')}, 'hi')

yes it can, but it should be () => console.log('hi'),
so, it's just a have or not have feature for compiler

[wenfangdu]

Console API is not a built-in JavaScript API and I think the most important is that it has side effects. It will be executed multiple times when re-rendering, so it's not suitable to use it in <template>.

@sxzz If we want to discourage console usage in the templates, it can be achieved using eslint lint rules, maybe even turned on by default, but not usable at all is an overkill.

[yyx990803]

The template global whitelist has always only included language-level globals (as defined in ECMA-262). When Vue was initially created, console was also not standardized in anyway, and isn't even guaranteed to be present in some environments. This is the reason why console was not included by default.

However, there is now an actual spec for it, and it seems all major JS runtimes do implement console the same way nowadays, so we can consider adding it as a special case for the concrete DX improvement.

[wenfangdu]

@yyx990803 Evan, can we add console support in the template in v3.3? Here's the PR.