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

repropose

v1.0.2

Published

A component for building file upload fields of any type.

Downloads

4,714

Readme

🎲 repropose

Build Status Coverage Status code style: prettier All Contributors PRs Welcome

A set of higher order functions that will, based on the given base function, create a new function decorated with additional function and instance properties ("props").

Install

npm install --save repropose

Or if you prefer yarn:

yarn add repropose

Usage

The library exposes two higher order functions: withProps and withStaticProps. Use them to create a new function decorated with additional function and instance properties ("props").

In the following examples, to make the code more readable, we utilize the compose function from the popular ramda library (lodash also offers this).

import { compose } from "ramda";
import { withProps, withStaticProps } from "repropose";

const Vehicle = compose(
  withProps(() => ({
    size: "",
    color: "",
    weight: 0
  })),
  withStaticProps({
    type: "vehicle"
  })
)(function() {});

console.log(Vehicle.type); // "vehicle"

const vehicle = new Vehicle();
vehicle.size = "large";
vehicle.color = "red";

console.log(vehicle.size); // "large"
console.log(vehicle.color); // "red"

Both withProps and withStaticProps can accept an object that represents new to-be-assigned props or a function that returns it. The benefit of using a function is that it receives a reference to the new instance (withProps) and new function (withStaticProps) as first argument, which is useful when there's a need to check already assigned props on the previous / base function.

Note that functions created with shown HOFs are completely new functions, and are not linked in any way with the base functions.

Composing functions

It's also possible to compose existing functions with a new set of props. Although this was basically already done in the previous example (base function was an empty function), a more practical example would be composing the existing Vehicle function with a new set of props, thus creating a new Car function:

// All instances of Car function will be comprised of all "Vehicle" 
// function's props and "doorsCount", "seatsCount" and "speed" props.
const Car = compose(
  withProps({
    doorsCount: 0,
    seatsCount: 0,
    speed: 0
  })
)(Vehicle);

console.log(Vehicle.type); // "vehicle"
console.log(Car.type); // "car"

const car = new Car();
car.size = "large";
car.color = "red";
car.seatsCount = 5;

console.log(car.size); // "large"
console.log(car.color); // "red"
console.log(car.seatsCount); // 5

From here we can go even further, and define a few additional functions that could be comprised of all Car functions' properties and additional specific-car-type ones. Compose as many functions as needed.

Functions as new props

Props can also be functions:

const Car = compose(
  withProps({
    dorsOpenedCount: 0,
    openDoors(count) {
      this.dorsOpenedCount = count;
    }
    hasOpenedDoors() {
      return this.dorsOpenedCount > 0;
    }
  })
)(Vehicle);

const car = new Car();
console.log(car.hasOpenedDoors()); // false

car.openDoors(2);

console.log(car.dorsOpenedCount); // 2
console.log(car.hasOpenedDoors()); // true

Note: don't use arrow functions if the function is working with this like in the above example, since it won't hold the correct object reference.

Custom HOFs

You can also create custom HOFs which you can selectively apply where needed. Consider the following example:

// We extracted the Car props into a custom HOF.
const withCarProps = () => {
  return fn => {
    return compose(
      withProps({
        doorsCount: 0,
        seatsCount: 0,
        speed: 0,
        getSpeed() {
          return this.speed;
       }
      })
    )(fn)
  }
};

// Where needed, apply "withNitro" HOF to append a piece of 
// functionality to an existing function and its instances.
const withNitro = ({ nitroSpeedMultiplier }) => {
  return fn => {
    return compose(
      withProps({
        nitroEnabled: false,
        enableNitro() {
          this.nitroEnabled = true;
        },
        getSpeed() {
          if (this.nitroEnabled) {
            return this.speed * nitroSpeedMultiplier;
          }
          return this.speed;
        }
      })
    )(fn)
  }
};

const Car = compose(
  withNitro({ nitroSpeedMultiplier: 2.5 }),
  withCarProps()
)(Vehicle);

const car = new Car();
car.speed = 100;

console.log(car.getSpeed()); // 100

car.enableNitro();

console.log(car.nitroEnabled); // true
console.log(car.getSpeed()); // 250

You can use this idea to create a set of HOFs that are responsible for applying specific functionality and then compose them as necessary.

The motivation

This library is based on the composition over inheritance premise.

The main problem with the inheritance approach is that it forces you to define your classes / entities early in the project, which will, as new requests arrive, almost certainly result in structural inneficiencies / refactors in the future. This video describes the pros and cons of both approaches very well, so I encourage you to check it out (thanks MPJ).

🍌🦍🌴🙃

Reference

withProps(props: {[string]: any} | (newInstance : Object) => {[string]: any}): Function

Creates a new function, whose instances are decorated with given props.

withStaticProps(props: {[string]: any} | (newFunction : Function) => {[string]: any}): Function

Creates a new function, with props assigned directly to it.

Contributors

Thanks goes to these wonderful people (emoji key):

| Adrian Smijulj💻 📖 💡 👀 ⚠️ | | :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!