Webpack / Configure webpack, ESLint, Travis, Makefile, npm/yarn and git

.editorconfig

@@ -10,7 +10,7 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{htaccess,html,xml}]
+[*.{htaccess,html,xml,js}]
 indent_size = 2
 
 [*.php]

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "extends": "airbnb-base",
+  "env": {
+    "browser": true,
+  },
+  "rules": {
+    "no-param-reassign": 0, // manipulate DOM style properties
+    "no-restricted-globals": 0, // currently Shaarli uses alert/confirm, could be be improved later
+    "no-alert": 0, // currently Shaarli uses alert/confirm, could be be improved later
+    "no-cond-assign": [2, "except-parens"], // assignment in while loops is readable and avoid assignment duplication
+  }
+};

.gitattributes

@@ -25,16 +25,17 @@ Dockerfile      text
 *.mo            binary
 
 # Exclude from Git archives
-.editorconfig   export-ignore
-.gitattributes  export-ignore
-.github         export-ignore
-.gitignore      export-ignore
-.travis.yml     export-ignore
-doc/**/*.json   export-ignore
-doc/**/*.md     export-ignore
-docker/         export-ignore
-Doxyfile        export-ignore
-Makefile        export-ignore
-mkdocs.yml      export-ignore
-phpunit.xml     export-ignore
-tests/          export-ignore
+.editorconfig     export-ignore
+.gitattributes    export-ignore
+.github           export-ignore
+.gitignore        export-ignore
+.travis.yml       export-ignore
+doc/**/*.json     export-ignore
+doc/**/*.md       export-ignore
+docker/           export-ignore
+Doxyfile          export-ignore
+Makefile          export-ignore
+node_modules/     export-ignore
+mkdocs.yml        export-ignore
+phpunit.xml       export-ignore
+tests/            export-ignore

.gitignore

