Pass-through Directives #

Pass-through directives look like normal directives, but they are handled by specialized compiler passes instead of the directive compilation pass.

Directives #

s:slot - Component slot assignment.
s:bind - Component attribute binding.
s:raw - Preserve element inner content without directive parsing.
s:trim - Remove whitespace-only child text nodes at compile time.

Examples #

s:slot #

Assign element content to a named component slot.

<s-card>
    <div s:slot="header">Title</div>
    <p>Body</p>
</s-card>

<s-layout>
    <div s:slot="sidebar">Filters</div>
    <div s:slot="content">Results</div>
</s-layout>

s:raw #

Use s:raw when you need verbatim inner content. Sugar skips parsing directives and special tags inside the node body.

s:raw is supported on attribute-bearing template nodes (elements, fragments, and components).

<code s:raw>
    <s-template s:if="$debug">literal</s-template>
    {{ untouched_token }}
</code>

Notes:

s:raw applies to children, not to the outer node itself.
The s:raw attribute is not rendered in final HTML.

s:trim #

Use s:trim on an element when indentation/newline-only text nodes between children should be removed at compile time.

This is useful for compact inline outputs such as <title>, where line breaks from template formatting would otherwise be preserved.

<title s:trim>
    <s-template s:if="$hasPageTitle">Glaze Documentation | </s-template>
    <?= $siteTitle ?>
</title>

<!-- $hasPageTitle = true, $siteTitle = 'Glaze' -->
<title>Glaze Documentation | Glaze</title>

Notes:

s:trim removes only whitespace-only child text nodes.
Tabs/newlines in trimmed text nodes are compacted to single spaces.
Leading/trailing whitespace in the trimmed subtree is removed.
Non-whitespace text and other child nodes are preserved.
s:trim is supported on HTML elements only.
s:trim is presence-only and does not accept a value.
The s:trim attribute itself is not rendered in final HTML.

s:bind #

Bind a set of attributes or props to a component element.

<s-card s:bind="$cardProps"></s-card>

<s-button s:bind="$buttonAttrs">Save</s-button>

Raw PHP imports (`use`, `use function`, `use const`) #

When a raw PHP block starts with import statements, Sugar hoists those imports to the compiled template prelude (outside the render closure), where PHP allows them.

<?php
use DateTimeImmutable as Clock;

$year = (new Clock('2024-01-01'))->format('Y');
?>

<p><?= $year ?></p>

Behavior details:

Leading imports are extracted and emitted once at file scope.
Remaining executable PHP stays in place inside the template output flow.
Equivalent imports are de-duplicated, even when they appear multiple times (for example across includes, inheritance output, or expanded components).

This means repeating the same library import across template files does not produce repeated use lines in compiled output.