v0.3.3: API Stability Milestone, New Documentation, and New Examples

[kennyfrc]

Hi All,

Happy to share that we've reached a milestone where we're at the point where the API is mostly stable, and we're now working on fleshing out the documentation and adding some tests as the final steps before v1.0.0.

You can view the documentation, API Reference, and examples at our new site: camijs.com.

• Introduction
• Learn By Example
• API Reference

One major change is our vastly simpler API. If you're familiar with React, Solidjs, or Vue, you don't need to define setState(), reactive(), or signal() anymore. Cami simply initializes all primitives, objects, and arrays as observables. And when you mutate these observables, it automatically updates the UI.

Counter Example:

<script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script>
<script type="module">
  const { html, ReactiveElement } = cami;

  class CounterElement extends ReactiveElement {
    count = 0

    template() {
      return html`
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count++}>+</button>
        <div>Count: ${this.count}</div>
      `;
    }
  }

  customElements.define('counter-component', CounterElement);
</script>

Learn by Example

While the foundation is simple, the library can go in depth and Cami has solutions for state management (both server & client state), asynchronous data streams, optimistic UI, and more.

You can go through these examples to learn more:

• Shopping Cart Example (Server State & Client State Management)
• Blog Example (Optimistic UI)
• Interactive Registration Form (Asynchronous Data Streams)

I hope you find the library useful for your projects.