Skip to content

Instantly share code, notes, and snippets.

@matthewp
Last active October 29, 2021 15:08
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save matthewp/cff767e822331c46d09951002eec94e6 to your computer and use it in GitHub Desktop.
Binding DSL

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>

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

[]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment