build(event-display): bundle Phoenix with webpack

- Remove rollup - Add webpack and configure it for bundling Phoenix - Encapsulate event display in the wrapper's size - Docs on how to bundle and use Phoenix event display in the browserwebpack
HSF · Feb 15, 2021 · 83721e5 · 83721e5
2 parents 3fe4ff2 + 75b7e9d
commit 83721e5
Show file tree

Hide file tree

Showing 9 changed files with 965 additions and 49 deletions.
diff --git a/packages/phoenix-event-display/README.md b/packages/phoenix-event-display/README.md
@@ -16,6 +16,8 @@ yarn add phoenix-event-display
 
 ## Usage
 
+### As a module
+
 To create a simple event display.
 
 ```js
@@ -47,6 +49,53 @@ eventDisplay.loadOBJGeometry('path/to/geometry.obj', 'Detector OBJ', 0x8c8c8c /*
 
 ```
 
+### As a standalone bundle
+
+Phoenix can be bundled and used directly in the HTML as a script.
+
+To build Phoenix as a bundle.
+
+```sh
+npm run build:bundle
+# or
+yarn build:bundle
+```
+
+This will generate a file `phoenix-<version>.min.js` (e.g. `phoenix-1.3.0.min.js`) in the [./dist/bundle](./dist/bundle) directory which can be included in your HTML code.
+
+```html
+<html lang="en">
+  <head>
+    ...
+  </head>
+
+  <body>
+
+    <div id="eventDisplay"></div>
+
+    <script src="phoenix.min.js"></script>
+
+    <script>
+      // Create the event display
+      const eventDisplay = new Phoenix.EventDisplay(configuration);
+
+      // Define the configuration
+      const configuration = {
+        elementId: 'eventDisplay',
+        eventDataLoader: new Phoenix.PhoenixLoader() // or some other event data loader
+        // ... other configuration options
+      };
+
+      // Initialize the event display with the configuration
+      eventDisplay.init(configuration);
+
+      // ... other event display functions
+    </script>
+
+  </body>
+</html>
+```
+
 ### Examples
 
 * [Usage in Angular (as a service)](https://github.com/HSF/phoenix/blob/master/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts)

diff --git a/packages/phoenix-event-display/configs/karma.conf.js b/packages/phoenix-event-display/configs/karma.conf.js
@@ -6,6 +6,7 @@ module.exports = function (config) {
       { pattern: 'src/**/*.ts' },
       { pattern: 'src/assets/**/*', watched: false, included: false, served: true }
     ],
+    exclude: ['src/browser.ts'],
     proxies: {
       '/assets/': '/base/src/assets/'
     },

diff --git a/packages/phoenix-event-display/configs/rollup.conf.js b/packages/phoenix-event-display/configs/rollup.conf.js
diff --git a/packages/phoenix-event-display/configs/webpack.conf.js b/packages/phoenix-event-display/configs/webpack.conf.js
@@ -0,0 +1,23 @@
+const path = require('path');
+const packageJSON = require('../package.json');
+
+module.exports = {
+  entry: './src/browser.ts',
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  output: {
+    filename: `phoenix-${packageJSON.version}.min.js`,
+    path: path.resolve(__dirname, '../dist/bundle'),
+  },
+};
diff --git a/packages/phoenix-event-display/package.json b/packages/phoenix-event-display/package.json
@@ -21,7 +21,7 @@
     "build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
     "build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
     "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
-    "build:umd": "yarn build && rollup -c configs/rollup.conf.js",
+    "build:bundle": "webpack -c configs/webpack.conf.js",
     "tsc-d": "tsc --declaration --emitDeclarationOnly --esModuleInterop --outFile dist/index.d.ts",
     "prepare": "yarn build",
     "docs": "node scripts/gen-api-docs.js",
@@ -45,8 +45,10 @@
     "karma-jasmine": "^4.0.1",
     "karma-typescript": "^5.2.0",
     "karma-typescript-es6-transform": "^5.2.0",
-    "rollup": "^2.26.10",
+    "ts-loader": "^8.0.17",
     "tslint": "~6.1.3",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "webpack": "^5.21.2",
+    "webpack-cli": "^4.5.0"
   }
 }
