feat: add a TypeScript project built by Rsbuild (#601)

Fetch the BPMN diagram instead of storing it in the js chunks to reduce
their size.

Rsbuild provides an easy way to obtain the URL of an asset using a
regular import in the TypeScript code. This is how the diagram URL is
retrieved.

.github/workflows/check-projects.yml

@@ -50,6 +50,7 @@ jobs:
           - typescript-lit-element
           - typescript-vanilla-with-parcel
           - typescript-vanilla-with-rollup
+          - typescript-vanilla-with-rsbuild
           - typescript-vanilla-with-vitejs
           - typescript-vue
         bv-npm-package:

README.md

@@ -162,6 +162,7 @@ Show how to integrate `bpmn-visualization` in project, using various kind of fra
 - [TypeScript + Lit Element](projects/typescript-lit-element/README.md) - integration in a TypeScript Lit-Element project
 - [TypeScript + Parcel](projects/typescript-vanilla-with-parcel/README.md) - integration in a vanilla TypeScript Parcel project
 - [TypeScript + Rollup](projects/typescript-vanilla-with-rollup/README.md) - integration in a vanilla TypeScript Rollup project
+- [TypeScript + Rsbuild](projects/typescript-vanilla-with-rsbuild/README.md) - integration in a vanilla TypeScript Rsbuild project
 - [TypeScript + Vite](projects/typescript-vanilla-with-vitejs/README.md) - integration in a vanilla TypeScript Vite project
 - [TypeScript + Vue](projects/typescript-vue/README.md) - integration in a TypeScript Vue project
 

projects/typescript-vanilla-with-rsbuild/.gitignore

@@ -0,0 +1,14 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+package-lock.json
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

projects/typescript-vanilla-with-rsbuild/.npmrc

@@ -0,0 +1 @@
+package-lock=false

projects/typescript-vanilla-with-rsbuild/README.md

@@ -0,0 +1,23 @@
+# Rsbuild Project
+
+A vanilla TypeScript project built with https://rsbuild.dev
+
+Initialized by following https://rsbuild.dev/guide/start/quick-start:
+- `npm create rsbuild@latest`
+- this used [email protected]
+
+
+To run locally:
+
+1. `npm install`
+2. `npm start`
+3. [localhost app](http://localhost:3000)
+
+You will see the following diagram:
+
+![BPMN diagram in the home page](docs/home.png)
+
+The code calling `bpmn-visualization` to render the BPMN diagram is available in [index.ts](src/index.ts).
+
+If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
+bundle application with http://localhost:3000.

projects/typescript-vanilla-with-rsbuild/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "typescript-vanilla-with-rsbuild",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "bpmn-visualization": "0.44.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "1.0.4",
+    "typescript": "~5.5.4"
+  }
+}

projects/typescript-vanilla-with-rsbuild/rsbuild.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  html: {
+    favicon: './src/assets/favicon.svg',
+    title: 'bpmn-visualization TypeScript Integration with Rsbuild',
+  },
+  output: {
+    // ensure assets are correctly loaded when the application is not at the root of the server, for examples when it is deployed on GitHub pages.
+    assetPrefix: 'auto',
+  },
+  // https://rsbuild.dev/guide/basic/static-assets#extend-asset-types
+  tools: {
+    rspack(config, { addRules }) {
+      addRules([
+        {
+          // for BPMN diagrams
+          test: /\.xml$/,
+          // converts asset to a separate file and exports the URL address.
+          type: 'asset/resource',
+        },
+      ]);
+    },
+  },
+});

projects/typescript-vanilla-with-rsbuild/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.xml' {
+  const content: string;
+  export default content;
+}

projects/typescript-vanilla-with-rsbuild/src/index.css

@@ -0,0 +1,26 @@
+body {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+footer {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+.title {
+  text-align: center;
+  margin-top: 3rem;
+}
+
+.bpmn-highlight.bpmn-task  > rect {
+  fill: pink;
+  fill-opacity: 30%;
+  stroke: coral;
+}
+.bpmn-highlight.bpmn-task >rect:hover {
+  fill-opacity: 70%;
+}

projects/typescript-vanilla-with-rsbuild/src/index.ts

@@ -0,0 +1,83 @@
+import './index.css';
+// the URL support is provided by rsbuild, see rsbuild.config.ts
+// use the xml extension, as surge.sh returns an "HTTP 410 (Gone)" error for the bpmn extension
+import diagramUrl from './assets/EC-purchase-orders-collapsed.xml';
+import { BpmnVisualization, FitType, getVersion, mxgraph } from 'bpmn-visualization';
+
+
+document.querySelector('#root')!.innerHTML = `
+    <h1 class="title">bpmn-visualization TypeScript Integration with Rsbuild</h1>
+    <div id="bpmn-container"></div>
+    <footer></footer>
+`;
+
+// instantiate BpmnVisualization, pass the container HTMLElement - present in index.html
+const bpmnVisualization = new BpmnVisualization({
+  container: "bpmn-container",
+});
+// load the BPMN diagram defined above
+const response = await fetch(diagramUrl);
+const diagram = await response.text();
+bpmnVisualization.load(diagram, { fit: { type: FitType.Center, margin: 10}});
+const registry = bpmnVisualization.bpmnElementsRegistry;
+
+// Style elements with CSS
+registry.addCssClasses(
+  [
+    'Activity_1t65hvk', // Create Purchase Order Item
+    'Activity_00vbm9s', // Record Goods Receipts
+  ],
+  'bpmn-highlight',
+);
+
+// Style elements with the "Update Style" API
+registry.updateStyle(['Gateway_1ezcj46', 'Activity_0yabbur', 'Event_07598zy'],
+  {
+    stroke: { color: 'blue', width: 6 },
+    fill: { color: 'orange', opacity: 40 },
+  });
+registry.updateStyle(['Flow_1kkicvr', 'Flow_12q12yb'],
+  {
+    stroke: { color: 'blue', width: 4 },
+  });
+
+// Add overlays
+// Record Invoice Receipt
+registry.addOverlays('Activity_1u4jwkv',
+  {
+    label: '150',
+    position: 'top-center',
+    style: {
+      font: {
+        size: 18
+      },
+      stroke: {
+        color: 'white'
+      }
+    },
+  });
+// Remove Payment Block
+registry.addOverlays('Activity_083jf01',
+  {
+    label: '72',
+    position: 'top-center',
+    style: {
+      fill: {
+        color: '#ff0101'
+      },
+      font: {
+        color: 'white',
+        size: 22,
+      },
+      stroke: {
+        color: '#ff0101',
+      },
+    },
+  });
+
+// display the bpmn-visualization version in the footer
+const footer = document.querySelector<HTMLElement>('footer')!;
+const version = getVersion();
+const versionAsString = `bpmn-visualization@${version.lib}`;
+const dependenciesAsString = [...version.dependencies].map(([name, version]) => `${name}@${version}`).join('/');
+footer.innerText = `${versionAsString} with ${dependenciesAsString} | direct usage of mxGraph@${mxgraph.mxClient.VERSION}`;

projects/typescript-vanilla-with-rsbuild/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src"]
+}