[tech] Fine-tuned webpack build for photos

.tx/config

@@ -6,3 +6,9 @@ file_filter = src/drive/locales/<lang>.json
 source_file = src/drive/locales/en.json
 source_lang = en
 type = KEYVALUEJSON
+
+[cozy-photos-v3.global]
+file_filter = src/photos/locales/<lang>.json
+source_file = src/photos/locales/en.json
+source_lang = en
+type = KEYVALUEJSON

config/webpack.config.base.js

@@ -13,7 +13,9 @@ module.exports = function(production) {
       modules: ['node_modules', 'src'],
       extensions: ['.js', '.json', '.css'],
       alias: {
-        drive: path.resolve(SRC_DIR, './drive/')
+        drive: path.resolve(SRC_DIR, './drive/'),
+        photos: path.resolve(SRC_DIR, './photos/'),
+        'redux-cozy-client': path.resolve(SRC_DIR, './lib/redux-cozy-client')
       }
     },
     module: {

config/webpack.config.manifest.js

@@ -2,7 +2,7 @@
 
 const CopyPlugin = require('copy-webpack-plugin')
 
-module.exports = function(production) {
+module.exports = function(production, app) {
   // Method to modify the manifest slug on dev builds. On production builds the
   // manifest should be copied without modification.
   //
@@ -19,7 +19,7 @@ module.exports = function(production) {
   return {
     plugins: [
       new CopyPlugin([
-        { from: 'manifest.webapp', transform: transformManifest },
+        { from: `targets/${app}/manifest.webapp`, transform: transformManifest },
         { from: 'README.md' },
         { from: 'LICENSE' }
       ])

config/webpack.config.vendors.js

@@ -2,11 +2,13 @@
 
 const CopyPlugin = require('copy-webpack-plugin')
 
-module.exports = {
-  plugins: [
-    new CopyPlugin([
-      { from: 'vendor/assets/app-icon.svg', to: 'public/app-icon.svg' },
-      { from: 'vendor/assets', ignore: ['.gitkeep'] }
-    ])
-  ]
+module.exports = function (production, app) {
+  return {
+    plugins: [
+      new CopyPlugin([
+        { from: `targets/${app}/vendor/assets/app-icon.svg`, to: 'public/app-icon.svg' },
+        { from: `targets/${app}/vendor/assets`, ignore: ['.gitkeep'] }
+      ])
+    ]
+  }
 }

config/webpack.target.browser.js

@@ -1,56 +1,67 @@
 'use strict'
 
 const path = require('path')
+const fs = require('fs')
 const { DefinePlugin } = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = function(production, app) {
+  var entry = {
+    app: path.resolve(__dirname, `../targets/${app}/web/main`)
+  }
+
+  var plugins = [
+    new DefinePlugin({
+      __TARGET__: JSON.stringify('browser')
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, `../targets/${app}/web/index.ejs`),
+      title: `cozy-${app}`,
+      chunks: ['app'],
+      inject: 'head',
+      minify: {
+        collapseWhitespace: true
+      }
+    })
+  ]
+
+  if (fs.existsSync(path.resolve(__dirname, `../targets/${app}/web/services.jsx`))) {
+    entry.services = path.resolve(__dirname, `../targets/${app}/web/services`)
+    plugins.push(new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, `../targets/${app}/web/services.ejs`),
+      title: `cozy-${app}`,
+      filename: 'services.html',
+      chunks: ['services'],
+      inject: 'head',
+      minify: {
+        collapseWhitespace: true
+      }
+    }))
+  }
+
+  if (fs.existsSync(path.resolve(__dirname, `../targets/${app}/web/public/main.jsx`))) {
+    entry['public/app'] = path.resolve(__dirname, `../targets/${app}/web/public/main`)
+    plugins.push(new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, `../targets/${app}/web/public/index.ejs`),
+      title: `cozy-${app}`,
+      filename: 'public/index.html',
+      chunks: ['public/app'],
+      inject: 'head',
+      minify: {
+        collapseWhitespace: true
+      }
+    }))
+  }
+
   return {
-    entry: {
-      app: path.resolve(__dirname, `../targets/${app}/web/main`),
-      services: path.resolve(__dirname, `../targets/${app}/web/services`),
-      'public/app': path.resolve(__dirname, `../targets/${app}/web/public/main`)
-    },
+    entry: entry,
     output: {
       path: path.resolve(__dirname, `../build/${app}`),
       filename: '[name].js'
     },
     externals: {
       'cozy-client-js': 'cozy'
     },
-    plugins: [
-      new DefinePlugin({
-        __TARGET__: JSON.stringify('browser')
-      }),
-      new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, `../targets/${app}/web/index.ejs`),
-        title: `cozy-${app}`,
-        chunks: ['app'],
-        inject: 'head',
-        minify: {
-          collapseWhitespace: true
-        }
-      }),
-      new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, `../targets/${app}/web/services.ejs`),
-        title: `cozy-${app}`,
-        filename: 'services.html',
-        chunks: ['services'],
-        inject: 'head',
-        minify: {
-          collapseWhitespace: true
-        }
-      }),
-      new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, `../targets/${app}/web/public/index.ejs`),
-        title: `cozy-${app}`,
-        filename: 'public/index.html',
-        chunks: ['public/app'],
-        inject: 'head',
-        minify: {
-          collapseWhitespace: true
-        }
-      })
-    ]
+    plugins: plugins
   }
 }

