doscontinue use of svgjs:data in favor of data-svg

spec/spec/elements/Dom.js

@@ -10,8 +10,7 @@ import {
   Fragment,
   Circle,
   Tspan,
-  create,
-  Text
+  create
 } from '../../../src/main.js'
 import { getWindow } from '../../../src/utils/window.js'
 import { svg, html } from '../../../src/modules/core/namespaces.js'
@@ -658,25 +657,6 @@ describe('Dom.js', function () {
     })
   })
 
-  describe('writeDataToDom()', () => {
-    it('writes the data to the dom', () => {
-      const node = new Rect()
-      node.setData({ foo: 'bar' })
-      node.writeDataToDom()
-      expect(node.node.getAttribute('svgjs:data')).toBe('{"foo":"bar"}')
-    })
-
-    it('filters out default data', () => {
-      const node1 = new Text()
-      const node2 = new Text()
-      node2.dom.foo = 'bar'
-      node1.writeDataToDom()
-      node2.writeDataToDom()
-      expect(node1.node.getAttribute('svgjs:data')).toBe(null)
-      expect(node2.node.getAttribute('svgjs:data')).toBe('{"foo":"bar"}')
-    })
-  })
-
   describe('xml()', () => {
     describe('as setter', () => {
       it('returns itself', () => {

spec/spec/elements/Element.js

@@ -1,6 +1,6 @@
 /* globals describe, expect, it, beforeEach, spyOn, jasmine, container */
 
-import { Element, create, Rect, G, SVG } from '../../../src/main.js'
+import { Element, create, Rect, G, SVG, Text } from '../../../src/main.js'
 const { any, objectContaining } = jasmine
 
 describe('Element.js', function () {
@@ -34,9 +34,14 @@ describe('Element.js', function () {
     })
 
     it('falls back to empty object when attribute is null', () => {
-      element.node.setAttribute('svgjs:data', 'null')
+      element.node.setAttribute('data-svg', 'null')
       expect(new Element(element.node).dom).toEqual({})
     })
+
+    it('uses old svgjs:data attribute if present', () => {
+      element.node.setAttribute('svgjs:data', '{"foo":"bar"}')
+      expect(new Element(element.node).dom).toEqual({ foo: 'bar' })
+    })
   })
 
   describe('center()', () => {
@@ -265,15 +270,15 @@ describe('Element.js', function () {
 
   describe('writeDataToDom()', () => {
     it('removes previously set data', () => {
-      element.node.setAttribute('svgjs:data', JSON.stringify({ foo: 'bar' }))
+      element.node.setAttribute('data-svgjs', JSON.stringify({ foo: 'bar' }))
       element.writeDataToDom()
-      expect(element.node.getAttribute('svgjs:data')).toBe(null)
+      expect(element.node.getAttribute('data-svgjs')).toBe(null)
     })
 
     it('writes data from the dom property into the dom', () => {
       element.dom = { foo: 'bar' }
       element.writeDataToDom()
-      expect(element.node.getAttribute('svgjs:data')).toBe(
+      expect(element.node.getAttribute('data-svgjs')).toBe(
         JSON.stringify({ foo: 'bar' })
       )
     })
@@ -285,6 +290,16 @@ describe('Element.js', function () {
       g.writeDataToDom()
       expect(spy).toHaveBeenCalled()
     })
+
+    it('filters out default data', () => {
+      const node1 = new Text()
+      const node2 = new Text()
+      node2.dom.foo = 'bar'
+      node1.writeDataToDom()
+      node2.writeDataToDom()
+      expect(node1.node.getAttribute('data-svgjs')).toBe(null)
+      expect(node2.node.getAttribute('data-svgjs')).toBe('{"foo":"bar"}')
+    })
   })
 
   describe('x()', () => {

spec/spec/elements/Svg.js

@@ -1,11 +1,7 @@
 /* globals describe, expect, it, jasmine, container */
 
 import { Svg, SVG, Defs } from '../../../src/main.js'
-import {
-  svg as ns,
-  xlink,
-  svgjs
-} from '../../../src/modules/core/namespaces.js'
+import { svg as ns, xlink } from '../../../src/modules/core/namespaces.js'
 import { getWindow } from '../../../src/utils/window.js'
 
 const { any } = jasmine
@@ -26,7 +22,6 @@ describe('Svg.js', () => {
       expect(svg.attr('xmlns')).toBe(ns)
       expect(svg.attr('version')).toBe(1.1)
       expect(svg.attr('xmlns:xlink')).toBe(xlink)
-      expect(svg.attr('xmlns:svgjs')).toBe(svgjs)
     })
   })
 
@@ -71,7 +66,6 @@ describe('Svg.js', () => {
       expect(svg.attr('xmlns')).toBe(ns)
       expect(svg.attr('version')).toBe(1.1)
       expect(svg.attr('xmlns:xlink')).toBe(xlink)
-      expect(svg.attr('xmlns:svgjs')).toBe(svgjs)
     })
   })
 

src/elements/Element.js

@@ -25,9 +25,13 @@ export default class Element extends Dom {
     // create circular reference
     this.node.instance = this
 
-    if (node.hasAttribute('svgjs:data')) {
+    if (node.hasAttribute('data-svgjs') || node.hasAttribute('svgjs:data')) {
       // pull svgjs data from the dom (getAttributeNS doesn't work in html5)
-      this.setData(JSON.parse(node.getAttribute('svgjs:data')) || {})
+      this.setData(
+        JSON.parse(node.getAttribute('data-svgjs')) ??
+          JSON.parse(node.getAttribute('svgjs:data')) ??
+          {}
+      )
     }
   }
 

src/elements/Svg.js

@@ -4,7 +4,7 @@ import {
   register,
   wrapWithAttrCheck
 } from '../utils/adopter.js'
-import { svg, svgjs, xlink, xmlns } from '../modules/core/namespaces.js'
+import { svg, xlink, xmlns } from '../modules/core/namespaces.js'
 import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
 import Defs from './Defs.js'
@@ -34,9 +34,11 @@ export default class Svg extends Container {
   // Add namespaces
   namespace() {
     if (!this.isRoot()) return this.root().namespace()
-    return this.attr({ xmlns: svg, version: '1.1' })
-      .attr('xmlns:xlink', xlink, xmlns)
-      .attr('xmlns:svgjs', svgjs, xmlns)
+    return this.attr({ xmlns: svg, version: '1.1' }).attr(
+      'xmlns:xlink',
+      xlink,
+      xmlns
+    )
   }
 
   removeNamespace() {

src/modules/core/namespaces.js

@@ -3,4 +3,3 @@ export const svg = 'http://www.w3.org/2000/svg'
 export const html = 'http://www.w3.org/1999/xhtml'
 export const xmlns = 'http://www.w3.org/2000/xmlns/'
 export const xlink = 'http://www.w3.org/1999/xlink'
-export const svgjs = 'http://svgjs.dev/svgjs'

src/utils/utils.js

@@ -135,8 +135,9 @@ export const writeDataToDom = (element, data, defaults = {}) => {
   }
 
   if (Object.keys(cloned).length) {
-    element.node.setAttribute('svgjs:data', JSON.stringify(cloned)) // see #428
+    element.node.setAttribute('data-svgjs', JSON.stringify(cloned)) // see #428
   } else {
+    element.node.removeAttribute('data-svgjs')
     element.node.removeAttribute('svgjs:data')
   }
 }