Started full client/fe refactor, using vue.js component instead of jQ…

…uery/entwine

.editorconfig

@@ -8,7 +8,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{less,js,json}]
+[*.{less,js,vue,json,yml}]
 indent_size = 2
 
 [*.md]

.eslintrc.js

@@ -0,0 +1,29 @@
+const settings = require('./client/config/webpack.resolve').forEsLint;
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    'airbnb-base',
+    'plugin:vue/strongly-recommended'
+  ],
+  rules: {
+    'no-new': 0,
+    'comma-dangle': 0,
+    radix: 0,
+    'no-prototype-builtins': 0,
+    'no-restricted-globals': 0,
+    'no-underscore-dangle': 0,
+    'vue/html-closing-bracket-newline': 0,
+    'no-param-reassign': 0
+  },
+  globals: {
+    cloudinary: false
+  },
+  plugins: [
+    'vue'
+  ],
+  settings
+};

CHANGELOG.md

@@ -1,44 +1,48 @@
-[1.1.4] - 2019-06-12
+## [Unreleased]
+### Changed
+- Full client / FE refactor using vue.js component instead of jQuery/entwine
+
+## [1.1.4] - 2019-06-12
 ### Added
 - Possibility to chain multiple transformations
 - "CropScale" method, crop to custom coordinates/gravity if available, then scale/crop to the exact dimensions.
 
-[1.1.3] - 2019-06-03
+## [1.1.3] - 2019-06-03
 ### Added
 - Option to make Cloudinary meta data less prominent
 - `root_folder` config value, allows to use a folder as root for all upload fields
 
 ### Changed
 - Updated routes config to fix a interference with default admin/graphql route
 
-[1.1.2] - 2019-05-09
+## [1.1.2] - 2019-05-09
 ### Changed
 - Proper classes for the actions/buttons
 
-[1.1.1] - 2019-05-08
+## [1.1.1] - 2019-05-08
 ### Added
 - Save file size, width and height of the initial upload (after incoming transormation)
 
 ### Fixed
 - Namespace in the field holder template 
 
-[1.1.0] - 2019-04-24
+## [1.1.0] - 2019-04-24
 ### Changed
 - Namespace update to Level51\Cloudinary
 
-[1.0.1] - 2019-04-16
+## [1.0.1] - 2019-04-16
 ## Changed
 - Ensure that the upload controller route is defined before other admin routes
 
-[1.0.0] - 2019-03-28
+## [1.0.0] - 2019-03-28
 ## Changed
 - Refactor for SilverStripe 4 support - see develop-ss3 branch or 0.x.x releases for SS3
 
-[0.2.1] - 2019-03-19
+## [0.2.1] - 2019-03-19
 ## Changed
 - Trigger Cloudinary delete/destroy only if a public id is set
 
-[0.2.0] - 2019-02-22
+## [0.2.0] - 2019-02-22
 ## Added
 - getCloudinaryUrl service function
 - Methods for a few image transformations like pad, limit, scale ...
@@ -55,7 +59,7 @@
 - Use the service function to get the cloudinary url within the CloudinaryImage Link() function (ensures proper credentials setup)
 - privateDownloadLink if the "$asDownload" param is set to false
 
-[0.1.0] - 2018-05-09
+## [0.1.0] - 2018-05-09
 ## First public release
 - CloudinaryImage: data object holding relevant data and provide the first manipulation methods
 - CloudinaryUploadField: image uploader using the upload widget including some options like cropping, aspect ratio, upload folder name

_config/config.yml

@@ -3,7 +3,7 @@ Name: cloudinary
 ---
 SilverStripe\Admin\LeftAndMain:
   extra_requirements_javascript:
-    - https://widget.cloudinary.com/global/all.js
+    - https://widget.cloudinary.com/v2.0/global/all.js
 Level51\Cloudinary\Cloudinary:
   theme: 'white'
   use_signed: true

client/config/webpack.dev.js

@@ -0,0 +1,110 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+const { DefinePlugin } = require('webpack');
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
+const resolve = require('./webpack.resolve').forWebpack;
+
+module.exports = env => ({
+
+  entry: {
+    'level51-cloudinary-upload-field': ['@babel/polyfill/noConflict', 'src/cloudinaryUploadField.js']
+  },
+
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].js',
+    publicPath: '' // TODO check
+  },
+
+  mode: 'development',
+
+  devtool: 'source-map',
+
+  resolve,
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: file => (
+          /node_modules/.test(file)
+          && !/\.vue\.js/.test(file)
+        ),
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [
+              '@babel/plugin-proposal-object-rest-spread',
+              '@babel/plugin-syntax-dynamic-import'
+            ],
+            presets: [['@babel/preset-env', { modules: false }, '@babel/preset-stage-3']]
+          }
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'vue-style-loader'
+          },
+          {
+            loader: MiniCSSExtractPlugin.loader
+          },
+          {
+            loader: 'css-loader'
+          }
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'vue-style-loader'
+          },
+          {
+            loader: MiniCSSExtractPlugin.loader
+          },
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'less-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]'
+        }
+      }
+    ]
+  },
+
+  plugins: [
+    new DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(env.NODE_ENV)
+      }
+    }),
+
+    new VueLoaderPlugin(),
+
+    new MiniCSSExtractPlugin({
+      filename: '[name].css'
+    })
+  ]
+});

client/config/webpack.prod.js

@@ -0,0 +1,116 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+const { DefinePlugin } = require('webpack');
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+const resolve = require('./webpack.resolve').forWebpack;
+
+module.exports = env => ({
+
+  entry: {
+    'level51-cloudinary-upload-field': ['@babel/polyfill/noConflict', 'src/cloudinaryUploadField.js']
+  },
+
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].js',
+    publicPath: '' // TODO check
+  },
+
+  mode: 'production',
+
+  resolve,
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: file => (
+          /node_modules/.test(file)
+          && !/\.vue\.js/.test(file)
+        ),
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [
+              '@babel/plugin-proposal-object-rest-spread',
+              '@babel/plugin-syntax-dynamic-import'
+            ],
+            presets: [['@babel/preset-env', { modules: false }, '@babel/preset-stage-3']]
+          }
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'vue-style-loader'
+          },
+          {
+            loader: MiniCSSExtractPlugin.loader
+          },
+          {
+            loader: 'css-loader'
+          }
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'vue-style-loader'
+          },
+          {
+            loader: MiniCSSExtractPlugin.loader
+          },
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'less-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]'
+        }
+      }
+    ]
+  },
+
+  plugins: [
+    new DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(env.NODE_ENV)
+      }
+    }),
+
+    new VueLoaderPlugin(),
+
+    new OptimizeCssAssetsPlugin(),
+    new MiniCSSExtractPlugin({
+      filename: '[name].css'
+    }),
+
+    new CompressionPlugin({
+      algorithm: 'gzip'
+    }),
+  ]
+});

client/config/webpack.resolve.js

@@ -0,0 +1,21 @@
+const path = require('path');
+
+const alias = {
+  vue$: 'vue/dist/vue.common.js',
+  src: path.resolve(__dirname, '../src/js'),
+  styles: path.resolve(__dirname, '../src/styles')
+};
+
+const extensions = ['.js', '.vue', '.json', '.less'];
+
+module.exports = {
+  forWebpack: { alias, extensions },
+  forEsLint: {
+    'import/resolver': {
+      alias: {
+        map: Object.keys(alias).map(key => [key, alias[key]]),
+        extensions
+      }
+    }
+  }
+};