https://github.com/nullvoxpopuli/ember-deep-tracked

Deep auto-tracking for when you just don't care, and want things to work (at the cost of performance in some situtations)
https://github.com/nullvoxpopuli/ember-deep-tracked

ember ember-addon emberjs glimmer hacktoberfest tracking

Last synced: 6 days ago
JSON representation

Deep auto-tracking for when you just don't care, and want things to work (at the cost of performance in some situtations)

• Host: GitHub
• URL: https://github.com/nullvoxpopuli/ember-deep-tracked
• Owner: NullVoxPopuli
• License: mit
• Created: 2021-06-18T17:51:52.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-28T22:30:58.000Z (6 months ago)
• Last Synced: 2024-05-01T23:23:28.014Z (6 months ago)
• Topics: ember, ember-addon, emberjs, glimmer, hacktoberfest, tracking
• Language: TypeScript
• Homepage:
• Size: 8.13 MB
• Stars: 29
• Watchers: 3
• Forks: 5
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-deep-tracked

[![npm version](https://badge.fury.io/js/ember-deep-tracked.svg)](https://badge.fury.io/js/ember-deep-tracked)

[![CI](https://github.com/NullVoxPopuli/ember-deep-tracked/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/NullVoxPopuli/ember-deep-tracked/actions/workflows/ci.yml)

Deep tracking using proxies for complex objects for when you want _everything_ to be reactive, at the cost of performance.

This is not recommended for performance-sensitive situations such as rendering a

table from a large data set where updates to that data set are frequent. Even

without updates, deeply tracking will increase initial-render time.

## Compatibility

* Ember.js v3.25+

* TypeScript v4.5+

* ember-auto-import v2+

* [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) support

## Installation

```bash

npm install ember-deep-tracked

# or

yarn add ember-deep-tracked

# or

pnpm add ember-deep-tracked

# or

ember install ember-deep-tracked

```

## Usage

```js

import { tracked } from 'ember-deep-tracked';

class Foo {

  @tracked obj = { bar: 2 };

}

```

or in a component:

```js

import { tracked } from 'ember-deep-tracked';

import Component from '@glimmer/component';

export default class Foo extends Component {

  @tracked obj = { bar: 2 };

}

```

```hbs

{{this.obj.bar}} <- automatically updates when "obj.bar" changes

```

using this decorator form will track the _reference_, like `tracked` from `@glimmer/tracking` does, and then also deeply tracks the value.

the entire object and any sub object can be swapped with other objects and they'll be automatically tracked.

`import { deepTracked } from 'ember-deep-tracked';`

is also available, and is an alias of `tracked`

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).