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

@blueprintjs/eslint-plugin-blueprint

v0.1.0

Published

ESLint rules for use with @blueprintjs packages

Downloads

38

Readme

Blueprint ESLint plugin

Blueprint is a React UI toolkit for the web.

This package contains the ESLint plugin for Blueprint. It provides custom rules which are useful when developing against Blueprint libraries.

Key features:

Installation

yarn add @blueprintjs/eslint-plugin-blueprint

Usage

Simply add this plugin in your .eslintrc file to use the add the plugin. The plugin includes Blueprint-specific rules which enforce semantics particular to usage with @blueprintjs packages, but does not turn them on by default.

.eslintrc

plugins: [
    "@blueprintjs/blueprint"
]

Rules-only usage

To enable the Blueprint-specific rules, extend the plugin:@blueprintjs/blueprint/recommended config inside the package:

tslint.json

extends: [
+    "plugin:@blueprintjs/blueprint/recommended"
]

Rules

@blueprintjs/blueprint/classes-constants

Enforce usage of Classes constants over namespaced string literals.

Each @blueprintjs package exports a Classes object that contains constants for every CSS class defined by the package. While the values of the constants may change between releases, the names of the constants will remain more stable.

{
  "rules": {
    "@blueprintjs/blueprint/classes-constants": ["error"],
  }
}
-const element = <div className="pt-navbar" />;
+const element = <div className={Classes.NAVBAR} />;

@blueprintjs/blueprint/html-components

Enforce usage of Blueprint components over regular html components.

  • h1-6 -> H1-6
  • code -> Code
  • pre -> Pre
  • blockquote -> Blockquote
  • table -> HTMLTable
{
  "rules": {
    "@blueprintjs/blueprint/html-components": ["error"],
  }
}

@blueprintjs/blueprint/icon-components

Enforce usage of JSX Icon components over IconName string literals (or vice-versa) in icon JSX props. Note that this rule only supports hardcoded values in the icon prop; it does not handle expressions or conditionals.

A fixer is available for this rule that will convert between string literals and named Icon components. Note that the implementation is naive and may require intervention, such as to import a component or fix an invalid name.

Named icon components (TickIcon, GraphIcon, etc) can be imported from the @blueprintjs/icons package.

This rule is disabled in the blueprint-rules config as it is most useful to ensure that the @blueprintjs/icons package can be tree-shaken (an opt-in process which requires using components and never IconName literals).

{
  "rules": {
    // default uses "component"
    "@blueprintjs/blueprint/icon-components": ["error"],
    // expanded syntax
    "@blueprintjs/blueprint/icon-components": ["error", "component" | "literal"] // choose one
  }
}

"component"

-<Button icon="tick" />
+<Button icon={<TickIcon />} />

"literal"

-<Button icon={<GraphIcon />} />
+<Button icon="graph" />

Full Documentation | Source Code