@atlaspack/babel-plugin-transform-contextual-imports 2.16.1-dev-native-compiled-test-712d92d32.0 → 2.16.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaspack/babel-plugin-transform-contextual-imports
 
+## 2.16.1
+
+### Patch Changes
+
+- [#843](https://github.com/atlassian-labs/atlaspack/pull/843) [`f97acf2`](https://github.com/atlassian-labs/atlaspack/commit/f97acf242ed210841db3403d3a5f224f5eff5ab5) Thanks [@nickrobson](https://github.com/nickrobson)! - Transform importCond in JSX, ungate binding-based transform
+
 ## 2.16.0
 
 ### Minor Changes

package/dist/index.js

@@ -67,52 +67,44 @@ exports.default = (0, helper_plugin_utils_1.declare)((api) => {
                                 const [cond, ifTrue, ifFalse] = call.arguments;
                                 // Replace with object containing imports and lazy getter, which allows us to load the correct import based on the condition at runtime
                                 path.replaceWithMultiple(buildNodeObject(importId, cond, ifTrue, ifFalse));
-                                if (state.opts.useBindingAwareReplacement) {
-                                    // Add the binding to set so we can mutate all references to this binding in the exit pass
-                                    const binding = path.scope.getBinding(importId.name);
-                                    if (binding) {
-                                        state.conditionalImportBindings?.add(binding);
-                                    }
-                                }
-                                else {
-                                    // Add identifier name to set so we can mutate all import usages in the exit pass (legacy approach)
-                                    state.conditionalImportIdentifiers?.add(importId.name);
+                                // Add the binding to set so we can mutate all references to this binding in the exit pass
+                                const binding = path.scope.getBinding(importId.name);
+                                if (binding) {
+                                    state.conditionalImportBindings?.add(binding);
                                 }
                             }
                         }
                     }
                 },
             },
