@interaktiv/dia-scripts

dia-scripts 🛠 📦

CLI toolbox with common scripts for most sort of projects at DIA

The Problem

Every time we start a new project for Javascript, Lightning Web Components, Salesforce, Web or Mobile, we find ourselves copying configuration files or npm run scripts or other tooling stuff from a previous project... such an annoying task and prone to errors.

Also adding some new features for e.g. updating some babel configuration or adding some ESLint rules makes the update process on older projects a pain and not really straight forward.

So we borrowed a nice solution from Kent C. Dodds and his kcd-scripts. Which originally was created as a PayPal internal project called paypal-scripts.

This Solution

This is a CLI that abstracts away all configuration for linting, testing, building, and more.

Table of Contents

• Prerequisites
• Installation
• Usage
  • Overriding Config
  • Flow Support
• Other Solutions
• Other Use Cases
• Acknowledgements
• License

Prerequisites

You need

• Node.js 8+

• npm CLI 5+ - The npm CLI is shipped with and will be installed during the installation of Node.js. If the version is lower than needed - at least 5.x - you can update it via:

  npm install --global npm
  

Installation

This module can be installed via npm which is bundled with Node.js and should be installed as one of your project's devDependencies:

npm install --save-dev --save-exact @interaktiv/dia-scripts

Usage

This is a CLI and exposes a bin called dia-scripts. For now the documentation and testing was done very roughly. You'll find all available scripts in src/scripts if you miss something from the docs (README.md 😅).

This project actually runs itself. If you look in the package.json, you'll find scripts with node src {scriptName}. This serves as an example of some of the things you can do with dia-scripts.

Overriding Config

dia-scripts allows you to specify your own configuration for things and have that plug directly into the way things work. There are various ways that it works, but basically if you want to have your own config for something, just add the configuration and dia-scripts will use that instead of it's own internal config.

📌 In addition, dia-scripts exposes its configuration so you can use it and override only the parts of the config you need to.

This can be a very helpful way to make editor integration work for tools like ESLint which require project-based ESLint configuration to be present to work.

So, if we were to do this for ESLint, you could create an .eslintrc.js with the contents of:

{
  extends: ['./node_modules/@interaktiv/dia-scripts/eslint.js'],
}

Or, for babel, a .babelrc.js with:

{
  presets: ['@interaktiv/dia-scripts/babel'],
}

Or, for jest:

const { jest: jestConfig } = require('@interaktiv/dia-scripts/config');

module.exports = Object.assign(jestConfig, {
  // Your overrides here ...

  // For test written in Typescript, add:
  transform: {
    '\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest/preprocessor.js',
  },
});

📌 Note: dia-scripts intentionally does not merge things for you when you start configuring things to make it less magical and more straightforward. Extending can take place on your terms.

Flow Support

If the flow-bin is a dependency on the project the @babel/preset-flow will automatically get loaded when you use the default babel config that comes with dia-scripts. If you customized your .babelrc-file you might need to manually add @babel/preset-flow to the presets-section.

Other Solutions

We are not aware of any, if you are please [make a pull request][pull-requests] and add it here!

Please consult the contribution guides before contributing.

Other Use Cases

If you lack some use cases / scripts, you are welcome to [open a pull request][pull-requests] and add it. We'll come back to you and see how we can support your use case and present it to all devs.

Please consult the contribution guides before contributing.

Acknowledgements

This tool is inspired by kcd-scripts from Kent C. Dodds. Here are some of his blogs regarding toolkits and kcd-scripts:

• Tools without config
• Concerning toolkits
• How toolkits (like react-scripts) work - YouTube Video
• paypal-scripts now supports TypeScript as well as Javascript

License

MIT Copyright © 2019-present die.interaktiven GmbH & Co. KG