Merge pull request #369 from alexander-heimbuch/feature/improve-bundling

Feature/improve bundling

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": ["es2015"],
+  "plugins": ["lodash", "transform-runtime"],
   "env": {
     "AVA": {
       "plugins": [

circle.yml

@@ -31,6 +31,7 @@ deployment:
   staging:
     branch: v4
     commands:
+      - yarn docs
       - yarn deploy:surge
 
   production:

statics/standalone.html → docs/standalone.html

@@ -58,6 +58,7 @@
         }
     </script>
 
+    <script src="vendor.js"></script>
     <script src="window.js"></script>
 </body>
 </html>

package.json

@@ -27,12 +27,11 @@
   ],
   "scripts": {
     "dist:clean": "mkdir -p dist && rm -rf dist/*",
-    "app:statics": "cp -R statics/* dist",
-    "statics": "npm run app:statics",
+    "docs": "cp -R docs/* dist",
     "webpack:dev": "webpack-dashboard -- webpack-dev-server --content-base dist/ --progress --hot --inline --config src/webpack.config.js",
     "webpack:build": "NODE_ENV='production' webpack --config src/webpack.config.js",
-    "build": "npm run dist:clean && npm run statics && npm run webpack:build",
-    "dev": "npm run dist:clean && npm run statics && npm run webpack:dev",
+    "build": "npm run dist:clean && npm run webpack:build",
+    "dev": "npm run dist:clean && npm run docs && npm run webpack:dev",
     "test": "NODE_ENV=AVA nyc ava && nyc report --reporter=lcov",
     "test:dev": "NODE_ENV=AVA ava --watch --fail-fast",
     "deploy:gh-pages": "scripts/deploy-ghpages.sh dist",
@@ -63,18 +62,22 @@
   "devDependencies": {
     "ava": "0.18.2",
     "babel-core": "6.22.0",
-    "babel-loader": "6.4.1",
+    "babel-loader": "7.0.0",
+    "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-transform-runtime": "6.22.0",
     "babel-plugin-webpack-alias": "2.1.2",
+    "babel-preset-bluebird": "^1.0.1",
     "babel-preset-es2015": "6.22.0",
     "babel-preset-stage-2": "6.22.0",
     "babel-register": "6.22.0",
     "browser-env": "2.0.25",
+    "compression-webpack-plugin": "^0.4.0",
     "cross-env": "3.0.0",
     "css-loader": "0.25.0",
-    "file-loader": "0.9.0",
+    "file-loader": "^0.11.1",
     "html-webpack-plugin": "2.26.0",
     "inject-loader": "3.0.0-beta4",
+    "inline-environment-variables-webpack-plugin": "^1.2.0",
     "lolex": "1.6.0",
     "node-sass": "4.1.1",
     "nyc": "10.1.2",
@@ -87,6 +90,7 @@
     "vue-loader": "11.3.4",
     "vue-template-compiler": "2.2.6",
     "webpack": "2.3.2",
+    "webpack-bundle-analyzer": "^2.4.0",
     "webpack-dashboard": "0.3.0",
     "webpack-dev-server": "2.1.0-beta.9"
   },
@@ -108,19 +112,7 @@
       "babel-core/register",
       "babel-register"
     ],
-    "babel": {
-      "presets": [
-        "es2015"
-      ],
-      "plugins": [
-        "transform-runtime"
-      ],
-      "env": {
-        "development": {
-          "sourceMaps": "inline"
-        }
-      }
-    }
+    "babel": {"babelrc": true}
   },
   "nyc": {
     "exclude": [

scripts/deploy-cdn.sh

@@ -18,4 +18,4 @@ echo "Creating $target@$server"
 ssh -o PasswordAuthentication=no -p $port $user@$server "mkdir -p $target"
 
 echo "Copy files to $target@$server"
-scp -o PasswordAuthentication=no -P $port -r dist/share.html dist/*.js $user@$server:$target
+scp -o PasswordAuthentication=no -P $port -r dist/* $user@$server:$target

scripts/deploy-release.sh

@@ -1,3 +1,3 @@
 #!/bin/sh
 echo "Publishing to Github Releases"
-publish-release --token $GITHUB_TOKEN --owner $CIRCLE_PROJECT_USERNAME --repo $CIRCLE_PROJECT_REPONAME --tag $CIRCLE_TAG --assets dist/share.html,dist/embed.js,dist/share.js,dist/window.js --name "Podlove Web Player"  --notes " "
+publish-release --token $GITHUB_TOKEN --owner $CIRCLE_PROJECT_USERNAME --repo $CIRCLE_PROJECT_REPONAME --tag $CIRCLE_TAG --assets dist/* --name "Podlove Web Player"  --notes " "

src/app.js

@@ -1,9 +1,12 @@
 import Vue from 'vue'
-import head from 'lodash/head'
+import { head } from 'lodash'
 
 import debug from 'utils/debug'
 import registerDirectives from './directives'
 
+// Import share static page
+require('file-loader?name=share.html!./statics/share.html')
+
 registerDirectives(Vue)
 
 // Store

src/components/tabs/Tabs.vue

@@ -5,7 +5,7 @@
         <ChaptersIcon slot="icon"></ChaptersIcon>
         <span slot="title">Kapitel</span>
       </TabHeaderItem>
-      <TabHeaderItem :active="tabs.share" :click="toggleTab('share')">
+      <TabHeaderItem v-if="reference.config && reference.share" :active="tabs.share" :click="toggleTab('share')">
         <ShareIcon slot="icon"></ShareIcon>
         <span slot="title">Share</span>
       </TabHeaderItem>
@@ -17,7 +17,7 @@
     <TabBody :active="tabs.chapters" v-if="chapters.length > 0">
       <ChaptersTab />
     </TabBody>
-    <TabBody :active="tabs.share">
+    <TabBody :active="tabs.share" v-if="reference.config && reference.share">
       <ShareTab />
     </TabBody>
     <TabBody :active="tabs.settings">
@@ -56,7 +56,8 @@ export default {
       theme: this.$select('theme'),
       tabs: this.$select('tabs'),
       mode: this.$select('mode'),
-      chapters: this.$select('chapters')
+      chapters: this.$select('chapters'),
+      reference: this.$select('reference')
     }
   },
   methods: {

src/embed/embed.js

@@ -85,7 +85,8 @@ const configNode = (config = {}) =>
     .then(config => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`))
 
 // Player Logic
-const appLogic = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/window.js`})
+const vendorBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/vendor.js`})
+const appBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/window.js`})
 
 // Dynamic resizer
 const dynamicResizer = tag('script', iframeResizerContentWindow)
@@ -99,7 +100,8 @@ window.podlovePlayer = (selector, config) => {
   return Bluebird.all([
     playerEntry,
     configNode(config),
-    appLogic(config),
+    vendorBundle(config),
+    appBundle(config),
     dynamicResizer
   ])
   .then(result => result.join(''))

statics/share.html → src/statics/share.html

@@ -11,6 +11,7 @@
 </head>
 <body>
     <PodlovePlayer></PodlovePlayer>
+    <script src="vendor.js"></script>
     <script src="share.js"></script>
 </body>
 </html>

src/store/reducers/init.js

@@ -1,4 +1,4 @@
-import get from 'lodash/get'
+import { get } from 'lodash'
 
 const subtitle = (state = '', action) => {
   switch (action.type) {
@@ -21,7 +21,7 @@ const mode = (state = 'native', action) => {
 const poster = (state = '', action) => {
   switch (action.type) {
     case 'INIT':
-      return action.payload.poster || action.payload.show.poster || null
+      return get(action.payload, 'poster') || get(action.payload, ['show', 'poster']) || null
     default:
       return state
   }
@@ -63,7 +63,7 @@ const debug = (state = {}, action) => {
       return get(action.payload, 'debug', state)
     default:
       return state
-  }  
+  }
 }
 
 export {

src/store/reducers/init.test.js

@@ -1,5 +1,5 @@
 import test from 'ava'
-import { poster, subtitle, title, reference, mode } from './init'
+import { poster, subtitle, title, reference, mode, showTitle, debug } from './init'
 
 let testAction
 
@@ -12,7 +12,7 @@ test.beforeEach(t => {
       publicationDate: '2016-02-11T03:13:55+00:00',
       poster: '//episode/poster',
       show: {
-        title: 'Freak Show',
+        title: 'showTitle',
         subtitle: 'Menschen! Technik! Sensationen!',
         summary: 'Die muntere Talk Show um Leben mit Technik, das Netz und Technikkultur. Bisweilen Apple-lastig aber selten einseitig. Wir leben und lieben Technologie und reden darüber. Mit Tim, hukl, roddi, Clemens und Denis. Freak Show hieß irgendwann mal mobileMacs.',
         poster: '//show/poster',
@@ -50,7 +50,8 @@ test.beforeEach(t => {
       reference: {
         config: '//config/reference',
         share: '//share/reference'
-      }
+      },
+      debug: 'debug'
     }
   }
 })
@@ -78,6 +79,21 @@ test(`poster: it does nothing if not the init action is dispatched`, t => {
   t.is(result, 'foobar')
 })
 
+test(`poster: it has a default fallback if a missing state is provided`, t => {
+  const result = poster(undefined, {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.is(result, '')
+})
+
+test(`poster: it returns null if neither an episode poster nor an show poster is defined`, t => {
+  const result = poster('', {
+    type: 'INIT',
+    payload: {}
+  })
+  t.is(result, null)
+})
+
 // SUBTITLE TESTS
 test(`subtitle: it is a reducer function`, t => {
   t.is(typeof subtitle, 'function')
@@ -103,6 +119,13 @@ test(`subtitle: it does nothing if not the init action is dispatched`, t => {
   t.is(result, 'foobar')
 })
 
+test(`subtitle: it has a default fallback if a missing state is provided`, t => {
+  const result = subtitle(undefined, {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.is(result, '')
+})
+
 // TITLE TESTS
 test(`title: it is a reducer function`, t => {
   t.is(typeof title, 'function')
@@ -128,6 +151,45 @@ test(`title: it does nothing if not the init action is dispatched`, t => {
   t.is(result, 'foobar')
 })
 
+test(`title: it has a default fallback if a missing state is provided`, t => {
+  const result = title(undefined, {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.is(result, '')
+})
+
+// SHOW TITLE TESTS
+test(`showTitle: it is a reducer function`, t => {
+  t.is(typeof showTitle, 'function')
+})
+
+test(`showTitle: it extracts the showTitle`, t => {
+  const result = showTitle('', testAction)
+  t.is(result, 'showTitle')
+})
+
+test(`showTitle: it returns null if no showTitle is available`, t => {
+  const result = showTitle('foo', {
+    type: 'INIT',
+    payload: {}
+  })
+  t.is(result, null)
+})
+
+test(`showTitle: it does nothing if not the init action is dispatched`, t => {
+  const result = showTitle('foobar', {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.is(result, 'foobar')
+})
+
+test(`showTitle: it has a default fallback if a missing state is provided`, t => {
+  const result = showTitle(undefined, {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.is(result, '')
+})
+
 // REFERENCE TESTS
 test(`reference: it is a reducer function`, t => {
   t.is(typeof reference, 'function')
@@ -164,8 +226,14 @@ test(`reference: it does nothing if not the init action is dispatched`, t => {
   t.is(result, 'foobar')
 })
 
+test(`reference: it has a default fallback if a missing state is provided`, t => {
+  const result = reference(undefined, {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.deepEqual(result, {})
+})
 
-// REFERENCE TESTS
+// MODE TESTS
 test(`mode: it is a reducer function`, t => {
   t.is(typeof mode, 'function')
 })
@@ -187,3 +255,27 @@ test(`mode: it does nothing if not the init action is dispatched`, t => {
   })
   t.is(result, 'foobar')
 })
+
+// DEBUG TESTS
+test(`debug: it is a reducer function`, t => {
+  t.is(typeof debug, 'function')
+})
+
+test(`debug: it extracts the debug`, t => {
+  const result = debug('', testAction)
+  t.is(result, 'debug')
+})
+
+test(`debug: it returns an empty object if a debug is not available`, t => {
+  let result = debug(undefined, {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.deepEqual(result, {})
+})
+
+test(`debug: it does nothing if not the init action is dispatched`, t => {
+  const result = debug('foobar', {
+    type: 'NOT_A_REAL_TYPE'
+  })
+  t.is(result, 'foobar')
+})

src/store/reducers/player.test.js

@@ -232,6 +232,11 @@ test(`volume: it returns the correct volume`, t => {
     type: 'SET_VOLUME',
     payload: 2
   }), 1)
+
+  t.is(volume(1, {
+    type: 'SET_VOLUME',
+    payload: 0.2
+  }), 0.2)
 })
 
 // VOLUME