rebuild internal packages

Author: KurtGokhan

.react/devtools/package.json

@@ -10,12 +10,12 @@
     "postyalc": "yarn"
   },
   "dependencies": {
-    "@reactunity/renderer": "^0.18.0",
-    "clsx": "^2.1.0",
-    "react": "^18.2.0"
+    "@reactunity/renderer": "^0.20.1",
+    "clsx": "^2.1.1",
+    "react": "^19.1.0"
   },
   "devDependencies": {
-    "@reactunity/scripts": "^0.18.2",
-    "typescript": "^5.4.4"
+    "@reactunity/scripts": "^0.20.0",
+    "typescript": "^5.8.3"
   }
 }

.react/devtools/src/common/helpers.ts

@@ -18,7 +18,7 @@ export function convertLengthToYoga(value: UE.UIElements.StyleLength): Yoga.Yoga
 }
 
 export function convertYogaToLength(value: Yoga.YogaValue): UE.UIElements.StyleLength {
-  var len = new StyleLength(0);
+  const len = new StyleLength(0);
   len.keyword = StyleKeyword.Initial;
 
   if (!value || value.Unit == YogaUnit.Auto) len.keyword = StyleKeyword.Auto;
@@ -38,13 +38,12 @@ export function convertLengthToFloat(value: UE.UIElements.StyleLength): number {
 }
 
 export function convertFloatToLength(value: number): UE.UIElements.StyleLength {
-  var len = new StyleLength(0);
+  const len = new StyleLength(0);
   len.keyword = StyleKeyword.Initial;
 
-  if (!value) {
-    return len;
-  }
-  else if (value < 1) {
+  if (!value) return len;
+
+  if (value < 1) {
     len.value = new Length(Math.fround(+value * 100), LengthUnit.Percent);
   } else {
     len.value = new Length(Math.fround(+value), LengthUnit.Pixel);

.react/devtools/src/common/props.ts

@@ -33,28 +33,28 @@ export type StylePropPart = 'left' | 'right' | 'top' | 'bottom' | 'start' | 'end
 export const fourDirectionParts: StylePropPart[] = ['', 'top', 'right', 'bottom', 'left'];
 
 export const CornerHack = {
-  'left': 'TopLeft',
-  'top': 'TopRight',
-  'right': 'BottomRight',
-  'bottom': 'BottomLeft',
+  left: 'TopLeft',
+  top: 'TopRight',
+  right: 'BottomRight',
+  bottom: 'BottomLeft',
   '': '',
 };
 
 export const CornerLabels = {
-  'left': 'TL',
-  'top': 'TR',
-  'right': 'BR',
-  'bottom': 'BL',
+  left: 'TL',
+  top: 'TR',
+  right: 'BR',
+  bottom: 'BL',
   '': '',
 };
 
 export const PartCapitalize = {
-  'left': 'Left',
-  'right': 'Right',
-  'top': 'Top',
-  'bottom': 'Bottom',
-  'start': 'Start',
-  'end': 'End',
+  left: 'Left',
+  right: 'Right',
+  top: 'Top',
+  bottom: 'Bottom',
+  start: 'Start',
+  end: 'End',
   '': '',
 };
 
@@ -71,7 +71,7 @@ export const styleProps: StylePropGroup[] = [
       { name: 'opacity', component: sliderComponent(), label: 'Opacity' },
       { name: 'zIndex', component: sliderintComponent(), label: 'Z-Index' },
       { name: 'visibility', component: 'toggle', label: 'Visibility' },
-    ]
+    ],
   },
   {
     label: 'Text',
@@ -95,7 +95,7 @@ export const styleProps: StylePropGroup[] = [
       { name: 'translate', component: YogaValue2Field, label: 'Translate' },
       { name: 'scale', component: 'vector3', label: 'Scale' },
       { name: 'rotate', component: 'vector3', label: 'Rotate' },
-    ]
+    ],
   },
 
   {
@@ -145,22 +145,62 @@ export const styleProps: StylePropGroup[] = [
 
   {
     props: [
-      { name: 'borderRadius', ...borderRadiusField, label: 'Border Radius', arrangement: 'corner', partTemplate: (part) => `border${CornerHack[part]}Radius` },
-      { name: 'borderColor', component: 'color', arrangement: 'rect', partTemplate: (part) => `border${PartCapitalize[part]}Color`, label: 'Border Color' },
-      { name: 'BorderWidth', component: 'float', arrangement: 'rect', getter: floatDefaultGetter, partTemplate: (part) => `Border${PartCapitalize[part]}Width`, label: 'Border Width', source: 'layout' },
+      {
+        name: 'borderRadius',
+        ...borderRadiusField,
+        label: 'Border Radius',
+        arrangement: 'corner',
+        partTemplate: (part) => `border${CornerHack[part]}Radius`,
+      },
+      {
+        name: 'borderColor',
+        component: 'color',
+        arrangement: 'rect',
+        partTemplate: (part) => `border${PartCapitalize[part]}Color`,
+        label: 'Border Color',
+      },
+      {
+        name: 'BorderWidth',
+        component: 'float',
+        arrangement: 'rect',
+        getter: floatDefaultGetter,
+        partTemplate: (part) => `Border${PartCapitalize[part]}Width`,
+        label: 'Border Width',
+        source: 'layout',
+      },
     ],
   },
 
   {
     props: [
-      { name: 'Margin', ...lengthField, arrangement: 'rect', partTemplate: (part) => `Margin${PartCapitalize[part]}`, label: 'Margin', source: 'layout' },
-      { name: 'Padding', ...lengthField, arrangement: 'rect', partTemplate: (part) => `Padding${PartCapitalize[part]}`, label: 'Padding', source: 'layout' },
-      { name: 'Position', ...lengthField, arrangement: 'rect', partTemplate: (part) => PartCapitalize[part], label: 'Position', source: 'layout' },
-    ]
+      {
+        name: 'Margin',
+        ...lengthField,
+        arrangement: 'rect',
+        partTemplate: (part) => `Margin${PartCapitalize[part]}`,
+        label: 'Margin',
+        source: 'layout',
+      },
+      {
+        name: 'Padding',
+        ...lengthField,
+        arrangement: 'rect',
+        partTemplate: (part) => `Padding${PartCapitalize[part]}`,
+        label: 'Padding',
+        source: 'layout',
+      },
+      {
+        name: 'Position',
+        ...lengthField,
+        arrangement: 'rect',
+        partTemplate: (part) => PartCapitalize[part],
+        label: 'Position',
+        source: 'layout',
+      },
+    ],
   },
 ];
 
-
 export const allProps = [];
 
 for (let pIndex = 0; pIndex < styleProps.length; pIndex++) {
@@ -177,8 +217,7 @@ for (let pIndex = 0; pIndex < styleProps.length; pIndex++) {
         const { arrangement, partTemplate, ...rest } = prop;
         allProps.push({ ...rest, name: partName, partlessName: prop.name, label: partName } as StyleProp);
       }
-    }
-    else {
+    } else {
       allProps.push(prop);
     }
   }

