@lwc/babel-plugin-component 8.22.6 → 8.24.0

package/dist/constants.d.ts

@@ -23,5 +23,7 @@ declare const TEMPLATE_KEY = "tmpl";
 declare const COMPONENT_NAME_KEY = "sel";
 declare const API_VERSION_KEY = "apiVersion";
 declare const COMPONENT_CLASS_ID = "__lwc_component_class_internal";
-export { DECORATOR_TYPES, LWC_PACKAGE_ALIAS, LWC_PACKAGE_EXPORTS, LWC_COMPONENT_PROPERTIES, REGISTER_COMPONENT_ID, REGISTER_DECORATORS_ID, TEMPLATE_KEY, COMPONENT_NAME_KEY, API_VERSION_KEY, COMPONENT_CLASS_ID, };
+declare const SYNTHETIC_ELEMENT_INTERNALS_KEY = "enableSyntheticElementInternals";
+declare const COMPONENT_FEATURE_FLAG_KEY = "componentFeatureFlag";
+export { DECORATOR_TYPES, LWC_PACKAGE_ALIAS, LWC_PACKAGE_EXPORTS, LWC_COMPONENT_PROPERTIES, REGISTER_COMPONENT_ID, REGISTER_DECORATORS_ID, TEMPLATE_KEY, COMPONENT_NAME_KEY, API_VERSION_KEY, COMPONENT_CLASS_ID, SYNTHETIC_ELEMENT_INTERNALS_KEY, COMPONENT_FEATURE_FLAG_KEY, };
 //# sourceMappingURL=constants.d.ts.map

package/dist/index.cjs.js

@@ -41,6 +41,8 @@ const TEMPLATE_KEY = 'tmpl';
 const COMPONENT_NAME_KEY = 'sel';
 const API_VERSION_KEY = 'apiVersion';
 const COMPONENT_CLASS_ID = '__lwc_component_class_internal';
