how to create a mixin js in magento

Question

in my case i want to add a mixing for just a single line but i can't achieve that

the parent js file is ==> web/vendor/magento/module-customer/view/frontend/web/js/model/customer/address.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @api
 */
define(['underscore'], function (_) {
    'use strict';

    /**
     * Returns new address object.
     *
     * @param {Object} addressData
     * @return {Object}
     */
    return function (addressData) {
        var regionId;

        if (addressData.region['region_id'] && addressData.region['region_id'] !== '0') {
            regionId = addressData.region['region_id'] + '';
        }

        return {
            customerAddressId: addressData.id,
            email: addressData.email,
            countryId: addressData['country_id'],
            regionId: regionId,
            regionCode: addressData.region['region_code'],
            region: addressData.region.region,
            customerId: addressData['customer_id'],
            street: addressData.street,
            company: addressData.company,
            telephone: addressData.telephone,
            fax: addressData.fax,
            postcode: addressData.postcode,
            city: addressData.city,
            firstname: addressData.firstname,
            lastname: addressData.lastname,
            middlename: addressData.middlename,
            prefix: addressData.prefix,
            suffix: addressData.suffix,
            vatId: addressData['vat_id'],
            sameAsBilling: addressData['same_as_billing'],
            saveInAddressBook: addressData['save_in_address_book'],
            customAttributes: _.toArray(addressData['custom_attributes']).reverse(),

            /**
             * @return {*}
             */
            isDefaultShipping: function () {
                return addressData['default_shipping'];
            },

            /**
             * @return {*}
             */
            isDefaultBilling: function () {
                return addressData['default_billing'];
            },

            /**
             * @return {*}
             */
            getAddressInline: function () {
                return addressData.inline;
            },

            /**
             * @return {String}
             */
            getType: function () {
                return 'customer-address';
            },

            /**
             * @return {String}
             */
            getKey: function () {
                return this.getType() + this.customerAddressId;
            },

            /**
             * @return {String}
             */
            getCacheKey: function () {
                return this.getKey();
            },

            /**
             * @return {Boolean}
             */
            isEditable: function () {
                return false;
            },

            /**
             * @return {Boolean}
             */
            canUseForBilling: function () {
                return true;
            }
        };
    };
});

i want just to change this line :

customAttributes: _.toArray(addressData['custom_attributes']).reverse(),

by this line :

customAttributes: addressData['custom_attributes'],

PS ; i want to do it by mixing not copying and past all of the file content

this is some try from me :

1. adding requirejs-config.js, 2) adding the file adsress-mixin.js

define([
    'jquery'
], function($) {

    return function (target) {
        return target.extend({
                customAttributes: addressData['custom_attributes'],

        });
    };
});

Answer 1

Two catches here with this type of mixin (there are a couple of ways to use mixins):

1. The original Magento_Customer/js/model/customer/address returns a javascript function
2. The object you are trying to mixin on is the result of the original function

Extend JS Function

When a requirejs definition returns a plain javascript function/object, you'll want to use the mage/utils/wrapper utility.

Magento DevDocs > Javascript Mixins > Extend JS Function

Mixin Configuration

Configured either in module or theme.

var config = {
    config: {
        mixins: {
            'Magento_Customer/js/model/customer/address': {
                '[Vendor]_[ModuleName]/js/model/customer/address-mixin': true
            }
        }
    }
}

Mixin Using Wrapper Approach

1. Wrap the original function with your own
2. Call the original function to get its result, making sure to pass in any original arguments, in this case addressData
3. Alter the resulting object property you wanted to change the value for
4. Return altered result

define([
    'mage/utils/wrapper'
], function (wrapper) {
    'use strict';

    return function (addressModel) {
        return wrapper.wrap(addressModel, function (originalAddressModel, addressData) {
           var result =  originalAddressModel(addressData);
           result.customAttributes = addressData['custom_attributes'];
           return result;
        });
    };
});