Provide WebPack build options for microscopy, vtk, and ui

extensions/dicom-microscopy/package.json

@@ -5,7 +5,7 @@
   "author": "OHIF",
   "license": "MIT",
   "repository": "OHIF/Viewers",
-  "main": "dist/index.js",
+  "main": "dist/index.umd.js",
   "module": "src/index.js",
   "engines": {
     "node": ">=8",

extensions/vtk/package.json

@@ -6,7 +6,6 @@
   "license": "MIT",
   "repository": "OHIF/Viewers",
   "main": "dist/index.umd.js",
-  "module": "src/index.js",
   "engines": {
     "node": ">=8",
     "npm": ">=5"

extensions/vtk/rollup.config.js

@@ -10,7 +10,6 @@ import copy from 'rollup-plugin-copy';
 
 // Deal with https://github.com/rollup/rollup-plugin-commonjs/issues/297
 
-
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
@@ -26,7 +25,7 @@ const globals = {
   'dicom-parser': 'dicomParser',
   'ohif-core': 'OHIF',
   hammerjs: 'Hammer',
-  '@ohif/i18n': 'i18n'
+  '@ohif/i18n': 'i18n',
 };
 
 export default {
@@ -37,26 +36,26 @@ export default {
       format: 'umd',
       name: 'ohif-vtk-extension',
       sourcemap: true,
-      globals
+      globals,
     },
     {
       file: pkg.module,
       format: 'es',
       sourcemap: true,
-      globals
-    }
+      globals,
+    },
   ],
   plugins: [
     builtins(),
     external(),
     postcss({
-      modules: false
+      modules: false,
     }),
     url(),
     babel({
       exclude: 'node_modules/**',
       externalHelpers: true,
-      runtimeHelpers: true
+      runtimeHelpers: true,
     }),
     copy({
       targets: ['src/locales'],
@@ -70,16 +69,10 @@ export default {
           'getImageData',
           'loadImageData',
           'VTKViewport',
-          'VTKMPRViewport'
+          'VTKMPRViewport',
         ],
-        '.yalc/react-vtkjs-viewport/dist/index.js': [
-          'getImageData',
-          'loadImageData',
-          'VTKViewport',
-          'VTKMPRViewport'
-        ]
-      }
-    })
+      },
+    }),
   ],
-  external: Object.keys(pkg.peerDependencies || {})
+  external: Object.keys(pkg.peerDependencies || {}),
 };

extensions/vtk/webpack.config.js

@@ -56,13 +56,13 @@ const cssRules = [
 ];
 
 var entry = path.join(__dirname, './src/index.js');
-const sourcePath = path.join(__dirname, './src');
-const outputPath = path.join(__dirname, './dist');
+const SRC_DIR = path.join(__dirname, './src');
+const OUTPUT_DIR = path.join(__dirname, './dist');
 
 module.exports = {
   entry,
   output: {
-    path: outputPath,
+    path: OUTPUT_DIR,
     filename: 'index.umd.js',
     library: '@ohif/extension-vtk',
     libraryTarget: 'umd',
@@ -98,7 +98,7 @@ module.exports = {
       path.resolve(__dirname, 'node_modules'),
       // Hoisted Yarn Workspace Modules
       path.resolve(__dirname, '../../node_modules'),
-      sourcePath,
+      SRC_DIR,
     ],
   },
   externals: [

platform/ui/config/webpack.common.js

@@ -0,0 +1,81 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  return {
+    entry: {
+      app: `${SRC_DIR}/index.js`,
+    },
+    context: SRC_DIR,
+    resolve: {
+      extensions: ['.js', '.jsx', '.json', '*'],
+      symlinks: true,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          exclude: [/node_modules/],
+          loader: 'babel-loader',
+          options: {
+            // Find babel.config.js in monorepo root
+            // https://babeljs.io/docs/en/options#rootmode
+            rootMode: 'upward',
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  // Do not transform ES6 modules to another format.
+                  // Webpack will take care of that.
+                  modules: false,
+                },
+              ],
+            ],
+          },
+        },
+        {
+          test: /\.styl$/,
+          use: [
+            {
+              loader: 'style-loader', // creates style nodes from JS strings
+            },
+            {
+              loader: 'css-loader', // translates CSS into CommonJS
+            },
+            {
+              loader: 'stylus-loader', // compiles Stylus to CSS
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            ExtractCssChunks.loader,
+            { loader: 'css-loader', options: { importLoaders: 1 } },
+            {
+              loader: 'postcss-loader',
+              options: {
+                config: {
+                  path: './postcss.config.js',
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new webpack.EnvironmentPlugin(['NODE_ENV']),
+      new ExtractCssChunks({
+        filename: '[name].css',
+        chunkFilename: '[id].css',
+        // hot: true /* only necessary if hot reloading not function*/
+      }),
+    ],
+  };
+};

platform/ui/config/webpack.prod.js

@@ -0,0 +1,64 @@
+const merge = require('webpack-merge');
+const path = require('path');
+const common = require('./webpack.common');
+const pkg = require('./../package.json');
+
+const ROOT_DIR = path.join(__dirname, './..');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  const commonConfig = common(env, argv);
+
+  return merge(commonConfig, {
+    mode: 'production',
+    stats: {
+      colors: false,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: true,
+      chunkModules: true,
+      modules: true,
+      children: true,
+      warnings: true,
+    },
+    optimization: {
+      minimize: true,
+      sideEffects: true,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'react-viewerbase',
+      libraryTarget: 'umd',
+      filename: pkg.main,
+      auxiliaryComment: 'Test Comment',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(gif|jpe?g|png|svg)$/i,
+          use: [
+            {
+              loader: 'url-loader',
+              options: {
+                limit: 8192,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(ttf|eot|woff|woff2)$/i,
+          use: [
+            {
+              loader: 'url-loader',
+              options: {
+                limit: 50000,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  });
+};

platform/ui/package.json

@@ -5,7 +5,7 @@
   "author": "OHIF Contributors",
   "license": "MIT",
   "repository": "OHIF/react-viewerbase",
-  "main": "dist/index.js",
+  "main": "dist/index.umd.js",
   "module": "src/index.js",
   "engines": {
     "node": ">=8",
@@ -19,6 +19,7 @@
     "dev": "docz dev",
     "test": "cross-env CI=1 react-scripts test --env=jsdom --transformIgnorePatterns \"node_modules/(?!react-dnd)/\"",
     "test:watch": "react-scripts test --env=jsdom --transformIgnorePatterns \"node_modules/(?!react-dnd)/\"",
+    "lerna:build": "webpack --config config/webpack.prod.js -w -d",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "lint": "eslint -c .eslintrc --fix src && prettier --single-quote --write src/**/*.{js,jsx,json,css}",

platform/ui/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  // parser: "sugarss",
+  parser: false,
+  plugins: {
+    'postcss-import': {},
+    'postcss-preset-env': {},
+    cssnano: {},
+  },
+};