refactor(demo): fetch the BPMN diagrams (#287)

Previously, the diagram was stored in JavaScript chunks.
This increased the size of the chunks and did not reflect what an
application generally does: it does not store diagrams, they are
retrieved from services or APIs.
Fetching the diagram reduces the size of the JavaScript chunks and makes
the demo closer to a real application.

packages/demo/src/overlays.ts

@@ -20,9 +20,7 @@ import type { FitOptions } from 'bpmn-visualization';
 import { BpmnVisualization, OverlaysPlugin } from '@process-analytics/bv-experimental-add-ons';
 import { FitType } from 'bpmn-visualization';
 
-// This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
-// For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
-import diagram from './assets/diagram.bpmn?raw';
+import { fetchDiagram } from './shared/diagrams';
 import { ZoomComponent } from './shared/zoom-component';
 
 // Instantiate BpmnVisualization, and pass the OverlaysPlugin
@@ -32,6 +30,7 @@ const bpmnVisualization = new BpmnVisualization({
   plugins: [OverlaysPlugin],
 });
 // Load the BPMN diagram defined above
+const diagram = await fetchDiagram();
 const fitOptions: FitOptions = { type: FitType.Center, margin: 20 };
 bpmnVisualization.load(diagram, { fit: fitOptions });
 

packages/demo/src/path-resolver.ts

@@ -20,16 +20,15 @@ import type { BpmnElement } from 'bpmn-visualization';
 import { BpmnVisualization, ElementsPlugin, PathResolver, ShapeUtil, StylePlugin } from '@process-analytics/bv-experimental-add-ons';
 import { FitType } from 'bpmn-visualization';
 
-// This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
-// For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
-import diagram from './assets/diagram.bpmn?raw';
+import { fetchDiagram } from './shared/diagrams';
 
 // Instantiate BpmnVisualization, pass the container HTMLElement - present in path-resolver.html
 const bpmnVisualization = new BpmnVisualization({
   container: 'bpmn-container',
   plugins: [ElementsPlugin, StylePlugin],
 });
 // Load the BPMN diagram defined above
+const diagram = await fetchDiagram();
 bpmnVisualization.load(diagram, { fit: { type: FitType.Center, margin: 20 } });
 const elementsPlugin = bpmnVisualization.getPlugin<ElementsPlugin>('elements');
 const stylePlugin = bpmnVisualization.getPlugin<StylePlugin>('style');

packages/demo/src/plugins-by-name.ts

@@ -21,9 +21,7 @@ import type { FitOptions, StyleUpdate } from 'bpmn-visualization';
 import { BpmnVisualization, StyleByNamePlugin } from '@process-analytics/bv-experimental-add-ons';
 import { FitType } from 'bpmn-visualization';
 
-// This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
-// For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
-import diagram from './assets/diagram.bpmn?raw';
+import { fetchDiagram } from './shared/diagrams';
 import { ZoomComponent } from './shared/zoom-component';
 
 // Instantiate BpmnVisualization, and pass the OverlaysPlugin
@@ -33,6 +31,7 @@ const bpmnVisualization = new BpmnVisualization({
   plugins: [StyleByNamePlugin],
 });
 // Load the BPMN diagram defined above
+const diagram = await fetchDiagram();
 const fitOptions: FitOptions = { type: FitType.Center, margin: 20 };
 bpmnVisualization.load(diagram, { fit: fitOptions });
 

packages/demo/src/shared/diagrams.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2024 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.
+*/
+
+// This is simple example of the BPMN diagram, loaded from a URL. The '?.url' extension support is provided by Vite.
+// See https://vitejs.dev/guide/assets#importing-asset-as-url
+// For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
+import diagramUrl from '../assets/bpmn/EC-purchase-orders-collapsed.xml?url';
+
+export async function fetchDiagram(): Promise<string> {
+  const response = await fetch(diagramUrl);
+  return await response.text();
+}

packages/demo/vite.config.ts

@@ -52,6 +52,10 @@ export default defineConfig(() => {
         },
       },
       chunkSizeWarningLimit: 838, // mxgraph
+      // to add support for top-level await
+      // see https://github.com/vitejs/vite/issues/6985#issuecomment-1044375490
+      // see https://vitejs.dev/config/build-options#build-target
+      target: ['esnext'],
     },
   };
 });