Push changes up to switch PCs

README.md

@@ -1,6 +1,45 @@
 # OHIF Medical Imaging Platform
 
-```js
-// Add shared dev dependency for workspace
+```bash
+# Flip workspaces flag
+yarn config set workspaces-experimental true
+
+# Force install
+yarn install --force
+
+# Link
+# Redundent with yarn workspaces
+npx lerna bootstrap
+```
+
+```bash
+# Link for local dev
+cd ./extensions/my-package
+npx lerna add @ohif/my-package --scope=@ohif/my-package-consumer
+```
+
+```bash
+# Add shared dev dependency for workspace
 yarn add --dev -W package-name
 ```
+
+// module vs main vs jsnext:main vs browser
+https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages
+
+Webpack: https://webpack.js.org/configuration/resolve/
+
+UMD builds go through
+
+- index.umd.js
+- Extensions passed in via window config
+
+PWA builds go through
+
+- index.js
+- Extensions specified in file or by window config
+
+> The module property should point to a script that utilizes ES2015 module
+> syntax but no other syntax features that aren't yet supported by browsers or
+> node. This enables webpack to parse the module syntax itself, allowing for
+> lighter bundles via tree shaking if users are only consuming certain parts of
+> the library.

extensions/cornerstone/config/webpack.common.js

@@ -18,7 +18,7 @@ module.exports = (env, argv) => {
     module: {
       rules: [
         {
-          test: /\.jsx?$/,
+          test: /\.(js|jsx)$/,
           exclude: [/node_modules/],
           loader: 'babel-loader',
           options: {

extensions/dicom-microscopy/package.json

@@ -17,9 +17,9 @@
     "start": "rollup -c -w"
   },
   "peerDependencies": {
+    "ohif-core": "^0.6.0",
     "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
-    "ohif-core": "^0.6.0"
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
     "gh-pages": "^2.0.1"

extensions/vtk/package.json

@@ -6,14 +6,15 @@
   "license": "MIT",
   "repository": "OHIF/Viewers",
   "main": "dist/index.umd.js",
+  "module": "src/index.js",
+  "sideEffects": true,
   "engines": {
     "node": ">=8",
     "npm": ">=5"
   },
   "scripts": {
-    "lerna:build": "webpack --progress --colors --mode production",
-    "lerna:dev": "webpack --watch --progress --colors --mode development",
-    "prepublishOnly": "yarn install && yarn run lerna:build"
+    "build": "webpack --progress --colors --mode production",
+    "dev": "webpack --watch --progress --colors --mode development"
   },
   "peerDependencies": {
     "@ohif/i18n": "0.2.2",

extensions/vtk/rollup.config.js

@@ -10,23 +10,23 @@ import copy from 'rollup-plugin-copy';
 
 // Deal with https://github.com/rollup/rollup-plugin-commonjs/issues/297
 
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'react-redux': 'ReactRedux',
-  'react-resize-detector': 'ReactResizeDetector',
-  'react-viewerbase': 'reactViewerbase',
-  'prop-types': 'PropTypes',
-  'cornerstone-core': 'cornerstone',
-  'cornerstone-wado-image-loader': 'cornerstoneWADOImageLoader',
-  'cornerstone-math': 'cornerstoneMath',
-  'cornerstone-tools': 'cornerstoneTools',
-  dcmjs: 'dcmjs',
-  'dicom-parser': 'dicomParser',
-  'ohif-core': 'OHIF',
-  hammerjs: 'Hammer',
-  '@ohif/i18n': 'i18n',
-};
+// const globals = {
+//   react: 'React',
+//   'react-dom': 'ReactDOM',
+//   'react-redux': 'ReactRedux',
+//   'react-resize-detector': 'ReactResizeDetector',
+//   'react-viewerbase': 'reactViewerbase',
+//   'prop-types': 'PropTypes',
+//   'cornerstone-core': 'cornerstone',
+//   'cornerstone-wado-image-loader': 'cornerstoneWADOImageLoader',
+//   'cornerstone-math': 'cornerstoneMath',
+//   'cornerstone-tools': 'cornerstoneTools',
+//   dcmjs: 'dcmjs',
+//   'dicom-parser': 'dicomParser',
+//   'ohif-core': 'OHIF',
+//   hammerjs: 'Hammer',
+//   '@ohif/i18n': 'i18n',
+// };
 
 export default {
   input: 'src/index.js',
@@ -36,13 +36,13 @@ export default {
       format: 'umd',
       name: 'ohif-vtk-extension',
       sourcemap: true,
-      globals,
+      // globals,
     },
     {
       file: pkg.module,
       format: 'es',
       sourcemap: true,
-      globals,
+      // globals,
     },
   ],
   plugins: [
@@ -63,7 +63,7 @@ export default {
     }),
     resolve(),
     commonjs({
-      include: ['node_modules/**', '.yalc/**'],
+      include: ['node_modules/**'],
       namedExports: {
         'node_modules/react-vtkjs-viewport/dist/index.js': [
           'getImageData',

extensions/vtk/src/index.js

@@ -1,10 +1,10 @@
 import OHIFVTKViewport from './OHIFVTKViewport.js';
 import commandsModule from './commandsModule.js';
-// This feels weird
-import loadLocales from './loadLocales';
 import toolbarModule from './toolbarModule.js';
+// This feels weird
+// import loadLocales from './loadLocales';
 
-export default {
+const vtkExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.
    */
@@ -21,4 +21,8 @@ export default {
   },
 };
 
-loadLocales();
+export default vtkExtension;
+
+export { vtkExtension };
+
+// loadLocales();

extensions/vtk/webpack.config.js

@@ -1,78 +1,57 @@
-var path = require('path');
-var webpack = require('webpack');
-
+const path = require('path');
+const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-
-const cssRules = [
-  {
-    test: /\.css$/,
-    exclude: /\.module\.css$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
-        },
-      },
-    ],
-  },
-  {
-    test: /\.glsl$/i,
-    include: /vtk\.js[\/\\]Sources/,
-    loader: 'shader-loader',
-  },
-  {
-    test: /\.worker\.js$/,
-    include: /vtk\.js[\/\\]Sources/,
-    use: [
-      {
-        loader: 'worker-loader',
-        options: { inline: true, fallback: false },
-      },
-    ],
-  },
-  {
-    test: /\.css$/,
-    include: /\.module\.css$/,
-    use: [
-      { loader: 'style-loader' },
-      {
-        loader: 'css-loader',
-        options: {
-          localIdentName: '[name]-[local]_[sha512:hash:base64:5]',
-          modules: true,
-        },
-      },
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
-        },
-      },
-    ],
-  },
-];
-
-var entry = path.join(__dirname, './src/index.js');
+// const vtkHtmlRules = require('vtk.js/Utilities/config/dependency.js').webpack
+//   .core.rules;
+// Optional if you want to load *.css and *.module.css files
+// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
 const SRC_DIR = path.join(__dirname, './src');
 const OUTPUT_DIR = path.join(__dirname, './dist');
 
 module.exports = {
-  entry,
+  mode: 'development',
+  entry: {
+    app: `${SRC_DIR}/index.js`,
+  },
+  context: SRC_DIR,
+  // ~~~ MODE
   output: {
     path: OUTPUT_DIR,
-    filename: 'index.umd.js',
-    library: '@ohif/extension-vtk',
+    library: 'ohifVtkExtension',
     libraryTarget: 'umd',
-    globalObject: 'this',
+    filename: 'index.umd.js',
+    auxiliaryComment: 'Text VTK Extension Comment',
+  },
+  stats: {
+    colors: true,
+    hash: true,
+    timings: true,
+    assets: true,
+    chunks: true,
+    chunkModules: true,
+    modules: true,
+    children: true,
+    warnings: true,
+  },
+  optimization: {
+    minimize: false,
+    sideEffects: true,
+  },
+  // ~~~ END MODE
+  resolve: {
+    modules: [
+      path.resolve(__dirname, 'node_modules'),
+      path.resolve(__dirname, '../../node_modules'),
+      SRC_DIR,
+    ],
+    extensions: ['.js', '.jsx', '.json', '*'],
+    symlinks: true,
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
+        exclude: [/node_modules/],
         loader: 'babel-loader',
         options: {
           // Find babel.config.js in monorepo root
@@ -90,42 +69,71 @@ module.exports = {
           ],
         },
       },
-    ].concat(cssRules),
-  },
-  resolve: {
-    modules: [
-      // Modules specific to this package
-      path.resolve(__dirname, 'node_modules'),
-      // Hoisted Yarn Workspace Modules
-      path.resolve(__dirname, '../../node_modules'),
-      SRC_DIR,
+      /**
+       *
+       */
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
+            },
+          },
+        ],
+      },
+      /**
+       *
+       */
+      {
+        test: /\.glsl$/i,
+        include: /vtk\.js[\/\\]Sources/,
+        loader: 'shader-loader',
+      },
+      /**
+       *
+       */
+      {
+        test: /\.worker\.js$/,
+        include: /vtk\.js[\/\\]Sources/,
+        use: [
+          {
+            loader: 'worker-loader',
+            options: { inline: true, fallback: false },
+          },
+        ],
+      },
     ],
   },
-  externals: [
-    {
-      'cornerstone-core': {
-        commonjs: 'cornerstone-core',
-        commonjs2: 'cornerstone-core',
-        amd: 'cornerstone-core',
-        root: 'cornerstone',
-      },
-      'cornerstone-math': {
-        commonjs: 'cornerstone-math',
-        commonjs2: 'cornerstone-math',
-        amd: 'cornerstone-math',
-        root: 'cornerstoneMath',
-      },
-    },
-    '@ohif/i18n',
-    'ohif-core',
-    'dcmjs',
-    'react-viewerbase',
-    'react', //: 'React',
-    'react-dom', //: 'ReactDOM',
-    'react-redux', //: 'ReactRedux',
-    'react-resize-detector', //: 'ReactResizeDetector',
-    'react-viewerbase', //: 'reactViewerbase',
-    'prop-types', //: 'PropTypes'
-    /*/\b(vtk.js)/*/
-  ],
+  // externals: [
+  //   {
+  //     cornerstone: {
+  //       commonjs: 'cornerstone',
+  //       commonjs2: 'cornerstone',
+  //       amd: 'cornerstone',
+  //       root: 'cornerstone',
+  //     },
+  //     'cornerstone-math': {
+  //       commonjs: 'cornerstone-math',
+  //       commonjs2: 'cornerstone-math',
+  //       amd: 'cornerstone-math',
+  //       root: 'cornerstoneMath',
+  //     },
+  //   },
+  //   '@ohif/i18n',
+  //   'ohif-core',
+  //   'dcmjs',
+  //   'react-viewerbase',
+  //   'react', //: 'React',
+  //   'react-dom', //: 'ReactDOM',
+  //   'react-redux', //: 'ReactRedux',
+  //   'react-resize-detector', //: 'ReactResizeDetector',
+  //   'react-viewerbase', //: 'reactViewerbase',
+  //   'prop-types', //: 'PropTypes'
+  //   /*/\b(vtk.js)/*/
+  // ],
 };

platform/viewer/config/webpack.dev.js

@@ -5,6 +5,7 @@ const common = require('./webpack.common');
 
 const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
+const INDEX = path.join(DIST_DIR, 'index.html');
 
 module.exports = (env, argv) => {
   const commonConfig = common(env, argv);
@@ -14,8 +15,8 @@ module.exports = (env, argv) => {
     devtool: 'cheap-module-source-map',
     output: {
       path: DIST_DIR,
-      filename: 'bundle.js',
-      publicPath: '/public/',
+      publicPath: '/',
+      filename: '[name].bundle.js',
     },
     module: {
       rules: [
@@ -46,12 +47,16 @@ module.exports = (env, argv) => {
     },
     plugins: [new webpack.HotModuleReplacementPlugin()],
     devServer: {
-      hot: true,
+      // hot: true,
       inline: true,
-      compress: true,
-      contentBase: DIST_DIR,
-      port: 3000,
+      compress: false,
+      // contentBase: DIST_DIR,
+      open: true,
+      port: 3001,
       writeToDisk: true,
+      historyApiFallback: {
+        index: '/',
+      },
     },
   });
 };

platform/viewer/public/index.html

@@ -16,14 +16,6 @@
 
     <title>OHIF Viewer</title>
 
-    <!-- Latest compiled and minified CSS -->
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-      crossorigin="anonymous"
-    />
-
     <!-- WEB FONTS -->
     <link
       href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap"

platform/viewer/src/index.js

@@ -31,6 +31,8 @@ const appDefaults = {
   relativeWebWorkerScriptsPath: '',
 };
 
+console.log(OHIFVTKExtension);
+
 if (window) {
   config = window.config || {};
   config.extensions = [