fix(ui): memleak in QCheckbox/QRadio/QSpace/QSpinner(s) due to global…

…ly created vdom nodes #17485
quasarframework · Sep 6, 2024 · 8d948ba · 8d948ba
1 parent 709f6c8
commit 8d948ba
Show file tree

Hide file tree

Showing 25 changed files with 51 additions and 26 deletions.
diff --git a/ui/src/components/checkbox/QCheckbox.js b/ui/src/components/checkbox/QCheckbox.js
@@ -5,7 +5,7 @@ import QIcon from '../icon/QIcon.js'
 import { createComponent } from '../../utils/private.create/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
-const bgNode = h('div', {
+const createBgNode = () => h('div', {
   key: 'svg',
   class: 'q-checkbox__bg absolute'
 }, [
@@ -33,6 +33,8 @@ export default createComponent({
   emits: useCheckboxEmits,
 
   setup (props) {
+    const bgNode = createBgNode()
+
     function getInner (isTrue, isIndeterminate) {
       const icon = computed(() =>
         (isTrue.value === true

diff --git a/ui/src/components/radio/QRadio.js b/ui/src/components/radio/QRadio.js
@@ -12,7 +12,7 @@ import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 
-const svg = h('svg', {
+const createSvg = () => h('svg', {
   key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
   viewBox: '0 0 24 24'
@@ -138,6 +138,8 @@ export default createComponent({
     // expose public methods
     Object.assign(proxy, { set: onClick })
 
+    const svg = createSvg()
+
     return () => {
       const content = icon.value !== null
         ? [

diff --git a/ui/src/components/space/QSpace.js b/ui/src/components/space/QSpace.js
@@ -2,12 +2,11 @@ import { h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const space = h('div', { class: 'q-space' })
-
 export default createComponent({
   name: 'QSpace',
 
   setup () {
+    const space = h('div', { class: 'q-space' })
     return () => space
   }
 })
diff --git a/ui/src/components/spinner/QSpinnerAudio.js b/ui/src/components/spinner/QSpinnerAudio.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'matrix(1 0 0 -1 0 80)'
   }, [
@@ -77,6 +77,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerBall.js b/ui/src/components/spinner/QSpinnerBall.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(1 1)',
     'stroke-width': '2',
@@ -93,6 +93,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerBars.js b/ui/src/components/spinner/QSpinnerBars.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     y: '10',
     width: '15',
@@ -132,6 +132,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerBox.js b/ui/src/components/spinner/QSpinnerBox.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     x: '25',
     y: '25',
@@ -50,6 +50,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerClock.js b/ui/src/components/spinner/QSpinnerClock.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '50',
     cy: '50',
@@ -61,6 +61,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerComment.js b/ui/src/components/spinner/QSpinnerComment.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     x: '0',
     y: '0',
@@ -73,6 +73,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerCube.js b/ui/src/components/spinner/QSpinnerCube.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     x: '0',
     y: '0',
@@ -121,6 +121,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerDots.js b/ui/src/components/spinner/QSpinnerDots.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '15',
     cy: '15',
@@ -93,6 +93,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerFacebook.js b/ui/src/components/spinner/QSpinnerFacebook.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(20 50)'
   }, [
@@ -92,6 +92,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerGears.js b/ui/src/components/spinner/QSpinnerGears.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(-20,-20)'
   }, [
@@ -48,6 +48,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerGrid.js b/ui/src/components/spinner/QSpinnerGrid.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '12.5',
     cy: '12.5',
@@ -141,6 +141,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerHearts.js b/ui/src/components/spinner/QSpinnerHearts.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('path', {
     d: 'M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z',
     'fill-opacity': '.5'
@@ -43,6 +43,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerHourglass.js b/ui/src/components/spinner/QSpinnerHourglass.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', [
     h('path', {
       fill: 'none',
@@ -101,6 +101,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerInfinity.js b/ui/src/components/spinner/QSpinnerInfinity.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('path', {
     d: 'M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z',
     fill: 'none',
@@ -32,6 +32,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerIos.js b/ui/src/components/spinner/QSpinnerIos.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     'stroke-width': '4',
     'stroke-linecap': 'round'
@@ -163,6 +163,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerOrbit.js b/ui/src/components/spinner/QSpinnerOrbit.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '50',
     cy: '50',
@@ -40,6 +40,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerOval.js b/ui/src/components/spinner/QSpinnerOval.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(1 1)',
     'stroke-width': '2',
@@ -39,6 +39,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerPie.js b/ui/src/components/spinner/QSpinnerPie.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('path', {
     d: 'M0 50A50 50 0 0 1 50 0L50 50L0 50',
     fill: 'currentColor',
@@ -70,6 +70,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerPuff.js b/ui/src/components/spinner/QSpinnerPuff.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     fill: 'none',
     'fill-rule': 'evenodd',
@@ -72,6 +72,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

diff --git a/ui/src/components/spinner/QSpinnerRadio.js b/ui/src/components/spinner/QSpinnerRadio.js
@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'scale(0.55)'
   }, [
@@ -65,6 +65,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,