npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mixomatic

v5.0.0

Published

Create mixins which work with instanceof (friendly for unit tests).

Downloads

25

Readme

mixomatic

Create mixins which work with instanceof (friendly for unit tests). Internally references are handled by a WeakSet instances so there's no need to manually keep records of which objects have been mixed onto and risk memory leaks.

Install

With npm:

npm install --save mixomatic

With yarn:

yarn add mixomatic

Or alternatively, in a browser or deno you can use it directly in a page via unpkg as a module (not recommended for production use):

import mixomatic from 'https://unpkg.com/mixomatic';

Usage

Make a new mixin which appends propertyDescriptors to an object.

import mixomatic from 'mixomatic';

const myMixin = mixomatic(propertyDescriptors);

Mix onto an object.

const obj = {};

myMixin(obj);

Check if an object has been modified by a given mixin:

obj instanceof myMixin; // true

Also works with classes!

class MyClass {}

myMixin(MyClass.prototype);

const obj = new MyClass();

obj instanceof MyClass; // true
obj instanceof myMixin; // true

And inheritance!

class MyChildClass extends MyClass {}

const obj = new MyChildClass();

obj instanceof MyChildClass; // true
obj instanceof MyClass;      // true
obj instanceof myMixin;      // true

Example

You're making a game with a little ship which shoots space-bound rocks before they can bash into it. Both the ship and the rocks have position and velocity properties. You could make a class, which provides a move method, which they would both inherit from. However, that could be the beginning of a class hierarchy and you've heard bad things about those being hard to modify in the future. JavaScript also has no way to do multiple inheritance with classes, so your options are limited with classes anyway.

Instead you make the wise choice to use mixomatic! You use mixomatic to create a mixin called movable, which takes a time difference and uses it to update the position of its host object.

const movable = mixomatic({
  move: {
    value(dt) {
      this.position.x += dt * this.velocity.x;
      this.position.y += dt * this.velocity.y;
    },
    configurable: true,
    enumerable: false,
    writable: true
  }
});

Since there'll only be one ship, you define it directly as an object and apply movable to it to give it the move method.

const ship = {
  position: { x: 0, y: 0 },
  velocity: { x: 0, y: 0 }
};

movable(ship);

Asteroids are more numerous and can appear in all sorts of places, so you decide to go with a class for those.

class Asteroid {
  constructor(position, velocity) {
    this.position = { x: position.x, y: position.y };
    this.velocity = { x: velocity.x, y: velocity.y };
  }
}

movable(Asteroid.prototype);

Now both ship and Asteroid instances will have the move method, and will both appear to be instances of movable, yet are not part of the same class hierarchy. All sorts of behaviour can be written as mixins (for example, the ship can fire missiles, and so can UFOs).

This is useful because mixins can be tested in isolation, and you can avoid duplication of tests for mixed properties by using an instanceof check in the test suites of host objects like ship and Asteroid.