feat: add jsx babel plugins

config/build/babelrc.js

@@ -11,9 +11,11 @@ import pluginNodeEnvInline from 'babel-plugin-transform-node-env-inline';
 import pluginMinifyDeadCodeElimination from 'babel-plugin-minify-dead-code-elimination';
 import pluginMinifyGuardedExpressions from 'babel-plugin-minify-guarded-expressions';
 import pluginDiscardModuleReferences from 'babel-plugin-discard-module-references';
+import pluginReactJsxSource from 'babel-plugin-transform-react-jsx-source';
+import pluginReactJsxSelf from 'babel-plugin-transform-react-jsx-self';
 import { vitaminResolve } from '../utils';
 
-export default env => ({
+export default (env, dev) => ({
     presets: [
         env === 'client' && [preset2015, { modules: false }],
         presetReact,
@@ -24,10 +26,14 @@ export default env => ({
     plugins: [
         // Make optional the explicit import of React in JSX files
         pluginReactRequire,
-        // Add Object.entries, Object.values and other ES2017 functionalities
-        // in the client, we prefer solution like https://polyfill.io/v2/docs/, to keep the
+        // Add Object.entries, Object.values and other ES2017 functionalities.
+        // In the client, we prefer solution like https://polyfill.io/v2/docs/, to keep the
         // bundle size the smallest possible.
         env === 'server' && pluginTransformRuntime,
+        // Adds component stack to warning messages
+        dev && pluginReactJsxSource,
+        // Adds __self attribute to JSX which React will use for some warnings
+        dev && pluginReactJsxSelf,
         // replace process.env.NODE_ENV by its current value
         pluginNodeEnvInline,
         // replace IS_CLIENT and IS_SERVER

config/build/webpack.config.client.js

@@ -19,7 +19,7 @@ export default function clientConfig(options) {
         },
         module: {
             rules: [
-                createBabelLoader('client'),
+                createBabelLoader('client', options.dev),
                 createResolveConfigLoader(),
             ],
         },

config/build/webpack.config.common.js

@@ -16,14 +16,14 @@ const VITAMIN_MODULES_DIRECTORY = vitaminResolve('node_modules');
 const VITAMIN_MODULES_EXAMPLES_DIRECTORY = vitaminResolve('examples');
 const MODULES_DIRECTORIES = [appResolve('node_modules'), VITAMIN_MODULES_DIRECTORY];
 
-export const createBabelLoader = env => ({
+export const createBabelLoader = (env, dev) => ({
     test: /\.js(x?)$/,
     loader: 'babel-loader',
     include: path => !path.includes('node_modules') ||
         (path.startsWith(VITAMIN_DIRECTORY)
          && !path.startsWith(VITAMIN_MODULES_DIRECTORY)
          && !path.startsWith(VITAMIN_MODULES_EXAMPLES_DIRECTORY)),
-    query: babelrc(env),
+    query: babelrc(env, dev),
 });
 
 export const createResolveConfigLoader = () => ({

config/build/webpack.config.server.js

@@ -55,7 +55,7 @@ export default function serverConfig(options) {
 
         module: {
             rules: [
-                createBabelLoader('server'),
+                createBabelLoader('server', options.dev),
                 createResolveConfigLoader(),
             ],
         },

config/build/webpack.config.tests.js

@@ -11,7 +11,7 @@ export default function testConfig(options) {
         },
         module: {
             loaders: [
-                createBabelLoader('client'),
+                createBabelLoader('client', true),
                 // The following loader will resolve the config to its final value during the build
                 {
                     test: vitaminResolve('config/index'),

package.json

@@ -48,6 +48,8 @@
     "babel-plugin-react-require": "^3.0.0",
     "babel-plugin-transform-export-default-name-forked": "^1.2.2",
     "babel-plugin-transform-node-env-inline": "^6.8.0",
+    "babel-plugin-transform-react-jsx-self": "^6.22.0",
+    "babel-plugin-transform-react-jsx-source": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-es2015-node6": "^0.4.0",