v0.18.0

Highlights

Webpack 4

The full changelog of what change in webpack since version 3 is here -> https://github.com/webpack/webpack/releases/tag/v4.0.0

No npm-install-webpack-plugin

Since npm-install-webpack-plugin is not working with webpack 4, it's been replaced with simpler implementation inside Aik itself.

BREAKING: No relative imports...

Previously it was possible to import/require files relative to entry point e.g.:

// Import relative to the index.js
import comp2 from "components/comp2/comp2";

This feature has been removed as It's considered to be an anti-pattern and also it adds some extra complexity around auto installing npm modules.

---

Bug Fixes

• npm install logic to support namespaced modules (1ffe919)
• Properly define aliases for meow@4 (bb74da1)
• Properly identify wether port has changed or not (0cb8b6b)
• Suppress webpack 4 deprecation warnings (43ea2c0)

Features

• Auto install npm modules without npm-install-webpack-plugin (50865a4)
• Clean up Module not found messages (32b2b8e), closes #306
• Drop node < 6 support (79c6380)
• Ignore *.min.js files from eslint and babel loaders (d316f06), closes #317
• Removed annoying eslint rules (aacf679), closes #316
• webpack 4 🎉💣🚀 (a6d5894)
• BREAKING: Remove aliases (74c0ce5)

v0.17.0

Highlights

New Logo 🎉🦄⭐️

Custom .babelrc support

From version 0.17 Aik picks up custom .babelrc config and uses plugins and preset from it. That should allow for better customization as well as satisfy those who wanted to use experimental features that are not yet enabled in Aik by default.

Redeclaring presets that already being used by Aik is not allowed for the sake of stability. Aik spills a lot of warnings when it encounters clashing preset/extension:

webpack 2 -> webpack 3

Now Aik uses webpack 3 which should improve performance and stability.

React Autodetection

No need for -r flag anymore! Aik now can derive framework that's being used from an entry point, either by analyzing imports or using special comment:

// aik-mode: react

More in the docs.

---

Bug Fixes

• Set of small changes (b5d2731)

Features

• Add support for object-rest-spread operator and for class properties (7aa7647)
• Auto-detect usage of React (11b5aec)
• Update cli message, more concise format (ec56f10)
• Webpack 3 🎉 (5d0815b)

v0.16.1

Bug Fixes

• Add babel-polyfill to dependencies (399fdee)

v0.16.0

Highlights

Better messages

Quick commands

For some frameworks Aik provides additional support in the way of quick commands:

React

In order to use quick commands feature with react and enable hot loading entry point of an application should export react component:

import React from "react";

export default function App() {
  return (
    <div>My React App.</div>
  );
}

Also, you need to run aik with -r flag:

aik index.js -r

This will wrap react component in RHL compatible wrapper enabling hot reloading for react components and also mounts component to an element with id app.

---

Bug Fixes

• Add more places where Aik clears console (5c6c48c)
• Bump dependencies and fix new flow errors (d5a9de4)
• Fix webpack2 + ngrok (43955c3)

Features

• Add more filters for error messages and warnings (283aa6a)
• Add tree shaking support (c354932)
• babel-preset-latest -> babel-preset-env (3d6700f)
• Clean up all messages (c0c8d8e)
• Create package.json automatically (28312c0)
• eslint-loader 1.8.0 (df6b67a)
• eslint-plugin-react 7.1.0 (74a5a9c)
• npm-install-webpack-plugin -> npm-install-webpack2-plugin (2d305a6)
• Quick export for react components and new RHL (02a6c37)
• Remove annoying warning about react when react has already been installed (d290ed9)
• Update eslint-plugin-react rules (cf8605f)
• Update to ESLint 4 (71fdb16)

v0.15.0

Highlights

webpack 1 -> webpack 2

In this release has happened huge update — now Aik uses webpack 2 and webpack-dev-server 2. It's not only will help aik to get latest updates for webpack, but also has added couple of new features, and one of the most important of which is:

Error Overlay

So you don't have to look back to console to see errors which block compilation.

Source Maps for CSS are back!!!

Couple of releases back I had to disable css source maps due to problems with image urls in inline source maps. Now they are back! Thanks to an issue fixed in style-loader webpack-contrib/style-loader#186

Pre-installing npm modules

Previously even if project had the package.json file Aik would ignore it in favor of npm-install-webpack-plugin, that caused some issue when code expected previous major version of a dependency, but npm-install-webpack-plugin always installs the latest one. Now when Aik finds the package.json file it runs npm install in order to get proper version of modules declared in it.

Bye bye CSS Modules

It's the only breaking change in version 0.15.0 and was induced by constant confusion when some of prototypes are using css modules but some of them not. Which lead to necessity to remember when to add -c flag and when not to. Also according to statistic I collect through Google Analytics almost nobody was using it, probably because of more popular ways of doing css (e.g. styled-components) now days.

By removing this flag I hope there will be less confusion working with css.

CHANGELOG

Bug Fixes

• dev-server: Fix port detecting (092a6c6)
• fix build bailing early when there is an error (9286e70)

Features

• eslint: Update eslint rules (d93d0fb)
• Enable css source maps again (01cf7f4)
• Pre-installing npm modules if project contains package.json (7015901)
• Remove css modules option (a29dc0e)
• webpack 1 -> webpack 2 (7e24d6d)

