html

html

A web page is warp data: tags are values, so a page is written like any other data.

div{ h1{"Fruit"} p{ "Fresh " b{"pears"} " today" } }

Run as a file, a program ending in an element opens it in a window; warp dev page.warp serves it with reloads and warp build page.warp makes an app that shows it. Runnable examples: the playground tour and samples/html*.warp.

Page facts

Keys on html go into the page's head:

html{ lang: "en" title: "Shop" description: "Fresh fruit" meta: {author: "Ann"} body{ p{"hi"} } }

title becomes <title>, the others <meta name=… content=…>.

Lists of options

A list inside select{} gives one option per item; a map gives value and label:

select{ aria-label: "fruit" ["a": "Apple", "p": "Pear"] }

Keys

Inside on key { … } the bare word key is the key pressed, and key names compare as words:

on key { if key == ESC { exit } }

Named keys: ESC, ENTER (RETURN), TAB, SPACE, BACKSPACE, UP, DOWN, LEFT, RIGHT, F1 … F12; letters stay texts (key == "a"). held_key is the key held now ("" for none), for drawing loops: if held_key == LEFT { x -= 1 }. A comparison with a word that names no key is a severe warning.

Forms

on submit inside a form gets its named fields as event.fields, a number field's value as a number; the page does not reload (samples/form_submit.warp):

guests = []
div{
	form{
		on submit { guests += [event.fields.name] }
		input{ name: "name" aria-label: "name" }
		button{ "Add" }
	}
	ul{ for guest in guests { li{ guest } } }
}

A handler on a line of its own belongs to the element it stands in.

Elements by id

An id in the program's markup is a name: who is the element, $who its value (samples/page_elements.warp):

greeting = "Type a name"
div{
	input{ id: "who" }
	button{ on click { greeting = "Hello " + $who; who.focus() } "Greet" }
	p{ greeting }
}

$who is the text typed into an input, textarea or select, the number of a number input, yes/no of a checkbox and the text of any other element; $who = "Ann" writes it. A kebab id is a name too: user-name.focus(), $user-name. document and window are the page's own. element("user-name") finds an element by a computed id or one the program doesn't create. An id that is also a variable, function or word the program uses is a compile-time error naming both; for a variable that follows a field, write input{ bind: name } instead. $ means this only in warp code: markup text (p{ "costs $5" }) and single-quoted strings stay text. The older $who.value, $who.focus() and $document.title still work for one release, with a hint naming the new form. jQuery's $('#who') works with a hint too: $who is the value, who the element.

Components

A component's lower-case plural is the list of its instances in page order, readable and writable from outside:

def Counter(start) {
	count = start
	div{ button{ on click { count += 1 } "+" } p{ "n " + count } }
}
div{
	Counter(0)
	Counter(10)
	button{ on click { counters#1.count = 0 } "Reset the first" }
	p{ "sum " + sum(counters.count) }
}

Animation

Keyframes are CSS's own, in the style sheet; leave: plays an animation before an item is removed (samples/keyframes.warp):

style{ "@keyframes pop": { from: { opacity: 0 } to: { opacity: 1 } } }
ul{ li{ animation: pop 400ms leave: pop 400ms reverse "item" } }

Warnings

Markup that would render wrong is a warning with the near name as fix, not an error: an unknown element (divv{…}, fix div), an unknown attribute or event (hreff, on clik), an attribute value of the wrong kind, content HTML does not allow where it stands. The program's own components are fine; custom elements with a dash should be too (card dash-element).

Routes

get "/path" { … } answers a request; its body sets the status and headers (samples/route_headers.warp):

get "/teapot" {
	status 418
	header "X-Warp" "brewed"
	"short and stout"
}

warp serve serves the routes, warp deploy makes them a Cloudflare Worker.