fix(build): get our custom TS transformers working again

package.json

@@ -70,7 +70,7 @@
     "sass": "^1.77.4",
     "surge": "^0.23.1",
     "ts-node": "^10.9.2",
-    "ts-patch": "^2.1.0",
+    "ts-patch": "^3.1.2",
     "typescript": "^5.4.5"
   },
   "scripts": {

packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx

@@ -65,7 +65,7 @@ export class ChipWithCategoryGroupDemo extends Component<{}, ChipWithCategoryGro
   render() {
     const { chipGroups } = this.state;
 
-    return chipGroups.map(currentGroup => (
+    return chipGroups.map((currentGroup) => (
       <ChipGroup
         id={currentGroup.id}
         key={currentGroup.category}
@@ -75,7 +75,7 @@ export class ChipWithCategoryGroupDemo extends Component<{}, ChipWithCategoryGro
         closeBtnAriaLabel="Close category demo"
         tooltipPosition="bottom"
       >
-        {currentGroup.chips.map(chip => (
+        {currentGroup.chips.map((chip) => (
           <Chip id={`chip-${currentGroup.category}-${chip}`} key={chip} onClick={() => this.deleteItem(chip)}>
             {chip}
           </Chip>

packages/react-integration/demo-app-ts/src/components/demos/JumpLinksDemo/JumpLinksDemo.tsx

@@ -7,7 +7,7 @@ export const JumpLinksDemo = () => {
     <>
       <PageSection stickyOnBreakpoint={{ default: 'top' }}>
         <JumpLinks isCentered label="Jump to section" scrollableSelector="#scrollable-element">
-          {headings.map(i => (
+          {headings.map((i) => (
             <JumpLinksItem key={i} id={`#heading-${i}`} href={`#heading-${i}`}>
               {`Heading ${i}`}
             </JumpLinksItem>
@@ -16,7 +16,7 @@ export const JumpLinksDemo = () => {
       </PageSection>
       <PageGroup hasOverflowScroll id="scrollable-element">
         <PageSection>
-          {headings.map(i => (
+          {headings.map((i) => (
             <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
               <Title headingLevel="h2" size={'2xl'} id={`heading-${i}`} tabIndex={-1}>
                 {`Heading ${i}`}

packages/react-integration/demo-app-ts/src/components/demos/LabelDemo/LabelDemo.tsx

@@ -20,7 +20,7 @@ export class LabelDemo extends Component {
         <Label href="#" onClose={() => {}}>
           Grey link removeable
         </Label>
-        <span style={{ width: "150px", display: "inline-block"}}>
+        <span style={{ width: '150px', display: 'inline-block' }}>
           <Label id="tooltip" variant="outline">
             Very very very very long label text that should be truncated without textMaxWidth
           </Label>

packages/react-integration/demo-app-ts/src/components/demos/LabelGroupDemo/LabelGroupVerticalDemo.tsx

@@ -39,7 +39,7 @@ export class LabelGroupVerticalDemo extends Component<{}, BadgeLabelState> {
     };
     this.deleteItem = (id: string) => {
       const copyOfbadgeLabelArray = this.state.badgeLabelArray;
-      const index = copyOfbadgeLabelArray.findIndex(labelObj => labelObj.name === id);
+      const index = copyOfbadgeLabelArray.findIndex((labelObj) => labelObj.name === id);
 
       if (index !== -1) {
         copyOfbadgeLabelArray.splice(index, 1);
@@ -62,7 +62,7 @@ export class LabelGroupVerticalDemo extends Component<{}, BadgeLabelState> {
         expandedText="Collapse labels"
         aria-label="Vertical fruit labels"
       >
-        {badgeLabelArray.map(label => (
+        {badgeLabelArray.map((label) => (
           <Label key={label.name} onClose={() => this.deleteItem(label.name)}>
             {label.name}
             <Badge isRead={label.isRead}>{label.count}</Badge>

packages/react-integration/demo-app-ts/src/components/demos/LabelGroupDemo/LabelGroupWithCategoryDemo.tsx

@@ -65,7 +65,7 @@ export class LabelGroupWithCategoryDemo extends Component<{}, LabelWithCategoryG
   render() {
     const { labelGroups } = this.state;
 
-    return labelGroups.map(currentGroup => (
+    return labelGroups.map((currentGroup) => (
       <LabelGroup
         id={currentGroup.id}
         key={currentGroup.category}

packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx

@@ -131,7 +131,7 @@ export class MenuDemo extends Component {
     });
   };
 
-  onMultiOptionSelect = (_event?: React.MouseEvent, itemId?: string | number)=> {
+  onMultiOptionSelect = (_event?: React.MouseEvent, itemId?: string | number) => {
     if (typeof itemId !== 'number') {
       return;
     }

packages/react-integration/demo-app-ts/src/components/demos/ModalNextDemo/ModalNextDemo.tsx

@@ -97,14 +97,14 @@ export class ModalNextDemo extends React.Component<React.HTMLProps<HTMLDivElemen
   handleModalCustomEscapeToggle = (_event?: any, customEscapePressed?: boolean) => {
     this.setState(({ isModalCustomEscapeOpen }) => ({
       isModalCustomEscapeOpen: !isModalCustomEscapeOpen,
-      customEscapePressed: customEscapePressed ?? false 
+      customEscapePressed: customEscapePressed ?? false
     }));
   };
 
   handleModalAlertVariantToggle = (_event?: any, customEscapePressed?: boolean) => {
     this.setState(({ isModalAlertVariantOpen }) => ({
       isModalAlertVariantOpen: !isModalAlertVariantOpen,
-      customEscapePressed: customEscapePressed ?? false 
+      customEscapePressed: customEscapePressed ?? false
     }));
   };
 

packages/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx

@@ -83,10 +83,7 @@ export class OptionsMenuDemo extends React.Component<React.HTMLProps<HTMLDivElem
         </OptionsMenuItem>
       ],
       toggle: (
-        <OptionsMenuToggle
-          onToggle={this.singleOptionOnToggle}
-          toggleTemplate={<>{this.state.toggleTemplateText}</>}
-        />
+        <OptionsMenuToggle onToggle={this.singleOptionOnToggle} toggleTemplate={<>{this.state.toggleTemplateText}</>} />
       ),
       isOpen: this.state.singleOptionIsOpen
     };

packages/react-integration/demo-app-ts/src/components/demos/SearchInputDemo/SearchInputDemo.tsx

@@ -36,7 +36,7 @@ export class SearchInputDemo extends React.Component<SearchInputProps, SearchInp
   };
 
   onNext = () => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const newCurrentResult = prevState.currentResult + 1;
       return {
         currentResult: newCurrentResult <= prevState.resultsCount ? newCurrentResult : prevState.resultsCount
@@ -45,7 +45,7 @@ export class SearchInputDemo extends React.Component<SearchInputProps, SearchInp
   };
 
   onPrevious = () => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const newCurrentResult = prevState.currentResult - 1;
       return {
         currentResult: newCurrentResult > 0 ? newCurrentResult : 1

packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx

@@ -1,17 +1,6 @@
 import React from 'react';
-import {
-  Modal,
-  ModalVariant,
-  Button,
-  TimePicker,
-  InputGroup,
-  InputGroupItem
-} from '@patternfly/react-core';
-import {
-  Select,
-  SelectOption,
-  SelectOptionObject
-} from '@patternfly/react-core/deprecated';
+import { Modal, ModalVariant, Button, TimePicker, InputGroup, InputGroupItem } from '@patternfly/react-core';
+import { Select, SelectOption, SelectOptionObject } from '@patternfly/react-core/deprecated';
 
 export const SelectInModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);

packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx

@@ -58,11 +58,7 @@ export class SliderDemo extends Component<SliderDemoState> {
     this.setState({ valueDiscreteMinMax: value });
   };
 
-  onChangeDiscrete = (
-    _event: SliderOnChangeEvent,
-    value: number,
-    inputValue?: number,
-  ) => {
+  onChangeDiscrete = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => {
     let newValue;
     let newInputValue;
 
@@ -100,11 +96,7 @@ export class SliderDemo extends Component<SliderDemoState> {
     });
   };
 
-  onChangePercent = (
-    _event: SliderOnChangeEvent,
-    value: number,
-    inputValue?: number,
-  ) => {
+  onChangePercent = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => {
     let newValue;
     let newInputValue;
 

packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx

@@ -36,7 +36,7 @@ export class SwitchDemo extends React.Component<{}, SwitchState> {
     this.setState({
       table: {
         ...this.state.table,
-        data: this.state.table.data.map(d => (d.id === id ? { ...d, isChecked } : d))
+        data: this.state.table.data.map((d) => (d.id === id ? { ...d, isChecked } : d))
       }
     });
   };
@@ -82,7 +82,7 @@ export class SwitchDemo extends React.Component<{}, SwitchState> {
       const [_first, ...rest] = data;
       rr = rest;
     }
-    const rows = rr.map(r => ({
+    const rows = rr.map((r) => ({
       cells: [
         {
           title: <Switch id={r.id} isChecked={r.isChecked} onChange={this.handleChangeTable(r.id)} />

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import * as React from 'react';
 import {
   Table,

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  compoundExpand,
-  IRow,
-  ICell,
-  IRowCell
-} from '@patternfly/react-table';
+import { compoundExpand, IRow, ICell, IRowCell } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -217,7 +212,7 @@ export class TableCompoundExpandableDemo extends React.Component<TableProps, Tab
       rowCells[colIndex] = { ...thisCell, props: { ...thisCell.props, isOpen: false } };
       newRows[rowIndex] = {
         ...newRows[rowIndex],
-        isOpen: rowCells.some(cell => cell.props && cell.props.isOpen)
+        isOpen: rowCells.some((cell) => cell.props && cell.props.isOpen)
       };
     }
     this.setState({

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  compoundExpand,
-  IRow,
-  ICell,
-  IRowCell
-} from '@patternfly/react-table';
+import { compoundExpand, IRow, ICell, IRowCell } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -202,7 +197,7 @@ export class TableEditableCompoundExpandableDemo extends React.Component<TablePr
 
   onExpand(_event: React.MouseEvent, rowIndex: number, colIndex: number, isOpen: boolean) {
     const newRows = Array.from(this.state.rows);
-    const rowCells = Array.from(newRows[rowIndex].cells as IRowCell[]) ;
+    const rowCells = Array.from(newRows[rowIndex].cells as IRowCell[]);
     const thisCell = rowCells[colIndex];
 
     if (!isOpen) {
@@ -217,7 +212,7 @@ export class TableEditableCompoundExpandableDemo extends React.Component<TablePr
       rowCells[colIndex] = { ...thisCell, props: { ...thisCell.props, isOpen: false } };
       newRows[rowIndex] = {
         ...newRows[rowIndex],
-        isOpen: rowCells.some(cell => cell.props && cell.props.isOpen)
+        isOpen: rowCells.some((cell) => cell.props && cell.props.isOpen)
       };
     }
     this.setState({

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx

@@ -54,7 +54,7 @@ export class TableFavoritesDemo extends React.Component<TableProps, TableState>
     let rows;
     if (rowId === -1) {
       // header row
-      rows = this.state.rows.map(oneRow => {
+      rows = this.state.rows.map((oneRow) => {
         oneRow.selected = isSelected;
         return oneRow;
       });
@@ -99,7 +99,7 @@ export class TableFavoritesDemo extends React.Component<TableProps, TableState>
     } else {
       const userIndex = index - 2;
       sortedRows = [...this.state.rows].sort((a, b) => {
-        const aValue  = a.cells?.[userIndex];
+        const aValue = a.cells?.[userIndex];
         const bValue = b.cells?.[userIndex];
 
         if (typeof aValue !== 'number' || typeof bValue !== 'number') {
@@ -109,7 +109,7 @@ export class TableFavoritesDemo extends React.Component<TableProps, TableState>
         if (aValue < bValue) {
           return -1;
         }
-        
+
         if (aValue > bValue) {
           return 1;
         }

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx

@@ -1,7 +1,4 @@
-import {
-  ICell,
-  IRow
-} from '@patternfly/react-table';
+import { ICell, IRow } from '@patternfly/react-table';
 import { Table, TableBody, TableHeader, TableProps, type OnRowClick } from '@patternfly/react-table/deprecated';
 import { Component } from 'react';
 

packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx

@@ -102,7 +102,7 @@ export class TabDemo extends Component {
             ref={this.contentRef1}
             aria-label="Tab item 1"
             // eslint-disable-next-line no-console
-            onAuxClick={event => console.log(event)}
+            onAuxClick={(event) => console.log(event)}
           >
             Tab 1 section
           </TabContent>

packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx

@@ -70,7 +70,7 @@ export class TabUncontrolledDemo extends Component {
             ref={this.contentRef1}
             aria-label="Tab item 1"
             // eslint-disable-next-line no-console
-            onAuxClick={event => console.log(event)}
+            onAuxClick={(event) => console.log(event)}
           >
             Tab 1 section
           </TabContent>

packages/transformer-cjs-imports/index.js

@@ -13,7 +13,7 @@ function transformerCJSImports(context) {
   // Only transform for CJS build
   // ESM: module = 5, CJS: module = 1
   if (context.getCompilerOptions().module !== 1) {
-    return node => node;
+    return (node) => node;
   }
   /**
    * If a node is an import, change its moduleSpecifier
@@ -23,14 +23,14 @@ function transformerCJSImports(context) {
    */
   function visit(node) {
     if (ts.isImportDeclaration(node) && /@patternfly\/.*\/dist\/esm/.test(node.moduleSpecifier.text)) {
-      const newNode = ts.getMutableClone(node);
+      const newNode = ts.factory.cloneNode(node);
       const newPath = node.moduleSpecifier.text.replace(/dist\/esm/, 'dist/js');
-      newNode.moduleSpecifier = ts.createStringLiteral(newPath, true);
+      newNode.moduleSpecifier = ts.factory.createStringLiteral(newPath, true);
       return newNode;
     }
-    return ts.visitEachChild(node, child => visit(child), context);
+    return ts.visitEachChild(node, (child) => visit(child), context);
   }
-  return node => ts.visitNode(node, visit);
+  return (node) => ts.visitNode(node, visit);
 }
 
 module.exports = () => ({

packages/transformer-react-styles-esm-imports/index.ts

@@ -19,7 +19,6 @@ const transformer: ts.TransformerFactory<ts.SourceFile> = (context) => (sourceFi
       if (/@patternfly\/react-styles\/css/.test(text) && !/\.[a-z]{1,5}('|");?$/.test(text)) {
         return factory.updateImportDeclaration(
           node,
-          node.decorators,
           node.modifiers,
           node.importClause,
           factory.createStringLiteral(text.trim().replace(/"|'/g, '').replace(/$/, '.mjs'), true),