Vue-loader: Feature Request/Suggestion: Provide a builtin-preprocessing tag to trim textcontent

[UncleBill]

current

<template>
    <div class='box'>
        {{content}}
    </div>
</template>

output:

return n("div", {
            staticClass: "box"
        }, [t._v("\n  " + t._s(t.content) + "\n")])

what I want

return n("div", {
            staticClass: "box"
        }, [t._v(t._s(t.content))])

Suggestion

Wrap text content with a tag like <Text></Text>. The tag will be removed at webpack's compile-time.

<template>
    <div class='box'>
        <Text>{{content}}</Text>
    </div>
</template>

loader's configuration:

{
   query: {
      // default option
      textContentTrimmingTag: 'Text'
   }
}

https://github.com/vuejs/vue/issues/3934

[yyx990803]

See my comment - I don't think this will be supported.

[UncleBill]

I did read it before.

It's not a suggestion for vue but for vue-loader. It's kind of preprocessing.

<Text> and </Text> are just marks of textContent's ends.

<!-- #0 -->
<!-- nowadays, produces untrimmed textContent -->
<div>
  {{text}}
  <Child />
  Plain text
</div>

<!-- #1 -->
<!-- more beautiful than #2 -->
<!-- will be transformed into #2, textContent is trimmed! -->
<div>
  <Text>{{text}}</Text>
  <Child />
  <Text> Plain text</Text>
</div>

<!-- #2 -->
<div>{{text}}<Child /> Plain Text</div>

in the sense that it could be "unsafe" - the user may want to ignore whitespaces between tags, but not necessarily trimming all plain text, e.g inside <pre>

If users want to trim text node, they can use the marks, it would be "safe".

Ignoring additional whitespace nodes has a small perf gain, but trimming text doesn't do much in that aspect.

I just want the generated code cleaner. 😆