fix: update svg attributes on props change

closes #316

Author: LeBenLeBen

package.json

@@ -42,6 +42,7 @@
     "jest": "^27.0.6",
     "poi": "12.10.3",
     "prettier": "^2.5.0",
+    "regenerator-runtime": "^0.13.9",
     "rollup-plugin-typescript2": "^0.31.1",
     "typescript": "^4.3.4",
     "vue": "^3.0.5",

src/ContentLoader.spec.js

@@ -1,4 +1,6 @@
+import 'regenerator-runtime/runtime'
 import { mount } from '@vue/test-utils'
+
 import ContentLoader from './ContentLoader'
 
 describe('ContentLoader', () => {
@@ -200,4 +202,20 @@ describe('ContentLoader', () => {
     expect(wrapper.find('svg').classes()).toEqual(['loader'])
     expect(wrapper.find('svg').attributes()).toMatchObject({ id: 'loader' })
   })
+
+  it('updates the computedViewBox when props change', async () => {
+    const wrapper = mount(ContentLoader, {
+      props: {
+        viewBox: '0 0 100 100',
+      },
+    })
+
+    expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 100 100')
+
+    await wrapper.setProps({ viewBox: '0 0 200 200' })
+    expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 200 200')
+
+    await wrapper.setProps({ viewBox: null, width: 50, height: 100 })
+    expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 50 100')
+  })
 })

src/ContentLoader.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 import uid from './uid'
 
 export default defineComponent({
@@ -52,11 +52,17 @@ export default defineComponent({
   },
 
   setup(props) {
-    const idClip = props.uniqueKey ? `${props.uniqueKey}-idClip` : uid()
-    const idGradient = props.uniqueKey ? `${props.uniqueKey}-idGradient` : uid()
-    const width = props.width ?? 400
-    const height = props.height ?? 130
-    const computedViewBox = props.viewBox ?? `0 0 ${width} ${height}`
+    const idClip = computed(() =>
+      props.uniqueKey ? `${props.uniqueKey}-idClip` : uid()
+    )
+    const idGradient = computed(() =>
+      props.uniqueKey ? `${props.uniqueKey}-idGradient` : uid()
+    )
+    const width = computed(() => props.width ?? 400)
+    const height = computed(() => props.height ?? 130)
+    const computedViewBox = computed(
+      () => props.viewBox ?? `0 0 ${width.value} ${height.value}`
+    )
 
     return {
       idClip,

yarn.lock

@@ -8134,6 +8134,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
+regenerator-runtime@^0.13.9:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 regenerator-transform@^0.14.2:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"