VanillaBox Console has been released! It's a free app that lets you quickly test out Unity runtime features. Check it out here!

Also, a newly revamped website with improved docs is coming soon. Stay tuned!

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.

Styled Components and Emotion

OneJS provides APIs that are equivalent to the styled, css, and attr APIs from Styled Components, and also the css API from Emotion.

These are available from onejs/styled:

import styled, { uss } from "onejs/styled"
import { h, render } from "preact"

const Button = styled.button`
    border-width: 0;
    border-radius: 3px;
    background-color: green;
    color: white;

    ${props => props.primary && uss`
        background-color: white;
        color: black;
    `}
`

render(<Button text="Hello!" primary />, document.body)

attr also works as you'd expect:

import styled from "onejs/styled"
import { h, render } from "preact"

const Jin = styled.button.attrs(props => ({
    text: props.foo
}))`
    color: red;
`

const Cup = styled(Jin).attrs(props => ({
    text: "Foooooo",
    bar: props.bar || 50
}))`
    font-size: ${props => props.bar}px;
`

render(<Cup foo="My Text" />, document.body)

Emotion's css (which is different from Styled Components' css) is available as emo from onejs/styled:

import { emo } from "onejs/styled"
import { h, render } from "preact"

const Foo = (props) => {
    return <div class={emo`
        font-size: ${props.size ?? 10}px;
        color: red;
    `}>Hello</div>
}

render(<Foo size={30} />, document.body)

Please get in our Discord to share what other APIs you'd like to see supported.