class-like v1.0.0

class-like.js

Class-like object construction for JavaScript. Without overhead. That's it.

Why

I've come to like the syntactic sugar that ES6 and everything brought us. But there's a high price to pay considering the code produced when compiling so-called "next generation JavaScript" source code to be compatible with current browsers. I find the produced code hard to read, and it's just not beautiful. Additionally, the output is hard to debug while development, since it's not that readable after all.

Some build pipelines can easily get in your way when not configured properly. In my opinion a build tool should not get in the way of the developer. But that's a whole other problem.

I've created this library to provide an easy way to just get going and use "class-like" object construction (hence the library name). By that I mean, when using this library, one can use a function instead of the class keyword. A constructor function can be defined and a class body (plain object) can be provided. Last but not least, the arguments are put in place, so the defined constructor function is supplied with them. Reading (and writing) this, it seems confusing at first, but see for yourself below in the next section.

Usage

The script required is as tiny as 2kb, even when not minified.

Install the package using npm install class-like.js --save. You can find either the umd, cjs or iife version inside the dist/ folder. Make sure to include the corresponding edition for your use-case before using it in your code.

'use strict';

// Define a class.
var TestClass = function () {
    // Prepare the arguments as list.
    var argumentList = arguments;

    // Define a public property
    this.count = 0;

    // Define a private property.
    var versionString = '1.0.0';

    // Define a constructor.
    function constructor(name) {

        if (typeof name === 'string') {
            this.name = name;
        }

    }

    // Define a private function.
    function getDefaultName() {
        return 'default name';
    }

    // Define a private function for later exposure.
    function increment() {
        ++this.count;
        return this;
    }

    // Define a private function for later exposure.
    function decrement() {
        --this.count;
        return this;
    }

    // Make the magic happen. This will patch the constructor function to use the correct self-context and argument
    // list. At that point, the self-context will already be merged with the given class body.
    return ClassLike.Class(this, constructor, {
        // Expose a public method.
        increment: increment,
        decrement: decrement,

        // Expose a public property with a value.
        name: getDefaultName(),

        // Expose a public method, defined inline.
        getName: function () {
            return this.name;
        },
        setName: function (name) {
            this.name = name;
            return this;
        },
    }, ClassLike.Argument(argumentList));
};

var AnotherTestClass = function () {
    // Prepare the arguments as list.
    var argumentList = arguments;

    // Define a private property.
    var name = 'sub-class name';

    // Define a constructor.
    function constructor() {
        // Manually merge the self-context with the parent object. Since the self-context of the constructor will be the
        // one of the class body, this will put all public properties from the parent class into the child class.
        ClassLike.Merge(this, new TestClass(name));
    }

    // Make the magic happen. This will patch the constructor function to use the correct self-context and argument
    // list. At that point, the self-context will already be merged with the given class body.
    return ClassLike.Class(this, constructor, {
        // Expose a public method, defined inline.
        reset: function () {
            this.count = 0;
            return this;
        },
    }, ClassLike.Argument(argumentList));
};

var instance = new AnotherTestClass();
console.log(instance);

A test html page can be found inside the example/ folder.

Build

git clone git@github.com:GameplayJDK/class-like.js.git
cd class-like.js
npm install
npm run build-umd
npm run build-cjs
npm run build-iife
rollup --input=src/main.js --format=umd --file=dist/class-like.umd.js --name=ClassLike --sourcemap
rollup --input=src/main.js --format=iife --file=dist/class-like.js --name=ClassLike --sourcemap

License

It's MIT.