fix(script-tag): Include React and ReactDOM as dependencies and add installViewer function to simplify script tag usage. (#721)

package.json

@@ -72,10 +72,6 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
-  },
   "dependencies": {
     "@babel/runtime": "^7.4.5",
     "@ohif/extension-cornerstone": "0.0.43",
@@ -101,6 +97,8 @@
     "ohif-core": "0.10.6",
     "oidc-client": "1.8.x",
     "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-dropzone": "^10.1.5",
     "react-i18next": "^10.11.0",
     "react-redux": "^7.1.0",
@@ -146,8 +144,6 @@
     "lodash": "4.17.11",
     "lodash.clonedeep": "4.5.0",
     "prettier": "1.18.x",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
     "react-scripts": "^3.0.1",
     "rollup": "^1.15.5",
     "rollup-plugin-babel": "^4.3.2",
@@ -157,6 +153,7 @@
     "rollup-plugin-node-resolve": "^5.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-url": "^2.2.2",
     "semantic-release": "15.13.x",

rollup.config.js

@@ -9,13 +9,9 @@ import svgr from '@svgr/rollup'
 import pkg from './package.json'
 // Deal with https://github.com/rollup/rollup-plugin-commonjs/issues/297
 import builtins from 'rollup-plugin-node-builtins'
+import replace from 'rollup-plugin-replace';
 import serve from 'rollup-plugin-serve'
 
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-}
-
 const startServer = process.env.START_SERVER === 'true';
 
 export default {
@@ -28,18 +24,19 @@ export default {
       exports: 'named',
       name: 'OHIFStandaloneViewer',
       esModule: false,
-      globals,
     },
     {
       file: pkg.module,
       format: 'es',
       exports: 'named',
       sourcemap: true,
-      globals,
     },
   ],
   plugins: [
     external(),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
     postcss({
       modules: false,
     }),
@@ -54,6 +51,32 @@ export default {
     commonjs({
       include: 'node_modules/**',
       namedExports: {
+        'node_modules/react/index.js': [
+          'createContext',
+          'createElement',
+          'createRef',
+          'cloneElement',
+          'Children',
+          'Fragment',
+          'forwardRef',
+          'useCallback',
+          'isValidElement',
+          'memo',
+          'useContext',
+          'useState',
+          'useEffect',
+          'useLayoutEffect',
+          'Component',
+          'PureComponent',
+          'useRef',
+          'useReducer',
+          'useMemo',
+        ],
+        'node_modules/react-dom/index.js': [
+          'unstable_batchedUpdates',
+          'findDOMNode',
+          'render',
+        ],
         'node_modules/react-is/index.js': [
           'isValidElementType',
           'isContextConsumer',
@@ -74,7 +97,7 @@ export default {
           'cornerstoneTools',
         ],
         'node_modules/dcmjs/build/dcmjs.js': ['data', 'adapters'],
-        'node_modules/prop-types/index.js': ['bool', 'number', 'string', 'shape', 'func', 'any', 'node']
+        'node_modules/prop-types/index.js': ['oneOfType', 'element', 'bool', 'number', 'string', 'shape', 'func', 'any', 'node']
       },
     }),
     builtins(),

src/config.js

@@ -4,9 +4,15 @@ import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import dicomParser from 'dicom-parser';
 import version from './version.js';
 
+let homepage;
+const { process } = window;
+if (process && process.env && process.env.PUBLIC_URL) {
+  homepage = process.env.PUBLIC_URL;
+}
+
 window.info = {
   version,
-  homepage: `${process.env.PUBLIC_URL}`,
+  homepage,
 };
 
 // For debugging

src/index_publish.js

@@ -2,5 +2,19 @@
  * Entry point index.js for rollup packaging
  */
 
+import React from 'react';
+import ReactDOM from 'react-dom';
+
 import App from './App.js';
-export { App };
+
+function installViewer(props, containerId = "root", callback) {
+	const container = document.getElementById(containerId);
+
+	if (!container) {
+		throw new Error("No root element found to install viewer. Please add a <div> with the id 'root', or pass a DOM element into the installViewer function.");
+	}
+
+	return ReactDOM.render(<App {...props}/>, container, callback);
+}
+
+export { App, installViewer };

yarn.lock

@@ -12489,7 +12489,7 @@ react-dnd@8.0.3:
     hoist-non-react-statics "^3.3.0"
     shallowequal "^1.1.0"
 
-react-dom@^16.7.0:
+react-dom@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -12760,7 +12760,7 @@ react-with-styles@^3.2.0:
     prop-types "^15.6.2"
     react-with-direction "^1.3.0"
 
-react@^16.7.0:
+react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -13543,6 +13543,14 @@ rollup-plugin-postcss@^2.0.3:
     rollup-pluginutils "^2.0.1"
     style-inject "^0.3.0"
 
+rollup-plugin-replace@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3"
+  integrity sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==
+  dependencies:
+    magic-string "^0.25.2"
+    rollup-pluginutils "^2.6.0"
+
 rollup-plugin-serve@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-serve/-/rollup-plugin-serve-1.0.1.tgz#2da2a784a916c5564609c7696cd9dacdbf17f6cc"
@@ -13560,7 +13568,7 @@ rollup-plugin-url@^2.2.2:
     mkpath "^1.0.0"
     rollup-pluginutils "^2.8.1"
 
-rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1:
+rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz#8fa6dd0697344938ef26c2c09d2488ce9e33ce97"
   integrity sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==