feat(OHIF):Allow modes and extensions to be added after commpile time.

Also works with the compile time add that the existing cli uses, so that both build types work.
OHIF · Jul 7, 2022 · 85335c2 · 85335c2
1 parent d6c2da8
commit 85335c2
Show file tree

Hide file tree

Showing 17 changed files with 291 additions and 47 deletions.
diff --git a/platform/cli/templates/extension/.webpack/webpack.prod.js b/platform/cli/templates/extension/.webpack/webpack.prod.js
@@ -25,23 +25,35 @@ const config = {
         commonjs: 'react',
         amd: 'react',
       },
+      '@ohif/core': {
+        commonjs2: '@ohif/core',
+        commonjs: '@ohif/core',
+        amd: '@ohif/core',
+        root: '@ohif/core',
+      },
+      '@ohif/ui': {
+        commonjs2: '@ohif/ui',
+        commonjs: '@ohif/ui',
+        amd: '@ohif/ui',
+        root: '@ohif/ui',
+      },
     },
   ],
   module: {
     rules: [
       {
-        test: /(\.jsx|\.js)$/,
+        test: /(\.jsx|\.js|\.tsx|\.ts)$/,
         loader: 'babel-loader',
         exclude: /(node_modules|bower_components)/,
         resolve: {
-          extensions: ['.js', '.jsx'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx',],
         },
       },
     ],
   },
   resolve: {
     modules: [path.resolve('./node_modules'), path.resolve('./src')],
-    extensions: ['.json', '.js', '.jsx'],
+    extensions: ['.json', '.js', '.jsx', '.tsx', '.ts',],
   },
 };
 

diff --git a/platform/cli/templates/extension/babel.config.js b/platform/cli/templates/extension/babel.config.js
@@ -10,6 +10,7 @@ module.exports = {
             modules: 'commonjs',
             debug: false,
           },
+          "@babel/preset-typescript",
         ],
         '@babel/preset-react',
       ],
@@ -25,6 +26,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
+        "@babel/preset-typescript",
       ],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
@@ -33,6 +35,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
+        "@babel/preset-typescript",
       ],
       plugins: ['react-hot-loader/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],

diff --git a/...form/cli/templates/extension/src/index.js → ...orm/cli/templates/extension/src/index.tsx b/...form/cli/templates/extension/src/index.js → ...orm/cli/templates/extension/src/index.tsx
diff --git a/platform/cli/templates/mode/.webpack/webpack.prod.js b/platform/cli/templates/mode/.webpack/webpack.prod.js
@@ -25,23 +25,35 @@ const config = {
         commonjs: 'react',
         amd: 'react',
       },
+      '@ohif/core': {
+        commonjs2: '@ohif/core',
+        commonjs: '@ohif/core',
+        amd: '@ohif/core',
+        root: '@ohif/core',
+      },
+      '@ohif/ui': {
+        commonjs2: '@ohif/ui',
+        commonjs: '@ohif/ui',
+        amd: '@ohif/ui',
+        root: '@ohif/ui',
+      },
     },
   ],
   module: {
     rules: [
       {
-        test: /(\.jsx|\.js)$/,
+        test: /(\.jsx|\.js|\.tsx|\.ts)$/,
         loader: 'babel-loader',
         exclude: /(node_modules|bower_components)/,
         resolve: {
-          extensions: ['.js', '.jsx'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx',],
         },
       },
     ],
   },
   resolve: {
     modules: [path.resolve('./node_modules'), path.resolve('./src')],
-    extensions: ['.json', '.js', '.jsx'],
+    extensions: ['.json', '.js', '.jsx', '.tsx', '.ts',],
   },
 };
 

diff --git a/platform/cli/templates/mode/babel.config.js b/platform/cli/templates/mode/babel.config.js
@@ -10,6 +10,7 @@ module.exports = {
             modules: 'commonjs',
             debug: false,
           },
+          "@babel/preset-typescript",
         ],
         '@babel/preset-react',
       ],
@@ -25,6 +26,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
+        "@babel/preset-typescript",
       ],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
