Skip to content

v2.1.0 - Slots!

Compare
Choose a tag to compare
@esthedebeste esthedebeste released this 10 Oct 15:39
· 10 commits to main since this release
16b537c

Slots

2040c10

You can now make use of slots within templates, which are a way to embed content from the template call site. Maybe an example would help:

$$centered_div {
  div(style="display: grid; place-items: center;") {
    div {
      // embed a slot with `slot!`
      slot!
    }
  }
}

$centered_div {
  h1 "Hi!"
}
// html output
<div style="display: grid; place-items: center;">
  <div>
    <h1>Hi!</h1>
  </div>
</div>

Slots can also have names:

// don't forget to name the slots by the parameters
$$red_and_blue(red blue) {
  div(style="color: red;") {
    // `slot!(name)` for named slots.
    slot!(red)
  }
  div(style="color: blue;") {
    slot!(blue)
  }
}

$red_and_blue(red={
  h1 "Red!"
} blue={
  h1 "Blue!"
})
// html output
<div style="color: red;">
  <h1>Red!</h1>
</div>
<div style="color: blue;">
  <h1>Blue!</h1>
</div>

Fixes

  • Improved Dynamic bracket handling (in 2040c10)
  • Support DynamicText directly in {} (in 2040c10)
  • Allow while as a dynamic (in cc01261)
  • Improve reader.jsExpression() (in b355af8)
  • use more inclusive JS identifier handling every now and then (in b355af8)
  • Get rid of unused __JSONIFY__ parameter (in 6b88556)
  • slightly optimize by moving __OUT__ into the with() block (in 6b88556)
  • minify escapeHTMLSource (in 6b88556)
  • stop using &apos escape. (in 6b88556)