+const SYNTHETIC_ELEMENT_INTERNALS_KEY = 'enableSyntheticElementInternals';
+const COMPONENT_FEATURE_FLAG_KEY = 'componentFeatureFlag';
 
 /*
  * Copyright (c) 2023, salesforce.com, inc.
@@ -74,6 +76,13 @@ function component ({ types: t }) {
     function createRegisterComponent(declarationPath, state) {
         const registerComponentId = helperModuleImports.addNamed(declarationPath, REGISTER_COMPONENT_ID, LWC_PACKAGE_ALIAS);
         const templateIdentifier = importDefaultTemplate(declarationPath, state);
+        // Optionally import feature flag module if provided via compiler options
+        let componentFeatureFlagIdentifier;
+        if (state.opts.componentFeatureFlagModulePath) {
+            componentFeatureFlagIdentifier = helperModuleImports.addDefault(declarationPath, state.opts.componentFeatureFlagModulePath, {
+                nameHint: COMPONENT_FEATURE_FLAG_KEY,
+            });
+        }
         const statementPath = declarationPath.getStatementParent();
         const componentRegisteredName = getComponentRegisteredName(t, state);
         let node = declarationPath.node;
@@ -95,15 +104,28 @@ function component ({ types: t }) {
         //       sel: 'x-foo',
         //       apiVersion: '58'
         //     })
+        const properties = [
+            t.objectProperty(t.identifier(TEMPLATE_KEY), templateIdentifier),
+            t.objectProperty(t.identifier(COMPONENT_NAME_KEY), componentRegisteredName),
+            // It's important that, at this point, we have an APIVersion rather than just a number.
+            // The client needs to trust the server that it's providing an actual known API version
+            t.objectProperty(t.identifier(API_VERSION_KEY), t.numericLiteral(apiVersion)),
+        ];
+        if (componentFeatureFlagIdentifier) {
+            properties.push(t.objectProperty(t.identifier(COMPONENT_FEATURE_FLAG_KEY), t.objectExpression([
+                t.objectProperty(t.identifier('value'), t.callExpression(t.identifier('Boolean'), [
+                    componentFeatureFlagIdentifier,
+                ])),
+                t.objectProperty(t.identifier('path'), t.stringLiteral(state.opts.componentFeatureFlagModulePath)),
+            ])));
+        }
+        // Only include enableSyntheticElementInternals if set to true
+        if (state.opts.enableSyntheticElementInternals === true) {
+            properties.push(t.objectProperty(t.identifier(SYNTHETIC_ELEMENT_INTERNALS_KEY), t.booleanLiteral(true)));
+        }
         const registerComponentExpression = t.callExpression(registerComponentId, [
             node,
-            t.objectExpression([
-                t.objectProperty(t.identifier(TEMPLATE_KEY), templateIdentifier),
-                t.objectProperty(t.identifier(COMPONENT_NAME_KEY), componentRegisteredName),
-                // It's important that, at this point, we have an APIVersion rather than just a number.
-                // The client needs to trust the server that it's providing an actual known API version
-                t.objectProperty(t.identifier(API_VERSION_KEY), t.numericLiteral(apiVersion)),
-            ]),
+            t.objectExpression(properties),
         ]);
         // Example:
         // const __lwc_component_class_internal = registerComponent(cmp, ...);
@@ -1267,5 +1289,5 @@ function LwcClassTransform(api) {
 }
 
 exports.default = LwcClassTransform;
-/** version: 8.22.6 */
+/** version: 8.24.0 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -37,6 +37,8 @@ const TEMPLATE_KEY = 'tmpl';
 const COMPONENT_NAME_KEY = 'sel';
 const API_VERSION_KEY = 'apiVersion';
 const COMPONENT_CLASS_ID = '__lwc_component_class_internal';
+const SYNTHETIC_ELEMENT_INTERNALS_KEY = 'enableSyntheticElementInternals';
+const COMPONENT_FEATURE_FLAG_KEY = 'componentFeatureFlag';
 
 /*
  * Copyright (c) 2023, salesforce.com, inc.
@@ -70,6 +72,13 @@ function component ({ types: t }) {
     function createRegisterComponent(declarationPath, state) {
         const registerComponentId = addNamed(declarationPath, REGISTER_COMPONENT_ID, LWC_PACKAGE_ALIAS);
         const templateIdentifier = importDefaultTemplate(declarationPath, state);
+        // Optionally import feature flag module if provided via compiler options
+        let componentFeatureFlagIdentifier;
+        if (state.opts.componentFeatureFlagModulePath) {
+            componentFeatureFlagIdentifier = addDefault(declarationPath, state.opts.componentFeatureFlagModulePath, {
+                nameHint: COMPONENT_FEATURE_FLAG_KEY,
+            });
+        }
         const statementPath = declarationPath.getStatementParent();
         const componentRegisteredName = getComponentRegisteredName(t, state);
         let node = declarationPath.node;
@@ -91,15 +100,28 @@ function component ({ types: t }) {
         //       sel: 'x-foo',
         //       apiVersion: '58'
         //     })
+        const properties = [
+            t.objectProperty(t.identifier(TEMPLATE_KEY), templateIdentifier),
+            t.objectProperty(t.identifier(COMPONENT_NAME_KEY), componentRegisteredName),
+            // It's important that, at this point, we have an APIVersion rather than just a number.
+            // The client needs to trust the server that it's providing an actual known API version
+            t.objectProperty(t.identifier(API_VERSION_KEY), t.numericLiteral(apiVersion)),
+        ];
+        if (componentFeatureFlagIdentifier) {
+            properties.push(t.objectProperty(t.identifier(COMPONENT_FEATURE_FLAG_KEY), t.objectExpression([
+                t.objectProperty(t.identifier('value'), t.callExpression(t.identifier('Boolean'), [
+                    componentFeatureFlagIdentifier,
+                ])),
+                t.objectProperty(t.identifier('path'), t.stringLiteral(state.opts.componentFeatureFlagModulePath)),
+            ])));
+        }
+        // Only include enableSyntheticElementInternals if set to true
+        if (state.opts.enableSyntheticElementInternals === true) {
+            properties.push(t.objectProperty(t.identifier(SYNTHETIC_ELEMENT_INTERNALS_KEY), t.booleanLiteral(true)));
+        }
         const registerComponentExpression = t.callExpression(registerComponentId, [
             node,
-            t.objectExpression([
-                t.objectProperty(t.identifier(TEMPLATE_KEY), templateIdentifier),
-                t.objectProperty(t.identifier(COMPONENT_NAME_KEY), componentRegisteredName),
-                // It's important that, at this point, we have an APIVersion rather than just a number.
-                // The client needs to trust the server that it's providing an actual known API version
-                t.objectProperty(t.identifier(API_VERSION_KEY), t.numericLiteral(apiVersion)),
-            ]),
+            t.objectExpression(properties),
         ]);
         // Example:
         // const __lwc_component_class_internal = registerComponent(cmp, ...);
@@ -1263,5 +1285,5 @@ function LwcClassTransform(api) {
 }
 
 export { LwcClassTransform as default };
-/** version: 8.22.6 */
+/** version: 8.24.0 */
 //# sourceMappingURL=index.js.map

package/dist/types.d.ts

@@ -13,6 +13,8 @@ export interface LwcBabelPluginOptions {
     name: string;
     instrumentation?: InstrumentationObject;
     apiVersion?: number;
+    enableSyntheticElementInternals?: boolean;
+    componentFeatureFlagModulePath?: string;
 }
 export interface LwcBabelPluginPass extends PluginPass {
     opts: LwcBabelPluginOptions;

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/babel-plugin-component",
-    "version": "8.22.6",
+    "version": "8.24.0",
     "description": "Babel plugin to transform a LWC module",
     "keywords": [
         "lwc"
@@ -47,8 +47,8 @@
     },
     "dependencies": {
         "@babel/helper-module-imports": "7.27.1",
-        "@lwc/errors": "8.22.6",
-        "@lwc/shared": "8.22.6",
+        "@lwc/errors": "8.24.0",
+        "@lwc/shared": "8.24.0",
         "line-column": "~1.0.2"
     },
     "devDependencies": {