smart-mix

OOP composition-based mixin tool like no other.

Contents

• Installation
• Properties
• Advantages over other mixin approaches
• Examples
• Concepts

Installation

npm i smart-mix

Properties

• mixes in public methods
• mixes in private/shared methods
• allows mixing in data and accessor properties
• allows sharing private state and public state
• each instance of the mixin has its own state
• avoids keys collisions
• works both with symbols and string keys
• avoids the gorilla-banana problem by getting only the methods you need
• works both in function contexts and class contexts
• you clearly see what your object has mixed in in its definition context
• you clearly see where your mixed in capabilities come from

Advantages over other mixin approaches

The common ways mixins have been implemented so far were:

• naive approach - Object.assign, Reactjs mixins, Typescript mixins
• based on prototypal inheritance
• functional mixins

The main downsides of these approaches are:

• Not being able to easily tell what your class/object can do by simply looking at its definition context (and having to jump to different files)
• Not being able to easily tell where your class'/object's capabilities come from by simply looking at its definition context
• Avoiding property collisions by making the last mixin object always win (which is not the best solution)
• The gorilla-banana problem. You automatically get all the methods in the mixin objects even though you might not need all of them. This is a violation of the least knowledge principle.
• The inability of sharing private state between the mixin context and the mixin functions.

The first 4 issues are solved in a composition based mixin mechanism by explicitly picking every mixin function.

Examples

Example 1: simple example with sharing methods with two different contexts

1// chocolate eater mixin file
2
3import mixin from 'smart-mix';
4
5export default mixin(() => ({
6    eatChocolate() {
7        console.log('eating chocolate');
8    },
9
10    initiateTummyPain() {
11        throw new Error('My tummy hurts!');
12    }
13}));

1// dancer mixin file
2
3import mixin from 'smart-mix';
4
5export default mixin(() => ({
6    dance() {
7        console.log('dancing');
8    }
9}));

1import chocolateEater from './chocolate-eater-mixin';
2import dancer from './dancer-mixin';
3
4class Bob {
5    constructor() {
6        chocolateEater({
7            publicContext: this,
8            publicMethods: ['eatChocolate', 'initiateTummyPain']
9        });
10        dancer({
11            publicContext: this,
12            publicMethods: ['dance']
13        });
14    }
15}
16
17class Alice {
18    constructor() {
19        chocolateEater({
20            publicContext: this,
21            publicMethods: ['eatChocolate']
22        });
23        dancer({
24            publicContext: this,
25            publicMethods: ['dance']
26        });
27    }
28}
29
30const bob = new Bob();
31const alice = new Alice();
32
33bob.dance(); // dancing
34alice.dance(); // dancing
35bob.eatChocolate(); // eating chocolate
36alice.eatChocolate(); // eating chocolate
37bob.initiateTummyPain(); // throws My tummy hurts!
38'initiateTummyPain' in alice; // false - alice will not have any tummy pain

Example 2: share private state between two mixin providers

1// woman secret keeper mixin
2
3import mixin from 'smart-mix';
4
5export default mixin((publicContext, sharedContext) => {
6    return {
7        womanUpdateSecret() {
8            sharedContext.secret = 'woman secret';
9        }
10    };
11});

1// man secret keeper mixin
2
3import mixin from 'smart-mix';
4
5export default mixin((publicContext, sharedContext) => {
6    return {
7        manUpdateSecret() {
8            sharedContext.secret = 'man secret';
9        }
10    };
11});

1import womanSecretKeeper from './woman-secret-keeper-mixin';
2import manSecretKeeper from './man-secret-keeper-mixin';
3
4const hybrid = (() => {
5    const hybrid = {
6        getSecret() {
7            console.log(secretBox.secret);
8        }
9    };
10
11    const secretBox = {};
12    const womanMix = womanSecretKeeper({
13        sharedContext: secretBox,
14        mixMethods: ['womanUpdateSecret']
15    });
16    const manMix = manSecretKeeper({
17        sharedContext: secretBox,
18        mixMethods: ['manUpdateSecret']
19    });
20
21    womanMix.womanUpdateSecret();
22    hybrid.getSecret(); // woman secret
23    manMix.manUpdateSecret();
24
25    return hybrid;
26})();
27
28hybrid.getSecret(); // man secret

Example 3: each context has its own state

1// number mixin
2
3import mixin from 'smart-mix';
4
5export default mixin((publicContext, sharedContext) => {
6    let privateMixinProviderNumber;
7
8    return {
9        setPrivateMixinProviderNumber(number) {
10            privateMixinProviderNumber = number;
11        },
12
13        updateSharedNumber(number) {
14            sharedContext.number = number;
15        },
16
17        getSumResult() {
18            return privateMixinProviderNumber + sharedContext.number;
19        }
20    };
21});

