From 98a9e23aac074a4b3392866090a92f654175dffc Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Thu, 20 Aug 2020 17:27:24 +0200 Subject: [PATCH] [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 3bf93fb5283964c218f2d48aae61ffed1ff3a2ba) 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) --- rollup.config.js | 7 +- src/component/mxgraph/shape/render/index.ts | 18 +++++ src/demo/index.ts | 32 ++++----- src/index-non-regression.html | 10 +-- src/index.html | 4 +- src/index.ts | 24 ++++++- src/lib-integration.html | 18 +++++ src/model/bpmn/shape/index.ts | 21 ++++++ src/static/js/demo.js | 25 +++++++ src/static/js/lib-integration.js | 77 +++++++++++++++++++++ src/static/js/non-regression.js | 22 ++++++ test/e2e/bpmn-rendering.test.ts | 2 +- test/e2e/mxGraph.view.test.ts | 15 +++- test/fixtures/bpmn/simple-start-only.bpmn | 16 +++++ 14 files changed, 259 insertions(+), 32 deletions(-) create mode 100644 src/component/mxgraph/shape/render/index.ts create mode 100644 src/lib-integration.html create mode 100644 src/model/bpmn/shape/index.ts create mode 100644 src/static/js/demo.js create mode 100644 src/static/js/lib-integration.js create mode 100644 src/static/js/non-regression.js create mode 100644 test/fixtures/bpmn/simple-start-only.bpmn diff --git a/rollup.config.js b/rollup.config.js index 899196094b..555e39e314 100644 --- 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 new file mode 100644 index 0000000000..36f523acb6 --- /dev/null +++ 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 index eedf8e9467..be0a828f71 100644 --- 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,8 +31,11 @@ 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); @@ -41,30 +43,26 @@ function readAndLoadFile(f: File): void { 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 index f28e509adb..4474b2f8e7 100644 --- a/src/index-non-regression.html +++ b/src/index-non-regression.html @@ -16,17 +16,13 @@ - -
-
-
- +
- - + + diff --git a/src/index.html b/src/index.html index b64577fb50..7cd208c65c 100644 --- a/src/index.html +++ b/src/index.html @@ -18,7 +18,7 @@ - - + + diff --git a/src/index.ts b/src/index.ts index e109316635..08352c5dc3 100644 --- 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 new file mode 100644 index 0000000000..ee97002e30 --- /dev/null +++ b/src/lib-integration.html @@ -0,0 +1,18 @@ + + + + + BPMN Visualization Lib Integration + + + +
+ + + + + + + + + diff --git a/src/model/bpmn/shape/index.ts b/src/model/bpmn/shape/index.ts new file mode 100644 index 0000000000..c3d2a52a7d --- /dev/null +++ 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 new file mode 100644 index 0000000000..dae259ba9f --- /dev/null +++ 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 new file mode 100644 index 0000000000..39c05e5836 --- /dev/null +++ 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 ` + + + Flow_1 + + + + Flow_1 + Flow_2 + + + Flow_2 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; +} diff --git a/src/static/js/non-regression.js b/src/static/js/non-regression.js new file mode 100644 index 0000000000..412d4382fd --- /dev/null +++ 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 index a4ffce7ff2..1336fd070a 100644 --- 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 index 0aa0e004d5..4b69bf42d4 100644 --- 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 { 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'); + }); +}); diff --git a/test/fixtures/bpmn/simple-start-only.bpmn b/test/fixtures/bpmn/simple-start-only.bpmn new file mode 100644 index 0000000000..f4c3ee9453 --- /dev/null +++ b/test/fixtures/bpmn/simple-start-only.bpmn @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + +