.babelrc

@@ -2,14 +2,20 @@
   "presets": [
     ["babel-preset-env", {
       "targets": {
-        "node": true,
+        "browsers": [
+          "> 1%",
+          "last 4 versions",
+          "Firefox ESR",
+          "ios >= 8"
+        ],
         "uglify": false
       },
       "spec": true,
-      "debug": false
+      "debug": true
     }]
   ],
   "plugins": [
+    "babel-plugin-transform-react-constant-elements",
     "babel-plugin-transform-class-properties",
     "babel-plugin-syntax-dynamic-import"
   ]

.dockerignore

@@ -22,15 +22,11 @@ build/Release
 # Dependency directory
 # Deployed apps should consider commenting this line out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
-node_modules/**
-!node_modules/.gitkeep
+node_modules
 
 # Webpack output
 /dist
 
-# Intermediate build files (cache, etc.)
-/build
-
 ###
 
 Dockerfile

.eslintignore

@@ -22,11 +22,7 @@ build/Release
 # Dependency directory
 # Deployed apps should consider commenting this line out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
-node_modules/**
-!node_modules/.gitkeep
+node_modules
 
 # Webpack output
 /dist
-
-# Intermediate build files (cache, etc.)
-/build

.gitignore

@@ -20,13 +20,10 @@ coverage
 build/Release
 
 # Dependency directory
-# Deployed apps should consider commenting this line out:
+# Deployed apps should consider commenting these line out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
 node_modules/**
 !node_modules/.gitkeep
 
 # Webpack output
 /dist
-
-# Intermediate build files (cache, etc.)
-/build

package-lock.json

@@ -10416,12 +10416,6 @@
         }
       }
     },
-    "preact": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-8.2.4.tgz",
-      "integrity": "sha1-FE6lDLV7dlmsX2MRkblBi97H7Qo=",
-      "dev": true
-    },
     "preact-compat": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/preact-compat/-/preact-compat-3.17.0.tgz",

package.json

@@ -8,7 +8,7 @@
     "build": "webpack",
     "build:production": "npm run -s build -- --env production",
     "build:development": "npm run -s build -- --env development",
-    "clean": "rimraf build dist",
+    "clean": "nwb clean-app",
     "docker-compose": "docker-compose -f docker-compose.local.yml",
     "docker:down:clean": "npm run -s docker:down -- --rmi all -v",
     "docker:down": "npm run -s docker-compose -- down",
@@ -80,7 +80,6 @@
     "react-hot-loader": "^3.0.0-beta.7",
     "react-router": "^4.2.0",
     "resolve-url-loader": "^2.1.0",
-    "rimraf": "^2.6.1",
     "sass-loader": "^6.0.6",
     "slash": "^1.0.0",
     "style-loader": "^0.18.2",

src/.babelrc

@@ -0,0 +1,32 @@
+{
+  "presets": [
+    ["babel-preset-env", {
+      "targets": {
+        "browsers": [
+          "> 1%",
+          "last 4 versions",
+          "Firefox ESR",
+          "ios >= 8"
+        ],
+        "uglify": false
+      },
+      /*"spec": true,*/
+      "debug": true,
+      "modules": false
+    }],
+    "babel-preset-react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "babel-plugin-transform-react-constant-elements",
+    /*"babel-plugin-transform-react-remove-prop-types",*/
+    /*"babel-plugin-transform-decorators-legacy",*/
+    "babel-plugin-transform-class-properties",
+    ["babel-plugin-transform-runtime", {
+      "helpers": false,
+      "polyfill": false,
+      "regenerator": true
+    }],
+    "babel-plugin-syntax-dynamic-import"
+  ]
+}

src/App.jsx

