aberdeen 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -6
- package/dist/aberdeen.js +7 -4
- package/dist/aberdeen.js.map +3 -3
- package/dist-min/aberdeen.js +3 -3
- package/dist-min/aberdeen.js.map +3 -3
- package/html-to-aberdeen +354 -0
- package/package.json +2 -2
- package/src/aberdeen.ts +6 -4
package/README.md
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
# [Aberdeen](https://aberdeenjs.org/) [](https://github.com/vanviegen/aberdeen/blob/master/LICENSE.txt) [](https://badge.fury.io/js/aberdeen)  [](https://github.com/vanviegen/aberdeen)
|
|
2
2
|
|
|
3
|
-
Build
|
|
3
|
+
Build fast reactive UIs in pure TypeScript/JavaScript without a virtual DOM.
|
|
4
4
|
|
|
5
|
-
Aberdeen
|
|
5
|
+
Aberdeen's approach is refreshingly simple:
|
|
6
6
|
|
|
7
|
-
> Use many small
|
|
8
|
-
|
|
9
|
-
Now, let's dive into why this matters...
|
|
7
|
+
> Use many small anonymous functions for emitting DOM elements, and automatically rerun them when their underlying data changes. JavaScript `Proxy` is used to track reads and updates to this data, which can consist of anything, from simple values to complex, typed, and deeply nested data structures.
|
|
10
8
|
|
|
11
9
|
## Why use Aberdeen?
|
|
12
10
|
|
|
@@ -54,7 +52,7 @@ Okay, next up is a somewhat more complex app - a todo-list with the following be
|
|
|
54
52
|
- Pressing one of the buttons, or pressing enter will transition from 'editing state' to 'viewing state', saving the new label text unless cancel was pressed.
|
|
55
53
|
- In 'viewing state', the label is shown as non-editable. There's an 'Edit' link, that will transition the item to 'editing state'. Clicking anywhere else will toggle the done status.
|
|
56
54
|
- The list of items is sorted alphabetically by label. Items move when 'save' changes their label.
|
|
57
|
-
- Items that are created, moved or deleted
|
|
55
|
+
- Items that are created, moved or deleted grow and shrink as appropriate.
|
|
58
56
|
|
|
59
57
|
Pfew.. now let's look at the code:
|
|
60
58
|
|
package/dist/aberdeen.js
CHANGED
|
@@ -834,8 +834,7 @@ var refHandler = {
|
|
|
834
834
|
function ref(target, index) {
|
|
835
835
|
return new Proxy({ proxy: target, index }, refHandler);
|
|
836
836
|
}
|
|
837
|
-
function applyBind(
|
|
838
|
-
const el = _el;
|
|
837
|
+
function applyBind(el, target) {
|
|
839
838
|
let onProxyChange;
|
|
840
839
|
let onInputChange;
|
|
841
840
|
let type = el.getAttribute("type");
|
|
@@ -857,7 +856,11 @@ function applyBind(_el, target) {
|
|
|
857
856
|
onInputChange = () => target.value = type === "number" || type === "range" ? el.value === "" ? null : +el.value : el.value;
|
|
858
857
|
if (value === undefined)
|
|
859
858
|
onInputChange();
|
|
860
|
-
onProxyChange = () =>
|
|
859
|
+
onProxyChange = () => {
|
|
860
|
+
el.value = target.value;
|
|
861
|
+
if (el.tagName === "SELECT" && el.value != target.value)
|
|
862
|
+
throw new Error(`SELECT has no '${target.value}' OPTION (yet)`);
|
|
863
|
+
};
|
|
861
864
|
}
|
|
862
865
|
observe(onProxyChange);
|
|
863
866
|
el.addEventListener("input", onInputChange);
|
|
@@ -1197,5 +1200,5 @@ export {
|
|
|
1197
1200
|
$
|
|
1198
1201
|
};
|
|
1199
1202
|
|
|
1200
|
-
//# debugId=
|
|
1203
|
+
//# debugId=D0AD62307DFA7AC364756E2164756E21
|
|
1201
1204
|
//# sourceMappingURL=aberdeen.js.map
|