-            Identifier: {
+            ReferencedIdentifier: {
                 exit(path, state) {
+                    if (!isNode(state.opts)) {
+                        return;
+                    }
                     if (state.visitedIdentifiers?.has(path.node)) {
                         return;
                     }
-                    let isConditionalImport = false;
-                    if (state.opts.useBindingAwareReplacement) {
-                        // New binding-aware approach: only transform identifiers that are actual references
-                        if (!path.isReferencedIdentifier()) {
-                            return;
+                    const binding = path.scope.getBinding(path.node.name);
+                    if (binding && state.conditionalImportBindings?.has(binding)) {
+                        if (path.isJSXIdentifier()) {
+                            // Add load property to the import usage
+                            const newIdentifer = t.jsxIdentifier(path.node.name);
+                            path.replaceWith(t.jsxMemberExpression(newIdentifer, t.jsxIdentifier('load')));
+                            state.visitedIdentifiers?.add(newIdentifer);
+                        }
+                        else {
+                            // Add load property to the import usage
+                            const newIdentifer = t.identifier(path.node.name);
+                            path.replaceWith(t.memberExpression(newIdentifer, t.identifier('load')));
+                            state.visitedIdentifiers?.add(newIdentifer);
                         }
-                        const binding = path.scope.getBinding(path.node.name);
-                        isConditionalImport = !!(binding && state.conditionalImportBindings?.has(binding));
-                    }
-                    else {
-                        // Legacy approach: check identifier names (can cause shadowing issues)
-                        isConditionalImport = !!state.conditionalImportIdentifiers?.has(path.node.name);
-                    }
-                    if (isConditionalImport) {
-                        // Add load property to the import usage
-                        const newIdentifer = t.identifier(path.node.name);
-                        path.replaceWith(t.memberExpression(newIdentifer, t.identifier('load')));
-                        state.visitedIdentifiers?.add(newIdentifer);
                     }
                 },
             },
             Program: {
                 enter(_, state) {
                     state.conditionalImportBindings = new Set();
-                    state.conditionalImportIdentifiers = new Set();
                     state.visitedIdentifiers = new Set();
                 },
             },

package/lib/index.js

@@ -64,56 +64,48 @@ var _default = exports.default = (0, _helperPluginUtils().declare)(api => {
 
                 // Replace with object containing imports and lazy getter, which allows us to load the correct import based on the condition at runtime
                 path.replaceWithMultiple(buildNodeObject(importId, cond, ifTrue, ifFalse));
-                if (state.opts.useBindingAwareReplacement) {
-                  // Add the binding to set so we can mutate all references to this binding in the exit pass
-                  const binding = path.scope.getBinding(importId.name);
-                  if (binding) {
-                    var _state$conditionalImp;
-                    (_state$conditionalImp = state.conditionalImportBindings) === null || _state$conditionalImp === void 0 || _state$conditionalImp.add(binding);
-                  }
-                } else {
-                  var _state$conditionalImp2;
-                  // Add identifier name to set so we can mutate all import usages in the exit pass (legacy approach)
-                  (_state$conditionalImp2 = state.conditionalImportIdentifiers) === null || _state$conditionalImp2 === void 0 || _state$conditionalImp2.add(importId.name);
+
+                // Add the binding to set so we can mutate all references to this binding in the exit pass
+                const binding = path.scope.getBinding(importId.name);
+                if (binding) {
+                  var _state$conditionalImp;
+                  (_state$conditionalImp = state.conditionalImportBindings) === null || _state$conditionalImp === void 0 || _state$conditionalImp.add(binding);
                 }
               }
             }
           }
         }
       },
-      Identifier: {
+      ReferencedIdentifier: {
         exit(path, state) {
-          var _state$visitedIdentif2;
+          var _state$visitedIdentif2, _state$conditionalImp2;
+          if (!isNode(state.opts)) {
+            return;
+          }
           if ((_state$visitedIdentif2 = state.visitedIdentifiers) !== null && _state$visitedIdentif2 !== void 0 && _state$visitedIdentif2.has(path.node)) {
             return;
           }
-          let isConditionalImport = false;
-          if (state.opts.useBindingAwareReplacement) {
-            var _state$conditionalImp3;
-            // New binding-aware approach: only transform identifiers that are actual references
-            if (!path.isReferencedIdentifier()) {
-              return;
+          const binding = path.scope.getBinding(path.node.name);
+          if (binding && (_state$conditionalImp2 = state.conditionalImportBindings) !== null && _state$conditionalImp2 !== void 0 && _state$conditionalImp2.has(binding)) {
+            if (path.isJSXIdentifier()) {
+              var _state$visitedIdentif3;
+              // Add load property to the import usage
+              const newIdentifer = t.jsxIdentifier(path.node.name);
+              path.replaceWith(t.jsxMemberExpression(newIdentifer, t.jsxIdentifier('load')));
+              (_state$visitedIdentif3 = state.visitedIdentifiers) === null || _state$visitedIdentif3 === void 0 || _state$visitedIdentif3.add(newIdentifer);
+            } else {
+              var _state$visitedIdentif4;
+              // Add load property to the import usage
+              const newIdentifer = t.identifier(path.node.name);
+              path.replaceWith(t.memberExpression(newIdentifer, t.identifier('load')));
+              (_state$visitedIdentif4 = state.visitedIdentifiers) === null || _state$visitedIdentif4 === void 0 || _state$visitedIdentif4.add(newIdentifer);
             }
-            const binding = path.scope.getBinding(path.node.name);
-            isConditionalImport = !!(binding && (_state$conditionalImp3 = state.conditionalImportBindings) !== null && _state$conditionalImp3 !== void 0 && _state$conditionalImp3.has(binding));
-          } else {
-            var _state$conditionalImp4;
-            // Legacy approach: check identifier names (can cause shadowing issues)
-            isConditionalImport = !!((_state$conditionalImp4 = state.conditionalImportIdentifiers) !== null && _state$conditionalImp4 !== void 0 && _state$conditionalImp4.has(path.node.name));
-          }
-          if (isConditionalImport) {
-            var _state$visitedIdentif3;
-            // Add load property to the import usage
-            const newIdentifer = t.identifier(path.node.name);
-            path.replaceWith(t.memberExpression(newIdentifer, t.identifier('load')));
-            (_state$visitedIdentif3 = state.visitedIdentifiers) === null || _state$visitedIdentif3 === void 0 || _state$visitedIdentif3.add(newIdentifer);
           }
         }
       },
       Program: {
         enter(_, state) {
           state.conditionalImportBindings = new Set();
-          state.conditionalImportIdentifiers = new Set();
           state.visitedIdentifiers = new Set();
         }
       }

package/lib/types/index.d.ts

@@ -3,18 +3,14 @@ import type { Binding } from '@babel/traverse';
 interface Opts {
     /** Use node safe import cond syntax */
     node?: boolean;
-    /** Use binding-aware identifier replacement (prevents shadowing issues) */
-    useBindingAwareReplacement?: boolean;
 }
 interface State {
     /** Plugin options */
     opts: Opts;
-    /** Set of bindings that need to be mutated after import was transformed (new approach) */
+    /** Set of bindings that need to be mutated after import was transformed */
     conditionalImportBindings?: Set<Binding>;
-    /** Set of identifier names that need to be mutated after import was transformed (legacy approach) */
-    conditionalImportIdentifiers?: Set<string>;
     /** Set of identifiers that have been visited in the exit pass, to avoid adding the load property multiple times */
-    visitedIdentifiers?: Set<BabelTypes.Identifier>;
+    visitedIdentifiers?: Set<BabelTypes.Identifier | BabelTypes.JSXIdentifier>;
 }
 declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => PluginObj<State>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/babel-plugin-transform-contextual-imports",
-  "version": "2.16.1-dev-native-compiled-test-712d92d32.0",
+  "version": "2.16.1",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
@@ -26,6 +26,5 @@
   "type": "commonjs",
   "scripts": {
     "build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
-  },
-  "gitHead": "712d92d323f25ef36c76ecd254b8f227fe518b89"
+  }
 }

package/src/index.ts

@@ -5,19 +5,15 @@ import {declare} from '@babel/helper-plugin-utils';
 interface Opts {
   /** Use node safe import cond syntax */
   node?: boolean;
-  /** Use binding-aware identifier replacement (prevents shadowing issues) */
-  useBindingAwareReplacement?: boolean;
 }
 
 interface State {
   /** Plugin options */
   opts: Opts;
-  /** Set of bindings that need to be mutated after import was transformed (new approach) */
+  /** Set of bindings that need to be mutated after import was transformed */
   conditionalImportBindings?: Set<Binding>;
-  /** Set of identifier names that need to be mutated after import was transformed (legacy approach) */
-  conditionalImportIdentifiers?: Set<string>;
   /** Set of identifiers that have been visited in the exit pass, to avoid adding the load property multiple times */
-  visitedIdentifiers?: Set<BabelTypes.Identifier>;
+  visitedIdentifiers?: Set<BabelTypes.Identifier | BabelTypes.JSXIdentifier>;
 }
 
 const isNode = (opts: Opts): boolean => !!('node' in opts && opts.node);
@@ -191,60 +187,49 @@ export default declare((api): PluginObj<State> => {
                   buildNodeObject(importId, cond, ifTrue, ifFalse),
                 );
 
-                if (state.opts.useBindingAwareReplacement) {
-                  // Add the binding to set so we can mutate all references to this binding in the exit pass
-                  const binding = path.scope.getBinding(importId.name);
-                  if (binding) {
-                    state.conditionalImportBindings?.add(binding);
-                  }
-                } else {
-                  // Add identifier name to set so we can mutate all import usages in the exit pass (legacy approach)
-                  state.conditionalImportIdentifiers?.add(importId.name);
+                // Add the binding to set so we can mutate all references to this binding in the exit pass
+                const binding = path.scope.getBinding(importId.name);
+                if (binding) {
+                  state.conditionalImportBindings?.add(binding);
                 }
               }
             }
           }
         },
       },
