Component Bind Utility

Common errors

• TypeError: bind is not a function

  cause Attempting to use a named import (e.g., `import { bind } from 'component-bind';`) when the package exports a single default function.
  fix For CommonJS, use `const bind = require('component-bind');`. For ESM, use `import bind from 'component-bind';`.

• TypeError: this.methodName is not a function

  cause When binding by string name (e.g., `bind(obj, 'methodName')`), `methodName` does not exist as a function on the provided `obj`.
  fix Ensure the string `name` argument correctly refers to an existing method on the `obj` parameter.

Warnings

• gotcha Prefer native `Function.prototype.bind` in modern JavaScript. It offers better performance, is universally available, and integrates more naturally with language features like arrow functions.
  Fix: Use `myFunction.bind(thisContext, ...args)` or arrow functions `(...args) => myFunction(thisContext, ...args)`.
• deprecated The 'component' ecosystem, to which `component-bind` belongs, is largely considered obsolete and unmaintained. While the package itself is stable due to its simplicity, there will be no future updates or bug fixes.
  Fix: Consider migrating to native browser/Node.js APIs or widely maintained utility libraries if starting a new project or refactoring.
• gotcha This package does not provide TypeScript type definitions. Using it in a TypeScript project will require manually declaring its types or using `any`.
  Fix: Create a `declarations.d.ts` file with `declare module 'component-bind' { function bind<T>(obj: T | null, fn: Function, ...args: any[]): Function; function bind<T>(obj: T, name: keyof T, ...args: any[]): Function; export = bind; }`.

Install

• npm install component-bind npm
• yarn add component-bind yarn
• pnpm add component-bind pnpm

Imports

• bind
  wrong:

  import { bind } from 'component-bind';

  correct:

  const bind = require('component-bind');

  Primarily designed for CommonJS; if used with ESM, bundlers often resolve `require` to a default export. Attempting named import will fail.
• bind
  wrong:

  const { bind } = require('component-bind');

  correct:

  import bind from 'component-bind';

  This assumes an ESM-compatible build or a bundler correctly transforming CommonJS default exports. The package itself doesn't explicitly provide an ESM export map, but most tools infer it.
• Type 'bind'

  /** @type {import('component-bind')} */
  const bind = require('component-bind');

  The package does not ship with TypeScript type definitions. JSDoc or manual declaration is necessary for type safety. The above uses JSDoc for CommonJS.

Quickstart

Demonstrates the core `bind` functionality, including binding a function to an object's `this` context, currying arguments, and binding a method by its string name.

const bind = require('component-bind');

// A simple object with a name
const user = { name: 'Alice' };

// A function that uses 'this.name'
function getName() {
  return this.name;
}

// Bind the getName function to the user object
const getUserName = bind(user, getName);
console.log('Bound function result:', getUserName()); // Expected: Alice

// Example of currying arguments
function greet(greeting, name) {
  return `${greeting}, ${name}!`;
}

// Bind with null context (since 'this' isn't used) and curry the greeting
const sayHelloTo = bind(null, greet, 'Hello');
console.log('Curried function result (partially applied):', sayHelloTo('Bob')); // Expected: Hello, Bob!

// Bind a method by its string name
const product = {
  id: 'P123',
  getDescription: function(prefix) {
    return `${prefix}: ${this.id}`;
  }
};

const getProductDescription = bind(product, 'getDescription');
console.log('Bound method by name:', getProductDescription('Item')); // Expected: Item: P123

// Demonstrating full currying
const getSpecificProductDescription = bind(product, 'getDescription', 'Product ID');
console.log('Fully curried method:', getSpecificProductDescription()); // Expected: Product ID: P123