Skip to content

Commit 7534372

Browse files
Rich-HarrisRich-Harris
committed
dont use dataset with svg elements - fixes #982 
1 parent cf94217 commit 7534372

File tree

4 files changed

+300
-1
lines changed

4 files changed

+300
-1
lines changed

‎src/generators/nodes/Attribute.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default class Attribute {
8383

8484
const isLegacyInputType = this.generator.legacy && name === 'type' && this.parent.name === 'input';
8585

86-
const isDataSet = /^data-/.test(name) && !this.generator.legacy;
86+
const isDataSet = /^data-/.test(name) && !this.generator.legacy && !node.namespace;
8787
const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
8888
return m[1].toUpperCase();
8989
}) : name;

‎test/js/samples/dont-use-dataset-in-svg/expected-bundle.js

+242
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
function noop() {}
2+
3+
function assign(target) {
4+
var k,
5+
source,
6+
i = 1,
7+
len = arguments.length;
8+
for (; i < len; i++) {
9+
source = arguments[i];
10+
for (k in source) target[k] = source[k];
11+
}
12+
13+
return target;
14+
}
15+
16+
function appendNode(node, target) {
17+
target.appendChild(node);
18+
}
19+
20+
function insertNode(node, target, anchor) {
21+
target.insertBefore(node, anchor);
22+
}
23+
24+
function detachNode(node) {
25+
node.parentNode.removeChild(node);
26+
}
27+
28+
function createSvgElement(name) {
29+
return document.createElementNS('http://www.w3.org/2000/svg', name);
30+
}
31+
32+
function setAttribute(node, attribute, value) {
33+
node.setAttribute(attribute, value);
34+
}
35+
36+
function blankObject() {
37+
return Object.create(null);
38+
}
39+
40+
function destroy(detach) {
41+
this.destroy = noop;
42+
this.fire('destroy');
43+
this.set = this.get = noop;
44+
45+
if (detach !== false) this._fragment.u();
46+
this._fragment.d();
47+
this._fragment = this._state = null;
48+
}
49+
50+
function differs(a, b) {
51+
return a !== b || ((a && typeof a === 'object') || typeof a === 'function');
52+
}
53+
54+
function dispatchObservers(component, group, changed, newState, oldState) {
55+
for (var key in group) {
56+
if (!changed[key]) continue;
57+
58+
var newValue = newState[key];
59+
var oldValue = oldState[key];
60+
61+
var callbacks = group[key];
62+
if (!callbacks) continue;
63+
64+
for (var i = 0; i < callbacks.length; i += 1) {
65+
var callback = callbacks[i];
66+
if (callback.__calling) continue;
67+
68+
callback.__calling = true;
69+
callback.call(component, newValue, oldValue);
70+
callback.__calling = false;
71+
}
72+
}
73+
}
74+
75+
function fire(eventName, data) {
76+
var handlers =
77+
eventName in this._handlers && this._handlers[eventName].slice();
78+
if (!handlers) return;
79+
80+
for (var i = 0; i < handlers.length; i += 1) {
81+
handlers[i].call(this, data);
82+
}
83+
}
84+
85+
function get(key) {
86+
return key ? this._state[key] : this._state;
87+
}
88+
89+
function init(component, options) {
90+
component._observers = { pre: blankObject(), post: blankObject() };
91+
component._handlers = blankObject();
92+
component._root = options._root || component;
93+
component._bind = options._bind;
94+
95+
component.options = options;
96+
component.store = component._root.options.store;
97+
}
98+
99+
function observe(key, callback, options) {
100+
var group = options && options.defer
101+
? this._observers.post
102+
: this._observers.pre;
103+
104+
(group[key] || (group[key] = [])).push(callback);
105+
106+
if (!options || options.init !== false) {
107+
callback.__calling = true;
108+
callback.call(this, this._state[key]);
109+
callback.__calling = false;
110+
}
111+
112+
return {
113+
cancel: function() {
114+
var index = group[key].indexOf(callback);
115+
if (~index) group[key].splice(index, 1);
116+
}
117+
};
118+
}
119+
120+
function on(eventName, handler) {
121+
if (eventName === 'teardown') return this.on('destroy', handler);
122+
123+
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
124+
handlers.push(handler);
125+
126+
return {
127+
cancel: function() {
128+
var index = handlers.indexOf(handler);
129+
if (~index) handlers.splice(index, 1);
130+
}
131+
};
132+
}
133+
134+
function set(newState) {
135+
this._set(assign({}, newState));
136+
if (this._root._lock) return;
137+
this._root._lock = true;
138+
callAll(this._root._beforecreate);
139+
callAll(this._root._oncreate);
140+
callAll(this._root._aftercreate);
141+
this._root._lock = false;
142+
}
143+
144+
function _set(newState) {
145+
var oldState = this._state,
146+
changed = {},
147+
dirty = false;
148+
149+
for (var key in newState) {
150+
if (differs(newState[key], oldState[key])) changed[key] = dirty = true;
151+
}
152+
if (!dirty) return;
153+
154+
this._state = assign({}, oldState, newState);
155+
this._recompute(changed, this._state);
156+
if (this._bind) this._bind(changed, this._state);
157+
158+
if (this._fragment) {
159+
dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
160+
this._fragment.p(changed, this._state);
161+
dispatchObservers(this, this._observers.post, changed, this._state, oldState);
162+
}
163+
}
164+
165+
function callAll(fns) {
166+
while (fns && fns.length) fns.pop()();
167+
}
168+
169+
function _mount(target, anchor) {
170+
this._fragment.m(target, anchor);
171+
}
172+
173+
function _unmount() {
174+
this._fragment.u();
175+
}
176+
177+
var proto = {
178+
destroy: destroy,
179+
get: get,
180+
fire: fire,
181+
observe: observe,
182+
on: on,
183+
set: set,
184+
teardown: destroy,
185+
_recompute: noop,
186+
_set: _set,
187+
_mount: _mount,
188+
_unmount: _unmount
189+
};
190+
191+
/* generated by Svelte vX.Y.Z */
192+
function create_main_fragment(state, component) {
193+
var svg, g, g_1;
194+
195+
return {
196+
c: function create() {
197+
svg = createSvgElement("svg");
198+
g = createSvgElement("g");
199+
g_1 = createSvgElement("g");
200+
this.h();
201+
},
202+
203+
h: function hydrate() {
204+
setAttribute(g, "data-foo", "bar");
205+
setAttribute(g_1, "data-foo", state.bar);
206+
},
207+
208+
m: function mount(target, anchor) {
209+
insertNode(svg, target, anchor);
210+
appendNode(g, svg);
211+
appendNode(g_1, svg);
212+
},
213+
214+
p: function update(changed, state) {
215+
if (changed.bar) {
216+
setAttribute(g_1, "data-foo", state.bar);
217+
}
218+
},
219+
220+
u: function unmount() {
221+
detachNode(svg);
222+
},
223+
224+
d: noop
225+
};
226+
}
227+
228+
function SvelteComponent(options) {
229+
init(this, options);
230+
this._state = assign({}, options.data);
231+
232+
this._fragment = create_main_fragment(this._state, this);
233+
234+
if (options.target) {
235+
this._fragment.c();
236+
this._fragment.m(options.target, options.anchor || null);
237+
}
238+
}
239+
240+
assign(SvelteComponent.prototype, proto);
241+
242+
export default SvelteComponent;

