ember-immer-changeset
    Preparing search index...

    ember-immer-changeset

    Ember-immer-changeset

    CI Ember Observer Score npm version

    ember-immer-changeset is an Ember addon that provides a robust changeset implementation using Immer. It allows you to easily manage, apply, and rollback changes in your data with immutability guarantees.

    • 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.
    • Ember.js v4.4 or above
    • Ember CLI v4.4 or above
    • Node.js v16 or above

    To install this addon, run:

    ember install ember-immer-changeset
    

    For full API documentation and examples, visit the ember-immer-changeset documentation.

    import ImmerChangeset from 'ember-immer-changeset';

    // Define your data object
    const userData = {
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com',
    age: 30,
    };

    // Create a new changeset instance
    const userChangeset = new ImmerChangeset(userData);

    // Make changes
    userChangeset.set('name', 'Jane Doe');
    userChangeset.set('age', 31);

    // Check if there are changes
    console.log('Is Dirty:', userChangeset.isDirty); // true

    // Get the changes made
    console.log('Changes:', userChangeset.changes); // [{ key: 'name', value: 'Jane Doe' }, { key: 'age', value: 31 }]

    // Validate changes
    await userChangeset.validate((draftData) => {
    userChangeset.removeErrors();
    if (draftData.age < 18) {
    userChangeset.addError({
    originalValue: draftData.age,
    value: 18,
    key: 'age',
    });
    }
    });

    // If valid, apply and save changes
    if (userChangeset.isValid) {
    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);
    }

    This class represents a changeset for a given data object. It offers the following core methods:

    • 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.

    You can register event listeners to trigger when changes are made:

    const off = userChangeset.onSet((key, value) => {
    console.log(`Property ${key} set to ${value}`);
    });

    // To remove the event listener
    off();

    This utility function checks whether a given object is an instance of ImmerChangeset. It is useful when you want to ensure that an object is a valid changeset before interacting with it.

    import { isChangeset } from 'ember-immer-changeset';
    import ImmerChangeset from 'ember-immer-changeset';

    const userChangeset = new ImmerChangeset(userData);

    // Check if the object is a changeset
    console.log(isChangeset(userChangeset)); // true

    Function signature:

    function isChangeset(obj?: InstanceType<any>): boolean;
    
    • obj: The object to check.
    • Returns: A boolean indicating if the object is an instance of ImmerChangeset or has a __changeset__ property.

    The changeset-get helper is an Ember template helper that retrieves the value of a specific property from an ImmerChangeset instance. This is particularly helpful when you want to access changeset properties within templates.

    {{changeset-get this.userChangeset "name"}}
    

    Function signature:

    function changesetGet([changeset, key]: [ImmerChangeset | undefined, string]): any;
    
    • changeset: The ImmerChangeset instance.
    • key: The property name to retrieve from the changeset.
    • Returns: The value of the specified property.

    Usage in a template:

    {{changeset-get this.userChangeset "email"}}
    

    This helper allows easy access to the values of properties on the changeset directly within Ember templates.

    Contributions are welcome! Please see the CONTRIBUTING.md for guidelines.

    This project is licensed under the MIT License. See the LICENSE file for details.