define-args

define-args returns a function with the ability to bind arguments without binding context.

It is 520 bytes (314 gzipped).

Installation

npm install @jsxtools/define-args

Usage

Use define-args to enable args() on a function:

import defineArgs from '@jsxtools/args';

// creates a function that adds two numbers and supports args()
const addTwoNumbers = defineArgs(function (a, b) { return a + b })

// returns 5, because the arguments are 2 and 3
addTwoNumbers(2, 3) 

// creates an argument-bound function with args(1)
const addOneNumber = defineArgs(addTwoNumbers).args(1)

// returns 3, because the arguments are 1, 2, and 3
addOneNumber(2, 3)

Use define-args to extend classes:

import defineArgs from '@jsxtools/define-args';

// creates a class that stores a number and supports args()
const StoredNumber = defineArgs(function (number) { this.number = number })

// creates a new StoredNumber, where its "number" is 5
const someStoredNumber = new StoredNumber(5)

// creates an argument-bound class with args(1)
const StoredOne = StoredNumber.args(1)

// creates a new StoredOne, where its "number" is already 1 (and 5 is ignored)
const anotherStoredNumber = new SomeOneNumber(5)

// extends StoredNumber (and StoredOne) with "and"
SomeNumber.prototype.and = function (number) { return this.number + number }

// returns 10, because its "number" is 5 and the argument is 5
someStoredNumber.and(5)

// returns 6, because its "number" is 1 and the argument is 5
anotherStoredNumber.and(5)

The browser script works in all modern browsers, including Internet Explorer 9+.

Example Usage: React Component

import defineArgs from '@jsxtools/args';

function BoundComponent () {
  const { constructor } = this

  // bind all prototype functions and allow them to predefine arguments
  Object.getOwnPropertyNames(constructor.prototype).forEach(
    name => this[name] !== constructor && typeof this[name] === 'function'
      ? this[name] = defineArgs(this[name].bind(this))
    : null
  )
} BoundComponent.prototype.isReactComponent = {}

class MyComponent extends BoundComponent {
  constructor () {
    super()

    this.state.items = [
      'Defeat Bowser',
      'Save the Princess'
    ]
  }

  remove (index) {
    const prevItems = this.state.items
    const nextItems = prevItems.slice().splice(index, 1)

    this.setState({ items: nextItems })
  }

  render () {
    return (
      <ul>
        this.state.items.map(
          (item, index) => (
            <li key={index}>
              <span>{item}</span>
              <button onClick={this.remove.args(index)}>remove</button>
            </li>
          )
        )
      </ul>
    )
  }
}