Ts-mix NPM | npm.io

Yet another library for implementing mixins in TypeScript.

Dependencies

Typescript
ES7 Decorator
"experimentalDecorators": true, in tsconfig.json

Installation

npm i --save ts-mix

Features

ts-mix is a simple, lightweight library for implementing a mixins pattern in a TypeScript

Usage example

Create mixin with interface

interface IMixinA {
    propInMixin: number;
    readonly testA: string;
    readonly initInSetup: Date;
    methodInMixin(): string;
    test(): void;
    sameNameMethod(): string;
}

const mixinAName = 'mixinA' as const;
//                                              \  props init in method setup  /
const mixinA = mixin<typeof mixinAName, IMixinA, ['initInSetup', 'propInMixin']>({
    mixinName: mixinAName,

    setup() {
        return {
            propInMixin: 123111,
            initInSetup: new Date(),
        };
    },

    init() {
        console.log(this.target.propInMixin); // 123111
        console.log(this.target.mixins.mixinA.propInMixin); // 123111
        this.propInMixin = 123;
        console.log(this.target.propInMixin); // 123
        console.log(this.target.mixins.mixinA.propInMixin); // 123
    },

    get testA() {
        return 'test-a';
    },
    methodInMixin() {
        return this.testA;
    },
    test() {
        console.log(this.target.propInMixin); // 123
        console.log(this.target.mixins.mixinA.propInMixin); // 123
    },
    sameNameMethod(): string {
        return 'from mixinA';
    },
});

Create simple mixin

const mixinB = mixin({
    mixinName: 'mixinB' as const,
    sameNameMethod(): string {
        return 'from mixinB';
    },
    methodB() {
        return "test-b";
    },
});

const mixinC = mixin({
    mixinName: 'mixinC',
    methodC() {
        return 'methodC';
    },
});

Usage

Assigning mixins outside the class definition:

class Test {
    test = 'test';
}

const classC = useMixins(Test, mixinA, mixinB);

const instance = new classC();

console.log(haveMixin(instance, mixinA, classC)); // true
console.log(haveMixin(instance, mixinB, classC)); // true
console.log(haveMixin(instance, mixinC, classC)); // false

console.log(instance.test); // "test" - method class Test
console.log(instance.methodB()); // "test-b" - method from mixinB
console.log(instance.mixins.mixinB.methodB()); // "test-b" - method from mixinB
console.log(instance.methodInMixin()); // "test-a" - method from mixinA

Assigning mixins during class definition

Inheritance from result of methods useMixins(Class, ...mixins)

/* tslint:disable:max-classes-per-file variable-name */
export const TestUseMixinB = useMixins(class TestUseMixinB {
    name = 'b';
    fieldInB: string = 'test';

    constructor(readonly str: string) {
        //
    }
}, mixinA);

export const TestUseMixinBB = useMixins(class TestUseMixinBB extends TestUseMixinB {
    name = 'bb';
    fieldInBB: number = 1;

    constructor(str: string, readonly numb: number) {
        super(str);
    }
}, mixinB);

export const TestUseMixinBBB = useMixins(class TestUseMixinBBB extends TestUseMixinBB {
    name = 'bbb';
    asdasd = 1;
    fieldInBBB: boolean = true;

    constructor(readonly bool: boolean) {
        super('1', 1);
    }

    asdas(asdasd: boolean) {
        return 1;
    }
}, mixinC);
////// usage:

const testB = new TestUseMixinB('abc');
const testBB = new TestUseMixinBB('qwe', 987);
const testBBB = new TestUseMixinBBB(true);

console.log(testB.str); // 'abc'
console.log(haveMixin(testB, mixinA, TestUseMixinB)); // true

console.log(testBB.str); // 'qwe'
console.log(testBB.numb); // 987
console.log(haveMixin(testBB, mixinA, TestUseMixinB)); // true
console.log(haveMixin(testBB, mixinB, TestUseMixinBB)); // true

console.log(testBBB.str); // '1'
console.log(testBBB.numb); // 1
console.log(testBBB.bool); // true
console.log(haveMixin(testBBB, mixinA, TestUseMixinB)); // true
console.log(haveMixin(testBBB, mixinB, TestUseMixinBB)); // true
console.log(haveMixin(testBBB, mixinC, TestUseMixinBB)); // true

This method is the most convenient, so how:

works well with class inheritance.
no need for decorators or hacks with an additional interface
clear syntax

Assigning mixins during property decorator

Decorator @mixinsProp usage:

class TestDecorator {
    @mixinsProp(mixinB) mixins!: MixinsProp<[typeof mixinB]>;

    constructor() {
        console.log(Object.keys(this.mixins)); // 'mixinB'
    }
}
const test = new TestDecorator();

console.log(test.mixins.mixinB.methodB()); // 'test-b'
console.log(test.mixins.mixinB.sameNameMethod()); // 'from mixinB'

Use for Object:

Immutable:

const testBase = {
    test: 'abc',
    m() {
        return 'm';
    },
};

