Merge pull request #9 from mendix/fix-ASC20

Fix-ASC20

Author: Osama Mohammad Najjar

.jshintrc

@@ -0,0 +1,9 @@
+node_modules/
+build/
+dist/
+
+test/*
+!test/widgets
+!test/TestCrop.mpr
+
+.mxlocal.config.js

Cropper/.gitignore

@@ -0,0 +1,15 @@
+# Cropper
+Image Cropping Widget
+
+## Install dependencies
+
+`npm install` or `yarn install`
+
+
+## Available Scripts
+
+- `npm run dev` or `yarn dev`
+will watch for any changes you made and build unoptimized version of your widget with a source map for debugging.
+
+- `npm run build` or `yarn build`
+will build an optimized (minified & uglified) version of your widget & no source maps will be genrated.

Cropper/README.md

@@ -0,0 +1,27 @@
+const path = require('path');
+let localConfFilePath = "../.mxlocal.config",
+	localConf = false;
+if (moduleExists(localConfFilePath)) {
+	localConf = require(localConfFilePath);
+}
+// if there is a local conf then use it otherwise use the default/general
+const mxProjectRootDir = localConf && localConf.mxProjectRootDir ? localConf.mxProjectRootDir : path.join(__dirname, "..", "test");
+
+module.exports = {
+	srcDir: path.join(__dirname, '..', 'src'),
+	srcEntry: './src/index.js',
+	confDir: __dirname,
+	distDir: path.join(__dirname, '..', 'dist'),
+	buildDir: path.join(__dirname, '..', 'build'),
+	mxProjectRootDir,
+	widgetPackageXML: path.join(__dirname, '..', 'src', 'package.ejs'),
+	widgetConfigXML: path.join(__dirname, '..', 'src', 'widget.config.ejs')
+};
+
+function moduleExists(modulePath) {
+	try {
+		return require.resolve(modulePath);
+	} catch (e) {
+		return false;
+	}
+}

Cropper/conf/paths.js

@@ -0,0 +1,16 @@
+module.exports = {
+	plugins: [
+		require('autoprefixer'),
+		require('postcss-clean'),
+		require('cssnano')({
+			preset: [
+				'default',
+				{
+					discardComments: {
+						removeAll: true
+					}
+				}
+			]
+		})
+	]
+};

Cropper/conf/postcss.config.js

@@ -0,0 +1,126 @@
+const paths = require('./paths');
+const widgetConf = require('./widget.config.json');
+const XMLPlugin = require('xml-webpack-plugin');
+const ArchivePlugin = require('webpack-archive-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const fs = require('fs-extra');
+
+const MODES = {
+    DEV: 'development',
+    PROD: 'production'
+};
+const isProd = process.env.MODE === MODES.PROD;
+const isDev = process.env.MODE === MODES.DEV;
+
+const widgetDir = `${widgetConf.name}/widget`;
+const widgetUIDir = `${widgetDir}/ui`;
+
+const widgetXMLFiles = [
+    {
+        template: paths.widgetPackageXML,
+        filename: `package.xml`,
+        data: {
+            NAME: widgetConf.name
+        }
+    },
+    {
+        template: paths.widgetConfigXML,
+        filename: `${widgetConf.name}/${widgetConf.name}.xml`,
+        data: {
+            NAME: widgetConf.name,
+            FRIENDLY_NAME: widgetConf.friendlyName,
+            WIDGET_DESC: widgetConf.description
+        }
+    }
+];
+
+module.exports = {
+    mode: isDev ? MODES.DEV : MODES.PROD,
+    target: 'web',
+    devtool: isDev ? 'eval-source-map' : false,
+    watch: isDev,
+    entry: paths.srcEntry,
+    output: {
+        path: isDev ? paths.buildDir : paths.distDir,
+        filename: `${widgetDir}/${widgetConf.name}.js`,
+        libraryTarget: 'amd'
+    },
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                test: /\.js(\?.*)?$/i
+            })
+        ]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [ '@babel/preset-env' ],
+                        plugins: [ 'add-module-exports' ]
+                    }
+                }
+            },
+            {
+                test: /\.(sa|sc|c)ss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    { loader: 'postcss-loader', options: { config: { path: paths.confDir } } },
+                    'sass-loader'
+                ]
+            },
+            {
+                test: /\.(gif|png|jpe?g|svg)$/i,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: `[name].[ext]`,
+                            outputPath: `${widgetUIDir}/images`
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    externals: [
+        { MxWidgetBase: 'mxui/widget/_WidgetBase' },
+        { dojoBaseDeclare: 'dojo/_base/declare' },
+        /mx|mxui|mendix|dijit|dojo|require/
+    ],
+    plugins: _getPlugins()
+};
+
+function _getPlugins() {
+    //ensure distDir fir Archive Plugin
+    fs.ensureDirSync(paths.distDir);
+    const plugins = [
+        new MiniCssExtractPlugin({
+            filename: `${widgetUIDir}/${widgetConf.name}.css`
+        }),
+        new XMLPlugin({
+            files: widgetXMLFiles
+        }),
+        new ArchivePlugin({
+            output: `${paths.distDir}/${widgetConf.name}`,
+            format: 'zip',
+            ext: 'mpk'
+        })
+    ];
+    if (paths.mxProjectRootDir) {
+        plugins.push(
+            new ArchivePlugin({
+                output: `${paths.mxProjectRootDir}/widgets/${widgetConf.name}`,
+                format: 'zip',
+                ext: 'mpk'
+            })
+        );
+    }
+    return plugins;
+}

Cropper/conf/webpack.config.js

@@ -0,0 +1,5 @@
+{
+	"name": "cropper",
+	"friendlyName": "Image Cropper",
+	"description": "Image cropper."
+}