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

@cloudinary/transformation-builder-sdk

v1.15.2

Published

Cloudinary JS-Transformation-Builder-SDK ========================= [![Build Status](https://api.travis-ci.com/cloudinary/js-transformation-builder-sdk.svg?branch=master)](https://app.travis-ci.com/github/cloudinary/js-url-gen) ## About This is an internal

Downloads

403,033

Readme

Cloudinary JS-Transformation-Builder-SDK

Build Status

About

This is an internal Cloudinary SDK. The Cloudinary JS-Transformation-Builder-SDK allows you to generate transformations for @cloudinary/url-gen

Additional documentation

This Readme provides basic installation and usage information.

Table of Contents

Key Features

Version Support

Note!

This SDK is cross-platform, but only the Node.js versions are worth mentioning

| SDK Version | Node.js 10 | Node.js 12 | Node.js 14 | Node.js 16 | |---------------|------------|----------|----------|----------| | 1.x | V | V | V | V |

Installation

Install using your favorite package manager (yarn, npm)

npm install @cloudinary/transformation-builder-sdk
yarn add @cloudinary/transformation-builder-sdk

Usage

Setup

// Import the Cloudinary class
import {Transformation} from '@cloudinary/transformation-builder-sdk';

// Create your transformation
const tx = new Transformation()
        .resize(scale(100, 100))

Transform and Optimize Assets

// Create a new instance if you haven't (see above for the details)
const cld = new Cloudinary({/*...*/})

// Let's create a new image
const myImage = cld.image('sample');

// Import the resize transformation and apply it to myImage
import {Resize} from '@cloudinary/url-gen/actions/resize';

// Resize the image to 100x100
myImage.resize(Resize.scale().width(100).height(100));

// When we're done, we can apply all our changes and create a URL.
const myURL = myImage.toURL();

// https://res.cloudinary.com/demo/image/upload/c_scale,w_100,h_100/sample
console.log(myURL);

Transpilation

@cloudinary/transformation-builder-sdk is shipped as untranspiled ES6 code. @cloudinary/transformation-builder-sdk is optimized around bundle size, as such we do not transpile our distributed modules, we leave the decision of what browsers to support, and what transpilations to apply, to you, the user.

Testing with Jest

As mentioned above, we're shipping @cloudinary/transformation-builder-sdk with ES6 code, as this provides great tree-shaking potential. it also requires a few adjustments when testing.

In jest.config, you'll need to add these lines to allow babel to transpile our code.

{
  "transform": {
    "node_modules/@cloudinary/transformation-builder-sdk": "babel-jest"
  },
  "transformIgnorePatterns": ["/node_modules/(?!@cloudinary/transformation-builder-sdk)"]
}

Make sure to install babel-jest: npm install babel-jest

You'll also need to ensure you have a babel.config.js file (and not a .babelrc), and that it's configured properly to transpile code,

As an example:

module.exports = {
  "presets": [
    "@babel/preset-env"
  ]
};

Contributions

  • Clone this repository
  • Create a fork
  • Make your changes
  • Run tests locally npm run test
  • Build project locally npm run build
  • Push your changes
  • Await a review from the maintainers

Get Help

If you run into an issue or have a question, you can either:

About Cloudinary

Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device.

Additional Resources

Licence

Released under the MIT license.