@glimmer/tracking
Advanced tools
@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.
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];
}
}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.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 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.
Add this package to your project with Yarn:
yarn add -D @glimmer/tracking
Or alternatively with npm:
npm install --save-dev @glimmer/tracking
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;
}
Bug reports and pull requests are welcome on GitHub at https://github.com/glimmerjs/glimmer.js.
Thanks to Monegraph for funding the initial development of this library.
MIT License.
v2.0.0-beta.8 (2020-09-02)
@glimmer/component, @glimmer/core, @glimmer/helper, @glimmer/modifier, @glimmer/ssr, @glimmer/tracking, babel-plugins
@glimmer/component
@glimmer/component, @glimmer/core, @glimmer/helper, @glimmer/modifier, @glimmer/ssr, @glimmer/tracking, babel-plugins, example-apps
FAQs
Glimmer property tracking library
The npm package @glimmer/tracking receives a total of 110,663 weekly downloads. As such, @glimmer/tracking popularity was classified as popular.
We found that @glimmer/tracking demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.