Skip to content

0.0.1-alpha.0

Compare
Choose a tag to compare
@18alantom 18alantom released this 04 Jun 15:40
· 64 commits to main since this release

✨ 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

Screen Shot 2023-06-04 at 20 50 37


What's Changed

New Contributors

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