Overview

Torpor is a full-stack JavaScript framework that aims 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
	let $state = $watch({
		count: 0,
		get isEven() {
			return this.count % 2 === 0
		},
	})

	// Put your HTML markup in a @render section
	@render {
		<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>
		}
	}

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

Playground