more testing & bug fixes

Author: mohab-sameh

TESTING_PLAN.md

@@ -12,6 +12,14 @@ We searched public GitHub repos for the exact code patterns each of our 6 React
 
 **Phase 2 import note:** On 2026-04-20, 14 additional JSSG codemods were brought forward from `align-with-legacy-codemods`. These codemods target older or niche migration surfaces, so their immediate validation strategy is fixture-first rather than open-source repo-first. Only `class` remains legacy-only.
 
+**Additional rollout research (2026-04-21):** A second repo sweep found three especially useful follow-on candidates beyond the original four test repos:
+- `salesforce/design-system-react` at `825de01` (React 17) remains a high-value second source for `replace-reactdom-render`, `replace-act-import`, and `use-context-hook`.
+- `MetaMask/metamask-extension` at `9c3b57c` (React 17) is a strong `replace-act-import` validation target with 18 real test-file imports.
+- `react-native-snap-carousel` at `9c39995` gives `react-native-view-prop-types` an exact real-world source surface across 4 files, including the tricky case where `ViewPropTypes` is already imported.
+- `DataTurks` at `039d57e` gives `error-boundaries` an exact `unstable_handleError` source hit in production code.
+- `airbnb/react-dates` at `b7bad38` is a useful class-heavy repo for generic class codemods such as `pure-component` and `sort-comp`, though it does not expose many exact legacy API hits.
+- `rsuite` at `0b1482d` still has a large raw `ReactDOM.render` count, but current HEAD is heavily docs/example-driven, so it is a lower-quality source than `salesforce/design-system-react` for rollout decisions.
+
 ---
 
 ## Recommended Test Repos
@@ -208,6 +216,17 @@ Real-repo candidate matches already found in the current testing repos:
 | `remove-context-provider` | `calcom/cal.diy` | Many `Context.Provider` wrappers in source packages |
 | `update-react-imports` | `youzan/zent`, `calcom/cal.diy` | Broad modern React import surface, especially in TS/TSX |
 
+Additional real-repo candidate matches confirmed on 2026-04-21:
+
+| Codemod | Repo Candidate | Notes |
+|---------|----------------|-------|
+| `error-boundaries` | `DataTurks` | Exact `unstable_handleError` hit in `bazaar/src/components/ErrorBoundary/ErrorBoundary.js` |
+| `react-native-view-prop-types` | `react-native-snap-carousel` | Exact `View.propTypes` source hits in 4 files; includes existing `ViewPropTypes` import edge case |
+| `pure-component` | `airbnb/react-dates` | 21 class-component files on current HEAD, mostly wrappers/examples and a few library classes |
+| `sort-comp` | `airbnb/react-dates`, `salesforce/design-system-react` | Good class-heavy surfaces for behavior comparison, even though the pattern itself is structural rather than API-specific |
+| `replace-reactdom-render` | `salesforce/design-system-react` | 316 real JS/JSX files under `components/`, much stronger than docs-heavy `rsuite` HEAD for rollout decisions |
+| `replace-act-import` | `MetaMask/metamask-extension` | 18 exact imports under `ui/` tests |
+
 ---
 
 ## Test Execution Plan

TESTING_REPORT.md

@@ -166,6 +166,37 @@ function viewRequireProperty(statement: SgNode<TSX>): SgNode<TSX> | null {
     .find((property) => property.text() === "View") ?? null;
 }
 
