OneJS

https://v3.onejs.com/docs/
Admin
OneJS is a framework for building UIs in Unity using TypeScript/TSX and React, with seamless C#...
Tokens:60,933
Snippets:532
Trust Score:5.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Build Project

Source: https://v3.onejs.com/docs/quickstart

Commands to install project dependencies using npm and build the project for JSRunner. These commands are run from the working directory of your OneJS project.

```bash
cd Assets/Scenes/YourScene/MainUI_abc123/MainUI~
npm install
npm run build
```

--------------------------------

### Starting the OneJS Development Watcher

Source: https://v3.onejs.com/docs/guides/project-setup

Command to initiate the esbuild watcher for OneJS projects, enabling automatic rebuilding on code changes.

```bash
npm run watch
```

--------------------------------

### Install OneJS via Git URL

Source: https://v3.onejs.com/docs/quickstart

Installs the OneJS package into your Unity project using a Git URL in the Package Manager. This is a straightforward method for adding the latest version.

```unitypackage
https://github.com/Singtaa/OneJS.git#onejs-v3
```

--------------------------------

### Calling C# Code from OneJS

Source: https://v3.onejs.com/docs/quickstart

Demonstrates how to access Unity's C# APIs from OneJS using the global `CS` proxy. This example logs a message and the current time to the Unity console.

```typescript
function DebugButton() {
    const handleClick = () => {
        CS.UnityEngine.Debug.Log("Button clicked!")
        const time = CS.UnityEngine.Time.time
        console.log(`Time: ${time}`)
    }

    return <Button text="Debug" onClick={handleClick} />
}
```

--------------------------------

### OneJS Multiple Entry Points Configuration

Source: https://v3.onejs.com/docs/guides/project-setup

Example of configuring esbuild to handle multiple entry points for different UIs like menus, HUDs, or settings screens in a OneJS application.

```javascript
// esbuild.config.js
const entries = ["menu", "hud", "settings"]

await Promise.all(entries.map(name =>
    esbuild.build({
        ...config,
        entryPoints: [`./${name}/index.tsx`],
        outfile: `./dist/${name}.js`,
    })
))
```

--------------------------------

### OneJS Component Organization Structure

Source: https://v3.onejs.com/docs/guides/project-setup

Example of how to organize React components, hooks, styles, and utilities within a OneJS project for better maintainability.

```treeview
YourApp/
├── index.tsx
├── components/
│   ├── Button.tsx
│   ├── Card.tsx
│   └── Header.tsx
├── hooks/
│   └── useGameState.ts
├── styles/
│   └── main.uss
└── utils/
    └── helpers.ts
```

--------------------------------

### JSRunner Project Structure Initialization

Source: https://v3.onejs.com/docs/quickstart

Illustrates the project structure automatically created by JSRunner when entering Play Mode for the first time. This includes the instance folder, working directory with entry points, and the built bundle.

```filetree
Assets/Scenes/YourScene/
└── MainUI_abc123/           # Instance folder
    ├── MainUI~/             # Working directory (~ = Unity ignores)
    │   ├── index.tsx        # Your entry point
    │   ├── package.json
    │   ├── tsconfig.json
    │   └── esbuild.config.mjs
    ├── app.js.txt           # Built bundle (output from esbuild)
    └── PanelSettings.asset  # Auto-created UI settings
```

--------------------------------

### Loading and Applying USS Stylesheets in OneJS

Source: https://v3.onejs.com/docs/core-concepts/styling

Demonstrates how to define reusable styles in USS (Unity Style Sheets) files and load them into the OneJS application. Includes examples of class selectors and pseudo-classes like ':hover'.

```css
/* styles/main.uss */
.card {
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.card-title {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 10px;
}

.button-primary {
    background-color: #0066cc;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
}

.button-primary:hover {
    background-color: #0077ee;
}
```

--------------------------------

### Full Example: Card Component with CSS Modules

Source: https://v3.onejs.com/docs/guides/css-modules

An example demonstrating a complete Card component using CSS Modules. It includes the .module.uss file for styling and the React component that imports and applies these styles.

```css
/* Card.module.uss */
.card {
    background-color: #1a1a1a;
    border-radius: 8px;
    padding: 20px;
}

.header {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 16px;
}

.title {
    font-size: 18px;
    color: #ffffff;
}

.content {
    color: #999999;
}
```

```javascript
import { View, Label } from "onejs-react"
import styles from "./Card.module.uss"

function Card({ title, children }) {
    return (
        <View className={styles.card}>
            <View className={styles.header}>
                <Label text={title} className={styles.title} />
            </View>
            <View className={styles.content}>
                {children}
            </View>
        </View>
    )
}
```

--------------------------------

### Clone OneJS Repository to Assets

Source: https://v3.onejs.com/docs/quickstart

Clones the OneJS repository directly into your Unity project's Assets folder. This method allows for easier access to the source code and direct modification if needed.

```bash
cd YourProject/Assets
git clone -b onejs-v3 https://github.com/Singtaa/OneJS.git
```

--------------------------------

### package.json Configuration for OneJS

Source: https://v3.onejs.com/docs/guides/project-setup

Defines the project's name, script commands for building and watching, and essential dependencies including React and OneJS React.

```json
{
    "name": "onejs-app",
    "type": "module",
    "scripts": {
        "build": "node esbuild.config.mjs",
        "watch": "node esbuild.config.mjs --watch"
    },
    "dependencies": {
        "react": "^19.0.0",
        "onejs-react": "^0.1.0"
    },
    "devDependencies": {
        "@types/react": "^19.0.0",
        "esbuild": "^0.24.0",
        "typescript": "^5.7.0"
    }
}
```

--------------------------------

### OneJS View Flexbox Layout Examples

Source: https://v3.onejs.com/docs/components/view

Provides examples of using the View component with flexbox properties to control layout direction and spacing. It shows both vertical (column) and horizontal (row) stacking, demonstrating how to arrange child elements.

```javascript
// Vertical stack (default)
<View>
    <Label text="First" style={{ marginBottom: 10 }} />
    <Label text="Second" style={{ marginBottom: 10 }} />
    <Label text="Third" />
</View>

// Horizontal row
<View style={{ flexDirection: "row" }}>
    <Button text="One" style={{ marginRight: 10 }} />
    <Button text="Two" style={{ marginRight: 10 }} />
    <Button text="Three" />
</View>

```

--------------------------------

### Load External Assets from StreamingAssets

Source: https://v3.onejs.com/docs/guides/building

This example demonstrates how to load external assets, such as JSON configuration files, from the StreamingAssets folder in a OneJS build. It utilizes the `fetch` API and constructs the correct path using Unity's `Application.streamingAssetsPath`.

```javascript
const basePath = CS.UnityEngine.Application.streamingAssetsPath

async function loadConfig() {
    const response = await fetch(`${basePath}/config.json`)
    return response.json()
}
```

--------------------------------

### Compute Shader Example

Source: https://v3.onejs.com/docs/guides/gpu-compute

An example demonstrating a compute shader written in HLSL and its corresponding JavaScript usage with OneJS.

```APIDOC
## Compute Shader Example

HLSL compute shader (`ParticleUpdate.compute`):

```hlsl
#pragma kernel CSMain

RWStructuredBuffer<float3> positions;
float deltaTime;
float speed;
uint count;

[numthreads(64, 1, 1)]
void CSMain(uint id : SV_DispatchThreadID) {
    if (id >= count) return;
    positions[id] += float3(0, speed * deltaTime, 0);
}
```

JavaScript usage:

```typescript
const shader = await compute.load("ParticleUpdate")
const positions = compute.buffer({
    data: new Float32Array([0,0,0, 1,0,0, 2,0,0]) // 3 particles
})

// Update loop
function update(dt: number) {
    shader.kernel("CSMain")
        .float("deltaTime", dt)
        .float("speed", 2.0)
        .int("count", 3)
        .buffer("positions", positions)
        .dispatch(1)
}
```
```

--------------------------------

### OneJS Path Aliases for Cleaner Imports

Source: https://v3.onejs.com/docs/guides/project-setup

Demonstrates using path aliases with the `@/` prefix in OneJS projects for more readable import statements, requiring tsconfig.json configuration.

```javascript
// Instead of
import { Button } from "../../../components/Button"

// Use
import { Button } from "@/components/Button"
```

--------------------------------

### Default OneJS Project Structure

Source: https://v3.onejs.com/docs/guides/project-setup

Illustrates the standard directory layout for a OneJS project, emphasizing the Scene Folder convention and the working directory structure.

```treeview
Assets/Scenes/
└── YourScene/                    # Next to YourScene.unity
    └── MainUI_abc123/            # {Name}_{InstanceId}
        ├── MainUI~/              # Working directory (~ = Unity ignores)
        │   ├── index.tsx         # Entry point
        │   ├── package.json      # Dependencies
        │   ├── tsconfig.json     # TypeScript config
        │   ├── esbuild.config.mjs # Build config
        │   └── types/
        │       └── global.d.ts   # TypeScript declarations
        ├── app.js.txt            # Built bundle
        └── app.js.map.txt        # Source map
```

--------------------------------

### OneJS Environment Variables Configuration

Source: https://v3.onejs.com/docs/guides/project-setup

Shows how to pass build-time environment variables, such as NODE_ENV and a custom __DEV__ flag, during the esbuild process for OneJS projects.

```javascript
// esbuild.config.js
await esbuild.build({
    ...config,
    define: {
        "process.env.NODE_ENV": watch ? '"development"' : '"production"',
        "__DEV__": watch.toString(),
    },
})
```

```javascript
// Use in code
if (__DEV__) {
    console.log("Debug mode")
}
```

--------------------------------

### esbuild.config.mjs Configuration for OneJS

Source: https://v3.onejs.com/docs/guides/project-setup

Sets up esbuild for bundling the OneJS project, including entry points, output file, JSX support, and custom plugins for Unity imports and Tailwind CSS.

