Apply some measurements for shaving off the few kilobytes.

- Shave off about 30 kB by building with preact instead of react.
- Shave off another 20 kB by using a moment-timezone build with only data for 2012~2022. Should be updated in time!

.eslintignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+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
+
+# Webpack output
+/dist

nwb.config.js

@@ -12,6 +12,10 @@ module.exports = {
   },
 
   webpack: {
+    aliases: {
+      'moment-timezone': 'moment-timezone/builds/moment-timezone-with-data-2012-2022.js',
+    },
+
     autoprefixer: '> 1%, last 2 versions, Firefox ESR, ios >= 8',
 
     extra: {

package-lock.json

@@ -3454,14 +3454,14 @@
       }
     },
     "eslint": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.4.1.tgz",
-      "integrity": "sha1-mc1+r8/8ov+Zpcj18qR01jZLS9M=",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.5.0.tgz",
+      "integrity": "sha1-u3XTuL3pf7XhPvzVOXRGd/6wGcM=",
       "dev": true,
       "requires": {
         "ajv": "5.2.2",
         "babel-code-frame": "6.26.0",
-        "chalk": "1.1.3",
+        "chalk": "2.1.0",
         "concat-stream": "1.6.0",
         "cross-spawn": "5.1.0",
         "debug": "2.6.8",
@@ -3492,9 +3492,56 @@
         "progress": "2.0.0",
         "require-uncached": "1.0.3",
         "semver": "5.4.1",
+        "strip-ansi": "4.0.0",
         "strip-json-comments": "2.0.1",
         "table": "4.0.1",
         "text-table": "0.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
+          "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz",
+          "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==",
+          "dev": true,
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
       }
     },
     "eslint-config-airbnb": {
@@ -3581,9 +3628,9 @@
       }
     },
     "eslint-plugin-jsx-a11y": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.2.tgz",
-      "integrity": "sha1-ZZJ3p1iwNsMFp+ShMFfDAc075z8=",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz",
+      "integrity": "sha512-5I9SpoP7gT4wBFOtXT8/tXNPYohHBVfyVfO17vkbC7r9kEIxYJF12D3pKqhk8+xnk12rfxKClS3WCFpVckFTPQ==",
       "dev": true,
       "requires": {
         "aria-query": "0.7.0",
@@ -4933,6 +4980,14 @@
       "integrity": "sha1-QyNS5XrM2HqzEQ6C0/6g5HgSFW0=",
       "dev": true
     },
+    "immutability-helper": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.3.1.tgz",
+      "integrity": "sha1-jM/OkhVyCMEgsq+tftBcERFMCG4=",
+      "requires": {
+        "invariant": "2.2.2"
+      }
+    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -8705,6 +8760,36 @@
         }
       }
     },
+    "preact": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-8.2.1.tgz",
+      "integrity": "sha1-Z0JD3wyEeITQGYNARKovzTEecu0="
+    },
+    "preact-compat": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/preact-compat/-/preact-compat-3.17.0.tgz",
+      "integrity": "sha1-Uoz9/DARkMGg9HVnM2vh9L4CZrM=",
+      "requires": {
+        "immutability-helper": "2.3.1",
+        "preact-render-to-string": "3.6.3",
+        "preact-transition-group": "1.1.1",
+        "prop-types": "15.5.10",
+        "standalone-react-addons-pure-render-mixin": "0.1.1"
+      }
+    },
+    "preact-render-to-string": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-3.6.3.tgz",
+      "integrity": "sha1-SB0NW9rJGS0zR1V0N9XNAKoxIEM=",
+      "requires": {
+        "pretty-format": "3.8.0"
+      }
+    },
+    "preact-transition-group": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/preact-transition-group/-/preact-transition-group-1.1.1.tgz",
+      "integrity": "sha1-8KSTJ+pRXs406ivoZMSn0p5dbhA="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -8733,6 +8818,11 @@
         "utila": "0.4.0"
       }
     },
+    "pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U="
+    },
     "private": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.7.tgz",
@@ -10225,6 +10315,11 @@
       "integrity": "sha1-M6qE8Rd6VUjIk1Uzy/6zQgl19aQ=",
       "dev": true
     },
+    "standalone-react-addons-pure-render-mixin": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz",
+      "integrity": "sha1-PHQJ9MecQN6axyxhbPZ5qZTzdVE="
+    },
     "statuses": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "main": "src/index.jsx",
   "scripts": {
-    "build": "nwb build-react-app ./src",
+    "build": "nwb build-react-app ./src --preact",
     "clean": "nwb clean-app",
     "start": "nwb serve-react-app ./src",
     "test": "nwb test-react",
@@ -30,12 +30,12 @@
     "babel-eslint": "^7.2.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.0",
-    "eslint": "^4.4.1",
+    "eslint": "^4.5.0",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-json": "^1.2.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.2.1",
     "file-loader": "^0.11.2",
     "nwb": "^0.18.10",
@@ -45,6 +45,8 @@
   "dependencies": {
     "moment-timezone": "^0.5.13",
     "normalize-scss": "^7.0.0",
+    "preact": "^8.2.1",
+    "preact-compat": "^3.17.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",

src/App.jsx

@@ -50,6 +50,9 @@ class App extends React.Component {
     }
 
     const { nextUpcomingDate } = this.state;
+    if (!nextUpcomingDate) {
+      return null;
+    }
 
     return (
       <div className={style.app}>

src/Countdown.jsx

@@ -8,7 +8,7 @@ import style from './Countdown.sass';
 
 export default class Countdown extends React.Component {
   static propTypes = {
-    date: PropTypes.object.isRequired,
+    date: PropTypes.instanceOf(moment).isRequired,
     locale: PropTypes.string,
     minimumIntegerDigits: PropTypes.number,
     useGrouping: PropTypes.bool,

src/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>my-app</title>
+    <title>VIzon Countdown</title>
     <meta name="description" content="">
   </head>
   <body>
-    <div id="app"></div>
+    <noscript>This website requires JavaScript, please enable it.</noscript>
   </body>
 </html>

src/index.jsx

@@ -4,4 +4,8 @@ import { render } from 'react-dom';
 import './index.sass';
 import App from './App';
 
-render(<App />, document.querySelector('#app'));
+// Create div node to render app in
+const rootContainer = document.createElement('div');
+document.body.appendChild(rootContainer);
+
+render(<App />, rootContainer);