Merge pull request #4 from wildlyinaccurate/closure-compiler

Use Google Closure Compiler instead of UglifyJS2

.babelrc

@@ -1,5 +1,4 @@
 {
-  "presets": ["es2015"],
   "plugins": [
     ["transform-react-jsx", { "pragma": "h" }]
   ]

README.md

@@ -19,6 +19,8 @@ npm install
 npm run build
 ```
 
+> **Note:** Java is required to run the Google Closure Compiler. Alternatively, `webpack.config.js` can be modified to use the pure JS version of GCC: add `jsCompiler: true` to the `ClosureCompilerPlugin` options.
+
 ## License
 
 The MIT License (MIT)

gulpfile.babel.js

@@ -1,17 +1,17 @@
-import fs from 'fs'
+const fs = require('fs')
 
-import { __, compose, curry } from 'ramda'
-import gulp from 'gulp'
-import imagemin, * as im from 'gulp-imagemin'
-import sass from 'gulp-sass'
-import uncss from 'gulp-uncss'
-import watch from 'gulp-watch'
-import batch from 'gulp-batch'
-import ghPages from 'gulp-gh-pages'
+const { __, compose, curry } = require('ramda')
+const gulp = require('gulp')
+const imagemin = require('gulp-imagemin')
+const sass = require('gulp-sass')
+const uncss = require('gulp-uncss')
+const watch = require('gulp-watch')
+const batch = require('gulp-batch')
+const ghPages = require('gulp-gh-pages')
 
-import render from 'preact-render-to-string'
-import { h } from 'preact'
-import App from './src/containers/App'
+const render = require('preact-render-to-string')
+const { h } = require('preact')
+const App = require('./src/containers/App')
 
 const readFileJSON = compose(
   JSON.parse,
@@ -73,7 +73,7 @@ gulp.task('static', done => {
 })
 
 gulp.task('imagemin', ['copy'], () => {
-  const svgo = im.svgo({
+  const svgo = imagemin.svgo({
     plugins: [
       { cleanupIDs: false },
       { removeHiddenElems: false },
@@ -82,7 +82,7 @@ gulp.task('imagemin', ['copy'], () => {
   })
 
   return gulp.src('dist/images/*')
-    .pipe(imagemin([svgo, im.optipng()]))
+    .pipe(imagemin([svgo, imagemin.optipng()]))
     .pipe(gulp.dest('dist/images'))
 })
 

karma.conf.js

@@ -1,6 +1,5 @@
 const connect = require('connect')
 const serveStatic = require('serve-static')
-const webpackConfig = require('./webpack.config')
 
 connect()
   .use(serveStatic('.'))
@@ -26,7 +25,15 @@ module.exports = function (config) {
     },
 
     webpack: {
-      module: webpackConfig.module
+      module: {
+        loaders: [
+          {
+            test: /\.js$/,
+            loader: 'babel-loader?presets=es2015',
+            exclude: /node_modules/
+          }
+        ]
+      }
     },
 
     reporters: ['mocha'],

package.json

@@ -9,7 +9,7 @@
     "eslint": "eslint src/**/*.js test/**/*.js *.js",
     "karma": "karma start",
     "build": "npm run webpack && gulp build",
-    "webpack": "webpack -p",
+    "webpack": "webpack --optimize-occurence-order",
     "release": "npm run webpack && gulp release"
   },
   "repository": {
@@ -34,8 +34,7 @@
     "babel-loader": "^6.2.1",
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
+    "babel-preset-es2015": "^6.16.0",
     "babelify": "^7.2.0",
     "connect": "^3.5.0",
     "eslint": "^3.2.0",
@@ -57,6 +56,7 @@
     "karma-webpack": "^1.8.0",
     "preact-render-to-string": "^3.2.1",
     "serve-static": "^1.11.1",
-    "webpack": "^1.13.2"
+    "webpack": "^1.13.2",
+    "webpack-closure-compiler": "^2.1.1"
   }
 }

src/components/Experience.js

@@ -1,9 +1,9 @@
-import { h, Component } from 'preact'
-import fetch from 'isomorphic-fetch'
+const { h, Component } = require('preact')
+const fetch = require('isomorphic-fetch')
 
-import ExperienceItem from './ExperienceItem'
+const ExperienceItem = require('./ExperienceItem')
 
-export default class Experience extends Component {
+module.exports = class Experience extends Component {
   constructor (props) {
     super(props)
 
@@ -15,12 +15,12 @@ export default class Experience extends Component {
   componentDidMount () {
     fetch('data/experience.json')
       .then(response => response.json())
-      .then(this.dataToExperienceItems)
+      .then(data => this.dataToExperienceItems(data))
       .then(items => this.setState({ items }))
   }
 
   dataToExperienceItems (data) {
-    return data.results.map(props => {
+    return data['results'].map(props => {
       return <ExperienceItem key={props.name} {...props} />
     })
   }

src/components/ExperienceItem.js

@@ -1,39 +1,58 @@
-/* eslint-disable react/no-danger */
-import { h, Component } from 'preact'
-import dateFormat from 'dateformat'
+const { h, Component } = require('preact')
 
-export default class ExperienceItem extends Component {
+const months = {
+  '01': 'January',
+  '02': 'February',
+  '03': 'March',
+  '04': 'April',
+  '05': 'May',
+  '06': 'June',
+  '07': 'July',
+  '08': 'August',
+  '09': 'September',
+  '10': 'October',
+  '11': 'November',
+  '12': 'December'
+}
+
+module.exports = class ExperienceItem extends Component {
   dateString (date) {
-    return dateFormat(date, 'mmmm yyyy')
+    const [year, month, day] = date.split('-')
+
+    return `${months[month]} ${year}`
   }
 
   endDateString (date) {
     return date ? this.dateString(date) : 'Present'
   }
 
   paragraphs (text) {
-    return `<p>
-      ${text.split('\n\n').join('</p><p>')}
-    </p>`
+    return `<p>${text.split('\n\n').join('</p><p>')}</p>`
   }
 
   render () {
     return (
       <div className='row p-b-1'>
         <div className='col-xs-12 col-sm-3 text-xs-center p-b-1'>
-          <a href={this.props.url}>
-            <img className='img-fluid center-block' src={this.props.image}/>
+          <a href={this.props['url']}>
+            <img className='img-fluid center-block' src={this.props['image']}/>
           </a>
         </div>
 
         <div className='col-xs-12 col-sm-9'>
           <h4>
-            {this.props.role} at <a href={this.props.url}>{this.props.name}</a>
+            {this.props['role']} at <a href={this.props['url']}>{this.props['name']}</a>
           </h4>
 
-          {this.dateString(this.props.startDate)} &mdash; {this.endDateString(this.props.endDate)}
+          {this.dateString(this.props['startDate'])} &mdash; {this.endDateString(this.props['endDate'])}
 
-          <div dangerouslySetInnerHTML={{ __html: this.paragraphs(this.props.description) }} />
+          {
+            h('div', {
+              'dangerouslySetInnerHTML': {
+                __html: this.paragraphs(this.props['description'])
+              }
+            })
+          }
         </div>
       </div>
     )

src/components/Footer.js

@@ -1,6 +1,6 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-export default class Footer extends Component {
+module.exports = class Footer extends Component {
   render () {
     return (
       <footer className='section hidden-print'>

src/components/Header.js

@@ -1,9 +1,9 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-import slug from '../utils/slug'
-import Icon from './Icon'
+const slug = require('../utils/slug')
+const Icon = require('./Icon')
 
-export default class Header extends Component {
+module.exports = class Header extends Component {
   navItems () {
     return ['Skills', 'Experience', 'Publications', 'Open Source'].map(this.navItem)
   }

src/components/Icon.js

@@ -1,6 +1,6 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-export default class Icon extends Component {
+module.exports = class Icon extends Component {
   iconClass (style) {
     return 'icon' + (style ? ` icon--${style}` : '')
   }
@@ -11,8 +11,12 @@ export default class Icon extends Component {
 
   render () {
     return (
-      <svg className={this.iconClass(this.props.style)}>
-        <use xlinkHref={this.iconHref(this.props.name)}></use>
+      <svg className={this.iconClass(this.props['style'])}>
+        {
+          h('use', {
+            'xlinkHref': this.iconHref(this.props['name'])
+          })
+        }
       </svg>
     )
   }

src/components/Introduction.js

@@ -1,6 +1,6 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-export default class Introduction extends Component {
+module.exports = class Introduction extends Component {
   render () {
     return (
       <div id='introduction' className='introduction section text-xs-center'>

src/components/OpenSource.js

@@ -1,14 +1,14 @@
-import { h, Component } from 'preact'
-import map from 'ramda/src/map'
-import reverse from 'ramda/src/reverse'
-import take from 'ramda/src/take'
+const { h, Component } = require('preact')
+const map = require('ramda/src/map')
+const reverse = require('ramda/src/reverse')
+const take = require('ramda/src/take')
 
-import * as Repositories from '../github/repositories'
-import OpenSourceItem from './OpenSourceItem'
+const Repositories = require('../github/repositories')
+const OpenSourceItem = require('./OpenSourceItem')
 
 const ACCESS_TOKEN = reverse('ff7cece3c58d2a457908136b35475cbdf708d3d6')
 
-export default class OpenSource extends Component {
+module.exports = class OpenSource extends Component {
   constructor (props) {
     super(props)
 

src/components/OpenSourceItem.js

@@ -1,22 +1,22 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-import Icon from './Icon'
+const Icon = require('./Icon')
 
-export default class OpenSourceItem extends Component {
+module.exports = class OpenSourceItem extends Component {
   render () {
     return (
       <div className='col-xs-12 col-lg-6 m-b-2'>
         <h4>
-          <small title={`${this.props.stargazers_count} stars`} className='star-count pull-xs-right'>
-            {this.props.stargazers_count}
+          <small title={`${this.props['stargazers_count']} stars`} className='star-count pull-xs-right'>
+            {this.props['stargazers_count']}
             <Icon name='star' />
           </small>
 
-          <a href={this.props.html_url}>{this.props.name} ({this.props.language})</a>
+          <a href={this.props['html_url']}>{this.props['name']} ({this.props['language']})</a>
         </h4>
 
         <p>
-          {this.props.description}
+          {this.props['description']}
         </p>
       </div>
     )

src/components/PrintHeader.js

@@ -1,6 +1,6 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-export default class PrintHeader extends Component {
+module.exports = class PrintHeader extends Component {
   render () {
     return (
       <div className='visible-print-block container-fluid text-xs-right'>

src/components/Publications.js

@@ -1,7 +1,7 @@
-import { h, Component } from 'preact'
-import fetch from 'isomorphic-fetch'
+const { h, Component } = require('preact')
+const fetch = require('isomorphic-fetch')
 
-export default class Publications extends Component {
+module.exports = class Publications extends Component {
   constructor (props) {
     super(props)
 
@@ -20,7 +20,7 @@ export default class Publications extends Component {
   }
 
   dataToPublicationItems (data) {
-    return data.results.map(props => {
+    return data['results'].map(props => {
       return (
         <div key={props.title} className='col-sm-6'>
           <h3>{props.title} ({props.year})</h3>

src/components/SkillItem.js

@@ -1,12 +1,12 @@
-import { h, Component } from 'preact'
+const { h, Component } = require('preact')
 
-import Icon from './Icon'
+const Icon = require('./Icon')
 
-export default class SkillItem extends Component {
+module.exports = class SkillItem extends Component {
   render () {
     return (
       <h5>
-        <Icon name={this.props.icon} /> {this.props.name}
+        <Icon name={this.props['icon']} /> {this.props['name']}
       </h5>
     )
   }