From 32827506ff2b6174d63525e7713830838840c671 Mon Sep 17 00:00:00 2001 From: shadowings-zy Date: Tue, 24 Aug 2021 23:48:08 +0800 Subject: [PATCH] fix(compiler-core): fix duplicated component identifier for names with non-ascii chars (#4429) fix #4422 --- packages/compiler-core/__tests__/utils.spec.ts | 13 ++++++++++++- packages/compiler-core/src/utils.ts | 5 ++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/compiler-core/__tests__/utils.spec.ts b/packages/compiler-core/__tests__/utils.spec.ts index 0cd73060c5b..3514391b74f 100644 --- a/packages/compiler-core/__tests__/utils.spec.ts +++ b/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' + ) +}) diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts index 88e91d6c9be..e3bc04bec69 100644 --- a/packages/compiler-core/src/utils.ts +++ b/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