pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/WebReflection/hyperHTML/commit/bef0079e2d218e21e175901759f6547e752fd39f

/> better attribute handling · WebReflection/hyperHTML@bef0079 · GitHub
Skip to content

Commit bef0079

Browse files
WebReflectionWebReflection
committed
better attribute handling
1 parent cf8114c commit bef0079

File tree

17 files changed

+403
-400
lines changed

17 files changed

+403
-400
lines changed

‎cjs/classes/Component.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
11
'use strict';
2-
const {content} = require('../hyper/wire.js');
2+
function Component() {}
3+
Object.defineProperty(exports, '__esModule', {value: true}).default = Component
4+
5+
function setup(content) {
6+
Object.defineProperties(
7+
Component.prototype,
8+
{
9+
handleEvent: {value(e) {
10+
const ct = e.currentTarget;
11+
this[
12+
('getAttribute' in ct && ct.getAttribute('data-call')) ||
13+
('on' + e.type)
14+
](e);
15+
}},
16+
html: lazyGetter('html', content),
17+
svg: lazyGetter('svg', content),
18+
state: lazyGetter('state', function () { return this.defaultState; }),
19+
defaultState: {get() { return {}; }},
20+
setState: {value(state) {
21+
const target = this.state;
22+
const source = typeof state === 'function' ? state.call(this, target) : state;
23+
for (const key in source) target[key] = source[key];
24+
this.render();
25+
}}
26+
}
27+
);
28+
}
29+
exports.setup = setup
330

431
const lazyGetter = (type, fn) => {
532
const secret = '_' + type + '$';
@@ -12,29 +39,3 @@ const lazyGetter = (type, fn) => {
1239
}
1340
};
1441
};
15-
16-
function Component() {}
17-
Object.defineProperties(
18-
Component.prototype,
19-
{
20-
handleEvent: {value(e) {
21-
const ct = e.currentTarget;
22-
this[
23-
('getAttribute' in ct && ct.getAttribute('data-call')) ||
24-
('on' + e.type)
25-
](e);
26-
}},
27-
html: lazyGetter('html', content),
28-
svg: lazyGetter('svg', content),
29-
state: lazyGetter('state', function () { return this.defaultState; }),
30-
defaultState: {get() { return {}; }},
31-
setState: {value(state) {
32-
const target = this.state;
33-
const source = typeof state === 'function' ? state.call(this, target) : state;
34-
for (const key in source) target[key] = source[key];
35-
this.render();
36-
}}
37-
}
38-
);
39-
40-
Object.defineProperty(exports, '__esModule', {value: true}).default = Component;

‎cjs/main.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use strict';
22
const Component = (m => m.__esModule ? m.default : m)(require('./classes/Component.js'));
3+
const {setup} = require('./classes/Component.js');
34
const Transformer = (m => m.__esModule ? m.default : m)(require('./objects/Transformer.js'));
45
const wire = (m => m.__esModule ? m.default : m)(require('./hyper/wire.js'));
56
const {content, weakly} = require('./hyper/wire.js');
@@ -8,9 +9,11 @@ const render = (m => m.__esModule ? m.default : m)(require('./hyper/render.js'))
89
const bind = (hyper.bind = context => render.bind(context));
910
const define = (hyper.define = Transformer.define);
1011

11-
// it couldn't be more!
1212
hyper.hyper = hyper;
1313
hyper.wire = wire;
14+
hyper.Component = Component;
15+
16+
setup(content);
1417

1518
exports.Component = Component;
1619
exports.bind = bind;

