v0.0.3-alpha.0

✨ Adds

1. Parametric directives: Allows setting parameters on directives keys.
2. Function association: Allows associating function to elements.

Example that registers an event listener directive and sets a function as an event listener.

<!-- Define event listener directive -->
<script>
  sb.directive(
    'listen',
    ({ el, value, param }) => {
      el.addEventListener(param, value);
    },
    true
  );
</script>

<!-- Set parametric directive  -->
<button sb-listen="clicHandler:click">Click</button>

<!-- Set Event listener onto element -->
<script>
  data.clickHandler = () => () => console.log('button clicked');
</script>

🛠 Fixes

1. Uses maps instead of regular objects to maintain directive, watcher execution order.
2. Uses symbols instead of regular keys for internal properties.
3. Use separate methods to register directives i.e. sb.directive.
4. Use separate method to change default prefix i.e. sb.prefix.

📜Documentation

New pages:

• API: lists all defined methods and directives.

Updated pages:

• Directives

What's Changed

• enable parametric directives, function association by @18alantom in #27
• Change magic keys to symbols by @nateabele in #28

New Contributors

• @nateabele made their first contribution in #28

Full Changelog: v0.0.2-alpha.0...v0.0.3-alpha.0

v0.0.2-alpha.0

✨ Adds/Fixes

1. sb-ifnot: negated sb-if.
2. Sync: syncing of nodes after conditional insertion.

🚮 Removes

1. Auto defer DOM updates
   • Enabling of auto defer was not explicit causing unexpected changes.
   • DOM updates can be run async by using <script async> or <script defer src="...">.

Note:

• <script type="module"> is another way to run async, support for ESM will be added in soon.
• Future version will bunch DOM updates.

📜Documentation

New documentation pages added:

• Reactivity
• Reactive Values
• Mark (sb-mark)
• Conditionals (sb-if, sb-ifnot)
• Computed
• Directive

What's Changed

• example-01 by @gedw99 in #13
• add ifnot directive, update computed handling by @18alantom in #15
• tune website by @18alantom in #20
• sync node post insertion on truthy conditional eval by @18alantom in #21
• add and update docs by @18alantom in #22
• remove globalDefer by @18alantom in #24
• use maps by @18alantom in #25

New Contributors

• @gedw99 made their first contribution in #13

Full Changelog: v0.0.1-alpha.0...v0.0.2-alpha.0

0.0.1-alpha.0

✨ Adds

1. Iteration:
   • Using a placeholder key (eg list.#) directs strawberry to iterate over list items and insert elements for each.
   • Works with push, pop, shift, unshift, splice, etc.
2. Nesting:
   • Allows for arbitrary nesting using placeholder keys.
   • Updates to a property at any level of nesting updates just the affected element (unless list sequence is altered).

🚮 Removes

1. Usage of sb-child
   • Child elements are directly mentioned in the markdown
   • To populate template slots, the slot="slot-name" attribute can be used

Note:

• This is more verbose but also more clear and direct as it respects the browsers use of slots in template elements
• Future versions will use slot name as a fallback for sb-mark key value

🎁 Examples

A simple example:

<ul>
  <li sb-mark="list.#"></li>
</ul>

<script>
  data.list = ['strawberry', 'spoonberry'];
</script>

A less simple example:

<!-- Define Todo Item Component -->
<template name="todo-item">
  <div>
    <h3><slot name="title"></slot></h3>
    <p style="font-family: monospace"><slot name="isDone"></slot></p>
    <div><slot name="reasons"></slot></div>
  </div>
</template>

<!-- Markup for Todo List -->
<div>
  <todo-item sb-mark="todo.#">
    <span slot="title" sb-mark="todo.#.title"></span>
    <span slot="isDone" sb-mark="todo.#.isDone"></span>
    <ul slot="reasons">
      <li sb-mark="todo.#.reasons.#"></li>
    </ul>
  </todo-item>
</div>

<!-- Populate the Data -->
<script>
  data.todo = [
    {
      title: 'Do Homework',
      isDone: 'no',
      reasons: [ 'My dog ate it.' ],
    },
  ];
</script>

---

Blooper

---

What's Changed

• remove duplicate header in wrong spot of README by @MarkSort in #1
• Typo in README.md example by @davidbgk in #2
• Inventory: check if quantity is finite by @cy6erskunk in #4
• Fix updateComputed filtering (#5) by @cy6erskunk in #6
• refactor: microoptimization by @Ilushling in #11
• add nesting and loops by @18alantom in #9

New Contributors

• @MarkSort made their first contribution in #1
• @davidbgk made their first contribution in #2
• @cy6erskunk made their first contribution in #4
• @Ilushling made their first contribution in #11
• @18alantom made their first contribution in #9

Full Changelog: https://github.com/18alantom/strawberry/commits/v0.0.1-alpha.0