```javascript
import * as esbuild from "esbuild"
import path from "path"
import { fileURLToPath } from "url"
import { importTransformPlugin, tailwindPlugin } from "onejs-unity/esbuild"

const __dirname = path.dirname(fileURLToPath(import.meta.url))
const isWatch = process.argv.includes("--watch")

const config = {
    entryPoints: ["index.tsx"],
    bundle: true,
    outfile: "../app.js.txt",      // Output to parent (instance folder)
    format: "esm",
    target: "es2022",
    jsx: "automatic",
    sourcemap: true,
    alias: {
        // Force single React instance
        "react": path.resolve(__dirname, "node_modules/react"),
        "react/jsx-runtime": path.resolve(__dirname, "node_modules/react/jsx-runtime"),
    },
    packages: "bundle",
    plugins: [
        importTransformPlugin(),   // Transform Unity imports
        tailwindPlugin({ content: ["./**/*.{tsx,ts,jsx,js}"] }),
    ],
}

if (isWatch) {
    const ctx = await esbuild.context(config)
    await ctx.watch()
    console.log("Watching for changes...")
} else {
    await esbuild.build(config)
    console.log("Build complete!")
}
```

--------------------------------

### Install onejs-unity Package

Source: https://v3.onejs.com/docs/guides/gpu-compute

Installs the `onejs-unity` package using npm. This package provides the necessary tools for interacting with Unity's compute shaders from JavaScript.

```bash
npm install onejs-unity
```

--------------------------------

### Basic OneJS Label Usage

Source: https://v3.onejs.com/docs/components/label

Shows the fundamental way to render a Label component with simple text content. This example sets the 'text' prop to display 'Hello, World!'.

```javascript
<Label text="Hello, World!" />

```

--------------------------------

### Styled Button Examples in OneJS React

Source: https://v3.onejs.com/docs/components/button

Illustrates how to apply custom styles to the Button component using the 'style' prop for inline styling. Examples include a primary button and an outline button with specific background colors, text colors, padding, and border-radius.

```javascript
// Primary button
<Button
    text="Submit"
    style={{
        backgroundColor: "#0066cc",
        color: "#ffffff",
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 4,
        borderWidth: 0,
    }}
    onClick={handleSubmit}
/>

// Outline button
<Button
    text="Cancel"
    style={{
        backgroundColor: "transparent",
        borderWidth: 1,
        borderColor: "#666",
        color: "#666",
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 4,
    }}
    onClick={handleCancel}
/>
```

--------------------------------

### Extract and Reuse Style Objects

Source: https://v3.onejs.com/docs/core-concepts/styling

Demonstrates organizing styles into reusable objects. This approach improves code readability and maintainability by centralizing style definitions.

```jsx
const styles = {
    container: {
        padding: 20,
        backgroundColor: "#1a1a1a",
    },
    title: {
        fontSize: 24,
        color: "#ffffff",
        marginBottom: 20,
    },
    button: {
        padding: 10,
        backgroundColor: "#0066cc",
        borderRadius: 4,
    },
}

function Screen() {
    return (
        <View style={styles.container}>
            <Label text="Title" style={styles.title} />
            <Button text="Click" style={styles.button} />
        </View>
    )
}
```

--------------------------------

### Basic Image Usage in OneJS React

Source: https://v3.onejs.com/docs/components/image

Shows a basic example of how to render an Image component. It requires a 'src' prop for the image path and can accept 'style' for inline styling.

```javascript
<Image src="images/logo.png" style={{ width: 100, height: 100 }} />

```

--------------------------------

### Multiline TextField Example

Source: https://v3.onejs.com/docs/components/textfield

Demonstrates how to configure the TextField component for multiline input by setting the `multiline` prop to `true`. This is useful for text areas like descriptions.

```javascript
<TextField
    value={description}
    onChange={(e) => setDescription(e.value)}
    placeholder="Enter description..."
    multiline={true}
    style={{ height: 100 }}
/>
```

--------------------------------

### React UI Snippet Example

Source: https://v3.onejs.com/docs/core-concepts/architecture

An example of React code used within OneJS, demonstrating the creation of UI elements like `View` and `Label` with styling. The `onejs-react` reconciler processes this JSX.

```jsx
<View style={{ padding: 20 }}>
    <Label text="Hello" />
</View>
```

--------------------------------

### OneJS Spacing and Positioning Styles

Source: https://v3.onejs.com/docs/core-concepts/styling

Illustrates how to manage spacing (margin and padding) and positioning (absolute/relative) for elements in OneJS. Supports shorthand and individual property definitions.

```javascript
style={{
    // Shorthand (applies to all sides)
    margin: 10,
    padding: 20,

    // Or individual sides
    marginTop: 10,
    marginRight: 10,
    marginBottom: 10,
    marginLeft: 10,
    paddingTop: 20,
    paddingRight: 20,
    paddingBottom: 20,
    paddingLeft: 20,
}}
```

```javascript
style={{
    position: "absolute",  // "relative" | "absolute"
    top: 10,
    right: 10,
    bottom: 10,
    left: 10,
}}
```

--------------------------------

### OneJS Optimizing Production Builds

Source: https://v3.onejs.com/docs/guides/project-setup

Configuration options for esbuild to optimize production builds in OneJS projects, including minification, tree shaking, and dropping console/debugger statements.

```javascript
await esbuild.build({
    ...config,
    minify: true,
    treeShaking: true,
    drop: ["console", "debugger"],
})
```

--------------------------------

### Load Project Assets with Simple Paths

Source: https://v3.onejs.com/docs/guides/assets

Illustrates loading assets directly from the `App/assets/` directory using straightforward relative paths. This example shows how to load an image and a JSON configuration file.

