-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
63 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,6 +4,16 @@ | |
[![Ember Observer Score](https://emberobserver.com/badges/ember-immer-changeset.svg)](https://emberobserver.com/addons/ember-immer-changeset) | ||
[![npm version](https://badge.fury.io/js/ember-immer-changeset.svg)](https://badge.fury.io/js/ember-immer-changeset) | ||
|
||
`ember-immer-changeset` is an Ember addon that provides a robust changeset implementation using [Immer](https://immerjs.github.io/immer/). It allows you to easily manage, apply, and rollback changes in your data with immutability guarantees. | ||
|
||
## Key Features | ||
|
||
- **Immutable Data**: Use Immer to manage immutable changes to data objects. | ||
- **Track Changes**: Automatically track changes and patches made to your data. | ||
- **Validation**: Integrate validation logic and manage errors easily. | ||
- **Revertible**: Rollback changes or properties to previous states. | ||
- **Events**: Hooks for listening to changes on specific properties. | ||
|
||
## Minimum Requirements | ||
|
||
- Ember.js v4.4 or above | ||
|
@@ -12,42 +22,45 @@ | |
|
||
## Installation | ||
|
||
To install this addon, run: | ||
|
||
```bash | ||
ember install ember-immer-changeset | ||
``` | ||
|
||
## Documentation | ||
|
||
https://triptyk.github.io/ember-immer-changeset/ | ||
For full API documentation and examples, visit the [ember-immer-changeset documentation](https://triptyk.github.io/ember-immer-changeset/). | ||
|
||
## Example | ||
## Example Usage | ||
|
||
```ts | ||
import ImmerChangeset from 'ember-immer-changeset'; | ||
|
||
// Define your data object | ||
const userData = { | ||
id: 1, | ||
name: 'John Doe', | ||
email: '[email protected]', | ||
age: 30, | ||
}; | ||
|
||
// Create a new changeset instance | ||
const userChangeset = new ImmerChangeset(userData); | ||
|
||
// Display the initial user data | ||
console.log('Initial User Data:', userChangeset.data); | ||
|
||
// Make changes to the user data using the set method | ||
// Make changes | ||
userChangeset.set('name', 'Jane Doe'); | ||
userChangeset.set('age', 31); | ||
|
||
// Check if there are changes | ||
console.log('Is Dirty:', userChangeset.isDirty); | ||
console.log('Is Dirty:', userChangeset.isDirty); // true | ||
|
||
// Get the changes made | ||
console.log('Changes:', userChangeset.changes); | ||
console.log('Changes:', userChangeset.changes); // [{ key: 'name', value: 'Jane Doe' }, { key: 'age', value: 31 }] | ||
|
||
// Validate changes | ||
await userChangeset.validate((draftData) => { | ||
userChangeset.removeErrors(); | ||
console.log('Validating:', draftData); | ||
if (draftData.age < 18) { | ||
userChangeset.addError({ | ||
originalValue: draftData.age, | ||
|
@@ -57,19 +70,49 @@ await userChangeset.validate((draftData) => { | |
} | ||
}); | ||
|
||
// If valid, apply and save changes | ||
if (userChangeset.isValid) { | ||
// Apply the changes to the original data | ||
userChangeset.execute(); | ||
userChangeset.execute(); // Apply changes | ||
console.log('Updated User Data:', userChangeset.data); // Updated data | ||
|
||
userChangeset.save(); // Save changes permanently | ||
console.log('User Data after Saving:', userChangeset.data); | ||
} | ||
``` | ||
|
||
// Display the updated user data | ||
console.log('Updated User Data:', userChangeset.data); | ||
## API Overview | ||
|
||
// Save the changes | ||
userChangeset.save(); | ||
### `ImmerChangeset<T>` | ||
|
||
console.log('Is Dirty:', userChangeset.isDirty); | ||
This class represents a changeset for a given data object. It offers the following core methods: | ||
|
||
// Display the final user data after saving | ||
console.log('User Data after Saving:', userChangeset.data); | ||
} | ||
``` | ||
- **`set(key: string, value: any)`**: Apply a change to a property. | ||
- **`get(key: string)`**: Get the current value of a property. | ||
- **`execute()`**: Apply all changes to the original data. | ||
- **`rollback()`**: Revert changes back to the original state. | ||
- **`rollbackProperty(key: string)`**: Revert a specific property. | ||
- **`addError(error: ValidationError)`**: Add an error for a specific field. | ||
- **`removeError(key: string)`**: Remove an error for a specific field. | ||
- **`validate(validationFunction)`**: Validate the changeset with a custom validation function. | ||
- **`onSet(callback)`**: Register a callback that triggers on any set operation. | ||
|
||
### Event Hooks | ||
|
||
You can register event listeners to trigger when changes are made: | ||
|
||
```ts | ||
const off = userChangeset.onSet((key, value) => { | ||
console.log(`Property ${key} set to ${value}`); | ||
}); | ||
|
||
// To remove the event listener | ||
off(); | ||
``` | ||
|
||
## Contributing | ||
|
||
Contributions are welcome! Please see the [CONTRIBUTING.md](https://github.com/TRIPTYK/ember-immer-changeset/blob/main/CONTRIBUTING.md) for guidelines. | ||
|
||
## License | ||
|
||
This project is licensed under the MIT License. See the [LICENSE](https://github.com/TRIPTYK/ember-immer-changeset/blob/main/LICENSE) file for details. |