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.

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

fix(compiler-core): adding identifier on validAssetId if variable name has specific character #4429

Merged
merged 1 commit into from Aug 24, 2021

Conversation

shadowings-zy
Copy link
Contributor

@shadowings-zy shadowings-zy commented Aug 24, 2021

see issue #4422

If component name is not strict, the generated render function will not run.
We can solve this edge case by adding an unique identifier on specific validAssetId.

Close #4422

@@ -430,6 +430,14 @@ export function toValidAssetId(
name: string,
type: 'component' | 'directive' | 'filter'
): string {
// see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer this:

return `_${type}_${name.replace(/[^\w]/g, function($1,$2){
	return $1==='-'?'_': name.charCodeAt($2)
})}`

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think change it in this way is better.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@yyx990803 yyx990803 merged commit 3282750 into vuejs:master Aug 24, 2021
@qq974969638
Copy link

qq974969638 commented Aug 24, 2021

Hello, thank you very much for your efforts. I have a small question here. Maybe there is no need to deal with this issue, just for communication.

If a situation like this occurs, there will still be conflicts.

<a-b/> -> "_component_a_b"
<a.b/> -> "_component_a46b"
<a46b/> -> "_component_a46b"

Is it possible to consider using Map() to implement name conversion, it should be able to completely solve this problem.

let element_name_map = new Map()
let element_inc = 0
function toValidAssetId(name, type) {
let retname = ""
let tempkey = name + type
if (element_name_map.has(tempkey)) {
retname = element_name_map.get(tempkey)
} else {
element_inc++;
retname = "_" + type + "_" + element_inc
element_name_map.set(tempkey, retname)
}
return retname
}

@edison1105
Copy link
Member

@qq974969638
This PR had already covered your cases.
using a Map also can solve this problem but not that simpler like that in this PR.

@qq974969638
Copy link

@edison1105

Hello, you can view this error demo. I don't know if this issue needs to be dealt with, it's just for communication.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE+e3sgbXNnIH19PC9oMT5cbiAgPGE0Nj48L2E0Nj5cbiAgPGEuPjwvYS4+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuY29uc3QgbXNnID0gJ0hlbGxvIFdvcmxkISdcbjwvc2NyaXB0PiJ9

<template>
<h1>{{ msg }}</h1>
<a46></a46>
<a.></a.>
</template>
<script setup>
const msg = 'Hello World!'
</script>

@edison1105
Copy link
Member

@qq974969638 I think it's a very very very very edge case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The component name is not strict, resulting in the inability to run the VUE program
4 participants