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

pipe-scripts

v0.0.24

Published

#### Inline SVG Support It process your SVG file and returns a React component. **Important: file extension must be .inline.svg**

Downloads

6

Readme

pipe-automater

Inline SVG Support

It process your SVG file and returns a React component. Important: file extension must be .inline.svg

import React from 'react'
import IconRemove from './icons/remove.inline.svg'
/** Inline SVG Component */ 
const RemoveIcon = () => (
    <IconRemove />
)

Scripts

add

Add is a CLI that guides you through the process of adding a react component, module or view.

Installation

  1. Run $ npm install pipe-automater in your project directory
  2. Add "add": "pipe-automater add",to the "scripts" in your package.json

Usage

  1. Run $ npm run add in your project directory

flow

flow is a CLI that guides you through the process of git flow in any git project. You only need to follow the CLI and the flow script will take care of the correct starting, finishing and merging of hotfix, feature and release branches.

Installation

  1. Run $ npm install pipe-scripts in your project directory
  2. Add "flow": "pipe-scripts flow",to the "scripts" in your package.json

Usage

  1. Run $ npm run flow in your project directory
  2. The CLI will guide you through starting/finishing a hotfix, feature or release

import

import is a script that makes it possible to import icon fonts to your project. You only have to unzip your icoMoon export folder and copy the content into the root folder /importer in your project. The import script will then import the fonts and generate a documentation of all available icons.

Installation

  1. Run $ npm install pipe-scripts in your project directory
  2. Add "import": "pipe-scripts import",to the "scripts" in your package.json
  3. Add a /importer to your root directory

Usage

  1. Run $ npm run import in your project directory
  2. Put the source files in the /imorter folder
  3. The script will then import the icon fonts and generate all needed files for documentation and usage of the icons

licensecheck

Check which of your projects' dependencies or devDependencies have critical licenses by running this script. It is possible to configure what licenses are white or black listed. Any other license will be listed as grey.

Installation

  1. Run $ npm install pipe-scripts in your project directory
  2. Add "licensecheck": "pipe-scripts licensecheck",to the "scripts" in your package.json
  3. Add empty report file to your project directory. Either to ./docs/licensecheck/report.md or any directory you configured in the pipe-manifest.json.

Usage

  1. Run $ npm run licensecheck in your project directory
  2. The script will then write the license report for you
  3. You can configure the report path and the white/black list of licenses in the pipe-manifest.json.

extend

Add extensions to your project with this CLI. You can choose between setups for pipe-components and pipe-services as well as setting up an Icon component or the NavigationController.

Installation

  1. Run $ npm install pipe-scripts in your project directory
  2. Add "extend": "pipe-scripts extend", to "scripts" in your package.json

Usage

  1. Run $ npm run extend in your project directory
  2. You can now choose which extension you want to add.