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 🙏

© 2026 – Pkg Stats / Ryan Hefner

charettejs

v1.0.0

Published

<img src="https://cloud.githubusercontent.com/assets/449520/9855019/2d5ddbbe-5b0c-11e5-9525-17a5bb15707c.png" width="512" height="256px">

Readme

Build Status Gitter Chat

Charette JS

This package will turn OFF the hardship to maintain a single workflow architecture !

How to use it

Install the package :

npm i -S charettejs

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

// Initialize Charette Typescript
grunt.loadNpmTasks('charettejs')

You can easily override configuration for charette :

grunt.config('myTask', {
  target: 'config'
})

// or merge

grunt config.merge({
  task: {
    target: 'config'
  }
})

Then you'll be able to override grunt config for any tasks.

You can find an example in sample folder.

Why

The idea of this project is to grab all default stuff that you need into your sub-projects.

  • Grunt tasks
  • Configuration files
  • NPM Dependencies
  • Bower Dependencies
  • Helpers that you need + testing
  • All usefull stuff used by sub-project

Okay, so why don't use generator ! They do the job ?! No they don't.

Generators

A generator (like Yeoman) is a tool that helps you to bootstrap new project. It'll provide all best practices and handsome shortcuts to automate repetitive stuff.

But if you work in a microservice approach, generator will populate the architecture for the sub-project once. If you wanna update a version for all your projects, you must apply the update on each one..

How develop

  • Get the repository
  • Link charettejs package locally
cd charettejs
npm link
  • Go into ./sample folder
cd sample
npm i
  • You'll be able to run any grunt task using the charettejs stuff

How update bower component

bower i -S my-component # Install my-component in `bower.json`
bower-installer -p -r   # Copy `main` files into `bower.json`

bower-installer has to be install through npm

npm i -g bower-installer

It will update your bower.json with new bower dependencies AND which files keep into vendorsfolder.

How update TypeScript definitions

tsd install my-component --save

tsd must be install through npm as global package

npm i -g tsd

It will grab typescript definitions from DefinitelyTyped and put definitions to typings folder.

Feature

CharetteJS options

grunt.config('charette', {
  name: 'CharetteJS',  // The lib name
  distName: 'myoutput' // The dist/myoutput.js file
})

CharetteJS grunt tasks

build

watch

grunt asciify A nerd without an asscii art is not really a nerd ! Here we are ... Just display the project name in the console. Github grunt-asciify

grunt bump NPM is great! So work with it means publish semver package. Let use this grunt-bump Github grunt-bump

grunt clean and grunt cleanWorkspace The project will build ts output in the ./dist folder We need to ensure that this folder exists and is empty Github grunt-contrib-clean

gh-pages Github allows us to push on gh-pages branch and get a static host for free ! Let's use it :D Github gh-pages

grunt html2js Ok, write HTML in a JS file is ... beurk ! html2js will grab all *.tpl.html files in your /src/ folder and package them in an AngularJS Module ! Github grunt-html2js

karma

ngAnnotate

plato

safe Often you have to check by hand if some debug values are still in source files. Now feel nervous when you deploy, keep it easy !

size_report

template

tslint

ts

uglify

watch