Merge pull request #2217 from RedisInsight/feature/RI-2850_Electron_improvment

Feature/ri 2850 electron improvment

Author: vlad-dargel

.eslintrc.js

@@ -1,17 +1,63 @@
 module.exports = {
   root: true,
+  env: {
+    node: true,
+  },
   extends: ['airbnb-typescript'],
   plugins: ['@typescript-eslint'],
   parser: '@typescript-eslint/parser',
   rules: {
-    'max-len': ['warn', 120],
+    semi: ['error', 'never'],
+    quotes: [2, 'single', { avoidEscape: true }],
+    'max-len': ['error', { ignoreComments: true, ignoreStrings: true, ignoreRegExpLiterals: true, code: 120 }],
     'class-methods-use-this': 'off',
     'import/no-extraneous-dependencies': 'off', // temporary disabled
+    '@typescript-eslint/semi': ['error', 'never'],
+    'object-curly-newline': 'off',
+    'import/prefer-default-export': 'off',
+    '@typescript-eslint/comma-dangle': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'import/order': [
+      1,
+      {
+        groups: [
+          'external',
+          'builtin',
+          'internal',
+          'sibling',
+          'parent',
+          'index',
+        ],
+        pathGroups: [
+          {
+            pattern: 'desktopSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
+          {
+            pattern: 'uiSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
+          {
+            pattern: 'apiSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
+        ],
+        warnOnUnassignedImports: true,
+        pathGroupsExcludedImportTypes: ['builtin']
+      },
+    ],
   },
   parserOptions: {
     project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    createDefaultProgram: true,
   },
   ignorePatterns: [
     'redisinsight/ui',
+    'redisinsight/api',
   ],
-};
+}

.gitignore

@@ -56,6 +56,9 @@ dll
 main.js
 main.js.map
 vendor
+redisinsight/main.js.LICENSE.txt
+redisinsight/main.prod.js.LICENSE.txt
+
 
 # E2E tests report
 /tests/e2e/report

configs/paths.js

@@ -1,11 +1,13 @@
-import path from 'path';
 import webpack from 'webpack';
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
+import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../redisinsight/package.json';
 
-export default {
+const configuration: webpack.Configuration =  {
   externals: [...Object.keys(externals || {})],
 
+  stats: 'errors-only',
+
   module: {
     rules: [
       {
@@ -22,28 +24,22 @@ export default {
   },
 
   output: {
-    path: path.join(__dirname, '..'),
-    // commonjs2 https://github.com/webpack/webpack/issues/1114
-    libraryTarget: 'commonjs2',
+    path: webpackPaths.riPath,
+    // https://github.com/webpack/webpack/issues/1114
+    library: {
+      type: 'commonjs2',
+    },
   },
 
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.scss'],
-    plugins: [
-      new TsconfigPathsPlugin({
-        configFile: path.join(__dirname, '..', 'tsconfig.json'),
-      }),
-    ],
-    alias: {
-      src: path.resolve(__dirname, '../redisinsight/api/src'),
-      apiSrc: path.resolve(__dirname, '../redisinsight/api/src'),
-      uiSrc: path.resolve(__dirname, '../redisinsight/ui/src'),
-    },
-    modules: [path.join(__dirname, '../redisinsight/api'), 'node_modules'],
+    modules: [webpackPaths.apiPath, 'node_modules'],
+    plugins: [new TsconfigPathsPlugins()],
   },
 
   plugins: [
     new webpack.EnvironmentPlugin({
+      NODE_ENV: 'production',
     }),
 
     new webpack.IgnorePlugin({
@@ -81,3 +77,5 @@ export default {
     }),
   ],
 };
+
+export default configuration;

configs/webpack.config.base.js renamed to configs/webpack.config.base.ts

@@ -2,4 +2,4 @@
 /* eslint import/no-unresolved: off, import/no-self-import: off */
 require('@babel/register');
 
-module.exports = require('./webpack.config.renderer.dev.babel').default;
+module.exports = require('./webpack.config.renderer.dev').default;

configs/webpack.config.eslint.js

@@ -1,11 +1,12 @@
 import path from 'path';
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
-import { toString } from 'lodash'
+import { toString } from 'lodash';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
 import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
 import { version } from '../redisinsight/package.json';
+import webpackPaths from './webpack.paths';
 
 DeleteSourceMaps();
 
@@ -23,19 +24,17 @@ export default merge(baseConfig, {
 
   target: 'electron-main',
 
-  entry: './redisinsight/main.dev.ts',
-
-  resolve: {
-    alias: {
-      ['apiSrc']: path.resolve(__dirname, '../redisinsight/api/src'),
-      ['src']: path.resolve(__dirname, '../redisinsight/api/src'),
-    },
-    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+  entry: {
+    main: path.join(webpackPaths.desktopPath, 'index.ts'),
+    preload: path.join(webpackPaths.desktopPath, 'preload.ts'),
   },
 
   output: {
-    path: path.join(__dirname, '../redisinsight'),
-    filename: 'main.prod.js',
+    path: webpackPaths.distMainPath,
+    filename: '[name].js',
+    library: {
+      type: 'umd',
+    },
   },
 
   // optimization: {
@@ -46,10 +45,6 @@ export default merge(baseConfig, {
   //   ],
   // },
 
-  // alias: {
-  //   'apiSrc': path.resolve(__dirname, '../redisinsight/api/src/')
-  // },
-
   plugins: [
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
@@ -75,6 +70,10 @@ export default merge(baseConfig, {
         ? process.env.CONNECTIONS_TIMEOUT_DEFAULT
         : toString(30 * 1000), // 30 sec
     }),
+
+    new webpack.DefinePlugin({
+      'process.type': '"browser"',
+    }),
   ],
 
   /**

configs/webpack.config.main.prod.babel.js renamed to configs/webpack.config.main.prod.ts

@@ -1,8 +1,8 @@
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
+import { toString } from 'lodash';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-import { toString } from 'lodash'
-import mainProdConfig from './webpack.config.main.prod.babel';
+import mainProdConfig from './webpack.config.main.prod';
 import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
 import { version } from '../redisinsight/package.json';
 

configs/webpack.config.main.stage.babel.js renamed to configs/webpack.config.main.stage.ts

@@ -0,0 +1,64 @@
+import path from 'path';
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
+
+const configuration: webpack.Configuration = {
+  devtool: 'inline-source-map',
+
+  mode: 'development',
+
+  target: 'electron-preload',
+
+  entry: path.join(webpackPaths.desktopPath, 'preload.ts'),
+
+  output: {
+    path: webpackPaths.dllPath,
+    filename: 'preload.js',
+    library: {
+      type: 'umd',
+    },
+  },
+
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+    }),
+
+    /**
+     * Create global constants which can be configured at compile time.
+     *
+     * Useful for allowing different behaviour between development builds and
+     * release builds
+     *
+     * NODE_ENV should be production so that modules do not perform certain
+     * development checks
+     *
+     * By default, use 'development' as NODE_ENV. This can be overriden with
+     * 'staging', for example, by changing the ENV variables in the npm scripts
+     */
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development',
+    }),
+
+    new webpack.LoaderOptionsPlugin({
+      debug: true,
+    }),
+  ],
+
+  /**
+   * Disables webpack processing of __dirname and __filename.
+   * If you run the bundle in node.js it falls back to these values of node.js.
+   * https://github.com/webpack/webpack/issues/2010
+   */
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  watch: true,
+};
+
+export default merge(baseConfig, configuration);

configs/webpack.config.preload.dev.ts

@@ -1,17 +1,17 @@
 import webpack from 'webpack';
 import path from 'path';
 import { merge } from 'webpack-merge';
-import { toString } from 'lodash'
 import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
 import { dependencies } from '../package.json';
 import { dependencies as dependenciesApi } from '../redisinsight/package.json';
 
 console.log('dependenciesApi', dependenciesApi);
 
-const dist = path.join(__dirname, '../dll');
+const dist = webpackPaths.dllPath;
 
 export default merge(baseConfig, {
-  context: path.join(__dirname, '..'),
+  context: webpackPaths.rootPath,
 
   devtool: 'eval',
 
@@ -24,17 +24,19 @@ export default merge(baseConfig, {
   /**
    * Use `module` from `webpack.config.renderer.dev.js`
    */
-  module: require('./webpack.config.renderer.dev.babel').default.module,
+  module: require('./webpack.config.renderer.dev').default.module,
 
   entry: {
     renderer: [...Object.keys(dependencies || {}), ...Object.keys(dependenciesApi || {})],
   },
 
   output: {
-    library: 'renderer',
     path: dist,
     filename: '[name].dev.dll.js',
-    libraryTarget: 'var',
+    library: {
+      name: 'renderer',
+      type: 'var',
+    },
   },
 
   stats: 'errors-only',
@@ -47,29 +49,16 @@ export default merge(baseConfig, {
 
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
-      APP_ENV: 'electron',
-      API_PREFIX: 'api',
-      BASE_API_URL: 'http://localhost',
-      RESOURCES_BASE_URL: 'http://localhost',
-      SCAN_COUNT_DEFAULT: '500',
-      SCAN_TREE_COUNT_DEFAULT: '10000',
-      PIPELINE_COUNT_DEFAULT: '5',
-      SEGMENT_WRITE_KEY:
-      'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
-      CONNECTIONS_TIMEOUT_DEFAULT: 'CONNECTIONS_TIMEOUT_DEFAULT' in process.env
-        ? process.env.CONNECTIONS_TIMEOUT_DEFAULT
-        : toString(30 * 1000), // 30 sec
     }),
 
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {
-        context: path.join(__dirname, '..'),
+        context: webpackPaths.desktopPath,
         output: {
-          path: path.join(__dirname, '../dll'),
+          path: webpackPaths.dllPath,
         },
       },
     }),
-
   ],
 });