@glimmer/tracking

What is @glimmer/tracking?

@glimmer/tracking is a package used in the Glimmer.js and Ember.js ecosystems to provide reactive state management. It allows developers to create reactive properties and track changes to those properties, enabling efficient updates to the UI when the underlying data changes.

What are @glimmer/tracking's main functionalities?

Tracked Properties

The @tracked decorator is used to mark properties that should be tracked for changes. When the property changes, any dependent computations or UI updates are automatically triggered.

class MyComponent {
  @tracked count = 0;

  increment() {
    this.count++;
  }
}

Computed Properties

Computed properties can be created using standard JavaScript getter syntax. These properties automatically recompute when any of their tracked dependencies change.

class MyComponent {
  @tracked firstName = 'John';
  @tracked lastName = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Tracking Arrays and Objects

Tracked properties can also be arrays or objects. When the array or object is replaced, any dependent computations or UI updates are triggered.

class MyComponent {
  @tracked items = [];

  addItem(item) {
    this.items = [...this.items, item];
  }
}

Other packages similar to @glimmer/tracking

mobx

MobX is a state management library that makes it simple to connect the reactive data of your application with the UI. It provides similar reactive state management capabilities as @glimmer/tracking but is more widely used outside of the Ember.js ecosystem.

vue

Vue.js is a progressive JavaScript framework for building user interfaces. It includes a reactivity system that is similar to @glimmer/tracking, allowing developers to create reactive properties and computed properties.

svelte

Svelte is a compiler that generates minimal and highly optimized JavaScript code. It includes a reactivity system that is similar to @glimmer/tracking, allowing developers to create reactive variables and automatically update the UI when those variables change.

README

@glimmer/tracking

Installation

Add this package to your project with Yarn:

yarn add -D @glimmer/tracking

Or alternatively with npm:

npm install --save-dev @glimmer/tracking

Usage

To use this in a Glimmer application, import the package and export an extended class:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class MyComponent extends Component {
  @tracked foo;
}

Development

For the development of this project, Yarn is preferred over npm. However, any Yarn command can be replaced by the npm equivalent. See Migration from npm in the Yarn documentation for a list of the equivalent commands.

• Clone repository locally: git clone https://github.com/glimmerjs/glimmer-component.git
• Install dependencies: yarn, or yarn install
• Open project in your editor of choice and make your changes
• Run tests: yarn run test

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/glimmerjs/glimmer-component.

Acknowledgements

Thanks to Monegraph for funding the initial development of this library.

License

MIT License.