1import numberMixin from './number-mixin';
2
3const publicContext1 = {};
4const sharedContext1 = {};
5
6const publicContext2 = {};
7const sharedContext2 = {};
8
9numberMixin({
10    publicContext: publicContext1,
11    sharedContext: sharedContext1,
12    publicMethods: [
13        'setPrivateMixinProviderNumber', 
14        'updateSharedNumber', 
15        'getSumResult'
16    ]
17});
18
19numberMixin({
20    publicContext: publicContext2,
21    sharedContext: sharedContext2,
22    publicMethods: [
23        'setPrivateMixinProviderNumber', 
24        'updateSharedNumber', 
25        'getSumResult'
26    ]
27});
28
29publicContext1.setPrivateMixinProviderNumber(100);
30publicContext1.updateSharedNumber(1000);
31publicContext2.setPrivateMixinProviderNumber(200);
32publicContext2.updateSharedNumber(2000);
33console.log(publicContext1.getSumResult()); // 1100
34console.log(publicContext2.getSumResult()); // 2200

Concepts

• The mixin function, which is provided by smart-mix.

1import mixin from 'smart-mix';
2
3mixin();

• The mixin provider function is obtained by calling the mixin function.

1const mixinProviderFunction = mixin();

• The mixin callback is passed to the mixin function in order to obtain the mixin provider function and it must return the mixin methods container object.

1mixin(() => {
2    return {
3        method() {}
4    }
5});

• The optional mixin public context is passed to the mixin callback and it becomes the target of the optional public methods.

1const publicContext = {
2    existingMethod() { return 2; }
3};
4
5const mixinProviderFunction = mixin((publicContext) => {
6    return {
7        method() {
8            return publicContext.existingMethod() + 1;
9        }
10    };
11});
12
13mixinProviderFunction({
14    publicContext,
15    publicMethods: ['method']
16});
17
18publicContext.method(); // 3

• The optional mixin shared context is the second argument passed to the mixin callback and it can contain any other state, including state that is private in the context in which the mixin public context is created.

1const publicContext = (() => {
2    const publicContext = {};
3    const sharedContext = {
4        property: 'private message'
5    };
6
7    const mixinProviderFunction = mixin((publicContext, sharedContext) => {
8        return {
9            method() {
10                return sharedContext.property;
11            }
12        };
13    })
14
15    mixinProviderFunction({
16        publicContext, 
17        sharedContext,
18        publicMethods: ['method']
19    });
20
21    return publicContext;
22})();
23
24publicContext.method(); // 'private message'

• The mix object is returned by the mixin provider function and is the target of the optional mix methods. This mix object can stay private in the context in which the mixin public context was created so that the mixin public context can use private methods.

1const publicContext = (() => {
2    const publicContext = {
3        existingMethod() { return mix.privateMethod(); }
4    };
5
6    const mixinProviderFunction = mixin(() => {
7        return {
8            privateMethod() {
9                return 'private message';
10            }
11        };
12    })
13
14    const mix = mixinProviderFunction({
15        mixMethods: ['privateMethod']
16    });
17
18    return publicContext;
19})();
20
21publicContext.existingMethod(); // 'private message'

• Optionally, using the define option the resulted mixin provider function can have static methods attached that allows us mix in data and accessor properties. We can use a getPublicContext static method that provides properties for the mixin public context object. Also, a getSharedContext static method that provides properties for the mixin shared context object. These two functions receive the mixin public context and shared context objects and return an object whose properties will be installed on the mixin public context object or mixin shared context object by applying the same property descriptors of the returned object. This way we can install accessor properties on the mixin public context and shared context objects.

1const publicContext = (() => {
2    const publicContext = {
3        x: 1
4    };
5    const sharedContext = {
6        y: 2
7    };
8
9    const mixinProviderFunction = mixin((publicContext, sharedContext) => {
10        return {
11            getResult() {
12                return publicContext.sum;
13            }
14        };
15    })
16
17    mixinProviderFunction.getPublicContext = (publicContext, sharedContext) => ({
18        z: 3,
19
20        get sum() {
21            return publicContext.x + publicContext.z + sharedContext.y + sharedContext.u;
22        }
23    });
24
25    mixinProviderFunction.getSharedContext = () => ({
26        u: 4
27    });
28
29    const mix = mixinProviderFunction({
30        define: true,
31        publicContext,
32        sharedContext,
33        publicMethods: ['getResult']
34    });
35
36    return publicContext;
37})();
38
39console.log(publicContext.getResult()); // 10