feat(playgrodd-core): set babel on the fly

examples/basic/.babelrc

@@ -1,8 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
   "plugins": [
     "emotion"
   ]

examples/basic/package.json

@@ -16,9 +16,6 @@
     "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0-beta.42",
-    "@babel/preset-env": "^7.0.0-beta.42",
-    "@babel/preset-react": "^7.0.0-beta.42",
     "babel-plugin-emotion": "^9.0.1"
   }
 }

packages/playgrodd-core/package.json

@@ -22,11 +22,13 @@
     "babel-types": "^6.26.0",
     "babylon": "^6.18.0",
     "connect-history-api-fallback": "^1.5.0",
+    "deepmerge": "^2.1.0",
     "del": "^3.0.0",
     "express": "^4.16.3",
     "fast-glob": "^2.2.0",
     "html-webpack-plugin": "^3.1.0",
     "mkdirp": "^0.5.1",
+    "react-hot-loader": "^4.0.0",
     "webpack": "^4.2.0",
     "webpack-dev-middleware": "^3.0.1",
     "webpack-hot-middleware": "^2.21.2"
@@ -35,6 +37,7 @@
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
     "@types/connect-history-api-fallback": "^1.3.1",
+    "@types/deepmerge": "^2.1.0",
     "@types/del": "^3.0.0",
     "@types/express": "^4.11.1",
     "@types/mkdirp": "^0.5.2",

packages/playgrodd-core/src/compiler/create-config.ts

@@ -1,45 +1,39 @@
-import * as fs from 'fs'
 import * as path from 'path'
-import * as findup from 'find-up'
 import { Loader, Configuration } from 'webpack'
 import * as webpack from 'webpack'
 import * as HtmlWebpackPlugin from 'html-webpack-plugin'
+import * as merge from 'deepmerge'
 
 import { IEntryObj } from './files-parser'
+import { loadConfig } from '../utils/load-config'
 import * as paths from '../config/paths'
 
-const babelLoader = (babelrc: string | null): Loader => ({
-  loader: require.resolve('babel-loader'),
-  options: babelrc
-    ? JSON.parse(babelrc)
-    : {
-        babelrc: false,
-        cacheDirectory: true,
-        presets: [
-          require.resolve('@babel/preset-env'),
-          require.resolve('@babel/preset-react'),
-        ],
-      },
-})
+const babelLoader = (): Loader => {
+  const babelrc = loadConfig('babel', null)
+  const options = merge(babelrc, {
+    babelrc: false,
+    cacheDirectory: true,
+    presets: [
+      require.resolve('@babel/preset-env'),
+      require.resolve('@babel/preset-react'),
+    ],
+    plugins: [require.resolve('react-hot-loader/babel')],
+  })
+
+  return {
+    options,
+    loader: require.resolve('babel-loader'),
+  }
+}
 
 export const createConfig = async (
   entries: IEntryObj[]
 ): Promise<Configuration> => {
-  const babelrcPath = findup.sync(['.babelrc', 'babelrc.js'])
-  const babelrc = babelrcPath ? fs.readFileSync(babelrcPath, 'utf-8') : null
-
   return {
     mode: 'development',
     context: paths.ROOT,
     devtool: '#source-map',
-    entry: [
-      require.resolve('babel-polyfill'),
-      `${require.resolve(
-        'webpack-hot-middleware/client'
-      )}?path=/__webpack_hmr&timeout=20000'`,
-      ...entries.map(entry => entry.filepath),
-      paths.INDEX_JS,
-    ],
+    entry: [require.resolve('babel-polyfill'), paths.INDEX_JS],
     output: {
       pathinfo: true,
       path: paths.DIST,
@@ -56,7 +50,7 @@ export const createConfig = async (
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           include: [paths.ROOT],
-          use: babelLoader(babelrc),
+          use: babelLoader(),
         },
       ],
     },
@@ -67,6 +61,10 @@ export const createConfig = async (
         src: path.join(paths.ROOT, 'src'),
       },
     },
+    devServer: {
+      contentBase: paths.DIST,
+      hot: true,
+    },
     plugins: [
       new webpack.NamedModulesPlugin(),
       new webpack.HotModuleReplacementPlugin(),

packages/playgrodd-core/src/utils/load-config.ts

@@ -0,0 +1,35 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import * as findup from 'find-up'
+import * as merge from 'deepmerge'
+
+const finds = (name: string): string[] => [
+  `${name}.json`,
+  `.${name}rc`,
+  `${name}rc.js`,
+  `${name}rc.json`,
+  `${name}rc.yml`,
+  `${name}rc.yaml`,
+  `${name}.config.js`,
+  `${name}.config.json`,
+]
+
+export const loadConfig = (name: string, defaultConfig: any = {}) => {
+  let file
+  const filepath = findup.sync(finds(name))
+
+  if (filepath) {
+    try {
+      const isJS = path.extname(filepath) === '.js'
+
+      file = isJS
+        ? require(filepath)
+        : JSON.parse(fs.readFileSync(filepath, 'utf-8'))
+    } catch (err) {
+      // console.log(err)
+      file = defaultConfig
+    }
+  }
+
+  return defaultConfig !== null ? merge(defaultConfig, file) : file
+}