Overview

Torpor is a JavaScript framework, designed for simplicity and completeness.

🚧 WARNING: WORK IN PROGRESS 🚧

Features

• Compose your views with JavaScript, HTML and CSS
• Components are functions with script, markup and styles
• In-markup JavaScript logic with @if, @for, @switch and @await keywords
• And @replace, @const, @console, @debugger, @function and @html
• Runtime reactivity via proxies that can be used in any JavaScript file
• Scoped styles, two-way binding, child components and more
• An accessible, unstyled component library
• A site and app framework

A simple component

/**
 * Components are functions that are declared in a `.torp` file
 */
export default function Component($props: { name: string }) {
	// Use the $watch function to declare reactive state
	const $state = $watch({
		count: 0,
		get isEven() {
			return this.count % 2 === 0
		},
	})

	// Put your HTML markup in a @render section
	@render {
		<div>
			<h2>Hello, {$props.name}!</h2>

			<button onclick={() => $state.count++}>
				Increment
			</button>

			<p>
				The count is {$state.count}.
			</p>

			@if ($state.isEven) {
				<p>It is even.</p>
			} else {
				<p>It is odd.</p>
			}
		</div>
	}

	// Put your CSS styles in a @style section
	@style {
		h2 {
			color: magenta;
		}
	}
}

Playground