npmpackage.info

Gathering detailed insights and metrics for smart-mix

Other packages similar to smart-mix

roku-smart-label

0.2.1

Label allowing for bbedit style formatting of text to mix font styles and images. Example implementation, seeking contributors.

smart-mix

3.0.2

MIT

JavaScript

535.00 B

1,745 2.5

Installations

npm install smart-mix

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

20.12.2

NPM Version

10.5.0 Pull Requests

Open

3

Total

11

Closed

8

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

JavaScript

JavaScript (100%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

raulsebastianmihaila

Download Statistics

Total Downloads

1,745

Last Day

Last Week

Last Month

Last Year

407

GitHub Statistics

MIT License

3 Stars

20 Commits

4 Branches

1 Contributors

Updated on Sep 18, 2024

Bundle Size

1.21 kB

Minified

535.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.0.2

Package Id

smart-mix@3.0.2

Unpacked Size

17.28 kB

Size

4.97 kB

File Count

NPM Version

10.5.0

Node Version

20.12.2

Published on

May 01, 2024

Total Downloads

Cumulative downloads

Total Downloads

1,745

Last Day

Compared to previous day

Last Week

200%

Compared to previous week

Last Month

-74.3%

Compared to previous month

Last Year

86.7%

407

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

jest

smart-mix

OOP composition-based mixin tool like no other.

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

2.5

/10

Last Scanned on 2025-03-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to smart-mix

smart-mix

Installations

Developer Guide

No

ESM

20.12.2

10.5.0

Pull Requests

3

11

8

Issues

0

0

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

validate.email 🚀

Developer

raulsebastianmihaila

Download Statistics

GitHub Statistics

Bundle Size

1.21 kB

535.00 B

Maintainers

Package Meta Information

Total Downloads

1,745

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

smart-mix

Contents

Installation

Properties

Advantages over other mixin approaches

Examples

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

Example 2: share private state between two mixin providers

Example 3: each context has its own state

Concepts

10

10

6

0

0

0

0

0

0

0

2.5

/10