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

fix #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