From d9351d2959a228e4c8fe24aef85103ff564a6bb9 Mon Sep 17 00:00:00 2001 From: Rafal Chlodnicki <rchl2k@gmail.com> Date: Wed, 22 Nov 2023 23:10:39 +0100 Subject: [PATCH 1/4] fix: don't camelize attributes for plain elements --- .../language-core/src/generators/template.ts | 1 + .../vue3_strictTemplate/dataAttributes/main.vue | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue diff --git a/packages/language-core/src/generators/template.ts b/packages/language-core/src/generators/template.ts index 6a069f79a3..e16402436b 100644 --- a/packages/language-core/src/generators/template.ts +++ b/packages/language-core/src/generators/template.ts @@ -1348,6 +1348,7 @@ export function generate( if ( hyphenateAttr(prop.name) === prop.name && !vueCompilerOptions.htmlAttributes.some(pattern => minimatch(attrNameText!, pattern)) + && node.tagType !== CompilerDOM.ElementTypes.ELEMENT ) { attrNameText = camelize(prop.name); camelized = true; diff --git a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue new file mode 100644 index 0000000000..5fd95eed9f --- /dev/null +++ b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue @@ -0,0 +1,16 @@ +<template> + <div> + <svg><path stroke="#efefef" stroke-width="123" /></svg> + <foo stroke-width="123" /> + </div> +</template> + +<script setup lang="ts"> +import { defineComponent } from 'vue'; + +const Foo = defineComponent({ + props: { + strokeWidth: { type: String, required: true }, + } +}); +</script> From 21c3d954761c436511e523f609c8f2951d6e4177 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Ch=C5=82odnicki?= <rchl2k@gmail.com> Date: Tue, 28 Nov 2023 11:32:17 +0100 Subject: [PATCH 2/4] Update test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue Co-authored-by: Ray <i@mk1.io> --- .../vue3_strictTemplate/dataAttributes/main.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue index 5fd95eed9f..6851fc2b4c 100644 --- a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue +++ b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue @@ -1,16 +1,16 @@ <template> - <div> - <svg><path stroke="#efefef" stroke-width="123" /></svg> - <foo stroke-width="123" /> - </div> + <div> + <svg><path stroke="#efefef" stroke-width="123" /></svg> + <foo stroke-width="123" /> + </div> </template> <script setup lang="ts"> import { defineComponent } from 'vue'; const Foo = defineComponent({ - props: { - strokeWidth: { type: String, required: true }, - } + props: { + strokeWidth: { type: String, required: true }, + } }); </script> From 316f34dbdcc2406d71a436f3e42611e135aaa045 Mon Sep 17 00:00:00 2001 From: Rafal Chlodnicki <rafal@squareup.com> Date: Wed, 29 Nov 2023 09:25:25 +0100 Subject: [PATCH 3/4] add case for camelCase Path attribute --- test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue index 6851fc2b4c..4feb7b3752 100644 --- a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue +++ b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue @@ -1,6 +1,6 @@ <template> <div> - <svg><path stroke="#efefef" stroke-width="123" /></svg> + <svg><path stroke="#efefef" stroke-width="123" pathLength="10" /></svg> <foo stroke-width="123" /> </div> </template> From 482d9d25c73598a1320109a37d8ab063d97872c0 Mon Sep 17 00:00:00 2001 From: Johnson Chu <johnsoncodehk@gmail.com> Date: Wed, 29 Nov 2023 16:54:09 +0800 Subject: [PATCH 4/4] handle binding --- packages/language-core/src/generators/template.ts | 3 ++- .../tsc/vue3_strictTemplate/dataAttributes/main.vue | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/language-core/src/generators/template.ts b/packages/language-core/src/generators/template.ts index e16402436b..9e94c49291 100644 --- a/packages/language-core/src/generators/template.ts +++ b/packages/language-core/src/generators/template.ts @@ -1241,6 +1241,7 @@ export function generate( if ( (!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); @@ -1347,8 +1348,8 @@ export function generate( if ( hyphenateAttr(prop.name) === prop.name + && !nativeTags.has(node.tag) && !vueCompilerOptions.htmlAttributes.some(pattern => minimatch(attrNameText!, pattern)) - && node.tagType !== CompilerDOM.ElementTypes.ELEMENT ) { attrNameText = camelize(prop.name); camelized = true; diff --git a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue index 4feb7b3752..d0e07ec94a 100644 --- a/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue +++ b/test-workspace/tsc/vue3_strictTemplate/dataAttributes/main.vue @@ -1,6 +1,9 @@ <template> <div> - <svg><path stroke="#efefef" stroke-width="123" pathLength="10" /></svg> + <svg> + <path stroke="#efefef" stroke-width="123" pathLength="10" /> + <path stroke="#efefef" :stroke-width="123" :pathLength="10" /> + </svg> <foo stroke-width="123" /> </div> </template>