Skip to content

Commit eb84ae6

Browse files
KurtGokhanKurtGokhan
committed
rebuild internal packages
1 parent 27937c6 commit eb84ae6

34 files changed

Lines changed: 22728 additions & 21631 deletions

File tree

‎.react/devtools/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
"postyalc": "yarn"
1111
},
1212
"dependencies": {
13-
"@reactunity/renderer": "^0.18.0",
14-
"clsx": "^2.1.0",
15-
"react": "^18.2.0"
13+
"@reactunity/renderer": "^0.20.1",
14+
"clsx": "^2.1.1",
15+
"react": "^19.1.0"
1616
},
1717
"devDependencies": {
18-
"@reactunity/scripts": "^0.18.2",
19-
"typescript": "^5.4.4"
18+
"@reactunity/scripts": "^0.20.0",
19+
"typescript": "^5.8.3"
2020
}
2121
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function convertLengthToYoga(value: UE.UIElements.StyleLength): Yoga.Yoga
1818
}
1919

2020
export function convertYogaToLength(value: Yoga.YogaValue): UE.UIElements.StyleLength {
21-
var len = new StyleLength(0);
21+
const len = new StyleLength(0);
2222
len.keyword = StyleKeyword.Initial;
2323

2424
if (!value || value.Unit == YogaUnit.Auto) len.keyword = StyleKeyword.Auto;
@@ -38,13 +38,12 @@ export function convertLengthToFloat(value: UE.UIElements.StyleLength): number {
3838
}
3939

4040
export function convertFloatToLength(value: number): UE.UIElements.StyleLength {
41-
var len = new StyleLength(0);
41+
const len = new StyleLength(0);
4242
len.keyword = StyleKeyword.Initial;
4343

44-
if (!value) {
45-
return len;
46-
}
47-
else if (value < 1) {
44+
if (!value) return len;
45+
46+
if (value < 1) {
4847
len.value = new Length(Math.fround(+value * 100), LengthUnit.Percent);
4948
} else {
5049
len.value = new Length(Math.fround(+value), LengthUnit.Pixel);

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

Lines changed: 65 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,28 @@ export type StylePropPart = 'left' | 'right' | 'top' | 'bottom' | 'start' | 'end
3333
export const fourDirectionParts: StylePropPart[] = ['', 'top', 'right', 'bottom', 'left'];
3434

3535
export const CornerHack = {
36-
'left': 'TopLeft',
37-
'top': 'TopRight',
38-
'right': 'BottomRight',
39-
'bottom': 'BottomLeft',
36+
left: 'TopLeft',
37+
top: 'TopRight',
38+
right: 'BottomRight',
39+
bottom: 'BottomLeft',
4040
'': '',
4141
};
4242

4343
export const CornerLabels = {
44-
'left': 'TL',
45-
'top': 'TR',
46-
'right': 'BR',
47-
'bottom': 'BL',
44+
left: 'TL',
45+
top: 'TR',
46+
right: 'BR',
47+
bottom: 'BL',
4848
'': '',
4949
};
5050

5151
export const PartCapitalize = {
52-
'left': 'Left',
53-
'right': 'Right',
54-
'top': 'Top',
55-
'bottom': 'Bottom',
56-
'start': 'Start',
57-
'end': 'End',
52+
left: 'Left',
53+
right: 'Right',
54+
top: 'Top',
55+
bottom: 'Bottom',
56+
start: 'Start',
57+
end: 'End',
5858
'': '',
5959
};
6060

@@ -71,7 +71,7 @@ export const styleProps: StylePropGroup[] = [
7171
{ name: 'opacity', component: sliderComponent(), label: 'Opacity' },
7272
{ name: 'zIndex', component: sliderintComponent(), label: 'Z-Index' },
7373
{ name: 'visibility', component: 'toggle', label: 'Visibility' },
74-
]
74+
],
7575
},
7676
{
7777
label: 'Text',
@@ -95,7 +95,7 @@ export const styleProps: StylePropGroup[] = [
9595
{ name: 'translate', component: YogaValue2Field, label: 'Translate' },
9696
{ name: 'scale', component: 'vector3', label: 'Scale' },
9797
{ name: 'rotate', component: 'vector3', label: 'Rotate' },
98-
]
98+
],
9999
},
100100

101101
{
@@ -145,22 +145,62 @@ export const styleProps: StylePropGroup[] = [
145145

146146
{
147147
props: [
148-
{ name: 'borderRadius', ...borderRadiusField, label: 'Border Radius', arrangement: 'corner', partTemplate: (part) => `border${CornerHack[part]}Radius` },
149-
{ name: 'borderColor', component: 'color', arrangement: 'rect', partTemplate: (part) => `border${PartCapitalize[part]}Color`, label: 'Border Color' },
150-
{ name: 'BorderWidth', component: 'float', arrangement: 'rect', getter: floatDefaultGetter, partTemplate: (part) => `Border${PartCapitalize[part]}Width`, label: 'Border Width', source: 'layout' },
148+
{
149+
name: 'borderRadius',
150+
...borderRadiusField,
151+
label: 'Border Radius',
152+
arrangement: 'corner',
153+
partTemplate: (part) => `border${CornerHack[part]}Radius`,
154+
},
155+
{
156+
name: 'borderColor',
157+
component: 'color',
158+
arrangement: 'rect',
159+
partTemplate: (part) => `border${PartCapitalize[part]}Color`,
160+
label: 'Border Color',
161+
},
162+
{
163+
name: 'BorderWidth',
164+
component: 'float',
165+
arrangement: 'rect',
166+
getter: floatDefaultGetter,
167+
partTemplate: (part) => `Border${PartCapitalize[part]}Width`,
168+
label: 'Border Width',
169+
source: 'layout',
170+
},
151171
],
152172
},
153173

154174
{
155175
props: [
156-
{ name: 'Margin', ...lengthField, arrangement: 'rect', partTemplate: (part) => `Margin${PartCapitalize[part]}`, label: 'Margin', source: 'layout' },
157-
{ name: 'Padding', ...lengthField, arrangement: 'rect', partTemplate: (part) => `Padding${PartCapitalize[part]}`, label: 'Padding', source: 'layout' },
158-
{ name: 'Position', ...lengthField, arrangement: 'rect', partTemplate: (part) => PartCapitalize[part], label: 'Position', source: 'layout' },
159-
]
176+
{
177+
name: 'Margin',
178+
...lengthField,
179+
arrangement: 'rect',
180+
partTemplate: (part) => `Margin${PartCapitalize[part]}`,
181+
label: 'Margin',
182+
source: 'layout',
183+
},
184+
{
185+
name: 'Padding',
186+
...lengthField,
187+
arrangement: 'rect',
188+
partTemplate: (part) => `Padding${PartCapitalize[part]}`,
189+
label: 'Padding',
190+
source: 'layout',
191+
},
192+
{
193+
name: 'Position',
194+
...lengthField,
195+
arrangement: 'rect',
196+
partTemplate: (part) => PartCapitalize[part],
197+
label: 'Position',
198+
source: 'layout',
199+
},
200+
],
160201
},
161202
];
162203

163-
164204
export const allProps = [];
165205

166206
for (let pIndex = 0; pIndex < styleProps.length; pIndex++) {
@@ -177,8 +217,7 @@ for (let pIndex = 0; pIndex < styleProps.length; pIndex++) {
177217
const { arrangement, partTemplate, ...rest } = prop;
178218
allProps.push({ ...rest, name: partName, partlessName: prop.name, label: partName } as StyleProp);
179219
}
180-
}
181-
else {
220+
} else {
182221
allProps.push(prop);
183222
}
184223
}

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

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export function YogaValue2Field({ className, label, onChange, value }: StyleProp
1010
const x = convertYogaToLength(value?.X);
1111
const y = convertYogaToLength(value?.Y);
1212

13-
const xRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>();
14-
const yRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>();
13+
const xRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>(undefined);
14+
const yRef = useRef<RU.UIToolkit.BaseFieldComponent<any, UE.UIElements.StyleLength>>(undefined);
1515

1616
const changed = () => {
1717
const xVal = xRef.current.Element.value;
@@ -20,15 +20,34 @@ export function YogaValue2Field({ className, label, onChange, value }: StyleProp
2020
onChange?.({ newValue: val });
2121
};
2222

23-
return <view className={clsx(className, 'unity-composite-field', 'unity-base-field')}>
24-
<text className={clsx('unity-base-field__label', 'unity-composite-field__label')}>{label}</text>
23+
return (
24+
<view className={clsx(className, 'unity-composite-field', 'unity-base-field')}>
25+
<text className={clsx('unity-base-field__label', 'unity-composite-field__label')}>{label}</text>
2526

26-
<view className={clsx('unity-base-field__input', 'unity-composite-field__input')}>
27-
<length label="X" value={x} onChange={changed} ref={xRef} style={{ minWidth: 60 }}
28-
className={clsx('react-unity_field_no-grow', 'react-unity__field__inline', 'unity-composite-field__field', 'unity-composite-field__field--first')} />
29-
<length label="Y" value={y} onChange={changed} ref={yRef} style={{ minWidth: 60 }}
30-
className={clsx('react-unity_field_no-grow', 'react-unity__field__inline', 'unity-composite-field__field')} />
31-
<view className="unity-composite-field__field-spacer"></view>
27+
<view className={clsx('unity-base-field__input', 'unity-composite-field__input')}>
28+
<length
29+
label="X"
30+
value={x}
31+
onChange={changed}
32+
ref={xRef}
33+
style={{ minWidth: 60 }}
34+
className={clsx(
35+
'react-unity_field_no-grow',
36+
'react-unity__field__inline',
37+
'unity-composite-field__field',
38+
'unity-composite-field__field--first',
39+
)}
40+
/>
41+
<length
42+
label="Y"
43+
value={y}
44+
onChange={changed}
45+
ref={yRef}
46+
style={{ minWidth: 60 }}
47+
className={clsx('react-unity_field_no-grow', 'react-unity__field__inline', 'unity-composite-field__field')}
48+
/>
49+
<view className="unity-composite-field__field-spacer" />
50+
</view>
3251
</view>
33-
</view>;
52+
);
3453
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ function getSelection() {
1212
const activeObject = Interop.UnityEditor.Selection.activeGameObject;
1313
if (!activeObject) return null;
1414
return activeObject.GetComponent('ReactElement') as RC;
15-
} else if (Inspector) {
15+
}
16+
17+
if (Inspector) {
1618
return Inspector.target as RC;
1719
}
1820

@@ -40,7 +42,7 @@ export function SelectionProvider({ children }: { children?: React.ReactNode })
4042
}, []);
4143

