hook parsing function works for webpack transformed, direct, and namespcae useState patterns

Author: garrettlchow

demo-app/package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "@types/express": "^4.17.13",
@@ -17,6 +18,7 @@
     "@types/react-dom": "^17.0.19",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.2.0",
+    "core-js": "^3.39.0",
     "css-loader": "^6.5.1",
     "html-webpack-plugin": "^5.5.0",
     "node": "^16.0.0",

demo-app/src/client/Components/Buttons.tsx

@@ -1,22 +1,64 @@
-import React from 'react';
-import Increment from './Increment';
+import React, { Component, useState } from 'react';
 
-function Buttons(): JSX.Element {
-  const buttons = [];
-  for (let i = 0; i < 4; i++) {
-    buttons.push(<Increment key={i} />);
+// Type for IncrementClass state
+type IncrementClassState = {
+  count: number;
+};
+
+// Class-based Increment Component
+class IncrementClass extends Component<{}, IncrementClassState> {
+  state = {
+    count: 0,
+  };
+
+  handleClick = (): void => {
+    this.setState((prevState: IncrementClassState) => ({
+      count: prevState.count + 1,
+    }));
+  };
+
+  render(): JSX.Element {
+    return (
+      <div>
+        <button className='increment' onClick={this.handleClick}>
+          You clicked me {this.state.count} times.
+        </button>
+      </div>
+    );
   }
+}
+
+// Function-based Increment Component
+const IncrementFunction = (): JSX.Element => {
+  const [count, setCount] = useState(0);
+
+  const handleClick = (): void => {
+    setCount((prev) => prev + 1);
+  };
 
   return (
-    <div className='buttons'>
-      <h1>Stateful Buttons</h1>
-      <h4>
-        These buttons are functional components that each manage their own state with the useState
-        hook.
-      </h4>
-      {buttons}
+    <div>
+      <button className='increment' onClick={handleClick}>
+        You clicked me {count} times.
+      </button>
     </div>
   );
+};
+
+// Main Buttons Component
+class Buttons extends Component {
+  render(): JSX.Element {
+    return (
+      <div className='buttons'>
+        <h1>Mixed State Counter</h1>
+        <h4>First two buttons use class components, last two use function components.</h4>
+        <IncrementClass />
+        <IncrementClass />
+        <IncrementFunction />
+        <IncrementFunction />
+      </div>
+    );
+  }
 }
 
 export default Buttons;

demo-app/src/client/Components/Increment.tsx

@@ -11,7 +11,10 @@ function Nav(): JSX.Element {
         Tic-Tac-Toe
       </Link>
       <Link className='link' to='/buttons'>
-        Counter
+        State Counter
+      </Link>
+      <Link className='link' to='/reducer'>
+        Reducer Counter
       </Link>
     </div>
   );

demo-app/src/client/Components/Nav.tsx

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+
+type CounterState = {
+  count: number;
+  history: number[];
+  lastAction: string;
+};
+
+type CounterAction =
+  | { type: 'INCREMENT' }
+  | { type: 'DECREMENT' }
+  | { type: 'DOUBLE' }
+  | { type: 'RESET' }
+  | { type: 'ADD'; payload: number };
+
+// Static reducer function to handle state updates
+class ReducerCounter extends Component<{}, CounterState> {
+  // Initial state definition
+  static initialState: CounterState = {
+    count: 0,
+    history: [],
+    lastAction: 'none',
+  };
+
+  // Static reducer method to handle state updates
+  static reducer(state: CounterState, action: CounterAction): CounterState {
+    switch (action.type) {
+      case 'INCREMENT':
+        return {
+          ...state,
+          count: state.count + 1,
+          history: [...state.history, state.count + 1],
+          lastAction: 'INCREMENT',
+        };
+      case 'DECREMENT':
+        return {
+          ...state,
+          count: state.count - 1,
+          history: [...state.history, state.count - 1],
+          lastAction: 'DECREMENT',
+        };
+      case 'DOUBLE':
+        return {
+          ...state,
+          count: state.count * 2,
+          history: [...state.history, state.count * 2],
+          lastAction: 'DOUBLE',
+        };
+      case 'RESET':
+        return {
+          ...ReducerCounter.initialState,
+          lastAction: 'RESET',
+        };
+      case 'ADD':
+        return {
+          ...state,
+          count: state.count + action.payload,
+          history: [...state.history, state.count + action.payload],
+          lastAction: `ADD ${action.payload}`,
+        };
+      default:
+        return state;
+    }
+  }
+
+  constructor(props: {}) {
+    super(props);
+    this.state = ReducerCounter.initialState;
+
+    // Bind dispatch method
+    this.dispatch = this.dispatch.bind(this);
+  }
+
+  // Method to handle state updates using the reducer
+  dispatch(action: CounterAction): void {
+    this.setState((currentState) => ReducerCounter.reducer(currentState, action));
+  }
+
+  render(): JSX.Element {
+    return (
+      <div className='reducer-counter'>
+        <h2>Class-based Reducer Counter</h2>
+        <div className='counter-value'>
+          <h3>Current Count: {this.state.count}</h3>
+        </div>
+
+        <div className='counter-buttons'>
+          <button onClick={() => this.dispatch({ type: 'INCREMENT' })}>Increment (+1)</button>
+          <button onClick={() => this.dispatch({ type: 'DECREMENT' })}>Decrement (-1)</button>
+          <button onClick={() => this.dispatch({ type: 'DOUBLE' })}>Double Value</button>
+          <button onClick={() => this.dispatch({ type: 'ADD', payload: 5 })}>Add 5</button>
+          <button onClick={() => this.dispatch({ type: 'RESET' })}>Reset</button>
+        </div>
+
+        <div className='counter-info'>
+          <h4>Last Action: {this.state.lastAction}</h4>
+          <h4>History:</h4>
+          <div className='history-list'>
+            {this.state.history.map((value, index) => (
+              <span key={index}>
+                {value}
+                {index < this.state.history.length - 1 ? ' → ' : ''}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ReducerCounter;

demo-app/src/client/Components/ReducerCounter.tsx

@@ -6,6 +6,7 @@ import Nav from './Components/Nav';
 import Board from './Components/Board';
 import Home from './Components/Home';
 import Buttons from './Components/Buttons';
+import ReducerCounter from './Components/ReducerCounter';
 // import ButtonsWithMoreHooks from './Components/ButtonsWithMoreHooks';
 
 const domNode = document.getElementById('root');
@@ -21,6 +22,7 @@ root.render(
           the public facing Buttons page and the fiber node hooks research page "ButtonsWithMoreHooks" */}
       <Route path='/buttons' element={<Buttons key='Buttons' />} />
       {/* <Route path='/buttons' element={<ButtonsWithMoreHooks key='ButtonsWithMoreHooks'/>} /> */}
+      <Route path='/reducer' element={<ReducerCounter key='ReducerCounter' />} />
     </Routes>
   </BrowserRouter>,