diff --git a/packages/phoenix-event-display/src/browser.ts b/packages/phoenix-event-display/src/browser.ts
@@ -0,0 +1,60 @@
+import { LoadingManager } from 'three';
+import { EventDisplay } from './event-display';
+import { Cut } from './extras/cut.model';
+import { PresetView } from './extras/preset-view.model';
+import { PrettySymbols } from './helpers/pretty-symbols';
+import { RKHelper } from './helpers/rk-helper';
+import { RungeKutta } from './helpers/runge-kutta';
+import { InfoLogger } from './info-logger';
+import { CMSLoader } from './loaders/cms-loader';
+import { JiveXMLLoader } from './loaders/jivexml-loader';
+import { JSRootEventLoader } from './loaders/jsroot-event-loader';
+import { LHCbLoader } from './loaders/lhcb-loader';
+import { CMSObjects } from './loaders/objects/cms-objects';
+import { PhoenixObjects } from './loaders/objects/phoenix-objects';
+import { PhoenixLoader } from './loaders/phoenix-loader';
+import { ScriptLoader } from './loaders/script-loader';
+import { TrackmlLoader } from './loaders/trackml-loader';
+import { StateManager } from './managers/state-manager';
+import { URLOptionsManager } from './managers/url-options-manager';
+import { ThreeManager } from './three';
+import { UIManager } from './ui';
+import { PhoenixMenuNode } from './ui/phoenix-menu/phoenix-menu-node';
+
+if (typeof globalThis !== 'undefined') {
+  // `globalThis` makes `Phoenix` available as an object in the browser
+  // e.g. `const eventDisplay = new Phoenix.EventDisplay();`
+  globalThis.Phoenix = {
+    // Event display
+    EventDisplay,
+    // Misc
+    InfoLogger,
+    // Three
+    ThreeManager,
+    // UI
+    UIManager,
+    PhoenixMenuNode,
+    // Extras
+    Cut,
+    PresetView,
+    // Helpers
+    RKHelper,
+    RungeKutta,
+    PrettySymbols,
+    // Loaders
+    CMSLoader,
+    JiveXMLLoader,
+    JSRootEventLoader,
+    LHCbLoader,
+    PhoenixLoader,
+    ScriptLoader,
+    TrackmlLoader,
+    // Physics objects
+    CMSObjects,
+    PhoenixObjects,
+    // Managers
+    StateManager,
+    LoadingManager,
+    URLOptionsManager
+  };
+}
diff --git a/packages/phoenix-event-display/src/index.ts b/packages/phoenix-event-display/src/index.ts
@@ -47,3 +47,4 @@ export * from './loaders/objects/phoenix-objects';
 // Managers
 export * from './managers/state-manager';
 export * from './managers/loading-manager';
+export * from './managers/url-options-manager';
diff --git a/packages/phoenix-event-display/src/three/renderer-manager.ts b/packages/phoenix-event-display/src/three/renderer-manager.ts
@@ -60,16 +60,19 @@ export class RendererManager {
    * @param elementId ID of the wrapper element.
    */
   private initRenderer(elementId: string) {
+    let canvas = document.getElementById(elementId);
+    const rendererWidth = canvas?.offsetWidth ?? window.innerWidth;
+    const rendererHeight = canvas?.offsetHeight ?? window.innerHeight;
+
     const mainRenderer = this.getMainRenderer();
     mainRenderer.setSize(
-      window.innerWidth,
-      window.innerHeight,
+      rendererWidth,
+      rendererHeight,
       false
     );
     mainRenderer.setPixelRatio(window.devicePixelRatio);
     mainRenderer.domElement.id = 'three-canvas';
 
-    let canvas = document.getElementById(elementId);
     if (canvas == null) {
       canvas = document.body;
     }