wait for svg before firing onLoad, add transformSrc test

package.json

@@ -16,6 +16,10 @@
     "svg",
     "inline"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/robinscholz/svelte-inline-svg"
+  },
   "author": "dev@studioscholz.info",
   "license": "MIT",
   "devDependencies": {

src/inline-svg.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, createEventDispatcher } from 'svelte'
+  import { onMount, createEventDispatcher, tick } from 'svelte'
 
   const dispatch = createEventDispatcher()
 
@@ -49,7 +49,7 @@
               request.responseText,
               'text/xml'
             )
-            let svgEl = result.getElementsByTagName('svg')[0]
+            let svgEl = result.querySelector('svg')
             if (svgEl) {
               // Apply transformation
               svgEl = transformSrc(svgEl)
@@ -77,15 +77,14 @@
       if (isLoaded) {
         isLoaded = false
         dispatch('unloaded')
-        // this.$emit('unloaded');
       }
       // download
       cache[src] = download(src)
     }
 
     // inline svg when cached promise resolves
     cache[src]
-      .then((svg) => {
+      .then(async (svg) => {
         // copy attrs
         const attrs = svg.attributes
         for (let i = attrs.length - 1; i >= 0; i--) {
@@ -94,6 +93,7 @@
         // copy inner html
         svgContent = svg.innerHTML
         // render svg element
+        await tick()
         isLoaded = true
         dispatch('loaded')
       })

src/test/inline-svg.test.js

@@ -1,27 +1,52 @@
-import { render } from '@testing-library/svelte'
+import { render, waitFor } from '@testing-library/svelte'
 import InlineSVG from '../inline-svg.svelte'
 
-const src = 'https://raw.githubusercontent.com/robinscholz/svelte-inline-svg/master/src/test/test.svg'
+const src =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+CiAgPHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+Cjwvc3ZnPg=='
 
 describe('inline-svg', () => {
   test('render component correctly', () => {
     const { container } = render(InlineSVG, {
       props: {
-        src: src
-      }
+        src: src,
+      },
     })
 
-    expect(container).toContainHTML('<svg')
+    expect(container).toContainHTML('svg')
   })
 
   test('has width set', () => {
     const { container } = render(InlineSVG, {
       props: {
         src: src,
         width: 50,
-      }
+      },
     })
     const element = container.querySelector('svg')
     expect(element).toHaveAttribute('width')
   })
+
+  test('transformSrc is working', async () => {
+    const doc = document
+    const transform = (svg) => {
+      let point = doc.createElementNS('http://www.w3.org/2000/svg', 'circle')
+      point.setAttributeNS(null, 'cx', '20')
+      point.setAttributeNS(null, 'cy', '20')
+      point.setAttributeNS(null, 'r', '10')
+      point.setAttributeNS(null, 'fill', 'red')
+      svg.appendChild(point)
+      return svg
+    }
+    const { container } = render(InlineSVG, {
+      props: {
+        src: src,
+        transformSrc: transform,
+      },
+    })
+
+    const element = container.querySelector('svg')
+    await waitFor(() => {
+      expect(element).toContainHTML('circle')
+    })
+  })
 })