-      Identifier: {
+      ReferencedIdentifier: {
         exit(path, state) {
-          if (state.visitedIdentifiers?.has(path.node)) {
+          if (!isNode(state.opts)) {
             return;
           }
 
-          let isConditionalImport = false;
-
-          if (state.opts.useBindingAwareReplacement) {
-            // New binding-aware approach: only transform identifiers that are actual references
-            if (!path.isReferencedIdentifier()) {
-              return;
-            }
-
-            const binding = path.scope.getBinding(path.node.name);
-            isConditionalImport = !!(
-              binding && state.conditionalImportBindings?.has(binding)
-            );
-          } else {
-            // Legacy approach: check identifier names (can cause shadowing issues)
-            isConditionalImport = !!state.conditionalImportIdentifiers?.has(
-              path.node.name,
-            );
+          if (state.visitedIdentifiers?.has(path.node)) {
+            return;
           }
 
-          if (isConditionalImport) {
-            // Add load property to the import usage
-            const newIdentifer = t.identifier(path.node.name);
-            path.replaceWith(
-              t.memberExpression(newIdentifer, t.identifier('load')),
-            );
-            state.visitedIdentifiers?.add(newIdentifer);
+          const binding = path.scope.getBinding(path.node.name);
+          if (binding && state.conditionalImportBindings?.has(binding)) {
+            if (path.isJSXIdentifier()) {
+              // Add load property to the import usage
+              const newIdentifer = t.jsxIdentifier(path.node.name);
+              path.replaceWith(
+                t.jsxMemberExpression(newIdentifer, t.jsxIdentifier('load')),
+              );
+              state.visitedIdentifiers?.add(newIdentifer);
+            } else {
+              // Add load property to the import usage
+              const newIdentifer = t.identifier(path.node.name);
+              path.replaceWith(
+                t.memberExpression(newIdentifer, t.identifier('load')),
+              );
+              state.visitedIdentifiers?.add(newIdentifer);
+            }
           }
         },
       },
       Program: {
         enter(_, state) {
           state.conditionalImportBindings = new Set();
-          state.conditionalImportIdentifiers = new Set();
           state.visitedIdentifiers = new Set();
         },
       },

package/test/babel-plugin-transform-contextual-imports.test.ts

@@ -57,7 +57,7 @@ const jsx = <MyComponent JqlUtils={JqlUtils} />;`;
     const result = babel.transformSync(input, {
       configFile: false,
       presets: [],
-      plugins: [[plugin, {node: true, useBindingAwareReplacement: true}]],
+      plugins: [[plugin, {node: true}]],
       parserOpts: {
         plugins: ['jsx'],
       },
@@ -80,13 +80,43 @@ const jsx = <MyComponent JqlUtils={JqlUtils.load} />;`,
     );
   });
 
-  it('should use legacy behavior when feature flag is disabled', () => {
+  it('should transform importCond components from legacy runtime transformed JSX', () => {
     const input = `const JqlUtils = importCond('CONDITION', 'IF_TRUE', 'IF_FALSE');
-const SomeValue = JqlUtils.someProperty;`;
+
+const jsx = React.createElement(JqlUtils, null);`;
     const result = babel.transformSync(input, {
       configFile: false,
       presets: [],
-      plugins: [[plugin, {node: true, useBindingAwareReplacement: false}]],
+      plugins: [[plugin, {node: true}]],
+      parserOpts: {
+        plugins: ['jsx'],
+      },
+    });
+
+    assert.equal(
+      result?.code,
+      `const JqlUtils = {
+  ifTrue: require('IF_TRUE').default,
+  ifFalse: require('IF_FALSE').default
+};
+Object.defineProperty(JqlUtils, "load", {
+  get: () => globalThis.__MCOND && globalThis.__MCOND('CONDITION') ? JqlUtils.ifTrue : JqlUtils.ifFalse
+});
+const jsx = React.createElement(JqlUtils.load, null);`,
+    );
+  });
+
+  it('should transform importCond components from preserved JSX', () => {
+    const input = `const JqlUtils = importCond('CONDITION', 'IF_TRUE', 'IF_FALSE');
+
+const jsx = <JqlUtils />;`;
+    const result = babel.transformSync(input, {
+      configFile: false,
+      presets: [],
+      plugins: [[plugin, {node: true}]],
+      parserOpts: {
+        plugins: ['jsx'],
+      },
     });
 
     assert.equal(
@@ -98,7 +128,7 @@ const SomeValue = JqlUtils.someProperty;`;
 Object.defineProperty(JqlUtils, "load", {
   get: () => globalThis.__MCOND && globalThis.__MCOND('CONDITION') ? JqlUtils.ifTrue : JqlUtils.ifFalse
 });
-const SomeValue = JqlUtils.load.someProperty;`,
+const jsx = <JqlUtils.load />;`,
     );
   });
 });