chore(ssr-compiler): Align isValidIdentifier with babel-plugin-compon…

…ent impl (#4964)

Co-authored-by: Nolan Lawson <[email protected]>

packages/@lwc/shared/src/index.ts

@@ -8,7 +8,6 @@ import * as assert from './assert';
 
 export * from './api-version';
 export * from './aria';
-export * from './ecmascript';
 export * from './language';
 export * from './keys';
 export * from './void-elements';

packages/@lwc/ssr-compiler/package.json

@@ -47,6 +47,7 @@
         }
     },
     "dependencies": {
+        "@babel/types": "7.26.0",
         "@lwc/shared": "8.11.0",
         "@lwc/errors": "8.11.0",
         "@lwc/template-compiler": "8.11.0",

packages/@lwc/ssr-compiler/src/compile-template/shared.ts

@@ -8,7 +8,7 @@
 import { builders as b, is } from 'estree-toolkit';
 import { normalizeStyleAttributeValue, StringReplace, StringTrim } from '@lwc/shared';
 
-import { isValidIdentifier } from '../shared';
+import { isValidES3Identifier } from '@babel/types';
 import { expressionIrToEs } from './expression';
 import type { TransformerContext } from './types';
 import type {
@@ -106,7 +106,8 @@ export function getChildAttrsOrProps(
 ): EsObjectExpression {
     const objectAttrsOrProps = attrs
         .map(({ name, value, type }) => {
-            const key = isValidIdentifier(name) ? b.identifier(name) : b.literal(name);
+            // Babel function required to align identifier validation with babel-plugin-component: https://github.com/salesforce/lwc/issues/4826
+            const key = isValidES3Identifier(name) ? b.identifier(name) : b.literal(name);
             if (value.type === 'Literal' && typeof value.value === 'string') {
                 let literalValue: string | boolean = value.value;
                 if (name === 'style') {

packages/@lwc/ssr-compiler/src/shared.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import { reservedKeywords } from '@lwc/shared';
 import type { Config as TemplateCompilerConfig } from '@lwc/template-compiler';
 
 export type Expression = string;
@@ -59,13 +58,3 @@ export interface IHoistInstantiation {
 }
 
 export type TransformOptions = Pick<TemplateCompilerConfig, 'name' | 'namespace'>;
-
-// This is a mostly-correct regular expression will only match if the entire string
-// provided is a valid ECMAScript identifier. Its imperfections lie in the fact that
-// it will match strings like "export" when "export" is actually a reserved keyword
-// and therefore not a valid identifier. When combined with a check against reserved
-// keywords, it is a reliable test for whether a provided string is a valid identifier.
-const imperfectIdentifierMatcher = /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/;
-
-export const isValidIdentifier = (str: string) =>
-    !reservedKeywords.has(str) && imperfectIdentifierMatcher.test(str);

yarn.lock

@@ -1076,7 +1076,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.10", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.4", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.4.4":
+"@babel/types@7.26.0", "@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.10", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.4", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.4.4":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
   integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==