htz-react-base

Encapsulated development scripts and dependencies for building React apps and components.

Table of Contents

• Installation
• Usage
• Commands
  • build
  • clean
  • commitizen
  • distFlowTypes
  • flow
  • format
  • lint
  • styleguide
  • styleguide:build
  • test
  • update-scripts
• Development

Installation

This module should be installed in devDependencies:

$ yarn add -D @haaretz/htz-react-base

Usage

Installing htz-react-base will make an htz-scripts executable available to the consuming package, which can be run like so:

$ ./node_modules/.bin/htz-scripts <command>

However, for ease of use, it is recommended to add scripts mirroring the available htz-scripts commands to the scripts field of your package.json file. Scripts run this way will automatically have htz-scripts in their $PATH.

A helper command is provided to do this for you. Run this once (or when htz-react-base is updated with new scripts), and you will henceforth be able to use yarn run <command> or npm run <command> instead of running htz-scripts directly:

$ ./node_modules/.bin/htz-scripts update-scripts

Some commands accept arguments, which should be passed after the command name. Note that if running via Yarn or npm scripts, you will need to add -- after the script name to add arguments, for example:

$ yarn run test -- --verbose

Base Configs

Babel

This package contains a babel present for internal use at @haaretz.

packages using it should have a .babelrc.js file at their root with, in the most basic usecase:

module.exports = {
  presets: ["@haaretz/htz-react-base/babel.js"],
}

plugins and presets can be added to individual packages as required.

Next Config (including webpack)

The basic next configuration have been modularized and moved to htz-react-base/base-next-config. The entire base config can be imported with require('@haaretz/htz-react-base/base-next-config. Additionaly, the config's different parts can be imported with require('@haaretz/htz-react-base/base-next-config/<sub-module>.

Commands

build

Build production distributable files. For apps, this will involve running the Next.js build process. For libraries, this will usually involve running Babel and/or webpack.

clean

Remove built distribution files and the Jest cache directory.

commitizen

Run commitizen to assist with writing standard-conferment commit messages.

distFlowTypes

Copies the src/index.js file index.js.flow in the package root, so that Flow typings are available for package consumers.

flow

Run the Flow typechecker. Initializes the package to use flow if not already initialized. For only initializing the package without running any checks, run with the --no-run flag

format

Format code in the current directory with Prettier. You should do this before opening any pull request that contains code, for consistency.

lint

Lint code in the current directory with ESLint. See eslint.js for the default rules.

styleguide

Run the styleguide development server, which renders previews and documentation for components found in the package.

styleguide:build

Build a production-ready page rendering the component styleguide for the module. The output will be written to dist/styleguide.

test

Run the package’s test suite with Jest.

update-scripts

Update the scripts field in package.json to contain aliases for htz-scripts commands. Use --no-overwrite to avoid clobbering any existing scripts with the same name.

Development

Before opening a pull request for this package, make sure to run the lint, format, and test scripts as necessary.

To add scripts to this module, place them in /scripts. The command will be mapped to a file of the same name. Commands namespaced with a : character are mapped to subdirectories. For example:

| Command | File | |---------|--------------------------------------------| | foo | scripts/foo.js or scripts/foo/index.js | | foo:bar | scripts/foo/bar.js |