@@ -36,3 +36,13 @@ doc/html/
 tpl/*
 !tpl/default
 !tpl/vintage
+
+# Front end
+node_modules
+tpl/default/js
+tpl/default/css
+tpl/default/fonts
+tpl/default/img
+tpl/vintage/js
+tpl/vintage/css
+tpl/vintage/img

.travis.yml

@@ -2,20 +2,22 @@ sudo: false
 dist: trusty
 language: php
 cache:
+  yarn: true
   directories:
     - $HOME/.composer/cache
+    - $HOME/.cache/yarn
 php:
   - 7.2
   - 7.1
   - 7.0
   - 5.6
 install:
-  - composer self-update
+  - yarn install
   - composer install --prefer-dist
-  - locale -a
 before_script:
   - PATH=${PATH//:\.\/node_modules\/\.bin/}
 script:
   - make clean
   - make check_permissions
+  - make eslint
   - make all_tests

Makefile

@@ -157,15 +157,23 @@ composer_dependencies: clean
 	composer install --no-dev --prefer-dist
 	find vendor/ -name ".git" -type d -exec rm -rf {} +
 
+### download 3rd-party frontend libraries
+frontend_dependencies:
+	yarn install
+
+### Build frontend dependencies
+build_frontend: frontend_dependencies
+	yarn run build
+
 ### generate a release tarball and include 3rd-party dependencies and translations
-release_tar: composer_dependencies htmldoc translate
+release_tar: composer_dependencies htmldoc translate build_frontend
 	git archive --prefix=$(ARCHIVE_PREFIX) -o $(ARCHIVE_VERSION).tar HEAD
 	tar rvf $(ARCHIVE_VERSION).tar --transform "s|^vendor|$(ARCHIVE_PREFIX)vendor|" vendor/
 	tar rvf $(ARCHIVE_VERSION).tar --transform "s|^doc/html|$(ARCHIVE_PREFIX)doc/html|" doc/html/
 	gzip $(ARCHIVE_VERSION).tar
 
 ### generate a release zip and include 3rd-party dependencies and translations
-release_zip: composer_dependencies htmldoc translate
+release_zip: composer_dependencies htmldoc translate build_frontend
 	git archive --prefix=$(ARCHIVE_PREFIX) -o $(ARCHIVE_VERSION).zip -9 HEAD
 	mkdir -p $(ARCHIVE_PREFIX)/{doc,vendor}
 	rsync -a doc/html/ $(ARCHIVE_PREFIX)doc/html/
@@ -207,3 +215,8 @@ htmldoc:
 ### Generate Shaarli's translation compiled file (.mo)
 translate:
 	@find inc/languages/ -name shaarli.po -execdir msgfmt shaarli.po -o shaarli.mo \;
+
+### Run ESLint check against Shaarli's JS files
+eslint:
+	@yarn run eslint assets/vintage/js/
+	@yarn run eslint assets/default/js/

package.json

@@ -0,0 +1,30 @@
+{
+  "dependencies": {
+    "awesomplete": "^1.1.2",
+    "blazy": "^1.8.2",
+    "font-awesome": "^4.7.0",
+    "pure-extras": "^1.0.0",
+    "purecss": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-minify-webpack-plugin": "^0.2.0",
+    "babel-preset-env": "^1.6.1",
+    "css-loader": "^0.28.9",
+    "eslint": "^4.16.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.6",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.1",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.10.0"
+  },
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch"
+  }
+}

webpack.config.js

@@ -0,0 +1,149 @@
+const path = require('path');
+const glob = require('glob');
+
+// Minify JS
+const MinifyPlugin = require('babel-minify-webpack-plugin');
+
+// This plugin extracts the CSS into its own file instead of tying it with the JS.
+// It prevents:
+//   - not having styles due to a JS error
+//   - the flash page without styles during JS loading
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const extractCssDefault = new ExtractTextPlugin({
+  filename: "../css/[name].min.css",
+  publicPath: 'tpl/default/css/',
+});
+
+const extractCssVintage = new ExtractTextPlugin({
+  filename: "../css/[name].min.css",
+  publicPath: 'tpl/vintage/css/',
+});
+
+module.exports = [
+  {
+    entry: {
+      picwall: './assets/common/js/picwall.js',
+      pluginsadmin: './assets/default/js/plugins-admin.js',
+      shaarli: [
+        './assets/default/js/base.js',
+        './assets/default/scss/shaarli.scss',
+      ].concat(glob.sync('./assets/default/img/*')),
+    },
+    output: {
+      filename: '[name].min.js',
+      path: path.resolve(__dirname, 'tpl/default/js/')
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                'babel-preset-env',
+              ]
+            }
+          }
+        },
+        {
+          test: /\.scss/,
+          use: extractCssDefault.extract({
+            use: [{
+              loader: "css-loader",
+              options: {
+                minimize: true,
+              }
+            }, {
+              loader: "sass-loader"
+            }],
+          })
+        },
+        {
+          test: /\.(gif|png|jpe?g|svg|ico)$/i,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '../img/[name].[ext]',
+                publicPath: 'tpl/default/img/',
+              }
+            }
+          ],
+        },
+        {
+          test: /\.(eot|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: 'file-loader',
+          options: {
+            name: '../fonts/[name].[ext]',
+            // do not add a publicPath here because it's already handled by CSS's publicPath
+            publicPath: '',
+          }
+        },
+      ],
+    },
+    plugins: [
+      new MinifyPlugin(),
+      extractCssDefault,
+    ],
+  },
+  {
+    entry: {
+      shaarli: [
+        './assets/vintage/js/base.js',
+        './assets/vintage/css/reset.css',
+        './assets/vintage/css/shaarli.css',
+      ].concat(glob.sync('./assets/vintage/img/*')),
+      picwall: './assets/common/js/picwall.js',
+    },
+    output: {
+      filename: '[name].min.js',
+      path: path.resolve(__dirname, 'tpl/vintage/js/')
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                'babel-preset-env',
+              ]
+            }
+          }
+        },
+        {
+          test: /\.css$/,
+          use: extractCssVintage.extract({
+            use: [{
+              loader: "css-loader",
+              options: {
+                minimize: true,
+              }
+            }],
+          })
+        },
+        {
+          test: /\.(gif|png|jpe?g|svg|ico)$/i,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '../img/[name].[ext]',
+                publicPath: '',
+              }
+            }
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new MinifyPlugin(),
+      extractCssVintage,
+    ],
+  },
+];