Components, props, and setup

Keep imports, typed public props, module code, local components, and Octane hooks together.

Typed props

A component may have one props declaration. Its contents become the complete typed function parameter in generated TSRX.

UserCard.btsxbtsx

1import type { User } from "./types.ts";2props { user, compact = false }: { user: User; compact?: boolean }3 4article.user-card(class={compact ? "compact" : ""})5  h2 #{user.name}

Component setup

Setup emits TypeScript inside the component body before its template root. Use it for local values and Octane hooks.

Counter.btsxbtsx

1import { useMemo, useState } from "octane";2props { initialCount }: { initialCount: number }3setup const [count, setCount] = useState(initialCount);4setup const doubled = useMemo(() => count * 2);5 6button(onClick={() => setCount(count + 1)})7  | Count: #{count}, doubled: #{doubled}

Module code

Module declarations emit TypeScript at module scope. Use them for directives, types, context values, constants, and helper functions.

Theme.btsxbtsx

1module2  "use strong";3  const shortcutKey = "/";4 5import { useEffect } from "octane";

Local components

A component declaration creates a tagless local component using the same BTSX syntax as the default export.

ThemeLabel.btsxbtsx

1component ThemeLabel2  setup const currentTheme = use(Theme);3  p Current theme: #{currentTheme}4 5Theme.Provider(value={theme})6  ThemeLabel