app configuration and App entrypoint update

platform/viewer/src/App.js

@@ -2,17 +2,57 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { ThemeWrapper } from '@ohif/ui';
-
+import {
+  CommandsManager,
+  ExtensionManager,
+  ServicesManager,
+  HotkeysManager,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  MeasurementService,
+  utils,
+  redux as reduxOHIF,
+} from '@ohif/core';
 import routes from './routes';
 
-function App({ config }) {
-  const { routerBasename } = config;
-  const Router = JSON.parse(process.env.USE_HASH_ROUTER)
-    ? HashRouter
-    : BrowserRouter;
+/**
+ * ENV Variable to determine routing behavior
+ */
+const Router = JSON.parse(process.env.USE_HASH_ROUTER)
+  ? HashRouter
+  : BrowserRouter;
+
+const commandsManagerConfig = {
+  /** Used by commands to inject `viewports` from "redux" */
+  getAppState: () => store.getState(),
+  /** Used by commands to determine active context */
+  getActiveContexts: () => getActiveContexts(store.getState()),
+};
+const commandsManager = new CommandsManager(commandsManagerConfig);
+const servicesManager = new ServicesManager();
+// const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
+const extensionManager = new ExtensionManager({
+  commandsManager,
+  servicesManager,
+  appConfig,
+  api: {
+    contexts: CONTEXTS,
+    hooks: {
+      useAppContext,
+    },
+  },
+});
+
+extensionManager.registerExtensions(/* Array of Extensions */);
+
+function App({ config, defaultExtensions }) {
+  const appConfig = {
+    ...(typeof config === 'function' ? config({ servicesManager }) : config),
+  };
 
   return (
-    <Router basename={routerBasename}>
+    <Router basename={appConfig.routerBasename}>
       <ThemeWrapper>{routes()}</ThemeWrapper>
     </Router>
   );
@@ -36,6 +76,17 @@ App.propTypes = {
 
 App.defaultProps = {
   config: {
+    /**
+     * Relative route from domain root that OHIF instance is installed at.
+     * For example:
+     *
+     * Hosted at: https://ohif.org/where-i-host-the/viewer/
+     * Value: `/where-i-host-the/viewer/`
+     * */
+    routerBaseName: '/',
+    /**
+     *
+     */
     showStudyList: true,
     oidc: [],
     extensions: [],

platform/viewer/src/contexts/AppContextProvider.jsx

@@ -0,0 +1,43 @@
+import React, { useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const AppContext = createContext(null);
+
+export const useAppContext = () => useContext(AppContext);
+
+const AppContextProvider = ({ children }) => {
+  const [config, setConfig] = useState(null);
+
+  const get = ({ configKey }) => {
+    return config[configKey];
+  };
+
+  const add = ({ configKey, value }) => {
+    setConfig(s => ({
+      ...s,
+      [configKey]: value,
+    }));
+  };
+
+  const remove = ({ configKey }) => {
+    setConfig(s => ({
+      ...s,
+      [configKey]: null,
+    }));
+  };
+
+  return (
+    <AppContext.Provider value={{ get, add, remove }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+AppContextProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default AppContextProvider;

platform/viewer/src/index-lesion-tracker.js

@@ -1,46 +0,0 @@
-/**
- * Entry point for development and production PWA builds.
- * Packaged (NPM) builds go through `index-umd.js`
- */
-
-import 'regenerator-runtime/runtime';
-
-import App from './App.js';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-/**
- * EXTENSIONS
- * =================
- *
- * Importing and modifying the extensions our app uses HERE allows us to leverage
- * tree shaking and a few other niceties. However, by including them here they become
- * "baked in" to the published application.
- *
- * Depending on your use case/needs, you may want to consider not adding any extensions
- * by default HERE, and instead provide them via the extensions configuration key or
- * by using the exported `App` component, and passing in your extensions as props using
- * the defaultExtensions property.
- */
-import OHIFLesionTrackerExtension from '@ohif/extension-lesion-tracker';
-import OHIFDicomPDFExtension from '@ohif/extension-dicom-pdf';
-
-/*
- * Default Settings
- */
-let config = {};
-
-if (window) {
-  config = window.config || {};
-}
-
-const appProps = {
-  config,
-  defaultExtensions: [OHIFLesionTrackerExtension, OHIFDicomPDFExtension],
-};
-
-/** Create App */
-const app = React.createElement(App, appProps, null);
-
-/** Render */
-ReactDOM.render(app, document.getElementById('root'));

platform/viewer/src/index.js

@@ -8,10 +8,25 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 // test
 
+/**
+ * EXTENSIONS
+ * =================
+ *
+ * Importing and modifying the extensions our app uses HERE allows us to leverage
+ * tree shaking and a few other niceties. However, by including them here they become
+ * "baked in" to the published application.
+ *
+ * Depending on your use case/needs, you may want to consider not adding any extensions
+ * by default HERE, and instead provide them via the extensions configuration key or
+ * by using the exported `App` component, and passing in your extensions as props using
+ * the defaultExtensions property.
+ */
+import OHIFDefaultExtension from '@ohif/extension-default';
+
 /** Combine our appConfiguration and "baked-in" extensions */
 const appProps = {
   config: window ? window.config : {},
-  defaultExtensions: [],
+  defaultExtensions: [OHIFDefaultExtension],
 };
 
 /** Create App */