```typescript
const logo = loadImage("images/logo.png")
const config = loadJson("data/config.json")
```

--------------------------------

### Dispatching Compute Shader Kernels (JavaScript)

Source: https://v3.onejs.com/docs/guides/gpu-compute

Provides examples of dispatching compute shader kernels in 1D, 2D, and 3D. It also shows how to use the `.repeat()` method for multiple iterations.

```javascript
// 1D dispatch
shader.kernel("CSMain").dispatch(64)

// 2D dispatch
shader.kernel("CSMain").dispatch(32, 32)

// 3D dispatch
shader.kernel("CSMain").dispatch(8, 8, 8)

// Multiple iterations
shader.kernel("Simulate").repeat(100)
```

--------------------------------

### API Reference: Creating Values

Source: https://v3.onejs.com/docs/guides/vector-drawing

Provides examples of how to create instances of various types used in the Painter2D API, such as Vector2, Color, and enums.

```APIDOC
## API Reference: Creating Values

### Description
This section shows how to instantiate common types and use enum values required for drawing operations with Unity's Painter2D API.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
// Vector2
new CS.UnityEngine.Vector2(x, y)

// Color (RGBA, 0-1 range)
new CS.UnityEngine.Color(r, g, b, a)

// Angle
CS.UnityEngine.UIElements.Angle.Degrees(degrees)
CS.UnityEngine.UIElements.Angle.Radians(radians)

// Enums
CS.UnityEngine.UIElements.ArcDirection.Clockwise
CS.UnityEngine.UIElements.ArcDirection.CounterClockwise
CS.UnityEngine.UIElements.FillRule.NonZero
CS.UnityEngine.UIElements.FillRule.OddEven
CS.UnityEngine.UIElements.LineCap.Butt
CS.UnityEngine.UIElements.LineCap.Round
CS.UnityEngine.UIElements.LineCap.Square
CS.UnityEngine.UIElements.LineJoin.Miter
CS.UnityEngine.UIElements.LineJoin.Round
CS.UnityEngine.UIElements.LineJoin.Bevel
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Full Example of OneJS Application

Source: https://v3.onejs.com/docs/guides/tailwind

A comprehensive example demonstrating the integration of arbitrary values, responsive design with ScreenProvider and hooks, and component styling in a OneJS application. It includes a reusable Card component and an App component that utilizes responsive features.

```jsx
import { useState } from "react"
import { render, View, Label, Button, ScreenProvider, useBreakpoint } from "onejs-react"
import "onejs:tailwind"

function Card({ title, children }) {
    return (
        <View className="p-4 md:p-6 bg-gray-800 rounded-lg">
            <Label className="text-lg text-white mb-2" text={title} />
            <View className="text-gray-400">{children}</View>
        </View>
    )
}

function App() {
    const bp = useBreakpoint()

    return (
        <View className="p-4 md:p-8 lg:p-12 bg-gray-900 flex-1">
            <Label className="text-xs text-gray-500 mb-4" text={`Breakpoint: ${bp}`} />

            <View className="flex-col md:flex-row">
                <View className="mb-4 md:mb-0 md:mr-4">
                    <Card title="Feature 1">
                        <Label text="Description here" />
                    </Card>
                </View>
                <Card title="Feature 2">
                    <Label text="Another feature" />
                </Card>
            </View>

            <Button
                className="mt-4 py-2 px-4 bg-blue-500 hover:bg-blue-600 rounded-lg"
                text="Get Started"
            />
        </View>
    )
}

render(
    <ScreenProvider>
        <App />
    </ScreenProvider>,
    __root
)
```

--------------------------------

### GPU Compute API Overview

Source: https://v3.onejs.com/docs/guides/gpu-compute

This section covers the setup and basic usage of the OneJS GPU Compute API, including platform support and shader registration.

```APIDOC
## OneJS GPU Compute API

OneJS provides a bridge to Unity's compute shader API, enabling GPU-accelerated computations from JavaScript. The `onejs-unity` package offers a fluent TypeScript API for working with compute shaders.

**Related:** Zero-Allocation Interop (for per-frame dispatch optimization)

## Platform Support

| Platform        | Compute Shaders | Async Readback |
|-----------------|-----------------|----------------|
| Windows/macOS/Linux | Yes             | Yes            |
| iOS/Android     | Yes (most devices)| Yes            |
| WebGL           | No              | No             |
| WebGPU          | Yes             | Yes            |

## Setup

### 1. Register Shaders in C#

Compute shaders must be registered before JavaScript can access them:

```csharp
using OneJS.GPU;

public class MyShaderProvider : MonoBehaviour {
    public ComputeShader particleShader;

    void OnEnable() {
        GPUBridge.Register("ParticleUpdate", particleShader);
    }

    void OnDisable() {
        GPUBridge.Unregister("ParticleUpdate");
    }
}
```

### 2. Install onejs-unity

```bash
npm install onejs-unity
```

## Basic Usage

