[FIX] demo code does not interfere with lib integration (#479)

The demo code is now hidden in a module and don't have side effects (globals, require html elements available in the page). The demo bootstrap code specific to the demo page is defined in a dedicated JavaScript script. To be able to access to the demo and lib code in the demo JS code, we now a 1st set of elements (functions, classes, ....) exported by the lib. To ensure that there is no more lib integration issue, we have added a dedicated page using specific code that are not using the demo code at all (only the lib code). A new specific e2e view test ensures that this page is working. The terser compress and mangle configuration has been reactivated: thanks to the new exports defined in the index.ts, terser is able to generate a minified bundle including right export names. The minified bundle size then decreases from `189.64 kb` (master 3bf93fb) to `135.85 kb` (6df5f79). We also added some refactoring - To reduce the impact of the demo code on the 'non regression' page, we the id of the html element used to render the diagram is no more hard coded and can be passed to the demo processing code. So the 'non regression' page is not forced (as the lib integration page) to define ghost div required by the demo code. - We do not load the lib directly in the html pages, it is loaded indirectly by the js app code that requires it (via import)
process-analytics · Aug 20, 2020 · 98a9e23 · 98a9e23
1 parent 5123d33
commit 98a9e23
Show file tree

Hide file tree

Showing 14 changed files with 259 additions and 32 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -45,11 +45,16 @@ const plugins = [
 // Copy static resources to dist
 if (devMode || demoMode) {
   const copyTargets = [];
+  // TODO configure with glob if possible to avoid listing all files manually (maintenance pain)
   copyTargets.push({ src: 'src/index.html', dest: 'dist/' });
   copyTargets.push({ src: 'src/index-non-regression.html', dest: 'dist/' });
+  copyTargets.push({ src: 'src/lib-integration.html', dest: 'dist/' });
   copyTargets.push({ src: 'src/static/css/main.css', dest: 'dist/static/css/' });
   copyTargets.push({ src: 'src/static/img/favicon.ico', dest: 'dist/static/img/' });
   copyTargets.push({ src: 'src/static/js/configureMxGraphGlobals.js', dest: 'dist/static/js/' });
+  copyTargets.push({ src: 'src/static/js/demo.js', dest: 'dist/static/js/' });
+  copyTargets.push({ src: 'src/static/js/lib-integration.js', dest: 'dist/static/js/' });
+  copyTargets.push({ src: 'src/static/js/non-regression.js', dest: 'dist/static/js/' });
   copyTargets.push({ src: 'node_modules/mxgraph/javascript/mxClient.min.js', dest: 'dist/static/js/' });
   let copyPlugin;
   if (devLiveReloadMode) {
@@ -77,8 +82,6 @@ if (devMode) {
 if (demoMode) {
   plugins.push(
     terser({
-      compress: false,
-      mangle: false,
       ecma: 6,
     }),
   );

diff --git a/src/component/mxgraph/shape/render/index.ts b/src/component/mxgraph/shape/render/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './BpmnCanvas';
+export * from './IconPainter';
+export * from './render-types';
diff --git a/src/demo/index.ts b/src/demo/index.ts
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 import BpmnVisualization from '../component/BpmnVisualization';
-import { DropFileUserInterface } from './component/DropFileUserInterface';
-import { documentReady, log, logStartup } from './helper';
+import { log, logStartup } from './helper';
 
-export const bpmnVisualization = new BpmnVisualization(window.document.getElementById('graph'));
+let bpmnVisualization = new BpmnVisualization(window.document.getElementById('graph'));
 
 let fitOnLoad = false;
 function loadBpmn(bpmn: string): void {
@@ -32,39 +31,38 @@ function loadBpmn(bpmn: string): void {
   }
 }
 
+export * from './helper';
+export * from './component/DropFileUserInterface';
+
 // callback function for opening | dropping the file to be loaded
-function readAndLoadFile(f: File): void {
+export function readAndLoadFile(f: File): void {
   const reader = new FileReader();
   reader.onload = () => {
     loadBpmn(reader.result as string);
   };
   reader.readAsText(f);
 }
 
-// TODO: move to UI initializer
-new DropFileUserInterface(window, 'drop-container', 'graph', readAndLoadFile);
-
 // TODO: make File Open Button a self contained component
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleFileSelect(evt: any): void {
+export function handleFileSelect(evt: any): void {
   const f = evt.target.files[0];
   readAndLoadFile(f);
 }
 
-document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
-document.getElementById('file-selector').classList.remove('hidden');
-
-////////////////////////////////////////////////////////////////////////////////
-// if bpmn passed as request parameter, try to load it directly
-////////////////////////////////////////////////////////////////////////////////
-documentReady(function () {
+export function startBpmnVisualization(container: string): void {
   const log = logStartup;
-  log("Checking if 'BPMN auto loading from url parameter' is requested");
+
+  log(`Initializing BpmnVisualization with container '${container}'...`);
+  bpmnVisualization = new BpmnVisualization(window.document.getElementById(container));
+  log('Initialization completed');
+
   const parameters = new URLSearchParams(window.location.search);
 
   fitOnLoad = parameters.get('fitOnLoad') == 'true';
   log(`Configure 'fit on load' to ${fitOnLoad}`);
 
+  log("Checking if 'BPMN auto loading from url parameter' is requested");
   const bpmnParameterValue = parameters.get('bpmn');
   if (bpmnParameterValue) {
     const bpmn = decodeURIComponent(bpmnParameterValue);
@@ -76,4 +74,4 @@ documentReady(function () {
   } else {
     log('No BPMN auto loading');
   }
-});
+}
diff --git a/src/index-non-regression.html b/src/index-non-regression.html
@@ -16,17 +16,13 @@
     </style>
 </head>
 <body>
-    <!-- Needed by demo code -->
-    <div id="file-selector"></div>
-    <div id="bpmn-file"></div>
-    <div id="graph" class="graph-container"></div>
-    <!-- END OF 'Needed by demo code' -->
+    <div id="viewport" class="graph-container"></div>
 
     <!-- load global settings -->
     <script src="./static/js/configureMxGraphGlobals.js"></script>
     <!-- load mxGraph client library -->
     <script src="./static/js/mxClient.min.js"></script>
-    <!-- load bpmn-visualization library -->
-    <script src="./index.es.js"></script>
+    <!-- load app -->
+    <script src="./static/js/non-regression.js" type="module"></script>
 </body>
 </html>
diff --git a/src/index.html b/src/index.html
@@ -18,7 +18,7 @@
     <script src="./static/js/configureMxGraphGlobals.js"></script>
     <!-- load mxGraph client library -->
     <script src="./static/js/mxClient.min.js"></script>
-    <!-- load bpmn-visualization library -->
-    <script src="./index.es.js"></script>
+    <!-- load demo -->
+    <script src="./static/js/demo.js" type="module"></script>
 </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
@@ -13,4 +13,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import './demo';
+
+// TODO remove dedicated import/export
+// this is currently needed, otherwise module default exports are not exported in bundle js
+import BpmnVisualization from './component/BpmnVisualization';
+import IconPainter from './component/mxgraph/shape/render/IconPainter';
+import StyleConfigurator from './component/mxgraph/config/StyleConfigurator';
+import ShapeUtil from './model/bpmn/shape/ShapeUtil';
+
+export { BpmnVisualization };
+export { IconPainter };
+export { StyleConfigurator };
+export { ShapeUtil };
+// end of 'TO DO remove dedicated import/export'
+
+export * from './component/mxgraph/StyleUtils';
+export * from './component/mxgraph/shape/render';
+
+// TODO restore 'alias export' to avoid any name clash with the demo code, when esLint parsing error is fixed: "Parsing error: Cannot read property 'map' of undefined"
+// bug: https://github.com/typescript-eslint/typescript-eslint/issues/1653
+// enhancement: https://github.com/typescript-eslint/typescript-eslint/issues/1436
+// export * as bpmnVisualizationDemo from './demo';
+export * from './demo';
+export * from './model/bpmn/shape';
diff --git a/src/lib-integration.html b/src/lib-integration.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>BPMN Visualization Lib Integration</title>
+  <link rel="shortcut icon" href="./static/img/favicon.ico">
+</head>
+<body>
+  <div id="bpmn-visualization-viewport"></div>
+
+  <!-- load global settings -->
+  <script src="./static/js/configureMxGraphGlobals.js"></script>
+  <!-- load mxGraph client library -->
+  <script src="./static/js/mxClient.min.js"></script>
+  <!-- load app -->
+  <script src="./static/js/lib-integration.js" type="module"></script>
+</body>
+</html>
diff --git a/src/model/bpmn/shape/index.ts b/src/model/bpmn/shape/index.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './ShapeBpmnCallActivityKind';
+export * from './ShapeBpmnElementKind';
+export * from './ShapeBpmnEventKind'; // TODO no need for internal function
+export * from './ShapeBpmnMarkerKind';
+export * from './ShapeBpmnSubProcessKind';
diff --git a/src/static/js/demo.js b/src/static/js/demo.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { documentReady, DropFileUserInterface, handleFileSelect, readAndLoadFile, startBpmnVisualization } from '../../index.es.js';
+
+const visualizationContainer = 'graph';
+// TODO: move to UI initializer
+new DropFileUserInterface(window, 'drop-container', visualizationContainer, readAndLoadFile);
+
+document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
+document.getElementById('file-selector').classList.remove('hidden');
+
+documentReady(startBpmnVisualization(visualizationContainer));
diff --git a/src/static/js/lib-integration.js b/src/static/js/lib-integration.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BpmnVisualization } from '../../index.es.js';
+
+const parameters = new URLSearchParams(window.location.search);
+const bpmnParameterValue = parameters.get('bpmn');
+
+let bpmn;
+if (bpmnParameterValue) {
+  bpmn = decodeURIComponent(bpmnParameterValue);
+} else {
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  bpmn = bpmnDefaultContent();
+}
+//
+const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-visualization-viewport'));
+bpmnVisualizationIntegration.load(bpmn);
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function bpmnDefaultContent() {
+  return `<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0x0opj6" targetNamespace="http://example.bpmn.com/schema/bpmn">
+    <bpmn:process id="Process_1" isExecutable="false">
+      <bpmn:startEvent id="StartEvent_1" name="Start Event 1">
+        <bpmn:outgoing>Flow_1</bpmn:outgoing>
+      </bpmn:startEvent>
+      <bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Activity_1" name="Sequence Flow 1" />
+      <bpmn:task id="Activity_1" name="Task 1">
+        <bpmn:incoming>Flow_1</bpmn:incoming>
+        <bpmn:outgoing>Flow_2</bpmn:outgoing>
+      </bpmn:task>
+      <bpmn:endEvent id="EndEvent_1" name="End Event 1">
+        <bpmn:incoming>Flow_2</bpmn:incoming>
+      </bpmn:endEvent>
+      <bpmn:sequenceFlow id="Flow_2" sourceRef="Activity_1" targetRef="EndEvent_1" />
+    </bpmn:process>
+    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+        <bpmndi:BPMNEdge id="BPMNEdge_Flow_1" bpmnElement="Flow_1">
+          <di:waypoint x="192" y="99" />
+          <di:waypoint x="250" y="99" />
+        </bpmndi:BPMNEdge>
+        <bpmndi:BPMNEdge id="BPMNEdge_Flow_2" bpmnElement="Flow_2">
+          <di:waypoint x="350" y="99" />
+          <di:waypoint x="412" y="99" />
+        </bpmndi:BPMNEdge>
+        <bpmndi:BPMNShape id="BPMNShape_StartEvent_1" bpmnElement="StartEvent_1">
+          <dc:Bounds x="156" y="81" width="36" height="36" />
+          <bpmndi:BPMNLabel>
+            <dc:Bounds x="158" y="124" width="33" height="14" />
+          </bpmndi:BPMNLabel>
+        </bpmndi:BPMNShape>
+        <bpmndi:BPMNShape id="BPMNShape_Activity_1" bpmnElement="Activity_1">
+          <dc:Bounds x="250" y="59" width="100" height="80" />
+        </bpmndi:BPMNShape>
+        <bpmndi:BPMNShape id="BPMNShape_EndEvent_1" bpmnElement="EndEvent_1">
+          <dc:Bounds x="412" y="81" width="36" height="36" />
+          <bpmndi:BPMNLabel>
+            <dc:Bounds x="416" y="124" width="29" height="14" />
+          </bpmndi:BPMNLabel>
+        </bpmndi:BPMNShape>
+      </bpmndi:BPMNPlane>
+    </bpmndi:BPMNDiagram>
+  </bpmn:definitions>`;
+}
diff --git a/src/static/js/non-regression.js b/src/static/js/non-regression.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { documentReady, DropFileUserInterface, readAndLoadFile, startBpmnVisualization } from '../../index.es.js';
+
+const visualizationContainer = 'viewport';
+// TODO: move to UI initializer
+new DropFileUserInterface(window, 'drop-container', visualizationContainer, readAndLoadFile);
+
+documentReady(startBpmnVisualization(visualizationContainer));
diff --git a/test/e2e/bpmn-rendering.test.ts b/test/e2e/bpmn-rendering.test.ts
@@ -35,7 +35,7 @@ import { encodeUriXml, findFiles, linearizeXml, readFileSync } from '../helpers/
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const debug = require('debug')('test');
 
-const graphContainerId = 'graph';
+const graphContainerId = 'viewport';
 
 describe('no visual regression', () => {
   const defaultImageSnapshotConfig = {

diff --git a/test/e2e/mxGraph.view.test.ts b/test/e2e/mxGraph.view.test.ts
@@ -15,7 +15,7 @@
  */
 import { readFileSync } from '../helpers/file-helper';
 
-const graphContainerId = 'graph';
+let graphContainerId = 'graph';
 
 async function expectLabel(cellId: string, expectedText?: string): Promise<void> {
   if (!expectedText) {
@@ -51,7 +51,7 @@ async function expectSequenceFlow(cellId: string, expectedText?: string): Promis
   await expectLabel(cellId, expectedText);
 }
 
-describe('BpmnVisu view', () => {
+describe('BpmnVisu view - index page', () => {
   it('should display page title', async () => {
     await page.goto('http://localhost:10001');
     await page.waitForSelector(`#${graphContainerId}`);
@@ -68,3 +68,14 @@ describe('BpmnVisu view', () => {
     await expectEvent('EndEvent_1', 'End Event 1');
   });
 });
+
+describe('BpmnVisu view - lib-integration page', () => {
+  it('should display graph in page', async () => {
+    graphContainerId = 'bpmn-visualization-viewport';
+    await page.goto(`http://localhost:10001/lib-integration.html?bpmn=${readFileSync('../fixtures/bpmn/simple-start-only.bpmn')}`);
+    await expect(page.title()).resolves.toMatch('BPMN Visualization Lib Integration');
+    await page.waitForSelector(`#${graphContainerId}`);
+
+    await expectEvent('StartEvent_1', 'Start Event Only');
+  });
+});