@@ -45,7 +45,6 @@ class App extends React.Component {
 
   componentWillUnmount() {
     clearInterval(this.interval);
-    this.interval = null;
   }
 
   calculateUpcomingDate() {
@@ -57,19 +56,7 @@ class App extends React.Component {
   }
 
   updateUpcomingDate() {
-    const { getNow } = this.props;
-
-    const nextUpcomingDate = this.calculateUpcomingDate();
-
-    if (this.interval) {
-      const interval = moment.duration(nextUpcomingDate.diff(getNow()))
-        .asMilliseconds();
-
-      clearInterval(this.interval);
-      this.interval = setInterval(this.updateUpcomingDate.bind(this), interval);
-    }
-
-    this.setState({ nextUpcomingDate });
+    this.setState({ nextUpcomingDate: this.calculateUpcomingDate() });
   }
 
   render() {

webpack.config.babel.js

@@ -28,13 +28,6 @@ const {
 
 const locales = ['en'];
 
-const autoprefixerTargets = [
-  '> 1%',
-  'last 4 versions',
-  'Firefox ESR',
-  'ios >= 8',
-];
-
 /**
  * Plugin for HtmlPlugin which inlines content for an extracted Webpack manifest
  * into the HTML in a <script> tag before other emitted asssets are injected by
@@ -160,7 +153,7 @@ export default (options) => {
           ident: 'postcss',
           plugins: [
             autoprefixer({
-              browsers: autoprefixerTargets,
+              browsers: '> 1%, last 4 versions, Firefox ESR, ios >= 8',
               grid: false,
             }),
           ],
@@ -197,7 +190,7 @@ export default (options) => {
     return cssLoaders;
   }
 
-  const config = {
+  return {
     devServer: {
       // inline: true,
       headers: {
@@ -208,7 +201,7 @@ export default (options) => {
       noInfo: true,
       overlay: true,
       publicPath: '',
-      quiet: false,
+      quiet: true,
       watchOptions: {
         ignored: /node_modules/,
       },
@@ -221,34 +214,11 @@ export default (options) => {
           exclude: /node_modules/,
           options: {
             // Look for babel configuration in project directory
-            babelrc: false,
+            babelrc: true,
             // Cache transformations to the filesystem (in default temp dir)
             cacheDirectory: true,
-
+            // Skip module transpiling as Webpack 2+ support it ootb
             forceEnv: 'browser',
-
-            presets: [
-              ['babel-preset-env', {
-                targets: {
-                  browsers: autoprefixerTargets,
-                  uglify: false,
-                },
-                // spec: true,
-                debug: development,
-                modules: false, // do not transpile modules, webpack 2+ does that
-              }],
-              'babel-preset-react',
-            ],
-            plugins: [
-              'babel-plugin-transform-react-constant-elements',
-              'babel-plugin-transform-class-properties',
-              ['babel-plugin-transform-runtime', {
-                helpers: false,
-                polyfill: false,
-                regenerator: true,
-              }],
-              'babel-plugin-syntax-dynamic-import',
-            ],
           },
         },
         ...[
@@ -377,7 +347,7 @@ export default (options) => {
         showErrors: true,
         chunks: 'all',
         excludeChunks: [],
-        title: 'VIzon Countdown',
+        title: 'Webpack App',
         xhtml: false,
         chunksSortMode: 'dependency',
       }),
@@ -390,6 +360,11 @@ export default (options) => {
         '.js', '.json', '.jsx',
       ],
       alias: {
+        // Use preact instead of react
+        /* react: 'preact-compat\\dist\\preact-compat',
+        'react-dom': 'preact-compat\\dist\\preact-compat',
+        'create-react-class': 'preact-compat/lib/create-react-class', */
+
         'moment-timezone': 'moment-timezone/builds/moment-timezone-with-data-2012-2022.js',
       },
     },
@@ -408,15 +383,4 @@ export default (options) => {
       ],
     },
   };
-
-  if (!server) {
-    // Use preact instead of react (only on static build)
-    Object.assign(config.resolve.alias, {
-      react: !server ? 'preact-compat\\dist\\preact-compat' : undefined,
-      'react-dom': !server ? 'preact-compat\\dist\\preact-compat' : undefined,
-      'create-react-class': !server ? 'preact-compat/lib/create-react-class' : undefined,
-    });
-  }
-
-  return config;
 };