```typescript
import { compute, Platform } from "onejs-unity"

// Check platform support
if (!Platform.supportsCompute) {
    console.log("Compute shaders not supported")
    return
}

// Load a registered shader
const shader = await compute.load("ParticleUpdate")

// Create a buffer with initial data
const positions = compute.buffer({
    data: new Float32Array([0, 0, 0, 1, 1, 1])
})

// Dispatch a kernel with the fluent API
shader.kernel("CSMain")
    .float("deltaTime", 0.016)
    .float("speed", 5.0)
    .buffer("positions", positions)
    .dispatch(1)

// Read results back from GPU
const result = await positions.read()
console.log(result) // Float32Array with updated values

// Clean up
positions.dispose()
shader.dispose()
```
```

--------------------------------

### OneJS Typography Styling for Labels

Source: https://v3.onejs.com/docs/core-concepts/styling

Shows how to style text elements (Labels) in OneJS, including font size, style, color, text alignment, and whitespace handling.

```javascript
<Label
    text="Styled text"
    style={{
        fontSize: 16,
        fontStyle: "bold",        // "normal" | "bold" | "italic" | "bold-and-italic"
        color: "#ffffff",
        unityTextAlign: "middle-center", // Text alignment
        whiteSpace: "normal",     // "normal" | "nowrap"
    }}
/>
```

--------------------------------

### Example OneJS Button Component

Source: https://v3.onejs.com/docs/introduction

Demonstrates a simple React component for a button in OneJS, showing how to define its text and an onClick event handler. This component translates directly to a Unity UI Toolkit Button.

```jsx
<Button text="Click me" onClick={() => console.log("clicked")} />
```

--------------------------------

### Using USS Stylesheets with OneJS Components

Source: https://v3.onejs.com/docs/core-concepts/styling

Shows how to load a USS stylesheet using `loadStyleSheet` and apply its classes to OneJS components like View, Label, and Button.

```javascript
// Load at startup
loadStyleSheet("styles/main.uss")

// Use classes
<View className="card">
    <Label text="Card Title" className="card-title" />
    <Button text="Action" className="button-primary" />
</View>
```

--------------------------------

### Working with C# Arrays and Collections in JavaScript

Source: https://v3.onejs.com/docs/core-concepts/csharp-interop

Provides examples of how to interact with C# arrays and generic collections like Lists in JavaScript, including iteration, accessing elements by index, and checking their count.

```javascript
const renderers = go.GetComponentsInChildren(CS.UnityEngine.Renderer)
for (let i = 0; i < renderers.Length; i++) {
    renderers[i].enabled = false
}

const list = new (CS.System.Collections.Generic.List(CS.System.String))()
list.Add("one")
list.Add("two")
console.log(list.Count) // 2
console.log(list[0]) // "one"
```

--------------------------------

### Dump the Entire UI Hierarchy

Source: https://v3.onejs.com/docs/core-concepts/styling

Uses the `__dumpUI()` utility to output the element hierarchy of the entire UI from the root. This is helpful for inspecting the structure and USS classes applied to elements.

```javascript
// Dump entire UI from root
console.log(__dumpUI())
```

--------------------------------

### Configure OneJS Fetch Request Options

Source: https://v3.onejs.com/docs/guides/fetch-api

Provides an example of configuring advanced options for a OneJS fetch request, including HTTP method, headers (like Content-Type and Authorization), and the request body.

```javascript
const response = await fetch(url, {
    method: "POST",           // GET, POST, PUT, DELETE, HEAD
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer token123",
    },
    body: JSON.stringify(data),
})
```

--------------------------------

### Using Images as Backgrounds in OneJS

Source: https://v3.onejs.com/docs/components/image

This example demonstrates how to use an image as a background for a View component. It utilizes the 'loadImage' function and applies the loaded texture to the 'backgroundImage' style property.

```javascript
import { loadImage } from "onejs-unity/assets"

function Card() {
    const [bg, setBg] = useState(null)

    useEffect(() => {
        setBg(loadImage("images/card-bg.png"))
    }, [])

    return (
        <View style={{
            backgroundImage: bg,
            width: 300,
            height: 200,
            padding: 20,
        }}>
            <Label text="Card Content" style={{ color: "#fff" }} />
        </View>
    )
}

```

--------------------------------

### Create a Responsive Width Container

Source: https://v3.onejs.com/docs/core-concepts/styling

A USS style snippet for creating a container that spans the full width of its parent but has a maximum width, with automatic left and right margins to center it on larger screens.

```css
<View style={{
    width: "100%",
    maxWidth: 800,
    marginLeft: "auto",
    marginRight: "auto",
}}>
    {/* Centered, max 800px */}
</View>
```

--------------------------------

### OneJS Visual Styling: Backgrounds and Borders

Source: https://v3.onejs.com/docs/core-concepts/styling

Details how to apply background and border styles in OneJS. Supports solid colors, background images (including Unity Textures and RenderTextures), and border radius.

```javascript
style={{
    backgroundColor: "#2a2a2a",
    backgroundImage: texture,  // Texture2D or RenderTexture
}}
```

```javascript
style={{
    borderWidth: 1,
    borderColor: "#333333",
    borderRadius: 8,
    // Or individual sides
    borderTopWidth: 2,
    borderLeftColor: "#ff0000",
    borderTopLeftRadius: 4,
}}
```

--------------------------------

### Basic OneJS React UI Component

Source: https://v3.onejs.com/docs/quickstart

A simple React component for OneJS that displays a counter and an increment button. It utilizes `useState` for state management and standard React JSX syntax.

```typescript
import { render, View, Label, Button } from "onejs-react"
import { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)

    return (
        <View style={{ padding: 20, alignItems: "flex-start" }}>
            <Label text={`Count: ${count}`} style={{ fontSize: 24, marginBottom: 10 }} />
            <Button text="Increment" onClick={() => setCount(c => c + 1)} />
        </View>
    )
}

