@lwc/babel-plugin-component 2.38.0 → 2.39.0

package/package.json

@@ -10,7 +10,7 @@
     "bugs": {
         "url": "https://github.com/salesforce/lwc/issues"
     },
-    "version": "2.38.0",
+    "version": "2.39.0",
     "main": "src/index.js",
     "typings": "src/index.d.ts",
     "license": "MIT",
@@ -21,8 +21,8 @@
     ],
     "dependencies": {
         "@babel/helper-module-imports": "~7.18.6",
-        "@lwc/errors": "2.38.0",
-        "@lwc/shared": "2.38.0",
+        "@lwc/errors": "2.39.0",
+        "@lwc/shared": "2.39.0",
         "line-column": "~1.0.2"
     },
     "peerDependencies": {

package/src/component.js

@@ -8,7 +8,12 @@ const { basename, extname } = require('path');
 
 const moduleImports = require('@babel/helper-module-imports');
 
-const { LWC_PACKAGE_ALIAS, REGISTER_COMPONENT_ID, TEMPLATE_KEY } = require('./constants');
+const {
+    LWC_PACKAGE_ALIAS,
+    REGISTER_COMPONENT_ID,
+    TEMPLATE_KEY,
+    COMPONENT_NAME_KEY,
+} = require('./constants');
 
 function getBaseName(classPath) {
     const ext = extname(classPath);
@@ -32,6 +37,12 @@ function needsComponentRegistration(path) {
     );
 }
 
+function getComponentRegisteredName(t, state) {
+    const { namespace, name } = state.opts;
+    const componentName = namespace && name ? `${namespace}-${name}` : '';
+    return t.stringLiteral(componentName);
+}
+
 module.exports = function ({ types: t }) {
     function createRegisterComponent(declarationPath, state) {
         const registerComponentId = moduleImports.addNamed(
@@ -41,6 +52,7 @@ module.exports = function ({ types: t }) {
         );
         const templateIdentifier = importDefaultTemplate(declarationPath, state);
         const statementPath = declarationPath.getStatementParent();
+        const componentRegisteredName = getComponentRegisteredName(t, state);
         let node = declarationPath.node;
 
         if (declarationPath.isClassDeclaration()) {
@@ -56,7 +68,10 @@ module.exports = function ({ types: t }) {
 
         return t.callExpression(registerComponentId, [
             node,
-            t.objectExpression([t.objectProperty(t.identifier(TEMPLATE_KEY), templateIdentifier)]),
+            t.objectExpression([
+                t.objectProperty(t.identifier(TEMPLATE_KEY), templateIdentifier),
+                t.objectProperty(t.identifier(COMPONENT_NAME_KEY), componentRegisteredName),
+            ]),
         ]);
     }
 

package/src/constants.js

@@ -8,7 +8,7 @@
 // This set is for attributes that have a camel cased property name
 // For example, div.tabIndex.
 // We do not want users to define @api properties with these names
-// Because the template will never call them. It'll alawys call the camel
+// Because the template will never call them. It'll always call the camel
 // cased version.
 const AMBIGUOUS_PROP_SET = new Map([
     ['bgcolor', 'bgColor'],
@@ -51,6 +51,7 @@ const DECORATOR_TYPES = {
 const REGISTER_COMPONENT_ID = 'registerComponent';
 const REGISTER_DECORATORS_ID = 'registerDecorators';
 const TEMPLATE_KEY = 'tmpl';
+const COMPONENT_NAME_KEY = 'sel';
 
 module.exports = {
     AMBIGUOUS_PROP_SET,
@@ -62,4 +63,5 @@ module.exports = {
     REGISTER_COMPONENT_ID,
     REGISTER_DECORATORS_ID,
     TEMPLATE_KEY,
+    COMPONENT_NAME_KEY,
 };