fix(compiler-core): fix duplicated component identifier for names with non-ascii chars (vuejs#4429)

fix vuejs#4422

Author: shadowings-zy

packages/compiler-core/__tests__/utils.spec.ts

@@ -2,7 +2,8 @@ import { Position } from '../src/ast'
 import {
  getInnerRange,
  advancePositionWithClone,
- isMemberExpression
+ isMemberExpression,
+ toValidAssetId
 } from '../src/utils'
 
 function p(line: number, column: number, offset: number): Position {
@@ -107,3 +108,13 @@ test('isMemberExpression', () => {
  expect(isMemberExpression('a?b:c')).toBe(false)
  expect(isMemberExpression(`state['text'] = $event`)).toBe(false)
 })
+
+test('toValidAssetId', () => {
+ expect(toValidAssetId('foo', 'component')).toBe('_component_foo')
+ expect(toValidAssetId('p', 'directive')).toBe('_directive_p')
+ expect(toValidAssetId('div', 'filter')).toBe('_filter_div')
+ expect(toValidAssetId('foo-bar', 'component')).toBe('_component_foo_bar')
+ expect(toValidAssetId('test-测试-1', 'component')).toBe(
+ '_component_test_2797935797_1'
+ )
+})

packages/compiler-core/src/utils.ts

@@ -430,7 +430,10 @@ export function toValidAssetId(
  name: string,
  type: 'component' | 'directive' | 'filter'
 ): string {
- return `_${type}_${name.replace(/[^\w]/g, '_')}`
+ // see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character
+ return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
+ return searchValue === '-' ? '_' : name.charCodeAt(replaceValue).toString()
+ })}`
 }
 
 // Check if a node contains expressions that reference current context scope ids