add some small tests

Author: KurtGokhan

Assets/Scenes/UIToolkit.unity

@@ -163,7 +163,7 @@ MonoBehaviour:
     SourceText: 
     ResourcesPath: 
     UseDevServer: 1
-    DevServer: http://localhost:3100
+    DevServer: http://localhost:3100/uitoolkit.js
   EngineType: 0
   Globals:
     Entries: []

Assets/Scripts/InteropTest.cs

@@ -1,4 +1,5 @@
 using System;
+using ReactUnity.Helpers;
 using ReactUnity.UGUI;
 using UnityEngine;
 using UnityEngine.InputSystem;
@@ -8,19 +9,11 @@ namespace MyInterop
 {
     public class InteropTest : MonoBehaviour
     {
-        public event Action<string> OnKeyPress;
+        public ReactAction<string> OnKeyPress = new ReactAction<string>();
         IDisposable dispose;
 
-        public Action AddKeyPressListener(object callback)
-        {
-            var cb = ReactUnity.Helpers.Callback.From(callback);
-            Action<string> listener = (val) => cb.Call(val);
-
-            OnKeyPress += listener;
-
-            return () => OnKeyPress -= listener;
-        }
-
+        [Obsolete]
+        public Action AddKeyPressListener(object callback) => OnKeyPress.AddListener(callback);
 
         void OnEnable()
         {

react/package.json

@@ -19,22 +19,22 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@reactunity/material": "^0.15.0",
-    "@reactunity/renderer": "^0.15.0",
-    "@reduxjs/toolkit": "^1.9.2",
-    "axios": "^1.3.3",
+    "@reactunity/renderer": "^0.15.2",
+    "@reduxjs/toolkit": "^1.9.3",
+    "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "clsx": "^1.2.1",
     "history": "^5.3.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
-    "react-icons": "^4.7.1",
+    "react-icons": "^4.8.0",
     "react-jss": "^10.10.0",
     "react-redux": "^8.0.5",
-    "react-router": "^6.8.1",
+    "react-router": "^6.9.0",
     "react-unity-webgl": "^9.4.0",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.6",
+    "styled-components": "^5.3.9",
     "twin.macro": "^3.1.0"
   },
   "devDependencies": {
@@ -43,7 +43,7 @@
     "@types/react-redux": "^7.1.25",
     "babel-plugin-twin": "^1.1.0",
     "tailwindcss": "^3.2.7",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.2"
   },
   "babelMacros": {
     "twin": {

react/src/entry/uitoolkit.tsx

@@ -1 +1 @@
-import '../uitoolkit';
+import '../uitoolkit/home';

react/src/pages/style-frameworks/tailwind/index.tsx

@@ -2,7 +2,6 @@ import './index.css';
 
 export function TailwindPage() {
   return <div className={'tailwind-root flex-row'}>
-
     <div className={'flex-row'}>
       <button className={'bg-blue-400 hover:bg-red-400 p-3 m-3 transition-colors hover:translate-y-1'}>
         Tailwind Button

react/src/pages/todo/index.css

@@ -8,6 +8,8 @@
   background-color: #dedede;
   border-radius: 8px;
   box-shadow: 1px 1px 6px -2px black;
+
+  --item-animation-duration: 400ms;
 }
 
 .todo-header {
@@ -44,7 +46,11 @@
   border: 1px solid #dedede;
   border-radius: 8px;
 
-  --item-animation-duration: 400ms;
+  /* --item-animation-duration: 400ms; */
+}
+
+.todo-item:before {
+  content: var(--item-animation-duration);
 }
 
 .todo-item:not(:first-child) {

react/src/tests/README.md

@@ -0,0 +1,3 @@
+### What is this folder?
+
+This folder contains quick reproductions for testing some bug reports by users. You can delete this report safely.

react/src/tests/error-test/index.tsx

@@ -0,0 +1,65 @@
+import { render } from "@reactunity/renderer";
+import React, { useState } from "react";
+
+function ErrorChild2() {
+  const [state, setState] = useState(null);
+
+  return <div class="error-child-2">
+    {state.value}
+  </div>;
+}
+
+function ErrorChild1() {
+  return <div class="error-child-1">
+    <ErrorChild2 />
+  </div>;
+}
+
+export default function ErrorTest() {
+
+  return (
+    <ErrorChild1 />
+  );
+}
+
+
+const createdRefs = new Set();
+
+function createRef(ref) {
+  if (ref && !createdRefs.has(ref)) {
+    createdRefs.add(ref);
+    console.log("Created ref", ref);
+  }
+}
+
+export class ErrorBoundary extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <view ref={createRef}
+        id='__react-unity-error-boundary'
+        style={{ color: 'crimson', padding: 20, fontSize: 16 }}>
+        <view style={{ marginBottom: '12px' }}>
+          {this.state.error?.message || ''}
+        </view>
+        <view>{this.state.error?.stack || ''}</view>
+      </view>;
+    }
+
+    return this.props.children;
+  }
+}
+
+render(
+  <ErrorBoundary>
+    <ErrorTest />
+  </ErrorBoundary>, { disableHelpers: true });

react/src/tests/stress-test/index.css

@@ -0,0 +1,3 @@
+/* @tailwind base; */
+@tailwind components;
+@tailwind utilities;

react/src/tests/stress-test/index.tsx

@@ -0,0 +1,60 @@
+import { render } from "@reactunity/renderer";
+import { useMemo, useState } from "react";
+import './index.css';
+
+const ROWS = 125;
+const COLUMNS = 15;
+
+function Row({ row, columns }: { row: number; columns: number }) {
+  const children = useMemo(() => {
+    return Array(columns)
+      .fill(0)
+      .map((_, col) => {
+        return (
+          <div key={col} class={`mr-1 h-6 w-[70px] bg-green-300`} id={`cell-${row}-${col}`}
+            onClick={() => console.log(`Clicked ${row} x ${col}`)}>
+            {`${row} x ${col}`}
+          </div>
+        );
+      });
+  }, [columns, row]);
+
+  return <div class="mb-1 flex flex-row" id={`row-${row}`}>{children}</div>;
+}
+
+function Rows({ columns, rows }: { columns: number; rows: number }) {
+  const children = useMemo(() => {
+    return Array(rows)
+      .fill(0)
+      .map((_, i) => {
+        return <Row key={i} row={i} columns={columns} />;
+      });
+  }, [columns, rows]);
+
+  return <div class="flex flex-col p-3">{children}</div>;
+}
+
+export default function StressTest() {
+  const [rows, setRows] = useState(ROWS);
+  const [columns, setColumns] = useState(COLUMNS);
+
+  return (
+    <scroll>
+      <button
+        class="p-2 bg-white rounded-md w-[200px]"
+        onClick={() => {
+          const newRows = Math.floor(Math.random() * ROWS);
+          const newColumns = Math.floor(Math.random() * COLUMNS);
+
+          setRows(newRows);
+          setColumns(newColumns);
+        }}
+      >
+        Reroll
+      </button>
+      <Rows key={rows} columns={columns} rows={rows} />
+    </scroll>
+  );
+}
+
+render(<StressTest />);