render(<Counter />, __root)
```

--------------------------------

### Monitor Transition Animations in UI Toolkit

Source: https://v3.onejs.com/docs/core-concepts/events

This example demonstrates how to monitor the lifecycle of USS (Unity Style Sheets) transition animations. It includes handlers for `onTransitionStart`, `onTransitionEnd`, `onTransitionRun`, and `onTransitionCancel`, allowing for precise control and feedback during animations.

```javascript
<View
    className="animated"
    onTransitionStart={(e) => console.log("Transition started:", e.styleProperty)}
    onTransitionEnd={(e) => console.log("Transition ended:", e.styleProperty)}
    onTransitionRun={(e) => console.log("Transition running")}
    onTransitionCancel={(e) => console.log("Transition cancelled")}
>
    <Label text="Animated element" />
</View>
```

--------------------------------

### Perform a Basic GET Request with OneJS Fetch

Source: https://v3.onejs.com/docs/guides/fetch-api

Demonstrates how to use the OneJS fetch function to make a simple GET request to an API endpoint and parse the JSON response.

```javascript
async function loadData() {
    const response = await fetch("https://api.example.com/data")
    const data = await response.json()
    console.log(data)
}
```

--------------------------------

### C# Static Methods for Zero-Allocation Bindings

Source: https://v3.onejs.com/docs/guides/zero-alloc

Provides examples of C# static methods designed for zero-allocation bindings in OneJS. It shows how to directly use static methods and how to create static wrappers for instance methods, including those with complex parameters like `Vector3`.

```csharp
// MyGameBridge.cs
using OneJS;

public static class MyGameBridge
{
    // Direct static method - works directly
    public static float GetHealth(int entityHandle)
    {
        var entity = ObjectRegistry.Get<Entity>(entityHandle);
        return entity.Health;
    }

    // Instance method wrapper - takes handle as first arg
    public static void SetHealth(int entityHandle, float value)
    {
        var entity = ObjectRegistry.Get<Entity>(entityHandle);
        entity.Health = value;
    }

    // Method with Vector3 parameter
    public static void MoveEntity(int entityHandle, float x, float y, float z)
    {
        var entity = ObjectRegistry.Get<Entity>(entityHandle);
        entity.transform.position = new Vector3(x, y, z);
    }
}
```

--------------------------------

### ScrollView Scroll Modes Example

Source: https://v3.onejs.com/docs/components/scrollview

Illustrates how to configure the ScrollView component for different scrolling directions: vertical (default), horizontal, and both vertical and horizontal. Each example sets the appropriate 'mode' prop and a corresponding dimension style.

```javascript
// Vertical scrolling (default)
<ScrollView mode="Vertical" style={{ height: 400 }}>
    {content}
</ScrollView>

// Horizontal scrolling
<ScrollView mode="Horizontal" style={{ width: 400 }}>
    <View style={{ flexDirection: "row" }}>
        {items.map(item => <Card key={item.id} data={item} />)}
    </View>
</ScrollView>

// Both directions
<ScrollView mode="VerticalAndHorizontal" style={{ width: 400, height: 400 }}>
    {largeContent}
</ScrollView>

```

--------------------------------

### Instantiating C# Objects and Adding Components in JavaScript

Source: https://v3.onejs.com/docs/core-concepts/csharp-interop

Illustrates how to create new C# objects, such as GameObjects, and add components to them using JavaScript. This is essential for dynamic scene manipulation.

```javascript
const go = new CS.UnityEngine.GameObject("MyObject")
const rb = go.AddComponent(CS.UnityEngine.Rigidbody)
rb.mass = 2.0
rb.useGravity = true
```

--------------------------------

### Custom Shape: Star

Source: https://v3.onejs.com/docs/guides/vector-drawing

Example of creating a custom star shape using Painter2D.

```APIDOC
## Custom Shape: Star

### Description
This example demonstrates how to draw a star shape using the `Painter2D` API within a `View` component. It allows customization of the number of points, outer radius, and inner radius.

### Method
N/A (Component Rendering)

### Endpoint
N/A (Client-side Rendering)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
function Star({ points = 5, outerRadius = 50, innerRadius = 25 }) {
    return (
        <View
            style={{ width: 120, height: 120 }}
            onGenerateVisualContent={(mgc) => {
                const p = mgc.painter2D
                const cx = 60, cy = 60

                p.fillColor = new CS.UnityEngine.Color(1, 0.8, 0, 1)
                p.BeginPath()

                for (let i = 0; i < points * 2; i++) {
                    const radius = i % 2 === 0 ? outerRadius : innerRadius
                    const angle = (Math.PI / points) * i - Math.PI / 2
                    const x = cx + Math.cos(angle) * radius
                    const y = cy + Math.sin(angle) * radius

                    if (i === 0) {
                        p.MoveTo(new CS.UnityEngine.Vector2(x, y))
                    } else {
                        p.LineTo(new CS.UnityEngine.Vector2(x, y))
                    }
                }

                p.ClosePath()
                p.Fill(CS.UnityEngine.UIElements.FillRule.NonZero)
            }}
        />
    )
}
```

### Response
#### Success Response (200)
N/A (Visual Rendering)

#### Response Example
N/A
```

