Components

Each component is a JavaScript function located in a file with the .torp extension. The function is responsible for storing the component's state, building and updating the component's HTML, and scoping CSS styles.

The function

The component function should look something like this:

export default function Component() {
	// ...
}

The function's name must start with an uppercase letter to be considered a component.

The component should be exported if it is to be used outside the file. You can use any combination of export default, export and unexported functions for components in a Torpor file. For example, a child component that is used only in the current file can be declared like this:

function ChildComponent() {
	// ...
}

Markup

The HTML that a component outputs is declared within a @render block. There can only be one @render block per component. Each @render block must contain a single root element:

export default function Component() {
	@render {
		<p>Hello!</p>
	}
}

You can include dynamic content in text and attributes using braces:

export default function Component() {
	const className = "extravagant"
	const name = "Torpor"

	@render {
		<p class={className}>
			Hello, {name}!
		</p>
	}
}

See the Markup section for more on what you can do in the @render block.

State

Data that is stored within a component is called its state. State can be simple variables, as above, or it can be placed in an object and wrapped with the $watch function to make it reactive and update the UI when it is changed:

export default function Component() {
	const $state = $watch({
		count: 1
	})

	@render {
		<div>
			<p>
				The count is {$state.count}.
			</p>
			<button onclick={() => $state.count++}>
				Increment
			</button>
		</div>
	}
}

The $watch function is automatically imported into component files if used (along with a few other functions). By convention, reactive objects should start with a $ so that it is easy to see at a glance which statements are reactive in your markup.

A component function can accept a $props component containing the properties that were passed to the component:

export default function Component($props: { name: string }) {
	@render {
		<p>
			Hello, {name}!
		</p>
	}
}

See the State section for more on how to manage component state.

Styles

The CSS for styling a component's elements is declared with a @style block. There can only be one @style block per component:

export default function Component() {
	@render {
		<p class="extravagant">Hello!</p>
	}

	@style {
		.extravagant {
			font-size: x-large;
			color: magenta;
		}
	}
}

The styles in the style block are scoped to the elements in the component so that they don't affect elements in other components.

See the Styles section for more on what you can do in the @style block.

Playground