🎉 Tada

Cheap parlor tricks with custom data attributes (data-tada-*).

Inspirations

Frustration, skill issues, and bizarre fun.

• HTMX
• Datastar
• astro

Goals

• Midlife crisis
• HTML prototyping tool
• No build
• Small
• Fast

To do

• Binds
  • support specific input types
    • numbers - range, number,
    • strings - radio, date, email, password
    • array - multiselect
  • text area
• append special class make updates
• super basic hypermedia

Variables

data-tada-var-* will create a tada variable that can be accessed and updated via $_*.

Example

<!-- will create a variable called tadaNumber -->
<div data-tada-var-number="10">Hello</div>
<div data-tada-var-number="5">Hello</div>

<script>
  window.onload = () => {
    console.log($_number); // outputs 5

    $_number = 12; // updates the value of all instances of data-tada-var-number data attributes
    // <div data-tada-var-number="12">Hello</div>
    // <div data-tada-var-number="12">Hello</div>
  };
</script>

Primitives

• string: "'Hello, world!'"
• number: "123"
• boolean: "true", "false"

Objects

• array: "[1, 3, 4, 5]", "['hello', 'hi', 'hola']"
• object: "{name: 'Andy', age: 12 }"

Binds

data-tada-bind-* will create a tada variable with binding to the input element that can be accessed and updated via $_*.

Example

<!-- will create a variable called tadaNumber binded to the input value -->
<input data-tada-bind-number />

<script>
  window.onload = () => {
    console.log($_number); // outputs 5

    $_number = 12; // updates the value of all instances of data-tada-var-number data attributes
  };
</script>

Text Content

data-tada-txt="$_variableName" updates the text content of the element with the value of the tada variable.

Example

<!-- Will update the text content with the value of $_number -->
<input data-tada-bind-number />
<code data-tada-txt="$_number"></code>

<script>
  window.onload = () => {
    $_number = 12; // updates the value of all instances of data-tada-var-number data attributes
  };
</script>

If

data-tada-if="$_variableName" will check if the evaluation is truthy. If it contains an existing Tada variable, it will be added to the setter for evaluation and updates. If true, the element displays; if false, it's hidden.

<!-- Will update the text content with the value of $_number -->
<input data-tada-bind-number />
<code data-tada-if="$_number">number is truthy</code>

<script>
  window.onload = () => {
    $_number = 12; // updates the value of all instances of data-tada-var-number data attributes
  };
</script>

Loop

data-tada-loop="$_arrayVariable|array-definition" data-tada-of-item creates a tada loop that loops through an array, cloning the element for each item and populating values for the tada pool data attributes.

Loop Pool

• data-pool-index adds current index value to the text content
• data-pool-item adds the current array value to the text content
  • data-pool-key="subkey.array[4].name" specifies the current object property access path and adds the value to the text content

Example

Array Definition

<ul
  data-tada-loop="['🍎 apple', '🐈‍⬛ cat', '🐕 dog', '🤖 robot', '🌳 tree']"
>
  <li>
    <span data-pool-index>index</span>
    <span data-pool-item>item</span>
  </li>
</ul>

Output

<ul data-tada-loop="['🍎 apple', '🐈‍⬛ cat', '🐕 dog', '🤖 robot', '🌳 tree']">
  <li hidden="">
    <span data-pool-index="">index</span>
    <span data-pool-item="">item</span>
  </li>
  <li data-pool-drain="">
    <span data-pool-index="">0</span>
    <span data-pool-item="">🍎 apple</span>
  </li>
  <li data-pool-drain="">
    <span data-pool-index="">1</span>
    <span data-pool-item="">🐈‍⬛ cat</span>
  </li>
  <li data-pool-drain="">
    <span data-pool-index="">2</span>
    <span data-pool-item="">🐕 dog</span>
  </li>
  <li data-pool-drain="">
    <span data-pool-index="">3</span>
    <span data-pool-item="">🤖 robot</span>
  </li>
  <li data-pool-drain="">
    <span data-pool-index="">4</span>
    <span data-pool-item="">🌳 tree</span>
  </li>
</ul>

Tada Variable Value

<ul
  data-tada-loop="$_loopArrayObject"
  data-var-loop-array-object="[{ 'name': 'andy', 'age': 100, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'hat', 'pencil', 'keyboard']}}, { 'name': 'anderson', 'age': 20, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'orb', 'staff', 'potions'] }}, { 'name': 'andi', 'age': 11, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'laser', 'spaceship', 'shield'] }}, { 'name': 'andrea', 'age': 4321, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'skateboard', 'helmet', 'bike'] }}, { 'name': 'andrew', 'age': 8000, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'paper', 'pen', 'switch']}}]"
>
  <li>
    <strong data-pool-key="name">no worky</strong>
    <code data-pool-key="age">no worky</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">no worky</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">no worky</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">no worky</span>
      </li>
    </ol>
  </li>
</ul>
```

Output

<ul
  data-tada-loop="$_loopArrayObject"
  data-var-loop-array-object="[{ 'name': 'andy', 'age': 100, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'hat', 'pencil', 'keyboard']}}, { 'name': 'anderson', 'age': 20, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'orb', 'staff', 'potions'] }}, { 'name': 'andi', 'age': 11, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'laser', 'spaceship', 'shield'] }}, { 'name': 'andrea', 'age': 4321, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'skateboard', 'helmet', 'bike'] }}, { 'name': 'andrew', 'age': 8000, 'items': {'backpack': {'book': 'notepad', 'pockets': {'front': ['phone'], 'back': ['wallet']}}, 'stuff': [ 'paper', 'pen', 'switch']}}]"
>
  <li hidden="">
    <strong data-pool-key="name">no worky</strong>
    <code data-pool-key="age">no worky</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">no worky</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">no worky</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">no worky</span>
      </li>
    </ol>
  </li>
  <li data-pool-drain="">
    <strong data-pool-key="name">andy</strong>
    <code data-pool-key="age">100</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">hat</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">pencil</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">keyboard</span>
      </li>
    </ol>
  </li>
  <li data-pool-drain="">
    <strong data-pool-key="name">anderson</strong>
    <code data-pool-key="age">20</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">orb</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">staff</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">potions</span>
      </li>
    </ol>
  </li>
  <li data-pool-drain="">
    <strong data-pool-key="name">andi</strong>
    <code data-pool-key="age">11</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">laser</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">spaceship</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">shield</span>
      </li>
    </ol>
  </li>
  <li data-pool-drain="">
    <strong data-pool-key="name">andrea</strong>
    <code data-pool-key="age">4321</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">skateboard</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">helmet</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">bike</span>
      </li>
    </ol>
  </li>
  <li data-pool-drain="">
    <strong data-pool-key="name">andrew</strong>
    <code data-pool-key="age">8000</code>
    <ol>
      <li>
        <em data-pool-key="items.stuff[0]">paper</em> (favorite)
      </li>
      <li>
        <span data-pool-key="items.stuff[1]">pen</span>
      </li>
      <li>
        <span data-pool-key="items.stuff[2]">switch</span>
      </li>
    </ol>
  </li>
</ul>```