fix(language-core): camelize props for dynamic component (#3774)

Co-authored-by: Johnson Chu <[email protected]>
vuejs · Dec 5, 2023 · 613da66 · 613da66
1 parent abacb37
commit 613da66
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/language-core/src/generators/template.ts b/packages/language-core/src/generators/template.ts
@@ -1223,6 +1223,8 @@ export function generate(
 		}
 		codes.push(`}, `);
 
+		const canCamelize = !nativeTags.has(node.tag) || node.tagType === CompilerDOM.ElementTypes.COMPONENT;
+
 		for (const prop of props) {
 			if (
 				prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -1258,9 +1260,9 @@ export function generate(
 				let camelized = false;
 
 				if (
-					(!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
+					canCamelize
+					&& (!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
 					&& hyphenateAttr(attrNameText) === attrNameText
-					&& !nativeTags.has(node.tag)
 					&& !vueCompilerOptions.htmlAttributes.some(pattern => minimatch(attrNameText!, pattern))
 				) {
 					attrNameText = camelize(attrNameText);
@@ -1366,8 +1368,8 @@ export function generate(
 				let camelized = false;
 
 				if (
-					hyphenateAttr(prop.name) === prop.name
-					&& !nativeTags.has(node.tag)
+					canCamelize
+					&& hyphenateAttr(prop.name) === prop.name
 					&& !vueCompilerOptions.htmlAttributes.some(pattern => minimatch(attrNameText!, pattern))
 				) {
 					attrNameText = camelize(prop.name);

diff --git a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue
@@ -5,6 +5,7 @@
 			<path stroke="#efefef" :stroke-width="123" :pathLength="10" />
 		</svg>
 		<foo stroke-width="123" />
+		<component :is="Foo" stroke-width="test"></component>
 	</div>
 </template>