const instance = useMixinsForObject(testBase, mixinA, mixinB);
console.log(instance.test); // "abc" - method object testBase
console.log(instance.m()); // "m" - method object testBase
console.log(instance.methodB()); // "test-b" - method from mixinB
console.log(instance.mixins.mixinB.methodB()); // "test-b" - method from mixinB
console.log(instance.methodInMixin()); // "test-a" - method from mixinA

Mutable

const test = {
    test: 'abc',
    m() {
        return 'm';
    },
};

applyMixins(test, mixinA, mixinB);
console.log(test.test); // "abc" - method object testBase
console.log(test.m()); // "m" - method object testBase
if (haveMixins(test, [mixinA, mixinB])) {
    console.log(test.mixins.mixinB.methodB()); // "test-b" - method from mixinB
    console.log(test.mixins.mixinB.methodB()); // "test-b" - method from mixinB
    console.log(test.mixins.mixinA.methodInMixin()); // "test-a" - method from mixinA
}

Mixins are used in the following order. Class extended only by methods and properties of mixins it does not have.

All methods of all mixins can be found in this.mixins. by mixin name.

console.log(instance.sameNameMethod()); // "from classA"
console.log(instance.mixins.mixinA.sameNameMethod()); // "from mixinA"
console.log(instance.mixins.mixinB.sameNameMethod()); // "from mixinB"

Rewrite some methods or fields in target

With property rewrite in mixin config, you can rewrite some fields in target object

When creating a mixin, you can specify to it specify target interface.

If the target does not satisfy the target interfaces of all the mixins, TypeScript will warn about it

const mixinD = mixin<
    'mixinD',
    { methodInD: () => string },
    [],
    { readonly fall: string, asd: () => string } // specify target interface
>(
    {
        mixinName: 'mixinD' as const,
        rewrite(th) {
            let fall = 'a';
            return {
                get fall() {
                    return 'fall in mixinD - ' + fall + ' - ' + th.origin.fall;
                },
                set fall(v: string) {
                    fall = v;
                },
                asd() {
                    return 'WWW';
                },
            };
        },
        methodInD() {
            return this.target.fall;
        },
    }
);

class Test {
    fall = 'test';
    asd() {
        return 'Hello my name ' + this.fall;
    }
    test() {
        return this.fall;
    }
}
const test = new Test();

console.log(test.fall); // 'test');
console.log(test.asd()); // 'Hello my name test');
console.log(test.test()); // 'test');

useMixinsForObject(test, mixinD); // if the target does not satisfy the target interfaces of all the mixins, TypeScript will warn about it

console.log(() => assertHaveMixin(test, mixinD, Test)).to.not.throw();
assertHaveMixin(test, mixinD, Test);

console.log('mixins' in test).true;
console.log(typeof test.mixins); // 'object');
console.log(test.fall); // 'fall in mixinD - a - test');
console.log(test.mixins.mixinD.methodInD()); // 'fall in mixinD - a - test');
console.log(test.mixins.mixinD.target.fall); // 'fall in mixinD - a - test');

test.fall = 'b';

console.log(test.fall); // 'fall in mixinD - b - test');
console.log(test.mixins.mixinD.methodInD()); // 'fall in mixinD - b - test');
console.log(test.mixins.mixinD.target.fall); // 'fall in mixinD - b - test');

console.log(test.test()); // 'fall in mixinD - b - test');

console.log(test.asd()); // 'WWW');

TypeGuards and Asserts methods

TypeGuards

haveMixin(obj, mixin, baseObject?) - check is object used some mixin
haveMixins(obj, [...mixins], baseObject?) - check is object used all mixins
isMixin<Mixin>(value) - check is value is any Mixin or concrete Mixin from generic (maybe is not correct)

Asserts

assertHaveMixin(obj, mixin, baseObject?) - checks if the object uses a mixin and if not, throws error
assertHaveMixins(obj, [...mixins], baseObject?) - checks if the object uses all mixins and if not, throws error

Example:

// connects mixins to the class
const ClassA = useMixins(class ClassA {
    // some methods and properties
}, mixinA, mixinB);


const instance = new ClassA();
console.log(haveMixin(instance, mixinA, ClassA)); // true
console.log(haveMixin(instance, mixinB, ClassA)); // true
console.log(haveMixin(instance, mixinC, ClassA)); // false

console.log(haveMixins(instance, [mixinA, mixinB], ClassA)); // true
console.log(haveMixins(instance, [mixinA, mixinB, mixinC], ClassA)); // false

assertHaveMixin(instance, mixinA, ClassA); // to errors
assertHaveMixin(instance, mixinB, ClassA); // to errors
assertHaveMixin(instance, mixinB, ClassA); // throw error MixinAssertError

assertHaveMixins(instance, [mixinA, mixinB], ClassA); // to errors
assertHaveMixins(instance, [mixinA, mixinB, mixinC], ClassA); // throw error MixinAssertError

Limitations

methods useMixins and other have limit 5 mixins

NPM Scripts

npm run build-dev - build development version
npm run build-prod - build production version
npm run pretest - compile sources before run unit tests
npm run test - start unit tests
npm run test-typing - start typings tests
npm run clean - build production version
npm run clean - build production version

Contributing

All contributions are welcome! To get started, simply fork and clone the repo, run npm install, and get to work. Once you have something you'd like to contribute, be sure to run npm test locally, then submit a PR.