Version 2 Rewrite (#1)

Author: mkmarek

README.md

@@ -11,11 +11,13 @@ Add a dependency into your `manifest.json`.
 ```json
 {
   "dependencies": {
-    "com.mkmarek.uielements.react": "https://github.com/mkmarek/unity-react-uielements.git#releases/v0.0.1",
+    "com.mkmarek.uielements.react": "https://github.com/mkmarek/unity-react-uielements.git#releases/vX.X.X",
   }
 }
 ```
 
+For released version numbers check the releases tab.
+
 ## How to start
 
 1. In your unity `Assets` folder create a `Resources` folder.
@@ -31,23 +33,22 @@ const style = {
   height: "80%",
   backgroundColor: "#ffffff",
   fontSize: 21,
-  alignSelf: 'center',
-  alignItems: 'center',
-  justifyContent: 'center'
+  alignSelf: 'Center',
+  alignItems: 'Center',
+  justifyContent: 'Center'
 }
 
 function App() {
-  return <element style={style}>
+  return <visualElement style={style}>
     Hello Unity!
-  </element>
+  </visualElement>
 }
 
 render(<App />)
 ```
 
-4. In your Unity scene create a new empty object and add `ReactRenderer` and `EventSystem` monobehaviours to it with the following settings.
-
-![](./media/settings.jpg)
+4. In your Unity scene create a new empty object and add `PanelRenderer` and `EventSystem` monobehaviours to it as you would normaly do for runtime UIElements.
+5. Attach `ReactRuntime` monobehaviour to the object and drag your `index.jsx` into the `Root` field.
 
 Set the root property to your `index.jsx`. Just drag it from your `Resources` folder into the field.
 

examples/Assets/Resources/components/Todo.jsx

@@ -1,60 +1,59 @@
 import React, { useState } from 'react';
+import { useQuery } from 'unity-renderer';
 import Button from './button';
-import { useQuery, createEntity, removeEntity } from 'unity-renderer'; 
 
 function TodoItem({ value, onRemove }) {
 
     return (
-        <Button innerStyle={{ flexDirection: 'row', justifyContent: 'space-between' }} style={{ height: 70 }}>
-            <element style={{ marginLeft: 10 }}>{value}</element>
-            <Button onClick={onRemove} style={{ width: 70, height: 50, marginRight: 5 }}>Delete</Button>
+        <Button innerStyle={{ flexDirection: 'Row', justifyContent: 'SpaceBetween' }} style={{ height: 70 }}>
+            <visualElement style={{ marginLeft: 10 }}>{value}</visualElement>
+            <Button onMouseUpEvent={onRemove} style={{ width: 70, height: 50, marginRight: 5 }}>Delete</Button>
         </Button>
     )
 }
 
+const todoItemComponentName = 'TodoItemComponent';
+const TodoItemComponent = getFactory(todoItemComponentName);
+
 export default function Todo() {
-    const [isInitializing, todoItems] = useQuery('TodoItems');
     const [value, setValue] = useState('');
+    const query = useQuery([todoItemComponentName]);
+
+    const items = [];
+    for (let i = 0; i < query.getSize(); i++) {
+        items.push({
+            entity: query.getElementAt('Entity', i),
+            value: query.getElementAt(todoItemComponentName, i).Content
+        });
+    }
 
     const addItem = () => {
-        const utf8 = unescape(encodeURIComponent(value));
+        const newValue = new TodoItemComponent();
+        newValue.Content = value;
 
-        const arr = [];
-        for (let i = 0; i < utf8.length; i++) {
-            arr.push(utf8.charCodeAt(i));
-        }
-
-        createEntity([['TodoItemComponent', {
-            data: arr
-        }]])
+        executeBuffer((buffer) => {
+            const entity = buffer.createEntity();
+            buffer.setComponent(todoItemComponentName, entity, newValue);
+        })
 
         setValue('');
     }
 
-    const mapArrayToString = (arr) => {
-        if (!arr) return '';
-
-        const utf8 = String.fromCharCode(...arr);
-        return decodeURIComponent(escape(utf8));
+    const removeItem = (entity) => {
+        executeBuffer((buffer) => {
+            buffer.destroyEntity(entity);
+        });
     }
 
-    const removeItem = (index) => {
-        removeEntity(index, [ 'TodoItemComponent' ]);
-    }
-
-    const items = isInitializing
-        ? []
-        : todoItems.map(e => mapArrayToString(e.data));
-
     return (
-        <element style={{ height: '100%' }}>
-            <scrollview style={{ height: '100%' }}>
-                {items.map((e, i) => <TodoItem key={i} value={e} onRemove={() => removeItem(i)} />)}
-            </scrollview>
-            <textfield text={value} onChange={e => setValue(e.value)} />
-            <Button style={{ height: 70, minHeight: 70, alignSelf: 'flex-end' }} onClick={addItem}>
+        <visualElement style={{ height: '100%' }}>
+            <scrollView style={{ height: '100%' }}>
+                {items.map((e, i) => <TodoItem key={i} value={e.value} onRemove={() => removeItem(e.entity)} />)}
+            </scrollView>
+            <textField value={value} onChange={newValue => setValue(newValue)} />
+            <Button style={{ height: 70, minHeight: 70, alignSelf: 'FlexEnd' }} onMouseUpEvent={addItem}>
                 Add TODO item
             </Button>
-        </element>
+        </visualElement>
     );
 }

examples/Assets/Resources/components/button.jsx

@@ -14,7 +14,7 @@ const borderColor = (color) => ({
     borderRightColor: color
 });
 
-export default function Button({ style, innerStyle={}, onClick, children }) {
+export default function Button({ style, innerStyle={}, onMouseUpEvent, children }) {
     const outerStyle = Object.assign(borderColor('#0b2431'), borderWidth('1'),{
         width: '100%',
         height: '100%',
@@ -24,18 +24,18 @@ export default function Button({ style, innerStyle={}, onClick, children }) {
         width: '100%',
         height: '100%',
         backgroundColor: '#173e54',
-        alignItems: "center",
-        alignContent: "center",
-        justifyContent: "center",
-        flexDirection: "column",
-        unityTextAlign: 'middle-center',
+        alignItems: "Center",
+        alignContent: "Center",
+        justifyContent: "Center",
+        flexDirection: "Column",
+        unityTextAlign: 'MiddleCenter',
     }, innerStyle);
 
     return (
-        <element style={outerStyle}>
-           <element onClick={onClick} style={innerBorderStyle}>
+        <visualElement style={outerStyle}>
+           <visualElement onMouseUpEvent={onMouseUpEvent} style={innerBorderStyle}>
                 {children}
-            </element>
-        </element>
+            </visualElement>
+        </visualElement>
     );
 }

examples/Assets/Resources/components/component-preview.jsx

@@ -7,7 +7,7 @@ const ComponentWithHeader = ({ header, component }) => <>
 
 export default function ComponentPreview() {
     return (
-        <scrollview style={{ backgroundColor: '#173e54' }}>
+        <scrollView style={{ backgroundColor: '#173e54' }}>
             <ComponentWithHeader header="Box" component={
                 <box style={{ color: '#000000' }}>
                     Some content in the box
@@ -27,16 +27,16 @@ export default function ComponentPreview() {
             <label />
 
             ListView:
-            <listview />
+            <listView />
 
             MinMaxSlider:
-            <minmaxslider />
+            <minMaxSlider />
 
             PopupWindow:
-            <popupwindow />
+            <popupWindow />
 
             Repeat button:
-            <repeatbutton />
+            <repeatButton />
 
             Scroller:
             <scroller />
@@ -45,16 +45,16 @@ export default function ComponentPreview() {
             <slider />
 
             SliderInt:
-            <sliderint />
+            <sliderInt />
 
             TemplateContainer:
-            <templatecontainer />
+            <templateContainer />
 
             Textfield:
-            <textfield />
+            <textField />
 
             Toggle:
             <toggle />
-        </scrollview>
+        </scrollView>
     )
 }

examples/Assets/Resources/components/counter.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import Button from './button';
+import React from 'react';
 import { useQuery } from 'unity-renderer';
+import Button from './button';
 
 const margin = (margin) => ({
     marginTop: margin,
@@ -26,24 +26,42 @@ const countStyle = Object.assign(margin('5px'), {
     height: '40%'
 });
 
+const counterComponentName = 'CounterComponent';
+const CounterComponent = getFactory(counterComponentName);
+
 export default function Counter() {
-    const [initializing, counterComponents, setCounterComponent] = useQuery('Counter');
+    const query = useQuery([counterComponentName]);
+
+    if (query.getSize() == 0) return <></>;
+    
+    const { Count } = query.getElementAt(counterComponentName, 0);
+
+    const setCount = (value) => {
+        const counterComponentEntity = query.getElementAt('Entity', 0);
 
-    if (initializing) return <element />;
+        const newValue = new CounterComponent();
+        newValue.Count = value;
 
-    const count = counterComponents[0].count;
+        executeBuffer((buffer) => {
+            buffer.setComponent(counterComponentName, counterComponentEntity, newValue);
+        })
+    }
 
     return (
-        <element style={Object.assign(margin('auto'), { width: "100%", height: "100%", alignItems: "center" })}>
-            <element style={countStyle}>{count}</element>
-            <element style={{ flexDirection: 'row' }}>
+        <visualElement style={{
+            width: "100%",
+            height: "100%",
+            alignItems: 'Center',
+            justifyContent: 'Center'}}>
+            <visualElement style={countStyle}>{Count}</visualElement>
+            <visualElement style={{ flexDirection: 'Row' }}>
                 <Button
                     style={Object.assign(itemStyle, { fontSize: '18'})}
-                    onClick={() => setCounterComponent(0, { count: count + 1 })}>Increment</Button>
+                    onMouseUpEvent={() => setCount(Count + 1)}>Increment</Button>
                 <Button
                     style={Object.assign(itemStyle, { fontSize: '18'})}
-                    onClick={() => setCounterComponent(0, {count: count - 1 })}>Decrement</Button>
-            </element>
-        </element>
+                    onMouseUpEvent={() => setCount(Count - 1)}>Decrement</Button>
+            </visualElement>
+        </visualElement>
     )
 }

examples/Assets/Resources/components/panel.jsx

@@ -33,12 +33,12 @@ export default function Panel({ innerStyle, outerStyle, children }) {
     }, innerStyle);
 
     return (
-        <element style={outerStyle}>
-            <element style={midBorderStyle}>
-                <element style={innerBorderStyle}>
+        <visualElement style={outerStyle}>
+            <visualElement style={midBorderStyle}>
+                <visualElement style={innerBorderStyle}>
                     {children}
-                </element>
-            </element>
-        </element>
+                </visualElement>
+            </visualElement>
+        </visualElement>
     );
 }

examples/Assets/Resources/components/popup.jsx

@@ -2,38 +2,38 @@ import React from 'react';
 import Panel from './panel';
 
 const backdropStyles = {
-    position: 'absolute',
+    position: 'Absolute',
     left: 0,
     top: 0,
     width: '100%',
     height: '100%',
     backgroundColor: '#000000aa',
-    justifyContent: 'center'
+    justifyContent: 'Center'
 }
 
 const panelOuterStyle = {
     width: 400,
     height: 300,
-    alignSelf: 'center',
-    verticalAlign: 'center'
+    alignSelf: 'Center',
+    verticalAlign: 'Center'
 }
 
 const panelInnerStyle = {
-    flexDirection: 'row'
+    flexDirection: 'Row'
 }
 
 const buttonStyle = {
-    alignSelf: 'flex-end',
+    alignSelf: 'FlexEnd',
     width: 100,
     marginBottom: 15,
     marginLeft: 15
 };
 
 export default function Popup({ onClose }) {
 
-    return <element style={backdropStyles}>
+    return <visualElement style={backdropStyles}>
         <Panel outerStyle={panelOuterStyle} innerStyle={panelInnerStyle}>
-            <button style={buttonStyle} onClick={onClose} text="Close" />
+            <button style={buttonStyle} onMouseUpEvent={onClose} text="Close" />
         </Panel>
-    </element>
+    </visualElement>
 }

examples/Assets/Resources/components/tab-panel.jsx

@@ -6,21 +6,21 @@ export default function TabPanel({ style, children }) {
     const [tabIndex, setTabIndex] = useState(0);
 
     return (
-        <element style={Object.assign(style, { color: '#ffffff', fontSize: '18px' })}>
-            <element style={{ flexDirection: 'row', width: '100%', height: '64px' }}>
+        <visualElement style={Object.assign(style, { color: '#ffffff', fontSize: '18px' })}>
+            <visualElement style={{ flexDirection: 'Row', width: '100%', height: '64px' }}>
             {children.map((e, i) =>
                 <Button
                     key={i}
-                    onClick={() => setTabIndex(i)}
+                    onMouseUpEvent={() => setTabIndex(i)}
                     innerStyle={{ backgroundColor: i === tabIndex ? '#003f6b' : '#133b50' }}
                     style={{ width: '128px', height: '100%' }}>
                     {e.props.name}
                 </Button>)}
-            </element>
+            </visualElement>
             <Panel outerStyle={{}} innerStyle={{}}>
                 {children[tabIndex].props.children}
             </Panel>
-        </element>
+        </visualElement>
     )
 }