--------------------------------

### UI Elements Performance Tip: Simple makeItem

Source: https://v3.onejs.com/docs/components/listview

Demonstrates a simple and performant `makeItem` function for UI Elements, which is recommended for faster initialization. It contrasts with a more complex, slower approach that should be avoided.

```javascript
// Good: Simple, fast
makeItem(() => new CS.UnityEngine.UIElements.Label())

// Avoid: Complex hierarchy in makeItem
makeItem(() => {
    // Building complex trees here is slow
    // Consider USS classes instead
})
```

--------------------------------

### tsconfig.json Configuration for OneJS

Source: https://v3.onejs.com/docs/guides/project-setup

Configures TypeScript compilation, specifying include and exclude paths for the project.

```json
{
    "include": ["./**/*.ts", "./**/*.tsx"],
    "exclude": ["node_modules", "dist"]
}
```

--------------------------------

### HLSL Compute Shader Example

Source: https://v3.onejs.com/docs/guides/gpu-compute

A sample HLSL compute shader (`ParticleUpdate.compute`) that updates particle positions. It demonstrates the use of `RWStructuredBuffer`, uniforms, and the `SV_DispatchThreadID`.

```hlsl
#pragma kernel CSMain

RWStructuredBuffer<float3> positions;
float deltaTime;
float speed;
uint count;

[numthreads(64, 1, 1)]
void CSMain(uint id : SV_DispatchThreadID) {
    if (id >= count) return;
    positions[id] += float3(0, speed * deltaTime, 0);
}
```

--------------------------------

### Analyze Bundle Size with esbuild-visualizer

Source: https://v3.onejs.com/docs/guides/building

This command-line instruction uses `esbuild-visualizer` to generate a visual representation of your JavaScript bundle. This helps in identifying large dependencies and optimizing the bundle size by analyzing code imports and exports.

```bash
npx esbuild-visualizer --open
```

--------------------------------

### Basic OneJS View Usage with Styling

Source: https://v3.onejs.com/docs/components/view

Illustrates the basic usage of the View component with inline styles for padding and background color. It also shows how to nest a Label component within the View.

```javascript
<View style={{ padding: 20, backgroundColor: "#1a1a1a" }}>
    <Label text="Content inside a View" />
</View>

```

--------------------------------

### Creating C# Delegates for Callbacks in JavaScript

Source: https://v3.onejs.com/docs/core-concepts/csharp-interop

Illustrates how to create C# delegates, such as `System.Action`, in JavaScript and pass them to C# methods that expect such callbacks.

```javascript
const action = new CS.System.Action(() => {
    console.log("Action invoked!")
})
SomeApi.DoSomething(action)
```

--------------------------------

### Clear All JavaScript-Loaded Stylesheets

Source: https://v3.onejs.com/docs/core-concepts/styling

Removes all stylesheets that were loaded via JavaScript. This function does not affect stylesheets loaded from Unity assets. It returns the count of removed stylesheets.

```javascript
const count = clearStyleSheets()  // Returns number of stylesheets removed
console.log(`Removed ${count} stylesheets`)
```

--------------------------------

### Remove Specific Stylesheet by Name

Source: https://v3.onejs.com/docs/core-concepts/styling

Removes a specific stylesheet from the document by its name. This function returns a boolean indicating whether the stylesheet was found and successfully removed.

```javascript
removeStyleSheet("my-styles")  // Returns true if found and removed
```

--------------------------------

### Handle Gamepad/Keyboard Navigation in UI Toolkit

Source: https://v3.onejs.com/docs/core-concepts/events

This snippet illustrates how to handle UI navigation using gamepads or keyboards. It includes event handlers for `onNavigationMove`, `onNavigationSubmit`, and `onNavigationCancel`, enabling intuitive control schemes for non-pointer input devices.

```javascript
<View
    onNavigationMove={(e) => console.log("Navigation direction:", e.direction)}
    onNavigationSubmit={(e) => console.log("Navigation submit")}
    onNavigationCancel={(e) => console.log("Navigation cancel")}
>
    <Label text="Navigable element" />
</View>
```

--------------------------------

### Setup CSS Modules with esbuild Plugin

Source: https://v3.onejs.com/docs/guides/css-modules

Configure the esbuild build process to include the CSS Modules plugin. This enables the transformation of .module.uss files during the build. Ensure the plugin is correctly imported and added to the plugins array.

```javascript
import { ussModulesPlugin } from "./plugins/esbuild-uss-modules.mjs"

await esbuild.build({
    // ...
    plugins: [
        ussModulesPlugin({ generateTypes: true }),
    ],
})
```

--------------------------------

### OneJS Display and Opacity Styling

Source: https://v3.onejs.com/docs/core-concepts/styling

Covers styling properties related to element display, visibility, overflow, and opacity in OneJS. These control how elements are rendered and interact with their container.

