Update: React project base with Refresh and Linaria support 🎊 (#75)

BREAKING CHANGE: React projects must install Refresh and Linaria packages

README.md

@@ -86,22 +86,25 @@ module.exports = function babelConfigs() {
     target: 'node|react',
   })
 
-  /* Optionally override the base configs as needed */
+  /* Optionally override the base configs as needed... */
 
   return baseConfigs
 }
 ```
 
-**3. Setup polyfills**
+## React projects
 
-React projects should also setup polyfills for unsupported language features.
+**1. Install packages**
 
 ```sh
+# Install polyfills included in application bundle
 npm i core-js regenerator-runtime -E
+
+# Install Linaria preset as a dev dependency
+npm i @linaria/babel-preset react-refresh -DE
 ```
 
-ℹ️ Note that because these packages will be included in the application bundle
-they should be installed as `dependencies`.
+**2. Import polyfills**
 
 ```javascript
 // src/index.js

package.json

@@ -34,27 +34,26 @@
     "clean": "rm -rf dist types"
   },
   "dependencies": {
-    "@babel/core": "7.12.7",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-private-methods": "7.12.1",
-    "@babel/plugin-transform-runtime": "7.12.1",
-    "@babel/preset-env": "7.12.7",
-    "@babel/preset-react": "7.12.7",
-    "@babel/preset-typescript": "7.12.7",
+    "@babel/core": "7.14.3",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-proposal-private-methods": "7.13.0",
+    "@babel/plugin-transform-runtime": "7.14.3",
+    "@babel/preset-env": "7.14.4",
+    "@babel/preset-react": "7.13.13",
+    "@babel/preset-typescript": "7.13.0",
     "babel-plugin-transform-import-aliases": "1.2.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24"
   },
   "devDependencies": {
-    "@babel/cli": "7.12.7",
-    "@crystal-ball/commitizen-base": "2.9.0",
-    "@crystal-ball/prettier-base": "2.4.0",
-    "@crystal-ball/semantic-release-base": "2.23.0",
-    "@types/jest": "26.0.15",
-    "@types/node": "14.14.9",
-    "eslint-config-eloquence": "16.7.1",
-    "husky": "4.3.0",
-    "jest": "26.6.3",
-    "typescript": "4.1.2"
+    "@babel/cli": "7.14.3",
+    "@crystal-ball/commitizen-base": "2.11.0",
+    "@crystal-ball/prettier-base": "2.7.0",
+    "@crystal-ball/semantic-release-base": "2.32.0",
+    "@types/jest": "26.0.23",
+    "@types/node": "15.12.1",
+    "eslint-config-eloquence": "19.1.0",
+    "jest": "27.0.4",
+    "typescript": "4.3.2"
   },
   "config": {
     "commitizen": {

src/__snapshots__/index.spec.js.snap

@@ -2,12 +2,13 @@
 
 exports[`babelBase when called with target node, then node babel configs are returned 1`] = `
 Object {
+  "env": Object {},
   "plugins": Array [
     Array [
       "@babel/plugin-transform-runtime",
       Object {
         "useESModules": false,
-        "version": "7.12.5",
+        "version": "7.14.0",
       },
     ],
     Array [
@@ -37,19 +38,28 @@ Object {
 exports[`babelBase when called with target react for dev, then development react configs are returned 1`] = `
 Object {
   "env": Object {
-    "development": Object {},
+    "development": Object {
+      "plugins": Array [
+        "react-refresh/babel",
+      ],
+    },
     "production": Object {
       "plugins": Array [
         "transform-react-remove-prop-types",
       ],
     },
+    "test": Object {
+      "presets": Array [
+        "@linaria",
+      ],
+    },
   },
   "plugins": Array [
     Array [
       "@babel/plugin-transform-runtime",
       Object {
         "useESModules": true,
-        "version": "7.12.5",
+        "version": "7.14.0",
       },
     ],
     Array [
@@ -86,19 +96,28 @@ Object {
 exports[`babelBase when called with target react for prod, then production react configs are returned 1`] = `
 Object {
   "env": Object {
-    "development": Object {},
+    "development": Object {
+      "plugins": Array [
+        "react-refresh/babel",
+      ],
+    },
     "production": Object {
       "plugins": Array [
         "transform-react-remove-prop-types",
       ],
     },
+    "test": Object {
+      "presets": Array [
+        "@linaria",
+      ],
+    },
   },
   "plugins": Array [
     Array [
       "@babel/plugin-transform-runtime",
       Object {
         "useESModules": true,
-        "version": "7.12.5",
+        "version": "7.14.0",
       },
     ],
     Array [
@@ -135,19 +154,28 @@ Object {
 exports[`babelBase when called with target react for test, then test react configs are returned 1`] = `
 Object {
   "env": Object {
-    "development": Object {},
+    "development": Object {
+      "plugins": Array [
+        "react-refresh/babel",
+      ],
+    },
     "production": Object {
       "plugins": Array [
         "transform-react-remove-prop-types",
       ],
     },
+    "test": Object {
+      "presets": Array [
+        "@linaria",
+      ],
+    },
   },
   "plugins": Array [
     Array [
       "@babel/plugin-transform-runtime",
       Object {
         "useESModules": false,
-        "version": "7.12.5",
+        "version": "7.14.0",
       },
     ],
     Array [

src/index.spec.js

@@ -3,19 +3,19 @@ jest.mock('path')
 import { babelBase } from '.'
 
 describe('babelBase', () => {
-  test('when called with target node, then node babel configs are returned', () => {
+  it('when called with target node, then node babel configs are returned', () => {
     expect(babelBase({ env: 'development', target: 'node' })).toMatchSnapshot()
   })
 
-  test('when called with target react for dev, then development react configs are returned', () => {
+  it('when called with target react for dev, then development react configs are returned', () => {
     expect(babelBase({ env: 'development', target: 'react' })).toMatchSnapshot()
   })
 
-  test('when called with target react for test, then test react configs are returned', () => {
+  it('when called with target react for test, then test react configs are returned', () => {
     expect(babelBase({ env: 'test', target: 'react' })).toMatchSnapshot()
   })
 
-  test('when called with target react for prod, then production react configs are returned', () => {
+  it('when called with target react for prod, then production react configs are returned', () => {
     expect(babelBase({ env: 'production', target: 'react' })).toMatchSnapshot()
   })
 })

src/index.ts

@@ -2,17 +2,15 @@
  * Babel entry
  */
 
-import { TransformOptions } from '@babel/core'
-
-import { Env } from './types'
 import nodeConfigs from './node'
 import reactConfigs from './react'
+import { BaseTransformOptions, Env } from './types'
 
 type Options = {
   env: Env
   target: 'node' | 'react'
 }
 
-export function babelBase({ env, target }: Options): TransformOptions {
+export function babelBase({ env, target }: Options): BaseTransformOptions {
   return target === 'node' ? nodeConfigs() : reactConfigs(env)
 }

src/node.ts

@@ -1,9 +1,9 @@
 import fs from 'fs'
 import path from 'path'
 
-import { TransformOptions } from '@babel/core'
+import { BaseTransformOptions } from './types'
 
-export default function nodeConfigs(): TransformOptions {
+export default function nodeConfigs(): BaseTransformOptions {
   return {
     presets: [
       [
@@ -57,5 +57,6 @@ export default function nodeConfigs(): TransformOptions {
         { aliases: { '@': path.resolve(fs.realpathSync(process.cwd()), 'src') } },
       ],
     ],
+    env: {},
   }
 }

src/react.ts

@@ -1,9 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { TransformOptions } from '@babel/core'
-
-import { Env } from './types'
+import { BaseTransformOptions, Env } from './types'
 import { testEnv } from './test-env'
 
 /**
@@ -47,7 +45,7 @@ import { testEnv } from './test-env'
  *   compilation) Note that enabling this requires adding `@babel/runtime-corejs3`
  *   as a dependency.
  */
-export default function reactConfigs(env: Env): TransformOptions {
+export default function reactConfigs(env: Env): BaseTransformOptions {
   return {
     // --------------------------------------------------------
     // Presets
@@ -114,16 +112,28 @@ export default function reactConfigs(env: Env): TransformOptions {
       ],
     ],
 
+    // --------------------------------------------------------
+    // Environments
     env: {
       development: {
-        /* Namespace created for easy assingment of dev options by consumers */
+        plugins: [
+          // Babel transform for "Fast Refresh"
+          'react-refresh/babel',
+        ],
       },
       production: {
         plugins: [
           // Strip component prop types in production builds
           'transform-react-remove-prop-types',
         ],
       },
+      test: {
+        presets: [
+          // The linaria webpack-loader includes this preset under the hood, provide it for
+          // test envs to prevent crashes
+          '@linaria',
+        ],
+      },
     },
   }
 }

src/test-env.spec.js

@@ -1,15 +1,15 @@
 import { testEnv } from './test-env'
 
 describe('babelBase', () => {
-  test('returns true for a single environment', () => {
+  it('returns true for a single environment', () => {
     expect(testEnv('development', ['development'])).toBe(true)
   })
 
-  test('returns true for a multiple environments', () => {
+  it('returns true for a multiple environments', () => {
     expect(testEnv('development', ['development', 'test'])).toBe(true)
   })
 
-  test('returns false when unmatched', () => {
+  it('returns false when unmatched', () => {
     expect(testEnv('development', ['production'])).toBe(false)
   })
 })

src/types.ts

@@ -1,2 +1,9 @@
+import { TransformOptions } from '@babel/core'
+
 /** Supported environment values */
 export type Env = 'development' | 'production' | 'test'
+
+/** Package transform options includes an env map by default */
+export type BaseTransformOptions = TransformOptions & {
+  env: { [environment: string]: TransformOptions }
+}