chore: upgrade dependencies

[jvhoven]

Storybook

Added new Storybook configuration; see Declarative Storybook Configuration for more information.

Final Form

Depends on 42BV/jarb-final-form#6 to be merged and released. This contains updated TypeScript definitions that are updated to the latest final-form typings. This is the reason the pipeline fails.

• Upgraded dependency to v1.1.0.

Husky

Removed git add from Husky as it does this by default.

---

This update increases the bundle size by a significant size:

dist/index.js

"bundled":   132535  -> 167639
"minified":   57976  -> 79719
"gzipped":   14017   -> 21584

dist/index.es.js

"bundled":   126899 -> 161686
"minified":   52521 -> 73948
"gzipped":   13677  -> 21259

[42bot]

	Warnings
⚠️	Changes were made to package.json, but not to yarn.lock. Perhaps you need to run yarn install?

	Messages
📖	👍 Jest tests passed: 431/431 (0 skipped)

New dependencies added: awesome-typescript-loader and rollup-plugin-visualizer.

awesome-typescript-loader

Author: Stanislav Panferov

Description: Awesome TS loader for webpack

Homepage: https://github.com/s-panferov/awesome-typescript-loader

Created	almost 5 years ago
Last Updated	about 1 year ago
License	MIT
Maintainers	1
Releases	185
Direct Dependencies	chalk, enhanced-resolve, loader-utils, lodash, micromatch, mkdirp, source-map-support and webpack-log
Keywords	webpack, loader, webpack-loader and typescript

README

TypeScript loader for Webpack

See also:

1. tygen — TypeScript documentation generator.

Installation

npm install awesome-typescript-loader --save-dev

Performance issues

Please note that ATL works the same way as a TypeScript compiler as much as possible. So please be careful with your files/exclude/include sections.

ADVICE: Turn on useCache option.

ADVICE: Typically you want your files section to include only entry points.

ADVICE: The loader works faster if you use isolatedModules or forceIsolatedModules options.

ADVICE: The loader works faster if you will use reportFiles to restrict
checking scope.

ADVICE: Use the loader together with hard-source-webpack-plugin

The world is changing, other solutions are evolving and ATL may work slower
for some workloads. Feel free to try ts-loader with HappyPack or thread-loader and hard-source-webpack-plugin.

Differences between ts-loader

awesome-typescript-loader loader was created mostly to speed-up compilation in my own projects.
Some of them are quite big and I wanted to have full control on how my files are compiled. There are two major points:

1. atl has first-class integration with Babel and enables caching possibilities. This can be useful for those who use Typescript with Babel.
   When useBabel and useCache flags are enabled, typescript's emit will be transpiled with Babel and cached.
   So next time if source file (+environment) has the same checksum we can totally skip typescript's and babel's transpiling.
   This significantly reduces build time in this scenario.

2. atl is able to fork type-checker and emitter to a separate process, which also speeds-up some development scenarios (e.g. react with react-hot-loader)
   So your webpack compilation will end earlier and you can explore compiled version in your browser while your files are typechecked.

Configuration

1. Add .ts as a resolvable extension.
2. Configure all files with a .ts extension to be handled by awesome-typescript-loader.

webpack.config.js

// `CheckerPlugin` is optional. Use it if you want async error reporting.
// We need this plugin to detect a `--watch` mode. It may be removed later
// after https://github.com/webpack/webpack/issues/3460 will be resolved.
const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {

  // Currently we need to add '.ts' to the resolve.extensions array.
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },

  // Source maps support ('inline-source-map' also works)
  devtool: 'source-map',

  // Add the loader for .ts files.
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  plugins: [
      new CheckerPlugin()
  ]
};

After that, you will be able to build TypeScript files with webpack.

NodeJS versions

The loader supports NodeJS 4 and newer.

tsconfig.json

You can use the tsconfig.json file to configure your compiler and loader:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true
    },
    "awesomeTypescriptLoaderOptions": {
        /* ... */
    }
}

Supported TypeScript

awesome-typescript-loader@2.x aims to support only typescript@2.x and webpack@2x, if you need old compilers please use
1.x or 0.x versions.

Advanced path resolution in TypeScript 2.0

If you want to use new paths and baseUrl feature of TS 2.0 please include TsConfigPathsPlugin.
This feature is available only for webpack@2.1.

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { configFileName, compiler } */)
    ]
}

Loader options

silent (boolean) (default=false)

No logging from the checker. Please note that this option disables async error reporting because
this option bans console.log() usage.

compiler (string) (default='typescript')

Allows use of TypeScript compilers other than the official one. Must be
set to the NPM name of the compiler, e.g. ntypescript or the path to a package folder.
Note that the compiler must be installed in your project. You can also use
nightly versions.

useTranspileModule (boolean) (default=false)*

Use fast transpileModule emit mode. Disables automatically when you set compilerOption declaration: true (reference).

instance (string) (default='at-loader')

Allows the use of several TypeScript compilers with different settings in one app. Override instance to initialize another instance.

configFileName (string) (default='tsconfig.json')

Specifies the path to a TS config file. This is useful when you have multiple config files. This setting is useless inside a TS config file.

transpileOnly (boolean)

Use this setting to disable type checking, enabling this will nullify the CheckerPlugin usage in your webpack configuration.

errorsAsWarnings (boolean)

Emit all typescript errors as warnings.