.react/devtools/src/components/yogavalue2.tsx

@@ -10,8 +10,8 @@ export function YogaValue2Field({ className, label, onChange, value }: StyleProp
   const x = convertYogaToLength(value?.X);
   const y = convertYogaToLength(value?.Y);
 
-  const xRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>();
-  const yRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>();
+  const xRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>(undefined);
+  const yRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>(undefined);
 
   const changed = () => {
     const xVal = xRef.current.Element.value;
@@ -20,15 +20,34 @@ export function YogaValue2Field({ className, label, onChange, value }: StyleProp
     onChange?.({ newValue: val });
   };
 
-  return <view className={clsx(className, 'unity-composite-field', 'unity-base-field')}>
-    <text className={clsx('unity-base-field__label', 'unity-composite-field__label')}>{label}</text>
+  return (
+    <view className={clsx(className, 'unity-composite-field', 'unity-base-field')}>
+      <text className={clsx('unity-base-field__label', 'unity-composite-field__label')}>{label}</text>
 
-    <view className={clsx('unity-base-field__input', 'unity-composite-field__input')}>
-      <length label="X" value={x} onChange={changed} ref={xRef} style={{ minWidth: 60 }}
-        className={clsx('react-unity_field_no-grow', 'react-unity__field__inline', 'unity-composite-field__field', 'unity-composite-field__field--first')} />
-      <length label="Y" value={y} onChange={changed} ref={yRef} style={{ minWidth: 60 }}
-        className={clsx('react-unity_field_no-grow', 'react-unity__field__inline', 'unity-composite-field__field')} />
-      <view className="unity-composite-field__field-spacer"></view>
+      <view className={clsx('unity-base-field__input', 'unity-composite-field__input')}>
+        <length
+          label="X"
+          value={x}
+          onChange={changed}
+          ref={xRef}
+          style={{ minWidth: 60 }}
+          className={clsx(
+            'react-unity_field_no-grow',
+            'react-unity__field__inline',
+            'unity-composite-field__field',
+            'unity-composite-field__field--first',
+          )}
+        />
+        <length
+          label="Y"
+          value={y}
+          onChange={changed}
+          ref={yRef}
+          style={{ minWidth: 60 }}
+          className={clsx('react-unity_field_no-grow', 'react-unity__field__inline', 'unity-composite-field__field')}
+        />
+        <view className="unity-composite-field__field-spacer" />
+      </view>
     </view>
-  </view>;
+  );
 }

.react/devtools/src/context/selection.tsx

@@ -12,7 +12,9 @@ function getSelection() {
     const activeObject = Interop.UnityEditor.Selection.activeGameObject;
     if (!activeObject) return null;
     return activeObject.GetComponent('ReactElement') as RC;
-  } else if (Inspector) {
+  }
+
+  if (Inspector) {
     return Inspector.target as RC;
   }
 
@@ -40,7 +42,7 @@ export function SelectionProvider({ children }: { children?: React.ReactNode })
   }, []);
 
   return React.createElement(ctx.Provider, { value: selection }, children);
