fix(compiler-ssr): handle newlines at the beginning of textarea content

[linzhe141]

close #11873

I've learned from React's implementation and applied it here.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	37.7 kB	34 kB
vue.global.prod.js	159 kB	57.6 kB	51.3 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	18.8 kB	17.2 kB
createApp	55.3 kB	21.2 kB	19.4 kB
createSSRApp	59.3 kB	22.9 kB	20.9 kB
defineCustomElement	60 kB	22.8 kB	20.7 kB
overall	69 kB	26.3 kB	23.9 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11874

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11874

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11874

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11874

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11874

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11874

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11874

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11874

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11874

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11874

vue

pnpm add https://pkg.pr.new/vue@11874

commit: 67d0986

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	❌ failure	❌ failure
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	❌ failure	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[yyx990803]

Thanks for looking into this. This PR only affects <textarea> with dynamic binding so it is incomplete. The test happens to pass because when <textarea> is at template root it also gets attribute fallthrough which causes it to go into the branch this PR modifies.

There are a few different aspects of this issue:

1. This behavior (parser eating the first newline) applies to <pre> too.

2. This behavior should be respected in the Vue parser as well - for example, currently the leading newline in <textarea> will result in different render result from native HTML. We previously had a special condition for <pre> in the parser, but not for <textarea>. This is addressed in 3c4bf76.

3. However, only respecting it in the parser or compiler-ssr is not enough to completely fix <textarea> triggers hydration error on whitespace #11873 because (1) there can be more than one newlines at the start of the element and (2) there can be manual render functions. The only complete fix is to detect this at runtime during hydration, as in a5f3c2e.