@carbon/upgrade 11.42.0 → 11.43.0-rc.0

package/README.md

@@ -81,6 +81,44 @@ The following codemods help you adopt changes introduced by feature flags in
 preparation for Carbon v12. Each codemod transforms your code to work with
 specific feature flags enabled.
 
+### Enable v12 release
+
+Enables the complete Carbon v12 experience for a React application.
+
+**Usage:**
+
+```bash
+npx @carbon/upgrade migrate enable-v12-release --write
+```
+
+This codemod wraps the application passed to a React root with
+`<FeatureFlags enableV12Release>` and adds or updates the necessary
+`@carbon/react` import. It supports modern `createRoot` and `hydrateRoot` entry
+points as well as legacy `ReactDOM.render`.
+
+**Example:**
+
+```jsx
+// Before
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+
+// After
+import { createRoot } from 'react-dom/client';
+import { FeatureFlags } from '@carbon/react';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <FeatureFlags enableV12Release>
+    <App />
+  </FeatureFlags>
+);
+```
+
 ### Enable v12 tile default icons
 
 Enables default icons for Tile components.

package/cli.js

@@ -44083,7 +44083,7 @@ async function run$1(options) {
 //#endregion
 //#region src/upgrades.js
 /**
-* Copyright IBM Corp. 2019, 2023
+* Copyright IBM Corp. 2019, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -44364,6 +44364,46 @@ const upgrades = [
 					});
 				}
 			},
+			{
+				name: "enable-v12-release",
+				description: `
+          Wrap the application rendered by ReactDOM with FeatureFlags enableV12Release.
+
+          Transforms:
+          root.render(<App />);
+
+          Into:
+          root.render(
+            <FeatureFlags enableV12Release>
+              <App />
+            </FeatureFlags>
+          );
+        `,
+				migrate: async (options) => {
+					const transform = path.default.join(TRANSFORM_DIR, "enable-v12-release.js");
+					const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_out.default)(["**/*.{js,jsx,ts,tsx}"], {
+						cwd: options.workspaceDir,
+						ignore: [
+							"**/es/**",
+							"**/lib/**",
+							"**/umd/**",
+							"**/node_modules/**",
+							"**/storybook-static/**",
+							"**/dist/**",
+							"**/build/**",
+							"**/*.d.ts",
+							"**/coverage/**"
+						]
+					});
+					await runCodemod(options, {
+						dry: !options.write,
+						transform,
+						paths,
+						verbose: options.verbose,
+						parser: "tsx"
+					});
+				}
+			},
 			{
 				name: "enable-v12-overflowmenu",
 				description: `
@@ -44964,7 +45004,7 @@ const upgrades = [
 //#endregion
 //#region package.json
 var name = "@carbon/upgrade";
-var version = "11.42.0";
+var version = "11.43.0-rc.0";
 //#endregion
 //#region ../../node_modules/y18n/build/index.cjs
 var require_build$3 = /* @__PURE__ */ __commonJSMin(((exports, module) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.42.0",
+  "version": "11.43.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -60,5 +60,5 @@
     "@ibm/telemetry-js": "^1.5.0",
     "jscodeshift": "^17.0.0"
   },
-  "gitHead": "a57cf8a896fe3fe09c5ab27648cd58947f37360a"
+  "gitHead": "82f04fbfdb385323883f4f8e3ce97a14865a744a"
 }

package/transforms/__testfixtures__/enable-v12-release-aliased.input.tsx

@@ -0,0 +1,20 @@
+import * as Carbon from '@carbon/react';
+import { createRoot as mountRoot } from 'react-dom/client';
+import App from './App';
+
+const root = mountRoot(document.getElementById('root')!);
+root.render(
+  <Carbon.FeatureFlags enableV12Release={false} {...featureFlags}>
+    <App />
+  </Carbon.FeatureFlags>
+);
+
+const unwrappedRoot = mountRoot(document.getElementById('unwrapped-root')!);
+unwrappedRoot.render(<App />);
+
+const wrappedRoot = mountRoot(document.getElementById('wrapped-root')!);
+wrappedRoot.render(
+  <Carbon.FeatureFlags>
+    <App />
+  </Carbon.FeatureFlags>
+);

package/transforms/__testfixtures__/enable-v12-release-aliased.output.tsx

@@ -0,0 +1,22 @@
+import * as Carbon from '@carbon/react';
+import { createRoot as mountRoot } from 'react-dom/client';
+import App from './App';
+
+const root = mountRoot(document.getElementById('root')!);
+root.render(
+  <Carbon.FeatureFlags {...featureFlags} enableV12Release>
+    <App />
+  </Carbon.FeatureFlags>
+);
+
+const unwrappedRoot = mountRoot(document.getElementById('unwrapped-root')!);
+unwrappedRoot.render(<Carbon.FeatureFlags enableV12Release>
+  <App />
+</Carbon.FeatureFlags>);
+
+const wrappedRoot = mountRoot(document.getElementById('wrapped-root')!);
+wrappedRoot.render(
+  <Carbon.FeatureFlags enableV12Release>
+    <App />
+  </Carbon.FeatureFlags>
+);

package/transforms/__testfixtures__/enable-v12-release.input.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMClient, { createRoot, hydrateRoot } from 'react-dom/client';
+import { Button } from '@carbon/react';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+ReactDOM.render(<App />, document.getElementById('legacy-root'));
+
+hydrateRoot(document.getElementById('hydrated-root'), <App />);
+
+ReactDOMClient.createRoot(document.getElementById('chained-root')).render(
+  <App />
+);
+
+const preview = <App />;

package/transforms/__testfixtures__/enable-v12-release.output.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMClient, { createRoot, hydrateRoot } from 'react-dom/client';
+import { Button, FeatureFlags } from '@carbon/react';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <FeatureFlags enableV12Release>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </FeatureFlags>
+);
+
+ReactDOM.render(<FeatureFlags enableV12Release>
+  <App />
+</FeatureFlags>, document.getElementById('legacy-root'));
+
+hydrateRoot(document.getElementById('hydrated-root'), <FeatureFlags enableV12Release>
+  <App />
+</FeatureFlags>);
+
+ReactDOMClient.createRoot(document.getElementById('chained-root')).render(
+  <FeatureFlags enableV12Release>
+    <App />
+  </FeatureFlags>
+);
+
+const preview = <App />;

package/transforms/__tests__/enable-v12-release-test.js

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment node
+ */
+
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest, applyTransform } = require('jscodeshift/dist/testUtils');
+const transform = require('../enable-v12-release');
+
+defineTest(__dirname, 'enable-v12-release');
+defineTest(__dirname, 'enable-v12-release', null, 'enable-v12-release-aliased');
+
+it('does not change an application with the v12 release flag enabled', () => {
+  const source = `
+    import { FeatureFlags } from '@carbon/react';
+    import { createRoot } from 'react-dom/client';
+    import App from './App';
+
+    const root = createRoot(document.getElementById('root'));
+    root.render(
+      <FeatureFlags enableV12Release>
+        <App />
+      </FeatureFlags>
+    );
+  `;
+
+  expect(applyTransform(transform, {}, { source })).toBe('');
+});

package/transforms/enable-v12-release.js

@@ -0,0 +1,406 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Wrap the application passed to a React root with the v12 release feature flag.
+ */
+
+'use strict';
+
+const defaultOptions = {
+  quote: 'single',
+  trailingComma: true,
+};
+
+function transform(fileInfo, api, options) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  const printOptions = options.printOptions || defaultOptions;
+  const reactDomBindings = getReactDomBindings(root, j);
+  const reactRootBindings = getReactRootBindings(root, j, reactDomBindings);
+  const renderArguments = findRenderArguments(
+    root,
+    j,
+    reactDomBindings,
+    reactRootBindings
+  );
+
+  if (renderArguments.length === 0) {
+    return null;
+  }
+
+  const featureFlags = getFeatureFlagsReference(root, j);
+  let didChange = false;
+
+  for (const argumentPath of renderArguments) {
+    const application = argumentPath.node;
+
+    if (isNamedJSXElement(application, featureFlags.jsxName)) {
+      didChange = enableV12Release(application.openingElement, j) || didChange;
+      continue;
+    }
+
+    argumentPath.replace(
+      createFeatureFlagsWrapper(application, featureFlags, j)
+    );
+    didChange = true;
+  }
+
+  if (!didChange) {
+    return null;
+  }
+
+  if (featureFlags.needsImport) {
+    addFeatureFlagsImport(root, featureFlags, j);
+  }
+
+  return root.toSource(printOptions);
+}
+
+function getReactDomBindings(root, j) {
+  const bindings = {
+    createRoot: new Set(),
+    hydrateRoot: new Set(),
+    render: new Set(),
+    reactDom: new Set(),
+  };
+
+  root
+    .find(j.ImportDeclaration)
+    .filter(
+      (path) =>
+        path.node.source.value === 'react-dom' ||
+        path.node.source.value === 'react-dom/client'
+    )
+    .forEach((path) => {
+      const source = path.node.source.value;
+
+      for (const specifier of path.node.specifiers) {
+        if (
+          specifier.type === 'ImportDefaultSpecifier' ||
+          specifier.type === 'ImportNamespaceSpecifier'
+        ) {
+          bindings.reactDom.add(specifier.local.name);
+          continue;
+        }
+
+        if (
+          specifier.type !== 'ImportSpecifier' ||
+          path.node.importKind === 'type' ||
+          specifier.importKind === 'type'
+        ) {
+          continue;
+        }
+
+        const importedName = specifier.imported.name;
+        if (
+          source === 'react-dom/client' &&
+          (importedName === 'createRoot' || importedName === 'hydrateRoot')
+        ) {
+          bindings[importedName].add(specifier.local.name);
+        } else if (source === 'react-dom' && importedName === 'render') {
+          bindings.render.add(specifier.local.name);
+        }
+      }
+    });
+
+  return bindings;
+}
+
+function getReactRootBindings(root, j, reactDomBindings) {
+  const rootBindings = new Set();
+
+  root.find(j.VariableDeclarator).forEach((path) => {
+    if (
+      path.node.id.type === 'Identifier' &&
+      isCreateRootCall(path.node.init, reactDomBindings)
+    ) {
+      rootBindings.add(path.node.id.name);
+    }
+  });
+
+  root.find(j.AssignmentExpression).forEach((path) => {
+    if (
+      path.node.left.type === 'Identifier' &&
+      isCreateRootCall(path.node.right, reactDomBindings)
+    ) {
+      rootBindings.add(path.node.left.name);
+    }
+  });
+
+  return rootBindings;
+}
+
+function findRenderArguments(root, j, reactDomBindings, reactRootBindings) {
+  const argumentsToWrap = [];
+
+  root.find(j.CallExpression).forEach((path) => {
+    const { callee } = path.node;
+
+    if (isHydrateRootCall(path.node, reactDomBindings)) {
+      addJSXArgument(path, 1, argumentsToWrap);
+      return;
+    }
+
+    if (
+      callee.type === 'Identifier' &&
+      reactDomBindings.render.has(callee.name)
+    ) {
+      addJSXArgument(path, 0, argumentsToWrap);
+      return;
+    }
+
+    if (!isMemberCall(callee, 'render') && !isMemberCall(callee, 'hydrate')) {
+      return;
+    }
+
+    if (
+      (callee.object.type === 'Identifier' &&
+        (reactRootBindings.has(callee.object.name) ||
+          reactDomBindings.reactDom.has(callee.object.name))) ||
+      isCreateRootCall(callee.object, reactDomBindings)
+    ) {
+      addJSXArgument(path, 0, argumentsToWrap);
+    }
+  });
+
+  return argumentsToWrap;
+}
+
+function addJSXArgument(callPath, argumentIndex, argumentsToWrap) {
+  const argument = callPath.node.arguments[argumentIndex];
+  if (argument?.type === 'JSXElement' || argument?.type === 'JSXFragment') {
+    argumentsToWrap.push(callPath.get('arguments', argumentIndex));
+  }
+}
+
+function isCreateRootCall(node, reactDomBindings) {
+  if (!node || node.type !== 'CallExpression') {
+    return false;
+  }
+
+  if (
+    node.callee.type === 'Identifier' &&
+    reactDomBindings.createRoot.has(node.callee.name)
+  ) {
+    return true;
+  }
+
+  return (
+    isMemberCall(node.callee, 'createRoot') &&
+    node.callee.object.type === 'Identifier' &&
+    reactDomBindings.reactDom.has(node.callee.object.name)
+  );
+}
+
+function isHydrateRootCall(node, reactDomBindings) {
+  if (node.callee.type === 'Identifier') {
+    return reactDomBindings.hydrateRoot.has(node.callee.name);
+  }
+
+  return (
+    isMemberCall(node.callee, 'hydrateRoot') &&
+    node.callee.object.type === 'Identifier' &&
+    reactDomBindings.reactDom.has(node.callee.object.name)
+  );
+}
+
+function isMemberCall(callee, propertyName) {
+  if (
+    callee.type !== 'MemberExpression' &&
+    callee.type !== 'OptionalMemberExpression'
+  ) {
+    return false;
+  }
+
+  if (callee.computed) {
+    return (
+      (callee.property.type === 'Literal' ||
+        callee.property.type === 'StringLiteral') &&
+      callee.property.value === propertyName
+    );
+  }
+
+  return (
+    callee.property.type === 'Identifier' &&
+    callee.property.name === propertyName
+  );
+}
+
+function getFeatureFlagsReference(root, j) {
+  const carbonImports = root
+    .find(j.ImportDeclaration, {
+      source: { value: '@carbon/react' },
+    })
+    .paths();
+
+  for (const path of carbonImports) {
+    if (path.node.importKind === 'type') {
+      continue;
+    }
+
+    for (const specifier of path.node.specifiers) {
+      if (
+        specifier.type === 'ImportSpecifier' &&
+        specifier.importKind !== 'type' &&
+        specifier.imported.name === 'FeatureFlags'
+      ) {
+        return {
+          importName: specifier.local.name,
+          jsxName: j.jsxIdentifier(specifier.local.name),
+          needsImport: false,
+        };
+      }
+
+      if (specifier.type === 'ImportNamespaceSpecifier') {
+        return {
+          importName: null,
+          jsxName: j.jsxMemberExpression(
+            j.jsxIdentifier(specifier.local.name),
+            j.jsxIdentifier('FeatureFlags')
+          ),
+          needsImport: false,
+        };
+      }
+    }
+  }
+
+  const importName = getAvailableImportName(root, j);
+  return {
+    importName,
+    jsxName: j.jsxIdentifier(importName),
+    needsImport: true,
+  };
+}
+
+function getAvailableImportName(root, j) {
+  let importName = 'FeatureFlags';
+  let suffix = 2;
+
+  while (
+    root.find(j.Identifier, { name: importName }).size() > 0 ||
+    root.find(j.JSXIdentifier, { name: importName }).size() > 0
+  ) {
+    importName = `CarbonFeatureFlags${suffix === 2 ? '' : suffix}`;
+    suffix++;
+  }
+
+  return importName;
+}
+
+function addFeatureFlagsImport(root, featureFlags, j) {
+  const carbonImport = root
+    .find(j.ImportDeclaration, {
+      source: { value: '@carbon/react' },
+    })
+    .filter(
+      (path) =>
+        path.node.importKind !== 'type' &&
+        !path.node.specifiers.some(
+          (specifier) => specifier.type === 'ImportNamespaceSpecifier'
+        )
+    )
+    .at(0);
+  const local =
+    featureFlags.importName === 'FeatureFlags'
+      ? null
+      : j.identifier(featureFlags.importName);
+  const specifier = j.importSpecifier(j.identifier('FeatureFlags'), local);
+
+  if (carbonImport.size() > 0) {
+    carbonImport.get().node.specifiers.push(specifier);
+    return;
+  }
+
+  const declaration = j.importDeclaration(
+    [specifier],
+    j.literal('@carbon/react')
+  );
+  const lastImport = root.find(j.ImportDeclaration).at(-1);
+
+  if (lastImport.size() > 0) {
+    lastImport.insertAfter(declaration);
+  } else {
+    root.get().node.program.body.unshift(declaration);
+  }
+}
+
+function isNamedJSXElement(node, expectedName) {
+  return (
+    node.type === 'JSXElement' &&
+    areJSXNamesEqual(node.openingElement.name, expectedName)
+  );
+}
+
+function areJSXNamesEqual(actual, expected) {
+  if (actual.type !== expected.type) {
+    return false;
+  }
+
+  if (actual.type === 'JSXIdentifier') {
+    return actual.name === expected.name;
+  }
+
+  if (actual.type === 'JSXMemberExpression') {
+    return (
+      areJSXNamesEqual(actual.object, expected.object) &&
+      areJSXNamesEqual(actual.property, expected.property)
+    );
+  }
+
+  return false;
+}
+
+function enableV12Release(openingElement, j) {
+  const attributes = openingElement.attributes;
+  const releaseAttributes = attributes.filter(
+    (attribute) =>
+      attribute.type === 'JSXAttribute' &&
+      attribute.name.name === 'enableV12Release'
+  );
+  const lastAttribute = attributes[attributes.length - 1];
+  const isEnabled =
+    releaseAttributes.length === 1 &&
+    releaseAttributes[0] === lastAttribute &&
+    (lastAttribute.value === null ||
+      (lastAttribute.value.type === 'JSXExpressionContainer' &&
+        (lastAttribute.value.expression.type === 'BooleanLiteral' ||
+          lastAttribute.value.expression.type === 'Literal') &&
+        lastAttribute.value.expression.value === true));
+
+  if (isEnabled) {
+    return false;
+  }
+
+  openingElement.attributes = attributes
+    .filter(
+      (attribute) =>
+        attribute.type !== 'JSXAttribute' ||
+        attribute.name.name !== 'enableV12Release'
+    )
+    .concat(j.jsxAttribute(j.jsxIdentifier('enableV12Release')));
+  return true;
+}
+
+function createFeatureFlagsWrapper(application, featureFlags, j) {
+  return j.jsxElement(
+    j.jsxOpeningElement(
+      cloneJSXName(featureFlags.jsxName),
+      [j.jsxAttribute(j.jsxIdentifier('enableV12Release'))],
+      false
+    ),
+    j.jsxClosingElement(cloneJSXName(featureFlags.jsxName)),
+    [j.jsxText('\n'), application, j.jsxText('\n')]
+  );
+}
+
+function cloneJSXName(name) {
+  return JSON.parse(JSON.stringify(name));
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';