@@ -33,6 +35,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
+        "@babel/preset-typescript",
       ],
       plugins: ['react-hot-loader/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],

diff --git a/platform/cli/templates/mode/dependencies.json b/platform/cli/templates/mode/dependencies.json
@@ -31,11 +31,12 @@
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
     "@babel/plugin-transform-regenerator": "^7.4.5",
     "@babel/plugin-transform-runtime": "^7.5.0",
-    "babel-plugin-inline-react-svg": "^2.0.1",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.17.12",
     "babel-eslint": "^8.0.3",
     "babel-loader": "^8.0.0-beta.4",
+    "babel-plugin-inline-react-svg": "^2.0.1",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",

diff --git a/platform/cli/templates/mode/src/index.js → platform/cli/templates/mode/src/index.tsx b/platform/cli/templates/mode/src/index.js → platform/cli/templates/mode/src/index.tsx
diff --git a/platform/viewer/.webpack/webpack.pwa.js b/platform/viewer/.webpack/webpack.pwa.js
@@ -25,7 +25,7 @@ const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
 const Dotenv = require('dotenv-webpack');
 const writePluginImportFile = require('./writePluginImportsFile.js');
 
-writePluginImportFile(SRC_DIR);
+const copyPluginFromExtensions = writePluginImportFile(SRC_DIR, DIST_DIR);
 
 const setHeaders = (res, path) => {
   if (path.indexOf('.gz') !== -1) {
@@ -35,6 +35,8 @@ const setHeaders = (res, path) => {
   }
   if (path.indexOf('.pdf') !== -1) {
     res.setHeader('Content-Type', 'application/pdf');
+  } else if (path.indexOf('/frames') !== -1) {
+    res.setHeader('Content-Type', 'multipart/related')
   } else {
     res.setHeader('Content-Type', 'application/json')
   }
@@ -77,6 +79,7 @@ module.exports = (env, argv) => {
       // Copy "Public" Folder to Dist
       new CopyWebpackPlugin({
         patterns: [
+          ...copyPluginFromExtensions,
           {
             from: PUBLIC_DIR,
             to: DIST_DIR,
@@ -108,13 +111,14 @@ module.exports = (env, argv) => {
           PUBLIC_URL: PUBLIC_URL,
         },
       }),
-      // No longer maintained; but good for generating icons + manifest
-      // new FaviconsWebpackPlugin( path.join(PUBLIC_DIR, 'assets', 'icons-512.png')),
+      // Generate a service worker for fast local loads
       new InjectManifest({
         swDest: 'sw.js',
         swSrc: path.join(SRC_DIR, 'service-worker.js'),
         // Increase the limit to 4mb:
-        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+        // Need to exclude the theme as it is updated independently
+        exclude: [/theme/],
       }),
       new CopyPlugin({
         patterns: [
@@ -140,16 +144,6 @@ module.exports = (env, argv) => {
         overlay: { errors: true, warnings: false },
       },
       'static': [
-        {
-          directory: path.join(require('os').homedir(), 'dicomweb'),
-          staticOptions: {
-            extensions: ['gz', 'br'],
-            index: "index.json.gz",
-            redirect: true,
-            setHeaders,
-          },
-          publicPath: '/dicomweb',
-        },
         {
           directory: '../../testdata',
           staticOptions: {

diff --git a/platform/viewer/.webpack/writePluginImportsFile.js b/platform/viewer/.webpack/writePluginImportsFile.js
@@ -13,6 +13,8 @@ function constructLines(input, categoryName) {
     addToWindowLines: [],
   };
 
+  if (!input) return lines;
+
   input.forEach(entry => {
     const packageName = entry.packageName;
 
@@ -22,7 +24,7 @@ function constructLines(input, categoryName) {
       `import ${defaultImportName} from '${packageName}';\n`
     );
     lines.addToWindowLines.push(
-      `window.${categoryName}.push(${defaultImportName});\n`
+      `${categoryName}.push(${defaultImportName});\n`
     );
 
     pluginCount++;
@@ -42,7 +44,11 @@ function getFormattedImportBlock(importLines) {
 }
 
 function getFormattedWindowBlock(addToWindowLines) {
-  let content = `window.extensions = [];\nwindow.modes = [];\n\n`;
+  let content = "const extensions = [];\n" +
+    "const modes = [];\n" +
+    "const modesFactory = [];\n" +
+    "window.extensions = extensions;\n" +
+    "window.modes = modes;\n\n";
 
   addToWindowLines.forEach(addToWindowLine => {
     content += addToWindowLine;
@@ -51,21 +57,49 @@ function getFormattedWindowBlock(addToWindowLines) {
   return content;
 }
 
-function writePluginImportsFile(SRC_DIR) {
+function getRuntimeLoadModesExtensions() {
+  return "\n\n// Add a dynamic runtime loader\n" +
+    "export default async () => {\n" +
+    " for(const modeFactory of modesFactory) {\n" +
+    "  const newModes = await modeFactory(modes,extensions);\n" +
+    "  newModes.forEach(newMode => modes.push(newMode));\n" +
+    "}\n}\n";
+}
+
+const createCopyPluginFromExtensions = (SRC_DIR, DIST_DIR, plugins) => {
+
+  return plugins.map(plugin => {
+    const from = `${SRC_DIR}/../node_modules/${plugin.packageName}/public/`;
+    const exists = fs.existsSync(from);
+    return exists ? {
+      from,
+      to: DIST_DIR,
+      toType: 'dir',
+    } : undefined;
+  }
+  ).filter(x => !!x);
+}
+
+function writePluginImportsFile(SRC_DIR, DIST_DIR) {
   let pluginImportsJsContent = autogenerationDisclaimer;
 
   const extensionLines = constructLines(pluginConfig.extensions, 'extensions');
   const modeLines = constructLines(pluginConfig.modes, 'modes');
+  const modesFactoryLines = constructLines(pluginConfig.modesFactory, 'modesFactory');
 
   pluginImportsJsContent += getFormattedImportBlock([
     ...extensionLines.importLines,
     ...modeLines.importLines,
+    ...modesFactoryLines.importLines,
   ]);
   pluginImportsJsContent += getFormattedWindowBlock([
     ...extensionLines.addToWindowLines,
     ...modeLines.addToWindowLines,
+    ...modesFactoryLines.addToWindowLines,
   ]);
 
+  pluginImportsJsContent += getRuntimeLoadModesExtensions();
+
   fs.writeFileSync(
     `${SRC_DIR}/pluginImports.js`,
     pluginImportsJsContent,
@@ -77,6 +111,18 @@ function writePluginImportsFile(SRC_DIR) {
       }
     }
   );
+
+  const copyPluginFromExtensions = createCopyPluginFromExtensions(
+    SRC_DIR, DIST_DIR,
+    [
+      ...pluginConfig.modesFactory,
+      ...pluginConfig.modes,
+      ...pluginConfig.extensions,
+      ...pluginConfig.umd,
+    ]
+  )
+
+  return copyPluginFromExtensions;
 }
 
 module.exports = writePluginImportsFile;
diff --git a/platform/viewer/package.json b/platform/viewer/package.json
@@ -49,8 +49,8 @@
     "@babel/runtime": "7.16.3",
     "@ohif/core": "^3.0.0",
     "@ohif/extension-cornerstone": "^3.0.0",
-    "@ohif/extension-default": "^3.0.0",
     "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
+    "@ohif/extension-default": "^3.0.0",
     "@ohif/extension-dicom-pdf": "^3.0.1",
     "@ohif/extension-dicom-video": "^3.0.1",
     "@ohif/i18n": "^1.0.0",
@@ -59,6 +59,7 @@
     "@ohif/ui": "^2.0.0",
     "@types/react": "^16.0.0",
     "classnames": "^2.2.6",
+    "config-point": "^0.4.8",
     "core-js": "^3.16.1",
     "cornerstone-math": "^0.1.9",
     "cornerstone-wado-image-loader": "^4.1.2",

diff --git a/platform/viewer/pluginConfig.json b/platform/viewer/pluginConfig.json
@@ -34,5 +34,9 @@
       "packageName": "@ohif/mode-longitudinal",
       "version": "3.0.0"
     }
+  ],
+  "modesFactory": [
+  ],
+  "umd": [
   ]
 }