‎test/js/samples/dont-use-dataset-in-svg/expected.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* generated by Svelte vX.Y.Z */
2+
import { appendNode, assign, createSvgElement, detachNode, init, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
3+
4+
function create_main_fragment(state, component) {
5+
var svg, g, g_1;
6+
7+
return {
8+
c: function create() {
9+
svg = createSvgElement("svg");
10+
g = createSvgElement("g");
11+
g_1 = createSvgElement("g");
12+
this.h();
13+
},
14+
15+
h: function hydrate() {
16+
setAttribute(g, "data-foo", "bar");
17+
setAttribute(g_1, "data-foo", state.bar);
18+
},
19+
20+
m: function mount(target, anchor) {
21+
insertNode(svg, target, anchor);
22+
appendNode(g, svg);
23+
appendNode(g_1, svg);
24+
},
25+
26+
p: function update(changed, state) {
27+
if (changed.bar) {
28+
setAttribute(g_1, "data-foo", state.bar);
29+
}
30+
},
31+
32+
u: function unmount() {
33+
detachNode(svg);
34+
},
35+
36+
d: noop
37+
};
38+
}
39+
40+
function SvelteComponent(options) {
41+
init(this, options);
42+
this._state = assign({}, options.data);
43+
44+
this._fragment = create_main_fragment(this._state, this);
45+
46+
if (options.target) {
47+
this._fragment.c();
48+
this._fragment.m(options.target, options.anchor || null);
49+
}
50+
}
51+
52+
assign(SvelteComponent.prototype, proto);
53+
export default SvelteComponent;

‎test/js/samples/dont-use-dataset-in-svg/input.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<svg>
2+
<g data-foo='bar'/>
3+
<g data-foo='{{bar}}'/>
4+
</svg>

0 commit comments

Comments
 (0)