+function hasImportSpecifier(importStmt: SgNode<TSX>, name: string): boolean {
+  return importStmt.findAll({ rule: { kind: "import_specifier" } })
+    .some((specifier) => specifier.field("name")?.text() === name);
+}
+
+function hasRequireProperty(statement: SgNode<TSX>, name: string): boolean {
+  return statement.findAll({ rule: { kind: "shorthand_property_identifier_pattern" } })
+    .some((property) => property.text() === name);
+}
+
+function hasHasteViewPropTypesImport(rootNode: SgNode<TSX>): boolean {
+  return rootNode.findAll({ rule: { kind: "import_statement" } })
+    .some((importStmt) => {
+      const source = importStmt.field("source");
+      return source?.kind() === "string" &&
+        stringValue(source) === "ViewPropTypes";
+    });
+}
+
+function hasHasteViewPropTypesRequire(rootNode: SgNode<TSX>): boolean {
+  return rootNode.findAll({
+    rule: {
+      any: [
+        { pattern: "const ViewPropTypes = require('ViewPropTypes')" },
+        { pattern: "let ViewPropTypes = require('ViewPropTypes')" },
+        { pattern: "var ViewPropTypes = require('ViewPropTypes')" },
+      ],
+    },
+  }).length > 0;
+}
+
 function statementInsertionIndex(source: string, node: SgNode<TSX>): number {
   let index = node.range().end.index;
   while (index < source.length && (source[index] === ";" || source[index] === "\r" || source[index] === "\n")) {
@@ -184,6 +215,14 @@ const transform: Transform<TSX> = async (root) => {
   const hasteRequireStatement = findHasteRequireStatement(rootNode);
   const reactNativeImportStatement = findReactNativeImportStatement(rootNode);
   const reactNativeRequireStatement = findReactNativeRequireStatement(rootNode);
+  const hasExistingHasteViewPropTypesImport = hasHasteViewPropTypesImport(rootNode);
+  const hasExistingHasteViewPropTypesRequire = hasHasteViewPropTypesRequire(rootNode);
+  const hasExistingReactNativeImportViewPropTypes = reactNativeImportStatement
+    ? hasImportSpecifier(reactNativeImportStatement, "ViewPropTypes")
+    : false;
+  const hasExistingReactNativeRequireViewPropTypes = reactNativeRequireStatement
+    ? hasRequireProperty(reactNativeRequireStatement, "ViewPropTypes")
+    : false;
 
   let replacements = 0;
   for (const member of rootNode.findAll({ rule: { kind: "member_expression" } })) {
@@ -209,7 +248,9 @@ const transform: Transform<TSX> = async (root) => {
   }).some(isViewBindingNode);
 
   if (hasteImportStatement) {
-    if (keepViewBinding) {
+    if (hasExistingHasteViewPropTypesImport) {
+      // Keep the existing import intact; the file already binds ViewPropTypes.
+    } else if (keepViewBinding) {
       edits.push({
         startPos: hasteImportStatement.range().end.index,
         endPos: hasteImportStatement.range().end.index,
@@ -219,7 +260,9 @@ const transform: Transform<TSX> = async (root) => {
       edits.push(hasteImportStatement.replace("import ViewPropTypes from 'ViewPropTypes';"));
     }
   } else if (hasteRequireStatement) {
-    if (keepViewBinding) {
+    if (hasExistingHasteViewPropTypesRequire) {
+      // Keep the existing require intact; the file already binds ViewPropTypes.
+    } else if (keepViewBinding) {
       edits.push({
         startPos: statementInsertionIndex(source, hasteRequireStatement),
         endPos: statementInsertionIndex(source, hasteRequireStatement),
@@ -231,7 +274,9 @@ const transform: Transform<TSX> = async (root) => {
   } else if (reactNativeImportStatement) {
     const specifier = viewImportSpecifier(reactNativeImportStatement);
     if (specifier) {
-      if (keepViewBinding) {
+      if (hasExistingReactNativeImportViewPropTypes) {
+        // Keep the existing import intact; the file already binds ViewPropTypes.
+      } else if (keepViewBinding) {
         edits.push({
           startPos: specifier.range().end.index,
           endPos: specifier.range().end.index,
@@ -244,7 +289,9 @@ const transform: Transform<TSX> = async (root) => {
   } else if (reactNativeRequireStatement) {
     const property = viewRequireProperty(reactNativeRequireStatement);
     if (property) {
-      if (keepViewBinding) {
+      if (hasExistingReactNativeRequireViewPropTypes) {
+        // Keep the existing require intact; the file already binds ViewPropTypes.
+      } else if (keepViewBinding) {
         edits.push({
           startPos: property.range().end.index,
           endPos: property.range().end.index,

codemods/jssg/react-native-view-prop-types/scripts/codemod.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View, ViewPropTypes } from 'react-native';
+
+function Component() {
+  return <View />;
+}
+
+Component.propTypes = {
+  style: ViewPropTypes ? ViewPropTypes.style : ViewPropTypes.style,
+};
+
+export default Component;

codemods/jssg/react-native-view-prop-types/tests/destructured-import-existing-view-prop-types/expected.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View, ViewPropTypes } from 'react-native';
+
+function Component() {
+  return <View />;
+}
+
+Component.propTypes = {
+  style: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+};
+
+export default Component;

codemods/jssg/react-native-view-prop-types/tests/destructured-import-existing-view-prop-types/input.tsx

@@ -0,0 +1,10 @@
+{
+  "react-native-view-prop-types-replacements": [
+    {
+      "cardinality": {
+        "file": "tests/destructured-import-existing-view-prop-types/input.tsx"
+      },
+      "count": 1
+    }
+  ]
+}

codemods/jssg/react-native-view-prop-types/tests/destructured-import-existing-view-prop-types/metrics.json

@@ -104,7 +104,11 @@ function usesVarForRequires(rootNode: SgNode<TSX, "program">): boolean {
   return rootNode.find({ rule: { kind: "lexical_declaration" } }) === null;
 }
 
-function firstSortedImportPosition(rootNode: SgNode<TSX, "program">, moduleName: string): number {
+function firstSortedImportPosition(
+  rootNode: SgNode<TSX, "program">,
+  moduleName: string,
+  source: string,
+): number {
   const imports = rootNode.findAll({ rule: { kind: "import_statement" } });
   const lowerModule = moduleName.toLowerCase();
   let target: SgNode<TSX> | null = null;
@@ -122,7 +126,8 @@ function firstSortedImportPosition(rootNode: SgNode<TSX, "program">, moduleName:
 
   if (target) return target.range().start.index;
   const last = imports[imports.length - 1];
-  return last ? last.range().end.index : 0;
+  if (!last) return 0;
+  return statementRange(last, source).end;
 }
 
 function firstSortedRequirePosition(rootNode: SgNode<TSX, "program">, moduleName: string): number {
@@ -313,7 +318,7 @@ const transform: Transform<TSX> = async (root, options) => {
 
   if (!addedPropTypesImportByReplacement && !hasImportOrRequire(rootNode, moduleName)) {
     if (usesImportSyntax(rootNode)) {
-      const pos = firstSortedImportPosition(rootNode, moduleName);
+      const pos = firstSortedImportPosition(rootNode, moduleName, source);
       edits.push({
         startPos: pos,
         endPos: pos,

codemods/jssg/react-proptypes-to-prop-types/scripts/codemod.ts

@@ -0,0 +1,9 @@
+import {React, ReactDOM} from 'nylas-exports'
+import {Menu} from 'nylas-component-kit'
+
+import PropTypes from 'prop-types';
+export default class DropdownMenu extends React.Component {
+  static propTypes = {
+    item: PropTypes.object,
+  }
+}

codemods/jssg/react-proptypes-to-prop-types/tests/custom-react-import-insert-newline/expected.tsx

@@ -0,0 +1,8 @@
+import {React, ReactDOM} from 'nylas-exports'
+import {Menu} from 'nylas-component-kit'
+
+export default class DropdownMenu extends React.Component {
+  static propTypes = {
+    item: React.PropTypes.object,
+  }
+}

codemods/jssg/react-proptypes-to-prop-types/tests/custom-react-import-insert-newline/input.tsx

@@ -0,0 +1,10 @@
+{
+  "react-proptypes-migrations": [
+    {
+      "cardinality": {
+        "file": "tests/custom-react-import-insert-newline/input.tsx"
+      },
+      "count": 1
+    }
+  ]
+}