slidev-addon-bpmn 1.2.0 → 1.2.1

package/README.md

@@ -17,7 +17,7 @@ That's it — your BPMN diagrams are ready to present!
 
 ## Example Slide
 
-![Example BPMN diagram in Slidev](./public/example-slide.png)
+![Example BPMN diagram in Slidev](./docs/bpmn.gif)
 
 ## 📦 Installation
 
@@ -99,7 +99,7 @@ The token simulation provides interactive controls for stepping through process
 
 - **File location**: BPMN files must be placed in the `public/` folder
 - **Supported formats**: Standard BPMN 2.0 XML files (exported from Camunda Modeler, bpmn.io, etc.)
-- **Styling**: Use Tailwind classes via the `class` prop to control sizing
+- **Styling**: Use Tailwind classes on the component element to control sizing
 - **Export**: Each `<Bpmn>` component works seamlessly with Slidev's PDF/PNG export features
 
 ## 🤝 Contributing

package/components/Bpmn.vue

@@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue'
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import 'bpmn-js/dist/assets/bpmn-js.css'
 
-const loading = ref(false)
+const loading = ref(true)
 const error = ref<string | null>(null)
 const svg = ref<string | null>(null)
 
@@ -68,6 +68,9 @@ async function loadAndRenderBpmn(path: string): Promise<void> {
     const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
     const svgElement = svgDoc.documentElement
 
+    // Strip potentially dangerous elements from the SVG
+    svgDoc.querySelectorAll('script, foreignObject').forEach(el => el.remove())
+
     svgElement.style.maxWidth = props.width
     svgElement.style.height = props.height
     svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet')

package/components/BpmnTokenSimulation.vue

@@ -1,10 +1,11 @@
 <template>
   <div :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: props.width, height: containerHeight }">
     <p v-if="loading">Loading BPMN diagram...</p>
+    <p v-if="error" class="text-red-500">{{ error }}</p>
     <div ref="containerRef" :style="{
-    width: `calc(${props.width} - ${5* 2}px)`,
-    height: `calc(${containerHeight} - ${5 * 2}px)`,
-    margin: `5px`,
+    width: `calc(${props.width} - ${margin * 2}px)`,
+    height: `calc(${containerHeight} - ${margin * 2}px)`,
+    margin: `${margin}px`,
   }"
     ></div>
   </div>
@@ -12,16 +13,21 @@
 
 <script setup lang="ts">
 
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import 'bpmn-js/dist/assets/bpmn-js.css'
 import tokenSimulation from 'bpmn-js-token-simulation/lib/viewer'
 import { onSlideEnter } from '@slidev/client'
 import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css'
 
-const loading = ref(false)
+const margin = 5
+const containerWaitTimeout = 5000
+
+const loading = ref(true)
+const error = ref<string | null>(null)
 const containerRef = ref<HTMLDivElement | null>(null)
 const isRendered = ref(false)
+let viewer: InstanceType<typeof BpmnViewer> | null = null
 
 const props = withDefaults(defineProps<{
   bpmnFilePath: string
@@ -39,10 +45,13 @@ const containerHeight = props.height === 'auto' ? '500px' : props.height
  * Prevents "non-finite" SVG matrix errors when canvas.zoom() is called.
  */
 async function waitForContainer(): Promise<void> {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
+    const start = Date.now()
     const checkDimensions = () => {
       if (containerRef.value && containerRef.value.clientWidth > 0 && containerRef.value.clientHeight > 0) {
         resolve()
+      } else if (Date.now() - start > containerWaitTimeout) {
+        reject(new Error('Container dimensions not available within timeout'))
       } else {
         requestAnimationFrame(checkDimensions)
       }
@@ -61,6 +70,7 @@ async function renderBpmn() {
   if (isRendered.value) return
   isRendered.value = true
   loading.value = true
+  error.value = null
 
   try {
     await waitForContainer()
@@ -70,7 +80,7 @@ async function renderBpmn() {
     if (!response.ok) throw new Error(`Failed to fetch BPMN file: ${response.status}`)
 
     const disableSnackbarModule = {notifications: ['value', {showNotification: () => {}}]}
-    const viewer = new BpmnViewer({
+    viewer = new BpmnViewer({
       container: containerRef.value!,
       additionalModules: [tokenSimulation, disableSnackbarModule]
     })
@@ -85,6 +95,7 @@ async function renderBpmn() {
 
   } catch (err) {
     isRendered.value = false
+    error.value = `Failed to load BPMN: ${err instanceof Error ? err.message : String(err)}`
     console.error('BPMN loading error:', err)
   } finally {
     loading.value = false
@@ -108,4 +119,9 @@ onSlideEnter(async () => {
   await renderBpmn()
 })
 
-</script>
+onUnmounted(() => {
+  viewer?.destroy()
+  viewer = null
+})
+
+</script>

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "slidev-addon-bpmn",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Display BPMN 2.0 diagrams in Slidev presentations",
   "type": "module",
   "scripts": {
-    "dev": "slidev example.md",
+    "dev": "portless run sh -c 'npx slidev example.md --port $PORT --remote --bind 127.0.0.1'",
     "build": "slidev build example.md",
     "export": "slidev export example.md",
     "screenshot": "slidev export example.md --format png"
@@ -12,11 +12,11 @@
   "author": "Marco Schäck (https://github.com/emaarco)",
   "license": "MIT",
   "dependencies": {
-    "bpmn-js": "18.11.0",
-    "bpmn-js-token-simulation": "0.39.1"
+    "bpmn-js": "18.13.2",
+    "bpmn-js-token-simulation": "0.39.3"
   },
   "devDependencies": {
-    "@slidev/cli": "52.12.0",
+    "@slidev/cli": "52.14.1",
     "@slidev/theme-default": "0.25.0",
     "playwright-chromium": "1.58.2"
   },
@@ -34,9 +34,19 @@
     "components",
     "vite.config.ts"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@slidev/cli": ">=50"
+  },
+  "peerDependenciesMeta": {
+    "@slidev/cli": {
+      "optional": false
+    }
+  },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "repository": {
     "type": "git",

package/vite.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from 'vite'
 
 export default defineConfig({
+  server: {
+    allowedHosts: ['.localhost'],
+  },
   optimizeDeps: {
     include: [
       'bpmn-js/lib/Viewer',