BREAKING CHANGES

• -c option doesn't exist anymore

v0.14.0

Bug Fixes

• webpack: Disable sourcemaps for css (deb9d24)
• webpack: Fix deprication warning from postcss-import (18504ce)
• webpack: Fix hot reloading was broken by wired config for url-loader (7387d46)
• webpack: Invalidate build when new module has been added and -r flag is enabled (93eac9a), closes #121

Features

• messages: Some nitpicking with messages (bdd07ff)
• package: Remove url-loader in favor of simple file-loader (169261d)
• react-hot-loader: Preinstall react and react-dom for -r option (3307231)
• webpack: Compress files served by webpack-dev-server (75bb55e)

Reverts

• package: Revert update of html-webpack-plugin b/c it blows up everyrhing (eb18755)

v0.13.0

Highlights

Webpack-dev-server and images from css

Fixed issue with image from stylesheets not being loaded when using webpack-dev-server.
Releated issue in style-loader: webpack-contrib/style-loader#96

Support react@15.4 in react-hot-loader

In React 15.4.0 facebook has completely removed ReactDOM from React package itself. React-Hot-Loader depends on some internal libs inside react package which made it imposible to use since version 15.4 arrived. To work around this issue I had to make some changes which led to only support react 15.4+ in aik.

Related links:
https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html
gaearon/react-hot-loader#417 (comment)

Usage Statistic

Since this version aik starts collecting anonymous statistic using yeoman's insight module.

It's optin feature. Aik will ask you about collecting statistic when you first run it after update:

That will help me better understand what flags are being used most. And how many people actually uses Aik.

Relative Module Pathes

Let's assume such project structure:

├── index.js
└── components
    ├── comp1
        └── comp1.js
    └── comp2
        └── comp2.js

And if you want to import comp2.js from comp1.js you can do it using both these ways:

// comp1.js

// Import relative to the index.js
import comp2 from 'components/comp2/comp2';

// Or import relative to comp1.js
import comp2 from '../comp2/comp2';

Choose the way you like more.

---

CHANGELOG

Bug Fixes

• react-hot-loader: Fix issue with public-path helper and react-hot-loader (13e933b)
• react-hot-loader: Support react 15.4.x (203ad3a)
• webpack: Images are not being loaded using webpack-dev-server (84f8a68)
• webpack: Use fork of npm-install-webpack plugin (a63bb8d), closes #119

Features

• Collect anonymus usage statistic (dc2446c)
• webpack: Adds entry file directory as module directory (17bb324)

v0.12.1

Bug Fixes

• dev-server: Fix wiping file (e6458c0)

v0.12.0

Better and more consistent messages

All messages were improved and made more consistent. Here is a page with all kinds of messages that Aik produces.

Example:

Dev Server Successfully Compiled

Automatically change a port if default is in use

Aik will automatically change a port if default is in use. So you don't have to worry about silly EADDRINUSE errors.

Suggest creating a file if it's not exist

If you try to open a file which is not exist Aik will prompt you with creating this file.

Or will fail in build mode:

Examples

Working on 0.12 release I've made a repo with example web applications/prototypes using Aik. Repo includes tutorials for popular frameworks, TodoMVC etc. I'll continue add new examples, but you can already take a look on how Aik might be used.

These examples are used as heavy tests for Aik releases. So I'll try to keep them up to date.

Don't hesitate to take a look 🤖 ⚡️ ⬇

Aik Examples

---

Bug Fixes

• messages: Fix indentation for base path in build messages (af427d4)
• webpack: Fix default template path (e70b9c4)

Features

• Suggest creating a file if it's not exist (19a1758)
• deps: Update eslint to 3.7.0 (b57a49e)
• dev server: Automatically change port if default is in use (f00bd1a)
• dev server: Show initial "Compiling..." message (b694ab2)
• eslint: Update eslint-plugin-react rules (b33422f)
• messages: Better and more consistent messages (9c63560)
• webpack: Add more extensions to url and file loaders (dac24c1)
• webpack: Correct source maps for css files (b79de1c)
• webpack: Entry name depends on file name (2d2502a)

v0.11.0

Highlights

Better built-in template

• Added meta with device-width and initial-scale
• Added div#app where you can render app right away. Previously it was possible to render to body or to create element using document.createElement and append it to the body.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Flow

All Aik code itself is flow typed now. I hope It will help avoid silly mistakes and makes code more reliable.

Babel

From this point Aik uses Babel preset "latest" which includes all yearly presets. This means more seamless updates for babel supported features.

postcss-import -> postcss-partial-import

Postcss-import was replaced in favour of postcss-partial-import. The reason was that postcss-import includes more than 248 dependencies which leads to unreasonable long install time. According to slow-deps package, installing only postcss-import (on my internet and laptop) might take more than 1.5 minute.

Custom template path in messages

Both dev server and build messages show custom template path if exists:

---

Bug Fixes

• build: Correct flags and path for dist (5a0c129)

Features

• babel: Move to "latest" preset (1bc4cd9)
• eslint: Update eslint config and remove babel-eslint (60510ca)
• messages: Add custom template path to messages (9b9a433)
• webpack: Better default template for html webpack plugin (5efa428)
• webpack: Replace postcss-import with postcss-partial-import (3883564)