useEventfulState() has landed! Check Here for more info.

New features and bug fixes will land in the private github repo before becoming available on the Asset Store. To request access to the repo, please send an email or pm Singtaa#4915 on Discord with your Github username and OneJS Order/INV number.

Runtime USS

One of the current limitations of UI Toolkit is its inability to load USS files at runtime (from strings). So, we decided to fill in the gap.

OneJS allows you to load USS strings dynamically at runtime via document.addRuntimeUSS().

import { h, render } from "preact"
import { useEffect } from "preact/hooks"
import { useState } from "preact/hooks"

const App = () => {
    const [text, setText] = useState("#App {\n    padding: 100;\n}")

    const setUSS = () => {
        document.clearRuntimeStyleSheets()
        document.addRuntimeUSS(text)
    }

    useEffect(setUSS, [])

    return <div name="App">
        <textfield multiline={true} onValueChanged={(e) => setText(e.newValue)} value={text}></textfield>
        <div><label text="Lorem Ipsum" /></div>
        <button onClick={setUSS} text="Set USS"></button>
    </div>
}

render(<App />, document.body)

Up next, we will try to get something like JSS and Styled Components to work with OneJS.

Limitations

We made Runtime USS work by separating/decoupling Asset path management (editor mode feature) from the StyleSheet importer. So any path-based values such as image and font urls are currently not supported in USS strings. To use these, please either go for inline styles or static uss files.