Feature/ellie

README.md

@@ -41,7 +41,7 @@
 You can view your application's file structure and click on a snapshot to view
 your app's state. State can be visualized in a Component Graph, JSON Tree, or
 Performance Graph. Snapshot history can be visualized in the History tab.
-The Web Metrics tab provides some useful metrics for site performance. The accessibility tab 
+The Web Metrics tab provides some useful metrics for site performance. The accessibility tab
 visualizes an app's accessibility tree per state change.
 Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
 <br>
@@ -89,7 +89,7 @@ Download the recorded snapshots as a JSON file and upload them to access state t
 </p>
 <br>
 
-### 🔹 Reconnect and Status
+### 🔹 and Status
 
 If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
 <br>

demo-app-next/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

demo-app-next/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

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,82 @@
-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 ButtonProps = {
+  id: string;
+  label: string;
+  color?: string;
+  initialCount?: number;
+};
+
+type IncrementClassState = {
+  count: number;
+};
+
+class IncrementClass extends Component<ButtonProps, IncrementClassState> {
+  state = {
+    count: this.props.initialCount || 0,
+  };
+
+  handleClick = (): void => {
+    this.setState((prevState: IncrementClassState) => ({
+      count: prevState.count + 1,
+    }));
+  };
+
+  render(): JSX.Element {
+    return (
+      <div>
+        <button
+          id={this.props.id}
+          className='increment'
+          onClick={this.handleClick}
+          style={{ backgroundColor: this.props.color }}
+        >
+          {this.props.label} {this.state.count} times.
+        </button>
+      </div>
+    );
   }
+}
+
+const IncrementFunction = (props: ButtonProps): JSX.Element => {
+  const [count, setCount] = useState(props.initialCount || 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
+        id={props.id}
+        className='increment'
+        onClick={handleClick}
+        style={{ backgroundColor: props.color }}
+      >
+        {props.label} {count} times.
+      </button>
     </div>
   );
+};
+
+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 id='class1' label='Class Button 1:' color='#f00008' initialCount={5} />
+        <IncrementClass id='class2' label='Class Button 2:' color='#62d6fb' />
+        <IncrementFunction
+          id='func1'
+          label='Function Button 1:'
+          color='#6288fb'
+          initialCount={10}
+        />
+        <IncrementFunction id='func2' label='Function Button 2:' color='#ff6569' />
+      </div>
+    );
+  }
 }
 
 export default Buttons;

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

@@ -0,0 +1,231 @@
+import React, { useState, useReducer } from 'react';
+
+type CounterProps = {
+  initialCount?: number;
+  step?: number;
+  title?: string;
+  theme?: {
+    backgroundColor?: string;
+    textColor?: string;
+  };
+};
+
+type CounterState = {
+  count: number;
+  history: number[];
+  lastAction: string;
+};
+
+type CounterAction =
+  | { type: 'INCREMENT' }
+  | { type: 'DECREMENT' }
+  | { type: 'DOUBLE' }
+  | { type: 'RESET' }
+  | { type: 'ADD'; payload: number }
+  | { type: 'SET_STATE'; payload: CounterState };
+
+type SecondaryCounterState = {
+  count: number;
+  multiplier: number;
+  lastOperation: string;
+  history: number[];
+};
+
+type SecondaryCounterAction =
+  | { type: 'MULTIPLY' }
+  | { type: 'DIVIDE' }
+  | { type: 'SET_MULTIPLIER'; payload: number }
+  | { type: 'RESET' }
+  | { type: 'SET_STATE'; payload: SecondaryCounterState };
+
+function counterReducer(state: CounterState, action: CounterAction, step: number): CounterState {
+  switch (action.type) {
+    case 'INCREMENT':
+      return {
+        ...state,
+        count: state.count + step,
+        history: [...state.history, state.count + step],
+        lastAction: 'INCREMENT',
+      };
+    case 'DECREMENT':
+      return {
+        ...state,
+        count: state.count - step,
+        history: [...state.history, state.count - step],
+        lastAction: 'DECREMENT',
+      };
+    case 'DOUBLE':
+      return {
+        ...state,
+        count: state.count * 2,
+        history: [...state.history, state.count * 2],
+        lastAction: 'DOUBLE',
+      };
+    case 'RESET':
+      return {
+        count: 0,
+        history: [],
+        lastAction: 'RESET',
+      };
+    case 'ADD':
+      return {
+        ...state,
+        count: state.count + action.payload,
+        history: [...state.history, state.count + action.payload],
+        lastAction: `ADD ${action.payload}`,
+      };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastAction: 'SET_STATE',
+      };
+    default:
+      return state;
+  }
+}
+
+function secondaryCounterReducer(
+  state: SecondaryCounterState,
+  action: SecondaryCounterAction,
+): SecondaryCounterState {
+  switch (action.type) {
+    case 'MULTIPLY':
+      return {
+        ...state,
+        count: state.count * state.multiplier,
+        history: [...state.history, state.count * state.multiplier],
+        lastOperation: `Multiplied by ${state.multiplier}`,
+      };
+    case 'DIVIDE':
+      return {
+        ...state,
+        count: state.count / state.multiplier,
+        history: [...state.history, state.count / state.multiplier],
+        lastOperation: `Divided by ${state.multiplier}`,
+      };
+    case 'SET_MULTIPLIER':
+      return {
+        ...state,
+        multiplier: action.payload,
+        history: [...state.history],
+        lastOperation: `Set multiplier to ${action.payload}`,
+      };
+    case 'RESET':
+      return {
+        count: 0,
+        multiplier: 2,
+        history: [],
+        lastOperation: 'Reset',
+      };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastOperation: 'SET_STATE',
+      };
+    default:
+      return state;
+  }
+}
+
+function FunctionalReducerCounter({
+  initialCount = 0,
+  step = 1,
+  title = 'Function-based Reducer Counter',
+  theme = {
+    backgroundColor: '#ffffff',
+    textColor: '#330002',
+  },
+}: CounterProps): JSX.Element {
+  const [clickCount, setClickCount] = useState(0);
+  const [lastClickTime, setLastClickTime] = useState<Date | null>(null);
+  const [averageTimeBetweenClicks, setAverageTimeBetweenClicks] = useState<number>(0);
+
+  const [state, dispatch] = useReducer(
+    (state: CounterState, action: CounterAction) => counterReducer(state, action, step),
+    {
+      count: initialCount,
+      history: [],
+      lastAction: 'none',
+    },
+  );
+
+  const [secondaryState, secondaryDispatch] = useReducer(secondaryCounterReducer, {
+    count: initialCount,
+    multiplier: 2,
+    history: [],
+    lastOperation: 'none',
+  });
+
+  return (
+    <div
+      className='reducer-counter'
+      style={{
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+      }}
+    >
+      <h2>{title}</h2>
+
+      <div className='counter-value'>
+        <h3>Primary Counter: {state.count}</h3>
+      </div>
+
+      <div className='counter-buttons'>
+        <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment (+{step})</button>
+        <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement (-{step})</button>
+        <button onClick={() => dispatch({ type: 'DOUBLE' })}>Double Value</button>
+        <button onClick={() => dispatch({ type: 'ADD', payload: 5 })}>Add 5</button>
+        <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
+      </div>
+
+      <div className='counter-info'>
+        <h4>History:</h4>
+        <div className='history-list'>
+          {state.history.map((value, index) => (
+            <span key={index}>
+              {value}
+              {index < state.history.length - 1 ? ' → ' : ''}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className='secondary-counter'
+        style={{ marginTop: '2rem', borderTop: '1px solid #ccc', paddingTop: '1rem' }}
+      >
+        <h3>Secondary Counter: {secondaryState.count}</h3>
+        <div className='counter-buttons'>
+          <button onClick={() => secondaryDispatch({ type: 'MULTIPLY' })}>
+            Multiply by {secondaryState.multiplier}
+          </button>
+          <button onClick={() => secondaryDispatch({ type: 'DIVIDE' })}>
+            Divide by {secondaryState.multiplier}
+          </button>
+          <button
+            onClick={() =>
+              secondaryDispatch({ type: 'SET_MULTIPLIER', payload: secondaryState.multiplier + 1 })
+            }
+          >
+            Increase Multiplier
+          </button>
+          <button onClick={() => secondaryDispatch({ type: 'RESET' })}>Reset</button>
+        </div>
+        <div className='counter-info'>
+          <h4>Current Multiplier: {secondaryState.multiplier}</h4>
+          <h4>History:</h4>
+          <div className='history-list'>
+            {secondaryState.history.map((value, index) => (
+              <span key={index}>
+                {value}
+                {index < secondaryState.history.length - 1 ? ' → ' : ''}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FunctionalReducerCounter;