@atlaspack/babel-plugin-transform-contextual-imports 2.14.1-canary.40 → 2.14.1-canary.401

package/src/index.ts

@@ -1,9 +1,8 @@
-import type {PluginObj, NodePath, types as BabelTypes} from '@babel/core';
+import type {PluginObj, types as BabelTypes} from '@babel/core';
+import type {Binding} from '@babel/traverse';
 import {declare} from '@babel/helper-plugin-utils';
 
 interface Opts {
-  /** @deprecated Use "node" instead */
-  server?: boolean;
   /** Use node safe import cond syntax */
   node?: boolean;
 }
@@ -11,18 +10,12 @@ interface Opts {
 interface State {
   /** Plugin options */
   opts: Opts;
-  /** @deprecated Statement types didn't work so using any */
-  importNodes?: any[];
-  /** Set of identifier names that need to be mutated after import was transformed */
-  conditionalImportIdentifiers?: Set<string>;
+  /** Set of bindings that need to be mutated after import was transformed */
+  conditionalImportBindings?: Set<Binding>;
   /** 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 isServer = (opts: Opts) => {
-  return 'server' in opts && opts.server;
-};
-
 const isNode = (opts: Opts): boolean => !!('node' in opts && opts.node);
 
 export default declare((api): PluginObj<State> => {
@@ -157,124 +150,11 @@ export default declare((api): PluginObj<State> => {
     ),
   ];
 
-  const buildServerObject = (
-    identUid: string,
-    cond: BabelTypes.StringLiteral,
-    ifTrue: BabelTypes.StringLiteral,
-    ifFalse: BabelTypes.StringLiteral,
-  ) => [
-    // Create object containing imports
-    t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier(identUid),
-        t.objectExpression([
-          t.objectProperty(
-            t.identifier('ifTrue'),
-            t.memberExpression(
-              t.callExpression(t.identifier('require'), [ifTrue]),
-              t.identifier('default'),
-            ),
-          ),
-          t.objectProperty(
-            t.identifier('ifFalse'),
-            t.memberExpression(
-              t.callExpression(t.identifier('require'), [ifFalse]),
-              t.identifier('default'),
-            ),
-          ),
-        ]),
-      ),
-    ]),
-
-    // Create lazy getter via the load property on the object
-    t.expressionStatement(
-      t.callExpression(
-        t.memberExpression(
-          t.identifier('Object'),
-          t.identifier('defineProperty'),
-        ),
-        [
-          t.identifier(identUid),
-          t.stringLiteral('load'),
-          t.objectExpression([
-            t.objectProperty(
-              t.identifier('get'),
-              t.arrowFunctionExpression(
-                [],
-                t.conditionalExpression(
-                  t.logicalExpression(
-                    '&&',
-                    t.memberExpression(
-                      t.identifier('globalThis'),
-                      t.identifier('__MCOND'),
-                    ),
-                    t.callExpression(
-                      t.memberExpression(
-                        t.identifier('globalThis'),
-                        t.identifier('__MCOND'),
-                      ),
-                      [cond],
-                    ),
-                  ),
-                  t.memberExpression(
-                    t.identifier(identUid),
-                    t.identifier('ifTrue'),
-                  ),
-                  t.memberExpression(
-                    t.identifier(identUid),
-                    t.identifier('ifFalse'),
-                  ),
-                ),
-              ),
-            ),
-          ]),
-        ],
-      ),
-    ),
-  ];
-
-  const checkIsServer = (
-    path: NodePath<BabelTypes.CallExpression>,
-    state: State,
-  ) => {
-    if (
-      path.node.callee.type === 'Identifier' &&
-      path.node.callee.name === 'importCond'
-    ) {
-      if (
-        path.node.arguments.length == 3 &&
-        path.node.arguments.every((arg) => arg.type === 'StringLiteral')
-      ) {
-        const [cond, ifTrue, ifFalse] = path.node.arguments;
-
-        if (isServer(state.opts)) {
-          // Make module pass lazy in ssr
-          const identUid = path.scope.generateUid(
-            `${cond.value}$${ifTrue.value}$${ifFalse.value}`,
-          );
-
-          state.importNodes ??= [];
-          state.importNodes.push(
-            ...buildServerObject(identUid, cond, ifTrue, ifFalse),
-          );
-
-          // Replace call expression with reference to lazy object getter
-          path.replaceWith(
-            t.memberExpression(t.identifier(identUid), t.identifier('load')),
-          );
-        }
-      }
-    }
-  };
-
   return {
     name: '@atlaspack/babel-plugin-transform-contextual-imports',
     visitor: {
       CallExpression: {
         enter(path, state) {
-          // Preserve server behaviour in deletable code
-          checkIsServer(path, state);
-
           const node = path.node;
           if (isImportCondCallExpression(node)) {
             const [cond, ifTrue, ifFalse] = node.arguments;
@@ -307,39 +187,55 @@ export default declare((api): PluginObj<State> => {
                   buildNodeObject(importId, cond, ifTrue, ifFalse),
                 );
 
-                // Add identifier name to set so we can mutate all import usages in the exit pass
-                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) {
-          const identifier = state.conditionalImportIdentifiers?.has(
-            path.node.name,
-          );
-          if (identifier && !state.visitedIdentifiers?.has(path.node)) {
-            // 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);
+          if (!isNode(state.opts)) {
+            return;
+          }
+
+          if (path.parentPath.isTSType()) {
+            return;
+          }
+
+          if (state.visitedIdentifiers?.has(path.node)) {
+            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);
+            }
           }
         },
       },
       Program: {
         enter(_, state) {
-          state.conditionalImportIdentifiers = new Set();
+          state.conditionalImportBindings = new Set();
           state.visitedIdentifiers = new Set();
         },
-        exit(path, state) {
-          if (state.importNodes) {
-            // If there's an import node, add it to the top of the body
-            path.unshiftContainer('body', state.importNodes);
-          }
-        },
       },
     },
   };

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

@@ -0,0 +1,162 @@
+import * as babel from '@babel/core';
+import assert from 'assert';
+
+const plugin = require.resolve('../src/index.ts');
+
+describe('@atlaspack/babel-plugin-transform-contextual-imports', () => {
+  it('should transform importCond to inline requires', () => {
+    const input = `
+      const Imported = importCond('CONDITION', 'IF_TRUE', 'IF_FALSE');
+    `;
+    const result = babel.transformSync(input, {
+      configFile: false,
+      presets: [],
+      plugins: [plugin],
+    });
+
+    assert.equal(
+      result?.code,
+      "const Imported = globalThis.__MCOND && globalThis.__MCOND('CONDITION') ? require('IF_TRUE').default : require('IF_FALSE').default;",
+    );
+  });
+
+  it('should transform importCond to node lazy code', () => {
+    const input = `
+      const Imported = importCond('CONDITION', 'IF_TRUE', 'IF_FALSE');
+
+      console.log(Imported, Imported.someProperty);
+    `;
+    const result = babel.transformSync(input, {
+      configFile: false,
+      presets: [],
+      plugins: [[plugin, {node: true}]],
+    });
+
+    assert.equal(
+      result?.code,
+      `const Imported = {
+  ifTrue: require('IF_TRUE').default,
+  ifFalse: require('IF_FALSE').default
+};
+Object.defineProperty(Imported, "load", {
+  get: () => globalThis.__MCOND && globalThis.__MCOND('CONDITION') ? Imported.ifTrue : Imported.ifFalse
+});
+console.log(Imported.load, Imported.load.someProperty);`,
+    );
+  });
+
+  it('should transform shadowed identifiers correctly', () => {
+    const input = `const JqlUtils = importCond('CONDITION', 'IF_TRUE', 'IF_FALSE');
+
+const myObject = {
+  JqlUtils: 'some-value',
+  other: JqlUtils,
+};
+
+const jsx = <MyComponent JqlUtils={JqlUtils} />;`;
+    const result = babel.transformSync(input, {
+      configFile: false,
+      presets: [],
+      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 myObject = {
+  JqlUtils: 'some-value',
+  other: JqlUtils.load
+};
+const jsx = <MyComponent JqlUtils={JqlUtils.load} />;`,
+    );
+  });
+
+  it('should transform importCond components from legacy runtime transformed JSX', () => {
+    const input = `const JqlUtils = importCond('CONDITION', 'IF_TRUE', 'IF_FALSE');
+
+const jsx = React.createElement(JqlUtils, null);`;
+    const result = babel.transformSync(input, {
+      configFile: false,
+      presets: [],
+      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(
+      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 = <JqlUtils.load />;`,
+    );
+  });
+
+  it('should not transform type references', () => {
+    const input = `const JqlUtils = importCond<typeof import('IF_TRUE'),typeof import('IF_FALSE')>('CONDITION', 'IF_TRUE', 'IF_FALSE');
+
+type Props = ComponentProps<typeof JqlUtils>;
+const jsx = <JqlUtils />;`;
+    const result = babel.transformSync(input, {
+      configFile: false,
+      presets: [],
+      plugins: [[plugin, {node: true}]],
+      parserOpts: {
+        plugins: ['jsx', 'typescript'],
+      },
+    });
+
+    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
+});
+type Props = ComponentProps<typeof JqlUtils>;
+const jsx = <JqlUtils.load />;`,
+    );
+  });
+});

package/tsconfig.json

@@ -1,12 +1,7 @@
 {
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/*"],
-  "exclude": ["node_modules"]
+    "composite": true
+  }
 }