Feature/garrett

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 reactime
+Copyright (c) 2025 reactime
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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;