‎cjs/objects/Path.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ const createPath = node => {
2626
break;
2727
default:
2828
parentNode = node.ownerElement;
29-
path.unshift('attributes', node.name);
3029
break;
3130
}
3231
for (
@@ -44,10 +43,7 @@ Object.defineProperty(exports, '__esModule', {value: true}).default = {
4443
find: (node, path) => {
4544
const length = path.length;
4645
for (let i = 0; i < length; i++) {
47-
let key = path[i++];
48-
node = key === 'attributes' ?
49-
node.ownerDocument.createAttribute(path[i]) :
50-
node[key][path[i]];
46+
node = node[path[i++]][path[i]];
5147
}
5248
return node;
5349
}

‎cjs/objects/Updates.js‎

Lines changed: 74 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,15 @@ const Path = (m => m.__esModule ? m.default : m)(require('./Path.js'));
1111
const Transformer = (m => m.__esModule ? m.default : m)(require('./Transformer.js'));
1212
const {text} = require('../shared/easy-dom.js');
1313
const {isArray, trim, WeakSet} = require('../shared/poorlyfills.js');
14-
const {createFragment} = require('../shared/utils.js');
14+
const {createFragment, slice} = require('../shared/utils.js');
1515

1616
const Promise = global.Promise;
1717
const components = new WeakSet;
18-
const slice = [].slice;
18+
19+
function Cache() {}
20+
Cache.prototype = Object.create(null);
21+
22+
const asHTML = html => ({html});
1923

2024
const create = (root, paths) => {
2125
const updates = [];
@@ -67,9 +71,6 @@ const find = (node, paths, parts) => {
6771
}
6872
};
6973

70-
function Cache() {}
71-
Cache.prototype = Object.create(null);
72-
7374
const findAttributes = (node, paths, parts) => {
7475
const cache = new Cache;
7576
const attributes = node.attributes;
@@ -90,6 +91,37 @@ const findAttributes = (node, paths, parts) => {
9091
}
9192
};
9293

94+
const invokeAtDistance = (value, callback) => {
95+
callback(value.placeholder);
96+
if ('text' in value) {
97+
Promise.resolve(value.text).then(String).then(callback);
98+
} else if ('any' in value) {
99+
Promise.resolve(value.any).then(callback);
100+
} else if ('html' in value) {
101+
Promise.resolve(value.html).then(asHTML).then(callback);
102+
} else {
103+
Promise.resolve(Transformer.invoke(value, callback)).then(callback);
104+
}
105+
};
106+
107+
const isNode_ish = value => 'ELEMENT_NODE' in value;
108+
const isPromise_ish = value => value != null && 'then' in value;
109+
const isSpecial = (node, name) => !(OWNER_SVG_ELEMENT in node) && name in node;
110+
111+
const optimist = (aura, value) => {
112+
let length = aura.length;
113+
if (value.length !== length) {
114+
majinbuu(aura, value, Aura.MAX_LIST_SIZE);
115+
} else {
116+
for (let i = 0; i < length--; i++) {
117+
if (aura[length] !== value[length] || aura[i] !== value[i]) {
118+
majinbuu(aura, value, Aura.MAX_LIST_SIZE);
119+
return;
120+
}
121+
}
122+
}
123+
};
124+
93125
const setAnyContent = (node, childNodes) => {
94126
const aura = new Aura(node, childNodes);
95127
let oldValue;
@@ -190,96 +222,61 @@ const setAnyContent = (node, childNodes) => {
190222
return anyContent;
191223
};
192224

193-
const asHTML = html => ({html});
194-
195-
const isNode_ish = value => 'ELEMENT_NODE' in value;
196-
const isPromise_ish = value => value != null && 'then' in value;
197-
198-
const invokeAtDistance = (value, callback) => {
199-
callback(value.placeholder);
200-
if ('text' in value) {
201-
Promise.resolve(value.text).then(String).then(callback);
202-
} else if ('any' in value) {
203-
Promise.resolve(value.any).then(callback);
204-
} else if ('html' in value) {
205-
Promise.resolve(value.html).then(asHTML).then(callback);
206-
} else {
207-
Promise.resolve(Transformer.invoke(value, callback)).then(callback);
208-
}
209-
}
210-
211-
const isSpecialAttribute = (node, name) =>
212-
!(OWNER_SVG_ELEMENT in node) && name in node;
213-
const setAttribute = (attribute, name) => {
214-
const node = attribute.ownerElement;
225+
const setAttribute = (node, name) => {
215226
const isData = name === 'data';
216-
const isEvent = !isData && /^on/.test(name);
217-
const isSpecial = isData ||
218-
(isSpecialAttribute(node, name) &&
219-
!SHOULD_USE_ATTRIBUTE.test(name));
220-
let noOwner = isSpecial || isEvent;
221-
let oldValue, type;
222-
if (isEvent) {
223-
type = name.slice(2);
227+
let oldValue;
228+
if (!isData && /^on/.test(name)) {
229+
let type = name.slice(2);
224230
if (type === CONNECTED || type === DISCONNECTED) {
225231
components.add(node);
226232
}
227233
else if (name.toLowerCase() in node) {
228234
type = type.toLowerCase();
229235
}
230-
}
231-
if (!noOwner) node.setAttributeNode(attribute);
232-
return isEvent ?
233-
newValue => {
236+
return newValue => {
234237
if (oldValue !== newValue) {
235238
if (oldValue) node.removeEventListener(type, oldValue, false);
236239
oldValue = newValue;
237240
if (newValue) node.addEventListener(type, newValue, false);
238241
}
239-
} :
240-
(isSpecial ?
241-
newValue => {
242-
if (oldValue !== newValue) {
243-
oldValue = newValue;
244-
if (node[name] !== newValue) {
245-
node[name] = newValue;
246-
}
242+
};
243+
} else if(isData || (
244+
isSpecial(node, name) &&
245+
!SHOULD_USE_ATTRIBUTE.test(name)
246+
)) {
247+
return newValue => {
248+
if (oldValue !== newValue) {
249+
oldValue = newValue;
250+
if (node[name] !== newValue) {
251+
node[name] = newValue;
247252
}
248-
} :
249-
newValue => {
250-
if (oldValue !== newValue) {
251-
oldValue = newValue;
252-
if (attribute.value !== newValue) {
253-
if (newValue == null) {
254-
if (!noOwner) {
255-
noOwner = true;
256-
node.removeAttributeNode(attribute);
257-
}
258-
} else {
259-
attribute.value = newValue;
260-
if (noOwner) {
261-
noOwner = false;
262-
node.setAttributeNode(attribute);
263-
}
253+
}
254+
};
255+
} else {
256+
let noOwner = false;
257+
const attribute = node.ownerDocument.createAttributeNode(name);
258+
node.setAttributeNode(attribute);
259+
return newValue => {
260+
if (oldValue !== newValue) {
261+
oldValue = newValue;
262+
if (attribute.value !== newValue) {
263+
if (newValue == null) {
264+
if (!noOwner) {
265+
noOwner = true;
266+
node.removeAttributeNode(attribute);
267+
}
268+
} else {
269+
attribute.value = newValue;
270+
if (noOwner) {
271+
noOwner = false;
272+
node.setAttributeNode(attribute);
264273
}
265274
}
266275
}
267-
});
268-
};
269-
270-
const optimist = (aura, value) => {
271-
let length = aura.length;
272-
if (value.length !== length) {
273-
majinbuu(aura, value, Aura.MAX_LIST_SIZE);
274-
} else {
275-
for (let i = 0; i < length--; i++) {
276-
if (aura[length] !== value[length] || aura[i] !== value[i]) {
277-
majinbuu(aura, value, Aura.MAX_LIST_SIZE);
278-
return;
279276
}
280-
}
277+
};
281278
}
282-
}
279+
};
283280

284281
const setTextContent = node => {
285282
let oldValue;

‎coverage/lcov-report/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ <h1>
7777
</div><!-- /wrapper -->
7878
<div class='footer quiet pad2 space-top1 center small'>
7979
Code coverage
80-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Wed Nov 08 2017 22:56:12 GMT-0300 (-03)
80+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Nov 09 2017 10:29:51 GMT-0300 (-03)
8181
</div>
8282
</div>
8383
<script src="prettify.js"></script>

‎coverage/lcov-report/shared/constants.js.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ <h1>
157157
</div><!-- /wrapper -->
158158
<div class='footer quiet pad2 space-top1 center small'>
159159
Code coverage
160-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Wed Nov 08 2017 22:56:12 GMT-0300 (-03)
160+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Nov 09 2017 10:29:51 GMT-0300 (-03)
161161
</div>
162162
</div>
163163
<script src="../prettify.js"></script>

‎coverage/lcov-report/shared/easy-dom.js.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h1>
7676
</div><!-- /wrapper -->
7777
<div class='footer quiet pad2 space-top1 center small'>
7878
Code coverage
79-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Wed Nov 08 2017 22:56:12 GMT-0300 (-03)
79+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Nov 09 2017 10:29:51 GMT-0300 (-03)
8080
</div>
8181
</div>
8282
<script src="../prettify.js"></script>

‎coverage/lcov-report/shared/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ <h1>
103103
</div><!-- /wrapper -->
104104
<div class='footer quiet pad2 space-top1 center small'>
105105
Code coverage
106-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Wed Nov 08 2017 22:56:12 GMT-0300 (-03)
106+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Nov 09 2017 10:29:51 GMT-0300 (-03)
107107
</div>
108108
</div>
109109
<script src="../prettify.js"></script>

‎coverage/lcov-report/shared/poorlyfills.js.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ <h1>
235235
</div><!-- /wrapper -->
236236
<div class='footer quiet pad2 space-top1 center small'>
237237
Code coverage
238-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Wed Nov 08 2017 22:56:12 GMT-0300 (-03)
238+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Nov 09 2017 10:29:51 GMT-0300 (-03)
239239
</div>
240240
</div>
241241
<script src="../prettify.js"></script>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.




Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy