surface_0_5_syntax.md

Interpolation

<div class={@class}>
  {@value}
</div>

Dynamic props/attrs

<div {...@attrs}>
  {@value}
</div>

<Component id="1" {...@props}/>

Attribute assignment shorthand

<div {=@class} {=@style}>
  {@value}
</div>

Note: Equivalent to <div class={@class} style={@style}>

Slots shorthand notation

<Card>
  <:header>
    Some head text
  </:header>
  Some text for the body
  <:footer>
    Some head text
  </:footer>
</Card>

Note: <:header> is equivalent to <template slot="header">

Constructs

  <!-- #if -->
  
  {#if @value == 0}
    <div class="equal">
      Value {@value} is 0
    </div>
  {#elseif @value > 0}
    <div class="greater">
      Value {@value} is greater than 0
    </div>
  {#else}
    <div class="lower">
      Value {@value} is lower than 0
    </div>
  {/if}
 
  <!-- #case --> 
  
  {#case @value}
    {#match [first|_]}
      <div class={@class}>
        First {first}
      </div>
    {#match []}
      <div {=@class}>
        Value is empty
      </div>
    {#match _}
      Value is something else
  {/case}
 
  <!-- #for -->
  
  {#for item <- @items}
    Item: {item}
  {#else}
    No items
  {/for}

Comments

<!-- HTML public comment (hits the browser) -->

{!-- Surface private comment (does not hit the browser) --}