```javascript
style={{
    display: "flex",     // "flex" | "none"
    visibility: "visible", // "visible" | "hidden"
    overflow: "hidden",  // "visible" | "hidden"
    opacity: 0.8,
}}
```

--------------------------------

### Find Elements by Type

Source: https://v3.onejs.com/docs/core-concepts/styling

Uses the `__findByType()` utility to find all elements of a specific type within the UI. This is useful for inspecting all instances of a particular component, like TextFields or Buttons.

```javascript
// Find all TextField elements
console.log(__findByType("TextField"))

// Find all Buttons
console.log(__findByType("Button"))
```

--------------------------------

### JavaScript Usage of HLSL Compute Shader Example

Source: https://v3.onejs.com/docs/guides/gpu-compute

Shows the JavaScript code to load and use the HLSL compute shader defined previously. It sets uniforms, creates a buffer, and dispatches the kernel within an update loop.

```javascript
const shader = await compute.load("ParticleUpdate")
const positions = compute.buffer({
    data: new Float32Array([0,0,0, 1,0,0, 2,0,0]) // 3 particles
})

// Update loop
function update(dt: number) {
    shader.kernel("CSMain")
        .float("deltaTime", dt)
        .float("speed", 2.0)
        .int("count", 3)
        .buffer("positions", positions)
        .dispatch(1)
}
```

--------------------------------

### OneJS VisualElement Focus Management via Refs

Source: https://v3.onejs.com/docs/core-concepts/refs

Shows how to use refs to programmatically control the focus state of a `VisualElement`. It includes examples for applying focus using `Focus()` and removing focus using `Blur()`.

```javascript
const ref = useRef(null)

// Focus the element
ref.current?.Focus()

// Remove focus
ref.current?.Blur()
```

--------------------------------

### OneJS StyleSheet API: loadStyleSheet Function

Source: https://v3.onejs.com/docs/core-concepts/styling

Provides the syntax for the `loadStyleSheet` function in OneJS, which is used to load USS files from the working directory. It returns a boolean indicating success.

```javascript
loadStyleSheet("styles/main.uss")  // Returns true if successful
```

--------------------------------

### C# Interoperability Example in JavaScript

Source: https://v3.onejs.com/docs/core-concepts/architecture

Demonstrates how to access and invoke C# methods and types directly from JavaScript using the global `CS` proxy in OneJS. This involves type lookup, method invocation, and argument/return value conversion.

```javascript
CS.UnityEngine.Debug.Log("Hello")
```

--------------------------------

### Handle Pointer Events in OneJS

Source: https://v3.onejs.com/docs/core-concepts/events

This example shows how to track pointer (mouse/touch) interactions on a View component in OneJS. It utilizes onPointerDown, onPointerUp, onPointerMove, onPointerEnter, and onPointerLeave event handlers.

```javascript
import { View, Label } from "onejs";

function App() {
    return (
        <View
            style={{ width: 200, height: 200, backgroundColor: "#333" }}
            onPointerDown={(e) => console.log("Pointer down", e.x, e.y)}
            onPointerUp={(e) => console.log("Pointer up")}
            onPointerMove={(e) => console.log("Pointer move", e.x, e.y)}
            onPointerEnter={(e) => console.log("Pointer entered")}
            onPointerLeave={(e) => console.log("Pointer left")}
        >
            <Label text="Hover and click me" />
        </View>
    )
}
```

--------------------------------

### Handling User Input in JavaScript using C# Input System

Source: https://v3.onejs.com/docs/core-concepts/csharp-interop

Demonstrates how to check for keyboard input (key presses, axis values) in JavaScript by accessing `CS.UnityEngine.Input`. Includes a basic structure for calling input checks every frame.

```javascript
function checkInput() {
    if (CS.UnityEngine.Input.GetKeyDown(CS.UnityEngine.KeyCode.Space)) {
        console.log("Jump!")
    }

    const horizontal = CS.UnityEngine.Input.GetAxis("Horizontal")
    const vertical = CS.UnityEngine.Input.GetAxis("Vertical")
}

// Call every frame
function update() {
    checkInput()
    requestAnimationFrame(update)
}
requestAnimationFrame(update)
```

--------------------------------

### Minify JavaScript Code with esbuild

Source: https://v3.onejs.com/docs/guides/building

This snippet demonstrates how to configure esbuild for production builds, enabling minification, tree shaking, and dropping console/debugger statements. It's crucial for reducing bundle size and improving performance in production.

```javascript
// esbuild.config.js
await esbuild.build({
    minify: true,
    treeShaking: true,
    drop: ["console", "debugger"],
})
```

--------------------------------

### ScrollView Scrollbar Visibility Configuration

Source: https://v3.onejs.com/docs/components/scrollview

Demonstrates how to control the visibility of scrollbars in the ScrollView component. Examples show how to always show, hide, or use the default 'Auto' behavior for the vertical scrollbar.

```javascript
// Always show scrollbar
<ScrollView verticalScrollerVisibility="AlwaysVisible">
    {content}
</ScrollView>

// Hide scrollbar
<ScrollView verticalScrollerVisibility="Hidden">
    {content}
</ScrollView>

// Auto (show when needed)
<ScrollView verticalScrollerVisibility="Auto">
    {content}
</ScrollView>

```
Tokens:
Raw