Alias react to preact in static builds.

.babelrc

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

.dockerignore

@@ -22,11 +22,15 @@ 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/**
+!node_modules/.gitkeep
 
 # Webpack output
 /dist
 
+# Intermediate build files (cache, etc.)
+/build
+
 ###
 
 Dockerfile

.eslintignore

@@ -22,7 +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/**
+!node_modules/.gitkeep
 
 # Webpack output
 /dist
+
+# Intermediate build files (cache, etc.)
+/build

.gitignore

@@ -20,10 +20,13 @@ coverage
 build/Release
 
 # Dependency directory
-# Deployed apps should consider commenting these line out:
+# 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
 
 # Webpack output
 /dist
+
+# Intermediate build files (cache, etc.)
+/build

package-lock.json

@@ -10416,6 +10416,12 @@
         }
       }
     },
+    "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": "nwb clean-app",
+    "clean": "rimraf build dist",
     "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,6 +80,7 @@
     "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

@@ -1,32 +0,0 @@
-{
-  "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,6 +45,7 @@ class App extends React.Component {
 
   componentWillUnmount() {
     clearInterval(this.interval);
+    this.interval = null;
   }
 
   calculateUpcomingDate() {
@@ -56,7 +57,19 @@ class App extends React.Component {
   }
 
   updateUpcomingDate() {
-    this.setState({ nextUpcomingDate: this.calculateUpcomingDate() });
+    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 });
   }
 
   render() {

webpack.config.babel.js

@@ -28,6 +28,13 @@ 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
@@ -153,7 +160,7 @@ export default (options) => {
           ident: 'postcss',
           plugins: [
             autoprefixer({
-              browsers: '> 1%, last 4 versions, Firefox ESR, ios >= 8',
+              browsers: autoprefixerTargets,
               grid: false,
             }),
           ],
@@ -190,7 +197,7 @@ export default (options) => {
     return cssLoaders;
   }
 
-  return {
+  const config = {
     devServer: {
       // inline: true,
       headers: {
@@ -201,7 +208,7 @@ export default (options) => {
       noInfo: true,
       overlay: true,
       publicPath: '',
-      quiet: true,
+      quiet: false,
       watchOptions: {
         ignored: /node_modules/,
       },
@@ -214,11 +221,34 @@ export default (options) => {
           exclude: /node_modules/,
           options: {
             // Look for babel configuration in project directory
-            babelrc: true,
+            babelrc: false,
             // 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',
+            ],
           },
         },
         ...[
@@ -347,7 +377,7 @@ export default (options) => {
         showErrors: true,
         chunks: 'all',
         excludeChunks: [],
-        title: 'Webpack App',
+        title: 'VIzon Countdown',
         xhtml: false,
         chunksSortMode: 'dependency',
       }),
@@ -360,11 +390,6 @@ 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',
       },
     },
@@ -383,4 +408,15 @@ 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;
 };