feat(cli): Ohif cli for modes and extensions modification (#2696)

* feat: Add initial cli tool structure

* feat: add copying template files

* feat: Add mode template and command

* feat: Add readme template generation

* feat: Add documentation to extension template

* feat: Enhance documentation of the template mode

* fix: cli module type

* feat: Add config-based mode and extension registration (#2660)

* feat: Add ohif cli add/remove extension/mode (#2661)

* Basic working CLI for add-extension and remove-extension

* Basic cli for add/remove extension/mode, lots more to do.

* Cleanup and harden]

* feat: Add list of tasks to add-mode

Co-authored-by: Alireza <[email protected]>

* feat: Add git initialization for the mode or extension template (#2662)

* fix: package json file to include templates

* feat: Add git initialization for the mode or extension template

* feat: Add more checks of git and target dir

* feat: refactore library utilities

* feat: Add the list command to print extensions and modes (#2664)

* feat: Add the list command to print extensions and modes

* Add todo

* Feat/ohif cli validation + auto install (#2671)

* WIP

* Working mode keyword verification

* Validation

* auto install extensions based on modes

* WIP remove unused extensions on removeMove

* Working add-mode, remove-mode automatic extension management.

* If extension is in used by a mode, don't allow the CLI to uninstall it

* Cleanup addExtension

* cleanup removeExtension and addMode

* Cleanup removeMode

* Update existing extensions with the needed keywords/peer deps

* Fix broken config

* Feat/cli search (#2677)

* feat: refactor pretty print for console

* feat: add search for modes and extensions

* fix: ugly colors

* Feat/ohif cli error handling publishing (#2679)

* WIP

* fix: webpack imports

* wip

* fix: react router dom private routes

* from last commit

* wip

* fix: webpack prod builds

* WIP

* Working regsitration with new IDs

* Stable

Co-authored-by: Alireza <[email protected]>

* verify extensions when constructing modes. (#2681)

* verify extensions when constructing modes.

* Add version to unit tests so it conforms to schema

* Update ohif utils exposed via @OHIF/core

* Fix import

* fix tests

* feat: ohif-cli link local modes/extensions for development (#2682)

* feat: enable cli to work with project root

* feat: add initial link package

* feat: add link and unlink extension

* feat: add link and unlink mode

* erro handling for link-package

* feat: add comment on ohif-cli linking for development (#2686)

* Docs/ohif cli (#2687)

* feat: Add documentation for templates

* feat: Add more documentation

* Fix/core publish (#2685)

* versions

* wip

* remove webpack clean output

* fix publish

* use next as dist tag for v3 for now

* fix webpack pro recipe for output

* fix: lerna publish next

* fix(cli): fix issues when trying to link an extension or a mode (#2725)

The generated package.json doesn't contain keywords property which is
required by the linkPackage function. The module apth wasn't correclty
handled too, and when there is no pluginOptions, it fails while reading
the file or while generating a default configuration.

* make dicom pdf and video work after cli merge

* add axios dependency

* comment out the chdir for now

* create id and version based on user inputs

* customizable path for extension and modes

* fix template to make the template mode load

* fix the questions to loop if path is not desirable

* fix templates

* correct package json order

* unify the package creation for extension and mode

* bump versions for each package

* bump extension versions to 3.0

* add gitignore to templates

* fix version requirements when ^

* update docs

* update docs and fix tests

* try to fix the tests

* bump node version

* remove the version from extensions

* remove the version from modes

* remove version from extensionManager

* fix eslint

* revert husky version

* fix eslint

* fix node version for new eslint

* fix documentatoin removing version

* fix cicle ci image version

* fix circle ci node image

* fix circle ci node image

* add back the video and pdf

Co-authored-by: Matthis Duclos <[email protected]>
Co-authored-by: James A. Petts <[email protected]>

.circleci/config.yml

@@ -24,7 +24,7 @@ executors:
   chrome-and-pacs:
     docker:
       # Primary container image where all steps run.
-      - image: 'cypress/browsers:node14.15.0-chrome86-ff82'
+      - image: 'cypress/browsers:node14.17.0-chrome88-ff89'
 
 defaults: &defaults
   docker:
@@ -181,7 +181,7 @@ jobs:
 
   DEPLOY_TO_DEV:
     docker:
-      - image: circleci/node:14.15.0
+      - image: circleci/node:14.17.0
         environment:
           TERM: xterm
           NETLIFY_SITE_ID: 32708787-c9b0-4634-b50f-7ca41952da77
@@ -196,7 +196,7 @@ jobs:
 
   DEPLOY_TO_STAGING:
     docker:
-      - image: circleci/node:14.15.0
+      - image: circleci/node:14.17.0
         environment:
           TERM: xterm
           NETLIFY_SITE_ID: c7502ae3-b150-493c-8422-05701e44a969
@@ -211,7 +211,7 @@ jobs:
 
   DEPLOY_TO_PRODUCTION:
     docker:
-      - image: circleci/node:14.15.0
+      - image: circleci/node:14.17.0
         environment:
           TERM: xterm
           NETLIFY_SITE_ID: 79c4a5da-5c95-4dc9-84f7-45fd9dfe21b0
@@ -263,7 +263,7 @@ jobs:
             echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
       - run: npx lerna version
       - run: yarn run build:package-all
-      - run: npx lerna publish from-package
+      - run: yarn run lerna:publish
       - run: npx lerna run ci:generateSuccessVersion --stream
       - persist_to_workspace:
           root: ~/repo
@@ -367,12 +367,13 @@ workflows:
           executor: cypress/browsers-chrome76
           browser: chrome
           pre-steps:
-            - run: 'rm -rf ~/.yarn && yarn -v && yarn global
-                add wait-on'
+            - run: 'rm -rf ~/.yarn && yarn -v && yarn global add wait-on'
           yarn: true
           store_artifacts: false
           working_directory: platform/viewer
-          build: yarn test:data && npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js yarn run build
+          build:
+            yarn test:data && npx cross-env QUICK_BUILD=true
+            APP_CONFIG=config/dicomweb-server.js yarn run build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
@@ -434,7 +435,9 @@ workflows:
           yarn: true
           store_artifacts: false
           working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js yarn run build
+          build:
+            npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js yarn run
+            build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'

.eslintignore

@@ -0,0 +1,4 @@
+config/**
+docs/**
+img/**
+node_modules

.eslintrc.json

@@ -12,12 +12,7 @@
   "settings": {
     "react": {
       "version": "detect"
-
-  },
-  "rules": {
-    "react/jsx-props-no-spreading": "error",
-    "react-hooks/exhaustive-deps": "false",
-    "import/no-unused-modules": [1, {"unusedExports": true}]
+    }
   },
   "globals": {
     "cy": true,

.gitignore

@@ -36,3 +36,6 @@ screenshots/
 
 # Locize settings
 .locize
+
+# autogenerated files
+platform/viewer/src/pluginImports.js

.netlify/package.json

@@ -2,7 +2,7 @@
   "name": "root",
   "private": true,
   "engines": {
-    "node": ">=10",
+    "node": ">=14",
     "npm": ">=6",
     "yarn": ">=1.16.0"
   },

.prettierignore

@@ -0,0 +1 @@
+*.md

.webpack/rules/cssToJavaScript.js

@@ -1,7 +1,9 @@
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const tailwindcss = require('tailwindcss');
-const tailwindConfigPath = path.resolve('tailwind.config.js');
+const tailwindConfigPath = path.resolve(
+  '../../platform/viewer/tailwind.config.js'
+);
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const devMode = process.env.NODE_ENV !== 'production';
 

.webpack/webpack.base.js

@@ -3,17 +3,20 @@ const dotenv = require('dotenv');
 //
 const path = require('path');
 const webpack = require('webpack');
+
+// ~~ PLUGINS
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
+const TerserJSPlugin = require('terser-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+// ~~ PackageJSON
 const PACKAGE = require('../platform/viewer/package.json');
 // ~~ RULES
 const loadShadersRule = require('./rules/loadShaders.js');
 const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
-// ~~ PLUGINS
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
-const TerserJSPlugin = require('terser-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
 
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
@@ -39,16 +42,16 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       app: `${SRC_DIR}/index.js`,
     },
     optimization: {
-      splitChunks: {
-        // include all types of chunks
-        chunks: 'all',
-      },
+      // splitChunks: {
+      //   // include all types of chunks
+      //   chunks: 'all',
+      // },
       //runtimeChunk: 'single',
       minimize: isProdBuild,
       sideEffects: true,
     },
     output: {
-      clean: true,
+      // clean: true,
       publicPath: '/',
     },
     context: SRC_DIR,
@@ -98,6 +101,8 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
         path.resolve(__dirname, '../node_modules'),
         // Hoisted Yarn Workspace Modules
         path.resolve(__dirname, '../../../node_modules'),
+        path.resolve(__dirname, '../platform/viewer/node_modules'),
+        path.resolve(__dirname, '../platform/ui/node_modules'),
         SRC_DIR,
       ],
       // Attempt to resolve these extensions in order.
@@ -131,15 +136,6 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       }),
       // Uncomment to generate bundle analyzer
       // new BundleAnalyzerPlugin(),
-      new CopyPlugin({
-        patterns: [
-          {
-            from:
-              '../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import',
-            to: DIST_DIR,
-          },
-        ],
-      }),
     ],
   };
 

extensions/_example/src/index.js

@@ -5,7 +5,7 @@ import { IWebApiDataSource } from '@ohif/core';
  *
  */
 export default {
-  id: 'org.ohif.*',
+  id: '@ohif/extension-*',
 
   /**
    * LIFECYCLE HOOKS

extensions/cornerstone/.webpack/webpack.dev.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
 

extensions/cornerstone/.webpack/webpack.prod.js

@@ -1,8 +1,9 @@
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const pkg = require('./../package.json');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const ROOT_DIR = path.join(__dirname, './..');
 const SRC_DIR = path.join(__dirname, '../src');
@@ -39,6 +40,10 @@ module.exports = (env, argv) => {
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,
       }),
+      new MiniCssExtractPlugin({
+        filename: './dist/[name].css',
+        chunkFilename: './dist/[id].css',
+      }),
     ],
   });
 };

extensions/cornerstone/package.json

@@ -8,14 +8,17 @@
   "main": "dist/index.umd.js",
   "module": "src/index.js",
   "engines": {
-    "node": ">=10",
+    "node": ">=14",
     "npm": ">=6",
     "yarn": ">=1.16.0"
   },
   "files": [
     "dist",
     "README.md"
   ],
+  "keywords": [
+    "ohif-extension"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +32,8 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage"
   },
   "peerDependencies": {
-    "@ohif/core": "^0.50.0",
-    "@ohif/ui": "^0.50.0",
+    "@ohif/core": "^3.0.0",
+    "@ohif/ui": "^2.0.0",
     "cornerstone-core": "2.6.0",
     "cornerstone-math": "0.1.9",
     "cornerstone-tools": "6.0.2",

extensions/cornerstone/src/id.js

@@ -1,3 +1,5 @@
-const id = 'org.ohif.cornerstone';
+import packageJson from '../package.json';
 
-export default id;
+const id = packageJson.name;
+
+export { id };

extensions/cornerstone/src/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import init from './init.js';
 import commandsModule from './commandsModule.js';
-import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
+import { id } from './id.js';
+// import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 
 const Component = React.lazy(() => {
   return import(/* webpackPrefetch: true */ './OHIFCornerstoneViewport');
@@ -22,8 +23,7 @@ export default {
   /**
    * Only required property. Should be a unique value across all extensions.
    */
-  id: 'org.ohif.cornerstone',
-
+  id,
   /**
    *
    *
@@ -59,5 +59,3 @@ export default {
     return commandsModule({ servicesManager, commandsManager });
   },
 };
-
-export { CornerstoneViewportDownloadForm };

extensions/default/.webpack/webpack.dev.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
 

extensions/default/.webpack/webpack.prod.js

@@ -1,10 +1,11 @@
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
-const pkg = require('./../package.json');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const ROOT_DIR = path.join(__dirname, './..');
+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');
 
@@ -30,7 +31,7 @@ module.exports = (env, argv) => {
     },
     output: {
       path: ROOT_DIR,
-      library: 'OHIFExtDefault',
+      library: 'OHIFExtCornerstone',
       libraryTarget: 'umd',
       libraryExport: 'default',
       filename: pkg.main,
@@ -39,6 +40,10 @@ module.exports = (env, argv) => {
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,
       }),
+      new MiniCssExtractPlugin({
+        filename: './dist/[name].css',
+        chunkFilename: './dist/[id].css',
+      }),
     ],
   });
 };

extensions/default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-default",
-  "version": "1.0.1",
+  "version": "3.0.0",
   "description": "Common/default features and functionality for basic image viewing",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -11,14 +11,17 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=10",
+    "node": ">=14",
     "npm": ">=6",
     "yarn": ">=1.18.0"
   },
   "files": [
     "dist",
     "README.md"
   ],
+  "keywords": [
+    "ohif-extension"
+  ],
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
     "dev:dicom-pdf": "yarn run dev",
@@ -27,16 +30,14 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "^0.50.0",
-    "@ohif/i18n": "^0.52.8",
+    "@ohif/core": "^3.0.0",
+    "@ohif/i18n": "^1.0.0",
     "dcmjs": "0.16.1",
     "dicomweb-client": "^0.6.0",
     "prop-types": "^15.6.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-i18next": "^10.11.0",
-    "react-router": "next",
-    "react-router-dom": "next",
     "webpack": "^5.50.0",
     "webpack-merge": "^5.7.3"
   },