Skip to content

Commit 0774284

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #929 from esarbanis/do-use-dataset
Use el.dataset.foo = bar instead of setAttribute(el, 'data-foo', bar)
2 parents be0837e + ea3f58a commit 0774284

File tree

8 files changed

+607
-2
lines changed

8 files changed

+607
-2
lines changed

‎src/generators/dom/visitors/Element/Attribute.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import deindent from '../../../../utils/deindent';
33
import visitStyleAttribute, { optimizeStyle } from './StyleAttribute';
44
import { stringify } from '../../../../utils/stringify';
55
import getExpressionPrecedence from '../../../../utils/getExpressionPrecedence';
6-
import getStaticAttributeValue from '../../../../utils/getStaticAttributeValue';
76
import { DomGenerator } from '../../index';
87
import Block from '../../Block';
98
import { Node } from '../../../../interfaces';
@@ -56,6 +55,11 @@ export default function visitAttribute(
5655

5756
const isLegacyInputType = generator.legacy && name === 'type' && node.name === 'input';
5857

58+
const isDataSet = /^data-/.test(name) && !generator.legacy;
59+
const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
60+
return m[1].toUpperCase();
61+
}) : name;
62+
5963
if (isDynamic) {
6064
let value;
6165

@@ -163,6 +167,11 @@ export default function visitAttribute(
163167
`${state.parentNode}.${propertyName} = ${init};`
164168
);
165169
updater = `${state.parentNode}.${propertyName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
170+
} else if (isDataSet) {
171+
block.builders.hydrate.addLine(
172+
`${state.parentNode}.dataset.${camelCaseName} = ${init};`
173+
);
174+
updater = `${state.parentNode}.dataset.${camelCaseName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
166175
} else {
167176
block.builders.hydrate.addLine(
168177
`${method}(${state.parentNode}, "${name}", ${init});`
@@ -198,6 +207,7 @@ export default function visitAttribute(
198207
const statement = (
199208
isLegacyInputType ? `@setInputType(${state.parentNode}, ${value});` :
200209
propertyName ? `${state.parentNode}.${propertyName} = ${value};` :
210+
isDataSet ? `${state.parentNode}.dataset.${camelCaseName} = ${value};` :
201211
`${method}(${state.parentNode}, "${name}", ${value});`
202212
);
203213

@@ -221,4 +231,4 @@ export default function visitAttribute(
221231
block.builders.hydrate.addLine(updateValue);
222232
if (isDynamic) block.builders.update.addLine(updateValue);
223233
}
224-
}
234+
}

‎test/js/samples/do-use-dataset/expected-bundle.js

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

‎test/js/samples/do-use-dataset/expected.js

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

‎test/js/samples/do-use-dataset/input.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div data-foo='bar'/>
2+
<div data-foo='{{bar}}'/>

‎test/js/samples/dont-use-dataset-in-legacy/_config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
options: {
3+
legacy: true
4+
}
5+
};

0 commit comments

Comments
 (0)