package.json

@@ -6,9 +6,12 @@
     "build:drive": "npm run build:drive:browser",
     "build:drive:browser": "npm run internal:build -- --env.app=drive --env.target=browser --env.production",
     "build:drive:mobile": "npm run internal:build -- --env.app=drive --env.target=mobile --env.production",
+    "build:photos": "npm run build:photos:browser",
+    "build:photos:browser": "npm run internal:build -- --env.app=photos --env.target=browser --env.production",
     "clean:browser": "rm -rf build/*",
     "clean:mobile": "rm -rf targets/*/mobile/www/*",
-    "deploy": "git-directory-deploy --username=Cozy --email=contact@cozycloud.cc --directory=build/drive/ --repo=https://$GITHUB_TOKEN@github.com/cozy/cozy-drive.git",
+    "deploy:drive": "git-directory-deploy --directory=build/drive/ --username=Cozy --email=contact@cozycloud.cc --repo=https://$GITHUB_TOKEN@github.com/cozy/cozy-drive.git",
+    "deploy:photos": "git-directory-deploy --directory=build/photos/ --username=Cozy --email=contact@cozycloud.cc --repo=https://$GITHUB_TOKEN@github.com/cozy/cozy-drive.git",
     "internal:build": "webpack --config webpack.config.js --bail",
     "internal:watch": "webpack --config webpack.config.js --watch --display-modules --display-chunks",
     "tx": "tx pull --all || true",
@@ -21,11 +24,13 @@
     "lint": "npm-run-all --parallel 'lint:*'",
     "lint:js": "standard --parser babel-eslint 'src/**/*.js' 'src/**/*.jsx' 'test/**/*.js'",
     "lint:styles": "stylint src/drive/styles --config ./.stylintrc",
-    "stack:docker": "docker run --rm -it -p 8080:8080 -v \"$(pwd)/build/\":/data/cozy-app/drive cozy/cozy-app-dev",
     "test": "node_modules/.bin/jest",
     "watch:drive": "npm run watch:drive:browser",
     "watch:drive:browser": "npm run internal:watch -- --env.app=drive --env.target=browser",
     "watch:drive:mobile": "npm run internal:watch -- --env.app=drive --env.target=mobile",
+    "watch:drive:standalone": "webpack-dev-server --config webpack.config.js --env.app=drive --env.target=browser --port 8084 --display-modules --display-chunks --inline --hot",
+    "watch:photos": "npm run watch:photos:browser",
+    "watch:photos:browser": "npm run internal:watch -- --env.app=photos --env.target=browser",
     "mobile:drive:icon": "(cd targets/drive/mobile && splashicon-generator --imagespath='./res/model')",
     "android:drive:run": "(cd targets/drive/mobile && cordova run android --device)",
     "android:drive:run:emulator": "(cd targets/drive/mobile && cordova run android --emulator)",
@@ -111,10 +116,11 @@
     "classnames": "^2.2.0",
     "cozy-bar": "^3.0.1",
     "cozy-client-js": "0.3.11",
-    "cozy-ui": "^3.0.0-beta39",
+    "cozy-ui": "^3.0.0-beta41",
     "date-fns": "^1.22.0",
     "filesize": "^3.3.0",
     "hammerjs": "^2.0.8",
+    "justified-layout": "^2.1.0",
     "localforage": "^1.4.3",
     "node-polyglot": "^2.2.0",
     "node-uuid": "^1.4.7",
@@ -123,16 +129,18 @@
     "pouchdb-find": "^0.10.4",
     "preact": "7.2.1",
     "preact-compat": "^3.14.3",
+    "prop-types": "^15.5.10",
     "raven-js": "^3.10.0",
+    "react-autosuggest": "^9.3.2",
     "react-bosonic": "1.0.0-beta6",
     "react-copy-to-clipboard": "^5.0.0",
     "react-markdown": "^2.5.0",
     "react-redux": "^5.0.1",
     "react-router": "3.0.3",
     "react-virtualized": "9.7.0",
     "redux": "^3.6.0",
-    "redux-logger": "^2.7.4",
-    "redux-mock-store": "^1.2.1",
+    "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.2.3",
     "redux-raven-middleware": "^1.2.0",
     "redux-thunk": "^2.1.0"
   },

src/photos/components/ViewerToolbar.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import React from 'react'
 import { translate } from 'cozy-ui/react/I18n'
 import { withRouter } from 'react-router'
