Dom
OneJS's Dom is a thin wrapper over the underlying VisualElement. Dom basically implements the mininum amount of features that's required from Preact.
The Dom object has 2 properties that are worth mentioning. One is dom.ve, the other is dom.style.
dom.ve is useful for grabbing the actual VisualElement. But because VisualElement is from C#/.Net, sometimes working with it can be a bit verbose. For example, to set the rotate style for a VisualElement, you'd need to do:
ref.current.ve.style.rotate = new StyleRotate(new Rotate(new Angle(-36)))Which is fairly tedious to write. This is where dom.style comes in. It's a convenience wrapper over the .ve.style counterpart. So you can just do this:
ref.current.style.rotate = -36Full code example:
import { h, render } from "preact"
import { Dom } from "OneJS/Dom"
import { useRef, useEffect } from "preact/hooks"
import { Angle, Rotate, StyleRotate } from "UnityEngine/UIElements"
const App = () => {
const ref = useRef<Dom>()
useEffect(() => {
// ref.current returns the Dom object
// ref.current.ve returns the underlying VisualElement
log(ref.current.ve.resolvedStyle.width)
// Both the following lines do the same thing
ref.current.ve.style.rotate = new StyleRotate(new Rotate(new Angle(-36)))
ref.current.style.rotate = -36
}, [])
return <div ref={ref}>Hello</div>
}
render(<App />, document.body)