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

exos-scripts

v1.9.2

Published

Set of out-of-the-box extensible scripts that helps you with the lifecycle of your React + TypeScript applications

Downloads

12

Readme

🛡️Exos is a JavaScript framework that helps you to create apps and micro frontends using React and TypeScript.

It currently provides the following packages:

  • Exos CLI: a CLI tool for building React + TypeScript applications.
  • Exos Script: a set of out-of-the-box extensible scripts that helps you with the lifecycle of your React + TypeScript applications.
  • Exos Core: a library with core scripts that helps you to develop your React + TypeScript application and micro frontends.

Exos Scripts GitHub license npm version Build status

This project contains a set of out-of-the-box extensible scripts that helps you with the lifecycle of your React + TypeScript applications. It is heavily inspired in Facebook' Create React App plugin.

It contains the following built-in features:

  • exos-scripts start: A ready-to-be-used development experience as similar to production as it could be (more info here).
  • exos-scripts build: A build script for web applications, configured and optimized to provide the best performance (more info here).
  • exos-scripts test: A unit testing framework (Jest) already configured for you (more info here).
  • exos-scripts lint: a static analyzer tool configured with the best practices for development with React, TypeScript, ESLint and Prettier. Also comes with a flavor for Node Libraries. (more info here).
  • exos-scripts stylelint: a static analyzer tool for your CSS files, configured with the best practices for development with SCSS and CSS Modules (more info here).

Note: For more information about the 🛡️Exos initiative, click here.

Getting started

To use it in your projects, first install exos-scripts in your package by running:

npm i -D exos-scripts

Then, update your package.json with the following:

{
  "name": "Your App",
  "version": "0.0.1",
  // ...
  "scripts": {
    "lint": "exos-scripts lint",
    "stylelint": "exos-scripts stylelint",
    "test": "exos-scripts test",
    "start": "exos-scripts start",
    "build": "exos-scripts build"
  }
}

Extending/Replacing the script configuration

To extend or replace the scripts configurations, you have to create an .exos.config.js file exporting the following:

module.exports = {
  scripts: {
    lint: (config, { env }) => {
      // TODO: Modify the config or replace it entirely
      return config;
    },
    start: (config, { env }) => {
      // TODO: Modify the config or replace it entirely
      return config;
    },
  },
};

You can modify the configuration of all the scripts this way (lint, start, test, start,build) by passing a function that receives the default config used by exos-scripts and the configuration variables used (in the example above, env tells you the value of NODE_ENV used by the script), and returns the modified configuration.

Scripts in detail

Start

It spins up a [Webpack DevServer[(https://webpack.js.org/configuration/dev-server/)] with your web app, configured with Hot Module replacement and Cheap Module Source maps.

It supports React, TypeScript, SCSS and CSS Modules. Plus, it automatically types your style files by using the typings-for-css-modules-loader library.

You can create a public folder and put assets in there, the same way Create React app works. Inside of this folder, you can set up an index.ejs file that acts as the mail index.html file.

Build

In addition to what is explained above, this scripts provides the following:

  • It hashes all the files to provide a new version in production.
  • It versions your artifact, adding a version number in a meta tag of the index.html file.
  • It bundles all your CSS/SCSS files into a single file using the MiniCssExtractPlugin.
  • It externalizes the common libraries, like React and ReactDOM.
  • It provides an optimized version of your assets, thanks to webpack.

Test

It comes with a preconfigured (Jest) that support React unit tests with Enzyme, adding the proper mocks for every other file (.css, .scss, .jpg, .jpeg, .png, .svg). It expects unit tests with named using the suffixes: .spec, .test or .tests (e.g. Search.spec.tsx).

It also has coverage support that is executed by default in any CI environments where the environment variable CI=true is set. Or you can trigger it by running exos-scripts test --collectCoverage.

It has with a library mode for Node Libraries using TypeScript and (Jest). To use it, run exos-scripts test --type=Library.

Lint

It comes with with best practices for development with React, TypeScript, ESLint and Prettier (see the rules here)

It has a library mode for Node Libraries using TypeScript, ESLint and Prettier. To use it, run exos-scripts lint --type=Library (see the rules here)

Stylelint

It comes with with best practices for development with SCSS and CSS Modules (see the rules here)

🚀!