feat(logging): use babel-plugin-dev-expression for logging errors (#41)

* feat(logging): use babel-plugin-dev-expression for logging errors on both server+client

* refactor(example): example app installs src as node_module

* refactor(example): use localhost as host in hapi server

Author: natterstefan

.eslintrc.js

@@ -3,6 +3,9 @@ const path = require('path')
 module.exports = {
   extends: 'eslint-config-ns',
   plugins: ['react-hooks'],
+  globals: {
+    __DEV__: true,
+  },
   rules: {
     'jest/prefer-strict-equal': 'error',
     'no-underscore-dangle': 0,

babel.config.js

@@ -27,5 +27,7 @@ module.exports = {
     '@babel/plugin-transform-modules-commonjs',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-object-rest-spread',
+    // https://github.com/4Catalyzer/babel-plugin-dev-expression
+    'babel-plugin-dev-expression',
   ],
 }

example/.env

@@ -0,0 +1,2 @@
+# "production": will disable logging in the client
+NODE_ENV="development"

example/package-lock.json

@@ -5,7 +5,7 @@
   "main": "server/index.js",
   "private": true,
   "scripts": {
-    "build": "BABEL_ENV=production webpack -p",
+    "build": "NODE_ENV=production BABEL_ENV=production webpack -p",
     "prebuild": "rimraf dist",
     "start": "node .",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -17,7 +17,11 @@
     "type": "git",
     "url": "git+https://github.com/natterstefan/react-component-catalog.git"
   },
-  "keywords": ["react", "components", "registry"],
+  "keywords": [
+    "react",
+    "components",
+    "registry"
+  ],
   "author": "Stefan Natter <stefan@natter.at>",
   "license": "MIT",
   "bugs": {
@@ -28,25 +32,28 @@
     "babel-core": "6.x || ^7.0.0-bridge.0"
   },
   "dependencies": {
-    "@babel/register": "^7.4.4",
+    "@babel/register": "^7.5.5",
+    "dotenv": "^8.0.0",
     "hapi": "^18.1.0",
     "inert": "^5.1.3",
     "react": "^16.8.6",
+    "react-component-catalog": "file:..",
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "@babel/cli": "7.4.4",
-    "@babel/core": "7.4.5",
-    "@babel/plugin-proposal-class-properties": "7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "7.4.4",
+    "@babel/cli": "7.5.5",
+    "@babel/core": "7.5.5",
+    "@babel/plugin-proposal-class-properties": "7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
     "@babel/polyfill": "7.4.4",
-    "@babel/preset-env": "7.4.5",
+    "@babel/preset-env": "7.5.5",
     "@babel/preset-react": "7.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "8.0.6",
+    "babel-plugin-dev-expression": "^0.2.2",
     "nodemon": "1.19.1",
     "rimraf": "2.6.3",
-    "webpack": "4.31.0",
-    "webpack-cli": "3.3.5"
+    "webpack": "4.36.1",
+    "webpack-cli": "3.3.6"
   }
 }

example/package.json

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 require('@babel/register')({
   babelrc: true,
 })
@@ -8,9 +9,13 @@ async function startServer() {
   try {
     const server = await createServer()
     await server.start()
-    console.log('server running at:', server.info.uri)
+    console.log(
+      `Server running at: ${server.info.uri}`,
+      '\n- Open base: http://localhost:8000/base',
+      '\n- Open client: http://localhost:8000/client1',
+    )
   } catch (err) {
-    console.log(err)
+    console.error(err)
     process.exit(1)
   }
 }

example/server/index.js

@@ -2,7 +2,7 @@
  * For now we just allow the server to serve clients defined in `allowedClients`
  * in a more sophisticated setup, one would derive the `client` value from other
  * parameters (eg. hostname, path, ...).
- * 
+ *
  * For this demo this restriction and identification of the client is enough.
  */
 const allowedClients = ['base', 'client1']

example/server/render.js

@@ -1,12 +1,14 @@
 import Hapi from 'hapi'
 import inert from 'inert'
+
 import render from './render'
 
 export const createServer = async () => {
   /**
    * BASIC SERVER
    */
   const server = Hapi.server({
+    host: 'localhost',
     port: 8000,
   })
   await server.register(inert)

example/server/server.js

@@ -1,5 +1,7 @@
 const { resolve } = require('path')
 
+require('dotenv').config()
+
 const bundle = client => ({
   [`${client}.bundled.js`]: [
     '@babel/polyfill',
@@ -13,7 +15,7 @@ module.exports = {
     ...bundle('base'),
     ...bundle('client1'),
   },
-  mode: 'development',
+  mode: process.env.BABEL_ENV || process.env.NODE_ENV || 'development',
   module: {
     rules: [
       {
@@ -44,7 +46,6 @@ module.exports = {
     // https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
     alias: {
       react: resolve(__dirname, 'node_modules/react'),
-      'react-component-catalog': resolve(__dirname, '..', 'src/'),
       'react-dom': resolve(__dirname, 'node_modules/react-dom'),
     },
   },

example/webpack.config.js

@@ -3,3 +3,5 @@ import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 configure({ adapter: new Adapter() })
+
+global.__DEV__ = true