feat: Quick export for react components and new RHL

package.json

@@ -64,7 +64,7 @@
     "babel-core": "6.24.1",
     "babel-loader": "6.3.2",
     "babel-preset-env": "^1.4.0",
-    "babel-preset-latest": "6.24.1",
+    "babel-preset-react-hmre": "^1.1.1",
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",
     "css-loader": "0.28.0",
@@ -86,7 +86,7 @@
     "postcss-loader": "1.3.3",
     "postcss-partial-import": "3.1.1",
     "precss": "1.4.0",
-    "react-hot-loader": "1.3.1",
+    "react-hot-loader": "^3.0.0-beta.6",
     "resolve": "1.2.0",
     "style-loader": "0.16.1",
     "webpack": "2.4.1",

src/utils/npm.js

@@ -43,3 +43,9 @@ export function installAllModules(cwd: string) {
   foundPackageJson();
   spawnSync("npm", ["install", "--silent"], { cwd, stdio: "inherit" });
 }
+
+export function resolveModuleToCwd(moduleName: string) {
+  return path.dirname(
+    resolveModule.sync(moduleName, { basedir: process.cwd() })
+  );
+}

src/webpack/aliases.js

@@ -0,0 +1,21 @@
+/* @flow */
+import resolveToCwd from "./../utils/resolve-to-cwd";
+import { resolveModuleToCwd } from "./../utils/npm";
+
+type Aliases = { [string]: string };
+const aliases: Aliases = {};
+
+export default function createAliases(
+  filename: string,
+  flags: CLIFlags
+): Aliases {
+  if (flags.react) {
+    return Object.assign(aliases, {
+      aikReactEntryPoint: resolveToCwd(filename),
+      react: resolveModuleToCwd("react"),
+      "react-dom": resolveModuleToCwd("react-dom")
+    });
+  }
+
+  return aliases;
+}

src/webpack/assets/react-entry-point.js

@@ -0,0 +1,31 @@
+const React = require("react");
+const ReactDOM = require("react-dom");
+
+function renderEntry(exported) {
+  if (exported.default) {
+    exported = exported.default;
+  }
+
+  // Assumptions: the entry module either renders the app itself or exports a
+  // React component (which is either a function or class) or element (which has
+  // type and props properties).
+  var element;
+  if (Object.prototype.toString.call(exported) === "[object Function]") {
+    element = React.createElement(exported);
+  } else if (exported.type && exported.props) {
+    element = exported;
+  }
+  if (element) {
+    // eslint-disable-next-line
+    ReactDOM.render(element, document.getElementById("app"));
+  }
+}
+
+renderEntry(require("aikReactEntryPoint"));
+
+if (module.hot && process.env.NODE_ENV !== "production") {
+  // eslint-disable-next-line
+  module.hot.accept("aikReactEntryPoint", function() {
+    renderEntry(require("aikReactEntryPoint"));
+  });
+}

src/webpack/config-builder.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import path from "path";
+import aliases from "./aliases";
 import entry from "./entry";
 import output from "./output";
 import plugins from "./plugins";
@@ -22,7 +23,7 @@ export default function webpackConfigBuilder(
     bail: params.isProd,
     module: { rules: rules(flags, params) },
     resolve: {
-      alias: { "react/lib/ReactMount": "react-dom/lib/ReactMount" },
+      alias: aliases(filename, flags),
       extensions: [".js", ".jsx", ".json"],
       modules: [
         path.dirname(path.resolve(process.cwd(), filename)),

src/webpack/entry.js

@@ -1,7 +1,18 @@
 /* @flow */
 
-import path from 'path';
-import resolveToCwd from './../utils/resolve-to-cwd';
+import path from "path";
+import resolveToCwd from "./../utils/resolve-to-cwd";
+
+/**
+ * Return whether custom entry points for supported frameworks or path to provided file.
+ */
+export function getEntryPointPath(filename: string, flags: CLIFlags): string {
+  if (flags.react) {
+    return require.resolve("./assets/react-entry-point.js");
+  }
+
+  return resolveToCwd(filename);
+}
 
 /**
  * Build entry name from given filename.
@@ -11,41 +22,42 @@ import resolveToCwd from './../utils/resolve-to-cwd';
  * index.sth.js -> index
  */
 export function buildEntryName(filename: string): string {
-  return path.basename(filename).split('.')[0];
+  return path.basename(filename).split(".")[0];
 }
 
 /**
  * Entry for production build.
  */
-export function entryProd(filename: string): Entry {
+export function entryProd(filename: string, flags: CLIFlags): Entry {
   const entryName = buildEntryName(filename);
   return {
-    [entryName]: [resolveToCwd(filename)]
+    [entryName]: [getEntryPointPath(filename, flags)]
   };
 }
 
-
 /**
  * Entry for dev server.
  */
 export function entryDev(filename: string, flags: CLIFlags): Entry {
   const entryName = buildEntryName(filename);
-  const host = flags.host === '::' ? 'localhost' : flags.host;
+  const host = flags.host === "::" ? "localhost" : flags.host;
 
   return {
     [entryName]: [
-      `${require.resolve('webpack-dev-server/client')}?http://${host}:${flags.port}/`,
-      require.resolve('webpack/hot/dev-server'),
-      resolveToCwd(filename)
+      `${require.resolve("webpack-dev-server/client")}?http://${host}:${flags.port}/`,
+      require.resolve("webpack/hot/dev-server"),
+      getEntryPointPath(filename, flags)
     ]
   };
 }
 
 /**
  * Setups entry part of webpack config.
  */
-export default function entry(filename: string, flags: CLIFlags, params: AikParams): Entry {
-  return params.isProd
-    ? entryProd(filename)
-    : entryDev(filename, flags);
+export default function entry(
+  filename: string,
+  flags: CLIFlags,
+  params: AikParams
+): Entry {
+  return params.isProd ? entryProd(filename, flags) : entryDev(filename, flags);
 }

src/webpack/rules.js

@@ -9,29 +9,27 @@ import postcssPartialImport from "postcss-partial-import";
  * Creates loader for JavaScript files and add some extra features for dev server, like hot reloading.
  */
 export function createJSLoader(flags: CLIFlags, isProd: boolean): any[] {
+  const presets = [
+    require.resolve("babel-preset-react"),
+    [
+      require.resolve("babel-preset-env"),
+      {
+        targets: { ie: 11 }
+      }
+    ]
+  ];
+
+  if (flags.react && !isProd) {
+    presets.push(require.resolve("babel-preset-react-hmre"));
+  }
+
   const jsLoaders: { loader: string, query?: any }[] = [
     {
       loader: require.resolve("babel-loader"),
-      query: {
-        presets: [
-          require.resolve("babel-preset-react"),
-          [
-            require.resolve("babel-preset-env"),
-            {
-              targets: { ie: 11 }
-            }
-          ]
-        ]
-      }
+      query: { presets }
     }
   ];
 
-  if (!isProd && flags.react) {
-    jsLoaders.unshift({
-      loader: require.resolve("react-hot-loader")
-    });
-  }
-
   return jsLoaders;
 }
 
@@ -108,7 +106,7 @@ export function rules(flags: CLIFlags, params: AikParams): Loader[] {
     {
       test: /\.jsx?$/,
       enforce: "pre",
-      exclude: /(node_modules|bower_components)/,
+      exclude: /(node_modules|bower_components|aik\/lib\/webpack)/,
       loader: require.resolve("eslint-loader"),
       options: {
         configFile: path.join(__dirname, "..", "eslint-config.js"),