Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v-text directive does not work after SSR if another custom directive is applied to the same element #12309

Open
mefcorvi opened this issue Nov 1, 2024 · 1 comment · May be fixed by #12311
Open

v-text directive does not work after SSR if another custom directive is applied to the same element #12309

mefcorvi opened this issue Nov 1, 2024 · 1 comment · May be fixed by #12311
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. regression scope: ssr

Comments

@mefcorvi
Copy link
Contributor

mefcorvi commented Nov 1, 2024 •
edited
Loading

Vue version

Introduced in 3.4.36. Works fine in 3.4.35.

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9kU9LAzEQxb/KmEsV2l1KxUPZFlQK1YOKCl4CUrbT3dRsEpLZtVD2uzvZpX8O0kAOmfeS+b3MXtw7lzQ1iqnIQu6VIwhItZtLoypnPcEePG6ghY23FQzYOpBGmtyaQFCFAmZRvx4sUWsLX9br9dXg5mRplqooNW9i516aVpos7TtxDz4QVk6vCPkEkJVjaEbl8UozItzRTAruJMU8S8tx71PG1VGu7Br1QYeUxSw9e1EMBQUG2agi2QZrOCYzAEiR28opjf7VkWJQKaaRDnhJseIov89djXyNw0M9LzH/+ae+DbtYk+LNY0DfoBRHjVa+QOrlxccLpzkTmb7W7L4gvmOwuo6Mve2hNmvGPvN1tE/dsJQpPsNiR2jCIVQEjc6280vBA3y8EP2EO0luu3s8Mv7F7wZ9fJM/kIVkcifaPxRnvOg=

Steps to reproduce

  1. Define a custom directive, even an empty one without any handlers.
  2. In the page template, create a div with both v-text and the custom directive applied.
  3. Open the page in SSR mode.

What is expected?

The text set by the v-text directive is displayed.

What is actually happening?

The text does not appear. No errors are logged.

System Info

No response

Any additional comments?

If SSR mode is disabled, everything works as expected. v-html directive works fine in both modes.

Related to 79602f9 #8112
@mefcorvi
Copy link
Contributor Author

mefcorvi commented Nov 1, 2024 •
edited
Loading

Currently, in the case with the custom directive, this branch is triggered, adding an entry to rawChildrenMap:

core/packages/compiler-ssr/src/transforms/ssrTransformElement.ts

Lines 166 to 185 in 664d2e5

} else if (directives.length && !node.children.length) {
const tempId = `_temp${context.temps++}`
propsExp.arguments = [
createAssignmentExpression(
createSimpleExpression(tempId, false),
mergedProps,
),
]
rawChildrenMap.set(
node,
createConditionalExpression(
createSimpleExpression(`"textContent" in ${tempId}`, false),
createCallExpression(context.helper(SSR_INTERPOLATE), [
createSimpleExpression(`${tempId}.textContent`, false),
]),
createSimpleExpression(`${tempId}.innerHTML ?? ''`, false),
false,
),
)
}

The v-html directive works correctly because it overrides the entry in rawChildrenMap, whereas v-text only updates the children property of the node.

core/packages/compiler-ssr/src/transforms/ssrTransformElement.ts

Lines 210 to 217 in 664d2e5

if (prop.name === 'html' && prop.exp) {
rawChildrenMap.set(
node,
createCompoundExpression([`(`, prop.exp, `) ?? ''`]),
)
} else if (prop.name === 'text' && prop.exp) {
node.children = [createInterpolation(prop.exp, prop.loc)]
} else if (prop.name === 'slot') {

mefcorvi added a commit to mefcorvi/vue-core that referenced this issue Nov 1, 2024
@mefcorvi
fix(ssr): ensure v-text updates correctly with custom directives in S…
7fa537c 
…SR output

close vuejs#12309
@mefcorvi mefcorvi linked a pull request Nov 1, 2024 that will close this issue
Open
@edison1105 edison1105 added scope: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. regression labels Nov 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. regression scope: ssr
Projects
None yet
Milestone
No milestone
2 participants
@mefcorvi @edison1105