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

ideal-tools

v1.0.5

Published

ideal is a collection of pre-existing tools for generating client assets, wrapped up in an easy to use CLI. It currently supports `TypeScript` and `SASS`. The tools used are as follows:

Downloads

7

Readme

ideal is a collection of pre-existing tools for generating client assets, wrapped up in an easy to use CLI. It currently supports TypeScript and SASS. The tools used are as follows:

Getting Started

Install with npm:

npm install --save-dev ideal-tools

Install with yarn:

yarn add --dev ideal-tools

TypeScript v3.8 is a peerDependency of ideal, so ensure you have it setup with a root tsconfig.json and installed as a dependency of your project.

Basic Usage

There are currently two "tasks" provided, build:css and build:js. ideal uses a glob path to target files, and outputs, by default, in a relative directory: ./dist. This can be configured with a contextual config file, outlined below.

Try it out:

$ ideal build:js ./src/*.ts
$ ideal build:css ./src/*.scss

Configuration

You can configure each build task via CLI arguments, or with an ideal.config.js file, located relative to where ideal is being run from.

CLI Arguments

Arguments are passed to ideal via the following pattern: --{key}={value}. Where arguments are boolean, no value is required and their presence consistutes true.

See below for full list of configurable options:

| Key | Value | Default | About | | ------------ | ------ | ------- | --------------------------------------------------------------- | | --outputPath | Path | ./dist | A relative path to where you would like files to be written | | --release | N/A | false | Determine whether files are built for development or production | | --sourceMap | N/A | false | Output source maps to built assets | | --cssModules | N/A | false | Hash class names and build a json map file | | --watch | N/A | false | Watch files for changes | | --watchPath | N/A | null | Path to where source files are being watched | | --verbose | N/A | false | Output more info in the console | | --pathAlias | Path | ./src | Define a path alias for webpack | | --filePrefix | String | null | Prepend this value to built assets, useful for versioning |

Config File

The structure of the ideal.config.js file can be seen below. Each top level property key matches a particular build task, e.g build:css.

module.exports = {
   'build:css': {
      cssModules: true,
      watchPath: './src/**/*.scss',
      ...
   },
   'build:js': {
      watchPath: './src/**/*.ts,
      ...
   }
};

This is then picked up at runtime by ideal. Each set of properties match their CLI equivelants, in value and casing.

Webpack Specific

ideal allows you to manually specify a webpack.config.js file in the root directory of where ideal is being run from. If this file is found, these values will be used, if not a default config will be used instead.

Manifest

ideal creates an assets.json file in the output directory (./dist by default), that keeps a record of all assets built so far. Each subsequent run of ideal appends each file name as a property with the hashed or real file name as a value. Each build overides previous asset names or declares new ones that don't yet exist. This file is intended to be ephermeral, e.g when running a production build with --release, this file should not exist in the output path. Equally the assets.json file should not be commited to your repository. This ensures that the file is an accurate reflection of the built files for the currently provided source.

Development

Once you've cloned this repo and run yarn, then yarn start, you can make use of npm link to simulate how this package will work when installed globally. From there, you can run the following in a directory of your choice to run a build:

$ ideal build:js ./path/to/stuff --watch