@chayns-scripts/babel-preset v0.1.0

chayns-scripts contains pre-configured tools for the development, publishing and testing of your app. It was created to simplify the development experience when working with React.

This toolchain is specialized in developing apps for the chayns® platform. If you want to develop a general purpose web app, take a look at Next.js or create-react-app

Overview

• Get Started
• Commands
  • chayns-scripts dev
  • chayns-scripts build
  • chayns-scripts lint
• Features
  • TypeScript Support
  • (S)CSS Support
  • Image Assets
  • HMR With react-refresh Support
  • ESLint Configuration
  • Analyzing Your Bundle
  • Tree-Shaking for chayns-components
  • The chayns-scripts.json Configuration File
• Notes on Multiple Entrypoints

Get Started

First install the chayns-scripts package in your project:

yarn add chayns-scripts -D

or

npm i chayns-scripts -D

The package provides the following commands:

• chayns-scripts dev
• chayns-scripts build
• chayns-scripts lint

We recommend adding these to the scripts section of your package.json:

{
    "...": "",
    "scripts": {
        "dev": "chayns-scripts dev",
        "build": "chayns-scripts build",
        "lint": "chayns-scripts lint"
    },
    "...": ""
}

Your project will have two entry points. An index.html files in the src/ directory at the root of your project will be the entry point for visitors.

A JavaScript/TypeScript file in the src/ directory with one of the following names will be the entry point for your bundle:

• index.js
• index.jsx
• index.ts
• index.tsx

To use TypeScript, you need a tsconfig.json. Read more

Your project structure should look similar to this:

├── src
│   ├── components
│   │   └── MyComponent.jsx
│   ├── index.html
│   └── index.jsx
├── package-lock.json
├── package.json
└── .gitignore

An example project can be found here.

Linting

We also provide an ESLint-configuration that works with JavaScript and TypeScript. To activate linting, install ESLint first:

yarn add eslint -D

or

npm i eslint -D

Then add a eslintConfig key to your package.json like that:

{
    "...": "",
    "eslintConfig": {
        "extends": "@chayns-scripts"
    },
    "...": ""
}

For integration into your editor check out the official Integrations page.

Commands

chayns-scripts dev

Starts the local development server on https://0.0.0.0:1234/ if SSL was configured, otherwise it will use https://localhost:1234/.

You can configure the host, port and SSL settings in a chayns-scripts.json configuration file:

{
    "host": "123.0.0.1",
    "port": 1337,
    "https": {
        "cert": "path-to-cert",
        "key": "path-to-key"
    }
}

To achieve faster builds and rebuilds this command only transpiles your code to work with the latest versions of Google Chrome, Safari and Firefox.

chayns-scripts build

Builds your source code for production. The assets will be emitted into the build/ directory in your project root.

It will transpile your code to work with browsers matching the following browserslist configuration:

>0.5%
not dead
not op_mini all

chayns-scripts lint

Lints your JavaScript and TypeScript source code with ESLint and reports any errors, automatically fixing them if possible.

We recommend to use our included ESLint configuration.

Features

• TypeScript Support
• (S)CSS Support
• Image Assets
• HMR With react-refresh Support
• ESLint Configuration
• Analyzing Your Bundle
• Tree-Shaking for chayns-components
• The chayns-scripts.json Configuration File

TypeScript Support

TypeScript is supported by default and we encourage to use it.

Getting Started

To start using TypeScript in your project, create a tsconfig.json file in the root of your project and start the chayns-scripts dev command. Your tsconfig.json will automatically be filled our recommended configuration.

If you do not have a tsconfig.json file and use .ts or .tsx files, ESLint will not be able to check these for errors.

Caveats

The TypeScript compilation is done by @babel/preset-typescript. This has some caveats, mainly not beeing able to use const enum and export = or import =.

The automatically generated tsconfig.json includes "isolatedModules": true in the TypeScript compiler options, which will make the TypeScript compiler warn you when using unsupported features.

Refer to the Babel documentation for more information.

(S)CSS Support

You can import .css and .scss files by default:

import "./my-styles.scss"

CSS Modules

CSS modules are also supported. Every file ending with .module.css or .module.scss will be treated as a module, to be used like this:

import styles from "styles.css"

export function MyComponent() {
    return <div className={styles.box}>I am styled with CSS modules!</div>
}

This is the preferred way to use CSS in your projects. For more information on CSS Modules check out this article.

Image Assets

Images with .png, .jpg, .jpeg or .gif extensions can be imported into your components and will be automatically be included in the bundle. An image modules default export will be it's final url:

import imgSrc from "./my-image.png"

export function MyImage() {
    return <img src={imgSrc} alt="" />
}

Small images (< 8 KB) will be inlined into the JavaScript code with data-urls and therefore won't appear as files next to your bundled code. This improves loading times of small images.

SVG Support

Importing .svg files will automatically make them available as React components:

import Icon from "./my-icon.svg"

export function MyIcon() {
    return <Icon />
}

HMR With react-refresh Support

The development server supports hot module reloading with react-refresh (the improved alternative to the now deprecated react-hot-loader).

This allows you to see changes in your React components instantly after saving without losing component state. Some patterns are unsupported, for further information refer to this paragraph.

ESLint Configuration

Our ESLint-config @chayns-scripts/eslint-config) is automatically included when chayns-scripts is installed.

To activate the config add an eslintConfig key to your package.json:

{
    "...": "",
    "eslintConfig": {
        "extends": "@chayns-scripts"
    },
    "...": ""
}

or use one of the other options for configuring ESLint.

The configuration can be installed as a standalone package (@chayns-scripts/eslint-config).

Personal note: These rules exist for a reason. They extend the AirBnB JavaScript Guidelines and should be taken seriously, especially the accessibility rules are disregarded way too often 😶. Pay attention to your linter and use disabling-comments sparingly.

If you think that a rule should be adjusted, please open an issue to discuss the suggested change instead of adjusting your local configuration.

Analyzing Your Bundle

By passing the --analyze flag to chayns-scripts build you can use webpack-bundle-analyzer to investigate your bundle-size. It will automatically open the tree-map of your bundled files after compiling. This will run as long as you keep the terminal process alive.

Tree-Shaking for chayns-components

The tree-shaking for chayns-components is built into the build configuration and configured automatically. For further information refer to this document.

If your bundle size is unexpectedly large, please open an issue.

The chayns-scripts.json Configuration File

A chayns-scripts.json file in the root of your projects is used to configure certain aspects of the scripts (but is not required).

Example chayns-scripts.json:

{
    "host": "123.0.0.1",
    "port": 1337,
    "https": {
        "cert": "//path/to/ssl/cert",
        "key": "//path/to/ssl/key"
    }
}

The following options are supported:

Notes on Multiple Entrypoints

Some projects use multiple webpack entrypoints for different outputs to reduce configuration duplication. Since this is already the purpose of this repository, a project with multiple entrypoints doesn't seem to make much sense.

Therefore we do not support multiple entrypoints. If you have projects that are related and you want them to be in the same repository, use a monorepo.