Binding DSL

readme.md

Types of bindings

• Text
• Attributes
  • Classes (special-cased)
  • Aria?
• Boolean attributes
• Property
• Event listener
• Conditionals (if)
• Looping (each)

Examples

Text

.count {
  text: ${count};
}

Property

Passing a string:

.user {
  prop: login "matthewp";
}

Passing a reference:

.user {
  prop: login ${user.login};
}

Classes

.user {
  class-toggle: "admin" ${user.isAdmin};
}

Boolean attributes

#counter {
  attr: count ${!!visible};
}

Looping

.players {
  each: ${players} select(#player-template);
}

.player {
  text: ${player => player.name};
}

<template id="player-template">
 <li>
  <h1 class="player"></h1>
 </li>
</template>

<ul class="players"></ul>

With context:

.players {
  each: ${players} url(#player-template);
}

/* This automatically has a context of the current player */
.player {
  text: @name;
}

Conditionals

.user .name {
  text: ${user.name};
}

#admin-template {
  cond: ${user.isAdmin};
}

<article class="user">
 <h1 class="name"></h1>
 <template id="admin-template">
   <h2>Admin</h2>
 </template>
</article>

Context

Give a selector a context so you can use shorthand to assign values.

.user {
  context: ${user};
}

.user .name {
  text: @name;
}

Decorators

The classic decorator proposal finally implemented:

<template id="details-open">
  <a id="summary">
    &blacktriangledown;
   <slot name="summary"></slot>
  </a>
  <slot></slot>
</template>

details[open] {
  decorator: url(#details-open);
}

Usage:

<details open>
  <summary slot="summary">Timepieces</summary>
  <ul>
    <li>Sundial</li>
    <li>Cuckoo clock</li>
    <li>Wristwatch</li>
  </ul>
</details>

parser.md

Memory layout

1 imported page

[source 32KiB, internal 16KiB, external 16KiB]

Internal

[state, valuePtr]

External

[byteIndex, holeIndex, tag, ...tagInfo]

Tags

End

EOF, tag 0

RuleStart

Tag 1

[selectorStart, selectorEnd]

Property

Tag 2

[numberOfSelectors, ...[selectorStart, selectorEnd], propertyStart, propertyEnd, valueType, ...valueInfo]

Note that above is set up to work with nested selector syntax.

RuleEnd

Tag 3

[]

Value Types

Insertion

Type 1

[valueIndex]

String

Type 2

[stringStart, stringEnd]

Identifier

Type 3

[identifierStart, identifierEnd]

Multi

Type 4

[numberOfValues, ...[valueType, ...valueInfo]]

Call

Type 5

Such as url(#selector)

[argsStart, argsEnd]

Unknown

Type 9

[]