forceIsolatedModules (boolean)

Use this setting to disable dependent module recompilation.

ignoreDiagnostics (number[]) (default=[])

You can squelch certain TypeScript errors by specifying an array of diagnostic codes to ignore.
For example, you can transpile stage 1 properties from *.js using "ignoreDiagnostics": [8014].

useBabel (boolean) (default=false)

Invoke Babel to transpile files. Useful with ES6 target. Please see useCache option
which can improve warm-up time.

If you're using babelOptions, anything in .babelrc will take precedence. This breaks expected usage for scenarios where you need two sets of Babel configs (example: one for Webpack, one for your build tools).

You may want to "babelrc": false to disable .babelrc if you don't want it:

{
    "useBabel": true,
    "babelOptions": {
        "babelrc": false, /* Important line */
        "presets": [
            ["@babel/preset-env", { "targets": "last 2 versions, ie 11", "modules": false }]
        ]
    },
    "babelCore": "@babel/core", // needed for Babel v7
}

babelCore (string) (default=undefined)

Override the path used to find babel-core. Useful if node_modules is installed in a non-standard place or webpack is being invoked from a directory not at the root of the project.

For Babel 7, this should be set to "@babel/core".

babelOptions (object) (default=null)

Use this option to pass some options to Babel (e.g. presets). Please note that
.babelrc file is more universal way to do this.

useCache (boolean) (default=false)

Use internal file cache. This is useful with Babel, when processing takes a long time to complete. Improves warm-up time.

usePrecompiledFiles (boolean) (default=false)

Use pre-compiled files if any. Files must be named as {filename}.js and {filename}.map.

cacheDirectory (string) (default='.awcache')

Directory where cache is stored.

reportFiles (string[])

Specify globs to report file diagnostics. ALL OTHER ERRORS WILL NOT BE REPORTED. Example:

reportFiles: [
    "src/**/*.{ts,tsx}"
]

getCustomTransformers (string | ((program: ts.Program) => ts.CustomTransformers | undefined)) (default=undefined)

Provide custom transformers, TypeScript 2.4.1+. Example:

const styledComponentsTransformer = require('typescript-plugin-styled-components').default;
const keysTransformer = require('ts-transformer-keys/transformer').default;

// ...
rules: [
    {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        options: {
            // ... other loader's options
            getCustomTransformers: program => ({
                before: [
                    styledComponentsTransformer(),
                    keysTransformer(program)
                ]
            })
        }
    }
]

Compiler options

You can pass compiler options inside the loader query string or in a TS config file.

rollup-plugin-visualizer

Author: Denis Bardadym

Description: [](https://npmjs.org/package/rollup-plugin-visualizer) [](https://travis-ci.com/btd/rollu

Homepage: https://github.com/btd/rollup-plugin-visualizer

Created	over 3 years ago
Last Updated	about 2 months ago
License	MIT
Maintainers	1
Releases	60
Direct Dependencies	mkdirp, nanoid, open, pupa, source-map and yargs

README

Rollup Plugin Visualizer

Visualize and analyze your Rollup bundle to see which modules are taking up space.

Screenshots

Installation

npm install --save-dev rollup-plugin-visualizer

or via yarn:

yarn add --dev rollup-plugin-visualizer

Usage

import visualizer from 'rollup-plugin-visualizer';

//...
plugins: [
  visualizer()
],
//...

Options

filename (string, default stats.html) - name of the file with diagram to generate

title (string, default Rollup Visualizer) - title tag value

sourcemap (boolean, default false) - Use sourcemaps to calculate sizes (e.g. after UglifyJs or Terser)

open (boolean, default false) - Open generated file in default user agent

template (string, default treemap) - Which digram type to use: sunburst, treemap, circlepacking, network (very early stage, feedback welcomed)

extraStylePath (string, default undefined) - Link your own css file to override or enhance the current templates deprecated

chartParameters.width (number, default undefined) - Set svg viewBox width to this number

chartParameters.height (number, default undefined) - Set svg viewBox height to this number

json (boolean, default false) - Product portable json file that can be used with plugin CLI util to generate graph from several json files. Every UI property ignored in this case.

CLI

This plugin provides cli util rollup-plugin-visualizer. Add --help to check actual options. It can be used like:

rollup-plugin-visualizer [OPTIONS] stat1.json stat2.json ../stat3.json

This can be usefull in case you have different config files in the same project and you want to display all of them in the same chart.

Build plugin

For development if you need to build plugin, just exec:

yarn run build

Disclaimer about generated files

Generated html files do not and never will contain your source code (contents of files). They can contain only js/html/css code required to build chart (plugin code) and statistical information about your source code.

This statistical information can contain:

• size of files included in bundle
• size of files included in source map
• file's path
• files hierarchy (fs tree for your files)

Upgrades

See CHANGELOG.md.

Acknowledgements

Initially this plugin was based on webpack-visualizer, but in the end used only styles and layout. Thanks to the tons of people around internet for great examples of d3 usage. Also i would like to thank you Mike Bostock for awesome D3, and tons of examples.

Generated by 🚫 dangerJS against 9a8228c

[codecov]

Codecov Report

Merging #278 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #278   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          72     72           
  Lines        1553   1553           
  Branches      293    293           
=====================================
  Hits         1553   1553

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7f7cfbf...9a8228c. Read the comment docs.