Skip to content

React Hot Loader 4, TypeScript 2.9.0
Compare
Choose a tag to compare
@onigoetz onigoetz released this 10 Jul 07:56
· 2800 commits to master since this release
v1.2.0
4c8bf24

Highlights

  • Updated to React Hot Loader 4, easier to install and use
  • Updated to Typescript 2.9
  • Lazy load dependencies for faster command startup and not loading unused libraries
  • Change UglifyJS configuration to compress faster
  • Added crafty help to list available tasks and commands

Changes

crafty-preset-react

React Hot Loader 4

Moving from React Hot Loader 3 to 4 meant a lot of changes inside Crafty, especially for TypeScript, but will only require a small change on your side.

React Hot Loader 3 required this :

import React from "react";
import ReactDOM from "react-dom";
import {AppContainer} from "react-hot-loader";

import App from "./containers/App";
 
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById("root"),
  );
};

render(App);

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept("./containers/App", () => {
    render(App);
  });
}

Which can now be returned to

import React from "react";
import ReactDOM from "react-dom";

import App from "./containers/App";

ReactDOM.render(
  <App />,
  document.getElementById("root"),
);

But in exchange the App Component (The root of your react app) must be wrapped in hot(module)(YourComponent);

import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default hot(module)(App);

crafty-preset-typescript

TypeScript 2.9

No change is required on your side to benefit from this update.

Running Babel after TypeScript in Webpack

After running the TypeScript loader, we now run babel in order to apply the optimizations that babel can do, like inlining React components and applying plugins like React Hot Loader

crafty-preset-jest

  • Fix code coverage collection in Jest #21

UglifyJS Configuration

We made some changes to the UglifyJS Configuration to disable advanced compression techniques as they are slow and don't bring a lot of improvement overall.
You can re-enable these options if you wish in your own crafty.config.js

Internal Changes

  • Use yarn for development instead of npm
  • Lazy load dependencies to make crafty faster

Version updates

[babel-preset-swissquote, crafty-preset-babel, crafty-preset-typescript] Update @babel/* to 7.0.0-beta.52
[babel-preset-swissquote] Updated babel-plugin-transform-react-remove-prop-types from 0.4.12 to 0.4.13
[crafty-preset-babel] Updated babel-loader to 8.0.0-beta.3
[crafty-preset-babel] Updated babel-preset-jest to 23.2.0
[crafty-preset-babel] Updated eslint to 5.1.0
[crafty-preset-babel] Updated gulp-eslint to 5.0.0
[crafty-preset-babel] Updated rollup-plugin-babel to 4.0.0-beta.5
[crafty-preset-jest] Updated jest-cli to 23.3.0
[crafty-preset-postcss] Updated css-loader to 1.0.0
[crafty-preset-postcss] Updated gulp-rename to 1.3.0
[crafty-preset-postcss] Updated mini-css-extract-plugin to 0.4.1
[crafty-preset-postcss] Updated postcss to 6.0.23
[crafty-preset-postcss] Updated postcss-loader to 2.1.5
[crafty-preset-postcss] Updated postcss-scss to 1.0.6
[crafty-preset-postcss] Updated stylelint to 9.3.0
[crafty-preset-postcss] Updated webpack to 4.15.1
[crafty-preset-react] Updated react-hot-loader to 4.3.3
[crafty-preset-react] Updated react-test-renderer to 16.4.1
[crafty-preset-typescript] Updated rollup-plugin-typescript2 to 0.15.1
[crafty-preset-typescript] Updated ts-jest to 23.0.0
[crafty-preset-typescript] Updated tslint to 5.10.0
[crafty-preset-typescript] Updated tslint-eslint-rules to 5.3.1
[crafty-preset-typescript] Updated typescript to 2.9.2
[crafty-runner-rollup] Updated rollup to 0.62.0
[crafty-runner-rollup] Updated rollup-plugin-json to 3.0.0
[crafty-runner-rollup] Updated rollup-plugin-uglify to 4.0.0
[crafty-runner-webpack] Removed service-port, replaced by hash-index
[crafty-runner-webpack] Updated uglifyjs-webpack-plugin to 1.2.7
[crafty-runner-webpack] Updated webpack to 4.15.1
[crafty-runner-webpack] Updated webpack-chain to 4.8.0
[crafty-runner-webpack] Updated webpack-merge to 4.1.3
[crafty] Update browserslist to 4.0.0
[crafty] Update enhanced-resolve to 4.1.0
[eslint-plugin-swissquote] Updated babel-eslint to 9.0.0-beta.1
[eslint-plugin-swissquote] Updated eslint-plugin-import to 2.13.0
[eslint-plugin-swissquote] Updated eslint-plugin-react to 7.10.0
[postcss-swissquote-preset] Updated autoprefixer to 8.6.5
[postcss-swissquote-preset] Updated browserslist to 4.0.0
[postcss-swissquote-preset] Updated postcss to 6.0.23
[postcss-swissquote-preset] Updated postcss-dir-pseudo-class to 4.0.0
[stylelint-config-swissquote] Updated stylelint-scss to 3.1.3

Assets 2