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

@sachinvedaraj/my-pkg-test

v1.0.5

Published

A template for revvsales npm packages

Downloads

2

Readme

A template for revvsales npm packages

NPM JavaScript Style Guide

Getting started

  • Install node v12.16.0 in your system using NVM. How to guide
  • Open a terminal & execute the below cmd one by one from the root path
    • npm install -g yarn
    • git clone https://github.com/revvsales/revv-pkg.git
    • cd revv-pkg
  • Comment all the lines in example/src/App.js path and save the file.
  • Now go back to terminal & execute the below cmd.
    • yarn install
    • yarn start
      • Once the app starts successfully, you should get something like this Watching source, compiling to dist:,
      • Now stop the process by entering ctrl+c for windows or cmd+c for mac.
    • cd example
    • yarn install
      • If the install is not successfull and you are getting an error like this An unexpected error occurred: "ENOENT: no such file or directory
      • Enter yarn install again in the terminal.
    • cd ..
    • yarn link
    • yarn link revv-pkg
  • Un-comment all the lines in example/src/App.js path and save the file. (Lint will throw error & prevent running of the app because dist/ folder is not generated & git ignored. To hande, this step is done).
  • Open Visual Studio Code & install the following plugins.
    • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
    • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
    • https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
    • https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
  • Open User settings.json in vscode editor by hitting (cmd+,) in case of mac and (ctrl+,) in case of windows and add the following code and save the file.
    • Note: You can add your own setting to customize editor, but these are mandatory settings needed to run the app
{
  "breadcrumbs.enabled": true,
  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "backgroundColor": "transparent"
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "::",
      "color": "#f78c6c",
      "strikethrough": false,
      "backgroundColor": "transparent"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "eslint.enable": true,
  "window.zoomLevel": 0,
  "workbench.activityBar.visible": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "javascript.validate.enable": false,
}

Development

Local development is broken into two parts (ideally using two tabs).

First, navigate to root path where project is cloned.

yarn start # runs watch flag of the npm library

The second part will be running the example/ create-react-app that's linked to the local version of your module, navigate to root path where project is cloned

# (in another tab)
cd example
yarn start # runs create-react-app dev server

If all goes well, you should see the blow image in the browser. alt text

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Guidelines

Branch Name

  • Creating a branch for a
    • feature feat/<branchName>
    • bug fix fix/<branchName>
    • refactor refactor/<branchName>
    • performance perf/<branchName>
    • css updates style/<branchName>

Commit Message

Example Code

For Feature:

feat: Integrated custom table feature 

For Fix:

fix: Fixed table hover issue
fix(701134547): Handled else condition  // For bug raised from monday.com
fix(ODIN-1JZ): Fixed 'length' of null   // For bug raised from sentry

Pull Request Rules

Release Types

Example Code:

Resulting in a patch release:

fix(dish): don't overcook rare steaks

Resulting in a minor release:

feat(dish): add mac and cheese

Resulting in a major release:

feat(chef): add chef Bob
BREAKING CHANGE:   
Chef Louis has been fired, all dishes must go to chef Bob

Install

yarn install --save revv-pkg

Usage

import React, { Component } from 'react'

import { MyComponent } from 'revv-pkg'
import 'revv-pkg/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

Documentation

Coming soon.

License

MIT © Ajai J