# Spaces

`Coyote` _never_ adds spaces or new lines.

Space is compositional in HTML. It has weight and meaning.

`Coyote` adheres to the lines and spaces defined by templates, text nodes, and attribute values.

So every new line and space is intentional.

## Templates

The following examples demonstrate how spaces collapse in templates.

### No added spaces

A template without trailing spaces:

```rust
tmpl("<p>hai :3</p>", [])
```

Will render without trailing spaces:

```html
<p>hai :3</p>
```

### Collapse spaces and new lines

A template with trailing spaces and multiple new lines:

```rust
tmpl("
	<p>

	hai   :3
	
	</p>
	", [])
```

Will render collapsed spaces and collapsed new lines:

```html
<p>
	hai :3
</p>
```

### Attributes

Attributes collapse spaces and new lines.

So a template with attributes spaced out:

```rs
tmpl("<p    attr    attr2    att3    ></p>", [])
```

Will collapse spaces on render:

```html
<p attr attr2 att3></p>
```

And a template with new lines:

```rs
tmpl("
	<p

		attr

		attr2

		attr3>

	</p>
	",
	[]
)
```

Will collapse new lines on render:

```html
<p
	attr
	attr2
	attr3>
</p>
```

### Attribute values

Attribute value spacing will only collapse spaces.

So a template with a multi-line attribute value:

```rs
tmpl("
	<p
		attr='

			hai   :3    hello!

			'
	></p>
	",
	[]
)
```

Will collapse spaces but preserve new lines on render:

```html
<p
	attr='

		hai :3 hello!

		'
></p>
```

## Injections

### Attribute injections

When a space is followed by an attribute injection:

```rs
let attributes = list([
	text("hai"),
	text("hello"),
]);

tmpl(
	"<p {}></p>",
	[attributes]
)
```

A template will render spaces before attributes:

```html
<p hai hello></p>
```

And when a new line is followed by an attribute injection:

```rs
let attributes = list([
	attr("hai"),
	attr("hello"),
]);

tmpl(
	"<p
		{}></p>
	",
	[attributes]
)
```

A template will render new lines before attributes:

```html
<p
	hai
	hello></p>
```

### Descendant injections

#### Template injections

Coyote parses the space between templates as if components were a contiguous document.

It uses the preceeding space in a template to establish document spacing and avoid empty trailing spaces. 

The following example demonstrates this behavior:

```rs
let descendants = list([
	tmpl(" <span>hai :3</span> ", []),
	tmpl(
		"

		<span>hello</span>

		", []),
]);

tmpl(
	"<p>{}</p>",
	[descendants]
)
```

And those spaces and new lines are rendered accordingly:

```html
<p> <span>hai :3</span>
	<span>hello</span>
</p>
```

#### Text components

Text components preserve all new lines and collapse all spaces.

```rs
let text_component = text(
	"

	hai   :3

	"
);
	
tmpl(
	"
	<p>{}</p>
	",
	[text_component]
);
```

New lines are preserved and spaces are collapsed on render:

```html
<p>

	hai :3

</p>	
```