4244
return React.createElement(ctx.Provider, { value: selection }, children);
43-
};
45+
}
4446

4547
export function useSelection() {
4648
const context = React.useContext(ctx);

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

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactUnity } from '@reactunity/renderer';
2-
import React, { useContext, useMemo, useRef } from "react";
2+
import React, { useContext, useMemo, useRef } from 'react';
33

44
type Cmp = ReactUnity.IReactComponent;
55
type Styles = Record<string, object>;
@@ -15,7 +15,7 @@ const styleContext = React.createContext<ContextType>(null);
1515
export const useStyleContext = () => useContext(styleContext);
1616

1717
interface ElementProps {
18-
element: Cmp,
18+
element: Cmp;
1919
styles: Styles;
2020
ind: number;
2121
sheet: any;
@@ -24,13 +24,13 @@ interface ElementProps {
2424
type State = ElementProps[];
2525

2626
const findElementId = (state: State, el: Cmp) => {
27-
let ind = state.findIndex(x => x.element === el);
27+
let ind = state.findIndex((x) => x.element === el);
2828

2929
if (ind < 0) {
3030
ind = state.length;
3131
const st = { element: el, styles: {}, ind } as ElementProps;
3232
state.push(st);
33-
el.SetData('devtools-el', ind + '');
33+
el.SetData('devtools-el', String(ind));
3434
}
3535

3636
return ind;
@@ -54,8 +54,7 @@ const buildSheet = (state: ElementProps) => {
5454
}
5555
}
5656

57-
if (values.length)
58-
sheet.AddRules(selector, valuesDic);
57+
if (values.length) sheet.AddRules(selector, valuesDic);
5958

6059
state.sheet = sheet;
6160

@@ -77,33 +76,34 @@ const changed = (state: ElementProps) => {
7776
export function StyleContext({ children }) {
7877
const state = useRef<State>([]);
7978

80-
const ctx = useMemo(() => ({
81-
setProp: (el: Cmp, prop: string, value: any) => {
82-
const ind = findElementId(state.current, el);
83-
state.current[ind].styles[prop] = value;
84-
changed(state.current[ind]);
85-
},
86-
removeProp: (el: Cmp, prop: string) => {
87-
const ind = findElementId(state.current, el);
88-
Reflect.deleteProperty(state.current[ind].styles, prop);
89-
changed(state.current[ind]);
90-
},
91-
hasProp: (el: Cmp, prop: string) => {
92-
const ind = findElementId(state.current, el);
93-
return Object.prototype.hasOwnProperty.call(state.current[ind].styles, prop);
94-
},
95-
getProp: (el: Cmp, prop: string) => {
96-
const ind = findElementId(state.current, el);
97-
return state.current[ind].styles[prop];
98-
},
99-
getStyles: (el: Cmp) => {
100-
const ind = findElementId(state.current, el);
101-
return state.current[ind].styles;
102-
},
103-
getElementId: (el: Cmp) => findElementId(state.current, el),
104-
}), []);
105-
106-
return <styleContext.Provider value={ctx}>
107-
{children}
108-
</styleContext.Provider>;
79+
const ctx = useMemo(
80+
() => ({
81+
setProp: (el: Cmp, prop: string, value: any) => {
82+
const ind = findElementId(state.current, el);
83+
state.current[ind].styles[prop] = value;
84+
changed(state.current[ind]);
85+
},
86+
removeProp: (el: Cmp, prop: string) => {
87+
const ind = findElementId(state.current, el);
88+
Reflect.deleteProperty(state.current[ind].styles, prop);
89+
changed(state.current[ind]);
90+
},
91+
hasProp: (el: Cmp, prop: string) => {
92+
const ind = findElementId(state.current, el);
93+
return Object.prototype.hasOwnProperty.call(state.current[ind].styles, prop);
94+
},
95+
getProp: (el: Cmp, prop: string) => {
96+
const ind = findElementId(state.current, el);
97+
return state.current[ind].styles[prop];
98+
},
99+
getStyles: (el: Cmp) => {
100+
const ind = findElementId(state.current, el);
101+
return state.current[ind].styles;
102+
},
103+
getElementId: (el: Cmp) => findElementId(state.current, el),
104+
}),
105+
[],
106+
);
107+
108+
return <styleContext.Provider value={ctx}>{children}</styleContext.Provider>;
109109
}

0 commit comments

Comments
 (0)