-};
+}
 
 export function useSelection() {
   const context = React.useContext(ctx);

.react/devtools/src/context/style.tsx

@@ -1,5 +1,5 @@
 import { ReactUnity } from '@reactunity/renderer';
-import React, { useContext, useMemo, useRef } from "react";
+import React, { useContext, useMemo, useRef } from 'react';
 
 type Cmp = ReactUnity.IReactComponent;
 type Styles = Record<string, object>;
@@ -15,7 +15,7 @@ const styleContext = React.createContext<ContextType>(null);
 export const useStyleContext = () => useContext(styleContext);
 
 interface ElementProps {
-  element: Cmp,
+  element: Cmp;
   styles: Styles;
   ind: number;
   sheet: any;
@@ -24,13 +24,13 @@ interface ElementProps {
 type State = ElementProps[];
 
 const findElementId = (state: State, el: Cmp) => {
-  let ind = state.findIndex(x => x.element === el);
+  let ind = state.findIndex((x) => x.element === el);
 
   if (ind < 0) {
     ind = state.length;
     const st = { element: el, styles: {}, ind } as ElementProps;
     state.push(st);
-    el.SetData('devtools-el', ind + '');
+    el.SetData('devtools-el', String(ind));
   }
 
   return ind;
@@ -54,8 +54,7 @@ const buildSheet = (state: ElementProps) => {
     }
   }
 
-  if (values.length)
-    sheet.AddRules(selector, valuesDic);
+  if (values.length) sheet.AddRules(selector, valuesDic);
 
   state.sheet = sheet;
 
@@ -77,33 +76,34 @@ const changed = (state: ElementProps) => {
 export function StyleContext({ children }) {
   const state = useRef<State>([]);
 
-  const ctx = useMemo(() => ({
-    setProp: (el: Cmp, prop: string, value: any) => {
-      const ind = findElementId(state.current, el);
-      state.current[ind].styles[prop] = value;
-      changed(state.current[ind]);
-    },
-    removeProp: (el: Cmp, prop: string) => {
-      const ind = findElementId(state.current, el);
-      Reflect.deleteProperty(state.current[ind].styles, prop);
-      changed(state.current[ind]);
-    },
-    hasProp: (el: Cmp, prop: string) => {
-      const ind = findElementId(state.current, el);
-      return Object.prototype.hasOwnProperty.call(state.current[ind].styles, prop);
-    },
-    getProp: (el: Cmp, prop: string) => {
-      const ind = findElementId(state.current, el);
-      return state.current[ind].styles[prop];
-    },
-    getStyles: (el: Cmp) => {
-      const ind = findElementId(state.current, el);
-      return state.current[ind].styles;
-    },
-    getElementId: (el: Cmp) => findElementId(state.current, el),
-  }), []);
-
-  return <styleContext.Provider value={ctx}>
-    {children}
-  </styleContext.Provider>;
+  const ctx = useMemo(
+    () => ({
+      setProp: (el: Cmp, prop: string, value: any) => {
+        const ind = findElementId(state.current, el);
+        state.current[ind].styles[prop] = value;
+        changed(state.current[ind]);
+      },
+      removeProp: (el: Cmp, prop: string) => {
+        const ind = findElementId(state.current, el);
+        Reflect.deleteProperty(state.current[ind].styles, prop);
+        changed(state.current[ind]);
+      },
+      hasProp: (el: Cmp, prop: string) => {
+        const ind = findElementId(state.current, el);
+        return Object.prototype.hasOwnProperty.call(state.current[ind].styles, prop);
+      },
+      getProp: (el: Cmp, prop: string) => {
+        const ind = findElementId(state.current, el);
+        return state.current[ind].styles[prop];
+      },
+      getStyles: (el: Cmp) => {
+        const ind = findElementId(state.current, el);
+        return state.current[ind].styles;
+      },
+      getElementId: (el: Cmp) => findElementId(state.current, el),
+    }),
+    [],
+  );
+
+  return <styleContext.Provider value={ctx}>{children}</styleContext.Provider>;
 }