-import { downloadFile } from '../lib/redux-cozy-client'
+import { downloadFile } from 'redux-cozy-client'
 
 export const ViewerToolbar = ({ t, router, hidden, currentPhoto }) => {
   const closeViewer = () => {

src/photos/containers/AddToAlbumModal.jsx

@@ -2,7 +2,7 @@ import styles from '../styles/addToAlbum'
 
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { cozyConnect } from '../lib/redux-cozy-client'
+import { cozyConnect } from 'redux-cozy-client'
 import Modal, { ModalSection } from 'cozy-ui/react/Modal'
 import classNames from 'classnames'
 

src/photos/containers/AlbumItem.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import React, { Component } from 'react'
 import { Link, withRouter } from 'react-router'
-import { cozyConnect } from '../lib/redux-cozy-client'
+import { cozyConnect } from 'redux-cozy-client'
 
 import { fetchAlbumPhotos } from '../ducks/albums'
 import ImageLoader from '../components/ImageLoader'

src/photos/containers/AlbumPhotos.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { cozyConnect } from '../lib/redux-cozy-client'
+import { cozyConnect } from 'redux-cozy-client'
 import { withRouter } from 'react-router'
 import styles from '../styles/layout'
 

src/photos/containers/AlbumsView.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { cozyConnect } from '../lib/redux-cozy-client'
+import { cozyConnect } from 'redux-cozy-client'
 import styles from '../styles/layout'
 
 import { AlbumsToolbar, fetchAlbums } from '../ducks/albums'

src/photos/containers/Timeline.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { cozyConnect } from '../lib/redux-cozy-client'
+import { cozyConnect } from 'redux-cozy-client'
 import styles from '../styles/layout'
 
 import { Toolbar as TimelineToolbar, fetchTimeline, getPhotosByMonth } from '../ducks/timeline'

src/photos/ducks/albums/components/PhotosPicker.jsx

@@ -1,7 +1,7 @@
 import styles from '../../../styles/newAlbum'
 
 import React, { Component } from 'react'
-import { cozyConnect } from '../../../lib/redux-cozy-client'
+import { cozyConnect } from 'redux-cozy-client'
 import { withRouter } from 'react-router'
 
 import { fetchTimeline, getPhotosByMonth } from '../../timeline'

src/photos/ducks/albums/index.js

@@ -8,7 +8,7 @@ import {
   addReferencedFiles,
   removeReferencedFiles,
   downloadArchive
-} from '../../lib/redux-cozy-client'
+} from 'redux-cozy-client'
 
 export const DOCTYPE = 'io.cozy.photos.albums'
 

src/photos/ducks/selection/index.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux'
-import { downloadArchive } from '../../lib/redux-cozy-client'
+import { downloadArchive } from 'redux-cozy-client'
 import SelectionBar from './SelectionBar'
 
 // constants

src/photos/ducks/timeline/index.js

@@ -4,7 +4,7 @@ import DeleteConfirm from './components/DeleteConfirm'
 import { hideSelectionBar, getSelectedIds } from '../selection'
 import { FILE_DOCTYPE } from '../../constants/config'
 import { DOCTYPE as ALBUMS_DOCTYPE, removeFromAlbum } from '../albums'
-import { fetchCollection, makeActionCreator, createFile, trashFile } from '../../lib/redux-cozy-client'
+import { fetchCollection, makeActionCreator, createFile, trashFile } from 'redux-cozy-client'
 
 // constants
 const TIMELINE = 'timeline'

src/photos/middlewares/EventTracker.js

@@ -1,6 +1,6 @@
 import { ADD_TO_UPLOAD_QUEUE } from '../ducks/upload'
 import { DOCTYPE as DOCTYPE_ALBUM } from '../ducks/albums'
-import { CREATE_DOCUMENT } from '../lib/redux-cozy-client'
+import { CREATE_DOCUMENT } from 'redux-cozy-client'
 
 const CATEGORY = {
   INTERACTION: 'interaction'

src/photos/reducers/index.js

@@ -5,7 +5,7 @@ import selection from '../ducks/selection'
 import lists from '../ducks/lists'
 import upload from '../ducks/upload'
 import alerterReducer from 'cozy-ui/react/Alerter'
-import { reducer } from '../lib/redux-cozy-client'
+import { reducer } from 'redux-cozy-client'
 
 const photosApp = combineReducers({
   cozy: reducer,

targets/drive/mobile/README.md

@@ -25,15 +25,15 @@ mobile specific:
 
 ```sh
 $ yarn mobile:drive:icon
-$ yarn build:mobile
+$ yarn build:drive:mobile
 $ cd targets/drive/mobile
 $ cordova prepare
 ```
 
 or if you develop :loop::
 
 ```sh
-$ yarn watch:mobile
+$ yarn watch:drive:mobile
 ```