@oscarpalmer/abydon 0.12.0 → 0.13.0
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/dist/abydon.full.js +1247 -0
- package/dist/fragment.js +60 -0
- package/dist/helpers/dom.js +28 -0
- package/dist/helpers/index.js +11 -0
- package/dist/index.js +6 -911
- package/dist/node/attribute/index.js +34 -0
- package/dist/node/attribute/value.js +58 -0
- package/dist/node/event.js +32 -0
- package/dist/node/index.js +52 -0
- package/dist/node/value.js +93 -0
- package/dist/parse.js +21 -0
- package/package.json +41 -28
- package/src/fragment.ts +13 -14
- package/src/helpers/dom.ts +2 -1
- package/src/helpers/index.ts +0 -9
- package/src/index.ts +11 -2
- package/src/models.ts +6 -8
- package/src/node/attribute/index.ts +4 -3
- package/src/node/attribute/value.ts +8 -15
- package/src/node/event.ts +1 -1
- package/src/node/index.ts +4 -3
- package/src/node/value.ts +6 -7
- package/src/{html.ts → parse.ts} +5 -14
- package/types/fragment.d.cts +27 -0
- package/types/helpers/dom.d.cts +7 -0
- package/types/helpers/index.d.cts +29 -0
- package/types/helpers/index.d.ts +0 -3
- package/types/index.d.cts +278 -2
- package/types/index.d.ts +4 -2
- package/types/models.d.cts +107 -0
- package/types/models.d.ts +6 -7
- package/types/node/attribute/index.d.cts +109 -0
- package/types/node/attribute/index.d.ts +2 -1
- package/types/node/attribute/value.d.cts +109 -0
- package/types/node/attribute/value.d.ts +2 -1
- package/types/node/event.d.cts +7 -0
- package/types/node/event.d.ts +1 -1
- package/types/node/index.d.cts +108 -0
- package/types/node/value.d.cts +108 -0
- package/types/node/value.d.ts +2 -2
- package/types/parse.d.cts +108 -0
- package/types/parse.d.ts +2 -0
- package/dist/fragment.mjs +0 -75
- package/dist/helpers/dom.mjs +0 -44
- package/dist/helpers/index.mjs +0 -25
- package/dist/html.mjs +0 -36
- package/dist/index.mjs +0 -6
- package/dist/node/attribute/index.mjs +0 -40
- package/dist/node/attribute/value.mjs +0 -89
- package/dist/node/event.mjs +0 -38
- package/dist/node/index.mjs +0 -60
- package/dist/node/value.mjs +0 -123
- package/types/html.d.ts +0 -4
- /package/dist/{models.mjs → models.js} +0 -0
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
// src/node/attribute/value.ts
|
|
2
|
-
import {getString} from "@oscarpalmer/atoms/string";
|
|
3
|
-
import {effect, isReactive} from "@oscarpalmer/sentinel";
|
|
4
|
-
import {
|
|
5
|
-
isBooleanAttribute,
|
|
6
|
-
setAttribute as setAttr
|
|
7
|
-
} from "@oscarpalmer/toretto/attribute";
|
|
8
|
-
function setAttribute(data, element, name, value) {
|
|
9
|
-
element.removeAttribute(name);
|
|
10
|
-
switch (true) {
|
|
11
|
-
case classExpression.test(name):
|
|
12
|
-
setClasses(data, element, name, value);
|
|
13
|
-
return;
|
|
14
|
-
case stylePrefixExpression.test(name):
|
|
15
|
-
setStyle(data, element, name, value);
|
|
16
|
-
return;
|
|
17
|
-
default:
|
|
18
|
-
setValue(data, element, name, value);
|
|
19
|
-
break;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
function setClasses(data, element, name, value) {
|
|
23
|
-
function update(value2) {
|
|
24
|
-
if (value2 === true) {
|
|
25
|
-
element.classList.add(...classes);
|
|
26
|
-
} else {
|
|
27
|
-
element.classList.remove(...classes);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
const classes = name.slice(6).split(".");
|
|
31
|
-
if (isReactive(value)) {
|
|
32
|
-
data.sentinel.effects.add(effect(() => {
|
|
33
|
-
update(value.get());
|
|
34
|
-
}));
|
|
35
|
-
} else {
|
|
36
|
-
update(value);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
function setStyle(data, element, name, value) {
|
|
40
|
-
function update(value2) {
|
|
41
|
-
if (value2 == null || value2 === false || value2 === true && unit == null) {
|
|
42
|
-
element.style.removeProperty(property);
|
|
43
|
-
} else {
|
|
44
|
-
element.style.setProperty(property, value2 === true ? unit : getString(value2));
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
const [, property, unit] = styleFullExpression.exec(name) ?? [];
|
|
48
|
-
if (property != null) {
|
|
49
|
-
if (isReactive(value)) {
|
|
50
|
-
data.sentinel.effects.add(effect(() => {
|
|
51
|
-
update(value.get());
|
|
52
|
-
}));
|
|
53
|
-
} else {
|
|
54
|
-
update(value);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
function setValue(data, element, name, value) {
|
|
59
|
-
const callback = isBooleanAttribute(name) && name in element ? name === "selected" ? updateSelected : updateProperty : setAttr;
|
|
60
|
-
if (isReactive(value)) {
|
|
61
|
-
data.sentinel.effects.add(effect(() => {
|
|
62
|
-
callback(element, name, value.get());
|
|
63
|
-
}));
|
|
64
|
-
} else {
|
|
65
|
-
callback(element, name, value);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
function triggerSelectChange(select) {
|
|
69
|
-
if (select != null) {
|
|
70
|
-
select.dispatchEvent(new Event("change", { bubbles: true }));
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
function updateProperty(element, name, value) {
|
|
74
|
-
element[name] = value === true;
|
|
75
|
-
}
|
|
76
|
-
function updateSelected(element, name, value) {
|
|
77
|
-
const select = element.closest("select");
|
|
78
|
-
const options = [...select?.options ?? []];
|
|
79
|
-
if (select != null && options.includes(element)) {
|
|
80
|
-
triggerSelectChange(select);
|
|
81
|
-
}
|
|
82
|
-
updateProperty(element, name, value);
|
|
83
|
-
}
|
|
84
|
-
var classExpression = /^class\./;
|
|
85
|
-
var styleFullExpression = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
|
|
86
|
-
var stylePrefixExpression = /^style\./;
|
|
87
|
-
export {
|
|
88
|
-
setAttribute
|
|
89
|
-
};
|
package/dist/node/event.mjs
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
// src/node/event.ts
|
|
2
|
-
function getController(element) {
|
|
3
|
-
let controller = controllers.get(element);
|
|
4
|
-
if (controller == null) {
|
|
5
|
-
controller = new AbortController;
|
|
6
|
-
controllers.set(element, controller);
|
|
7
|
-
}
|
|
8
|
-
return controller;
|
|
9
|
-
}
|
|
10
|
-
function getOptions(options) {
|
|
11
|
-
const parts = options.split(":");
|
|
12
|
-
return {
|
|
13
|
-
capture: parts.includes("c") || parts.includes("capture"),
|
|
14
|
-
once: parts.includes("o") || parts.includes("once"),
|
|
15
|
-
passive: !parts.includes("a") && !parts.includes("active")
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
function mapEvent(element, name, value) {
|
|
19
|
-
element.removeAttribute(name);
|
|
20
|
-
const [, type, options] = eventNamePattern.exec(name) ?? [];
|
|
21
|
-
if (typeof value === "function" && type != null) {
|
|
22
|
-
element.addEventListener(type, value, {
|
|
23
|
-
...getOptions(options ?? ""),
|
|
24
|
-
signal: getController(element).signal
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
function removeEvents(element) {
|
|
29
|
-
controllers.get(element)?.abort(reason);
|
|
30
|
-
controllers.delete(element);
|
|
31
|
-
}
|
|
32
|
-
var controllers = new WeakMap;
|
|
33
|
-
var eventNamePattern = /^@([\w-]+)(?::([a-z:]+))?$/i;
|
|
34
|
-
var reason = "Event removed as element was removed from document by Abydon";
|
|
35
|
-
export {
|
|
36
|
-
removeEvents,
|
|
37
|
-
mapEvent
|
|
38
|
-
};
|
package/dist/node/index.mjs
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
// src/node/index.ts
|
|
2
|
-
import {computed, isReactive} from "@oscarpalmer/sentinel";
|
|
3
|
-
import {isFragment, isHTMLOrSVGElement} from "../helpers";
|
|
4
|
-
import {createNodes} from "../helpers/dom";
|
|
5
|
-
import {mapAttributes} from "./attribute";
|
|
6
|
-
import {setReactiveValue} from "./value";
|
|
7
|
-
function mapNode(data, comment) {
|
|
8
|
-
const matches = commentExpression.exec(comment.textContent ?? "");
|
|
9
|
-
const value2 = matches == null ? null : data.values[+matches[1]];
|
|
10
|
-
if (value2 != null) {
|
|
11
|
-
mapValue(data, comment, value2);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
function mapNodes(data, nodes) {
|
|
15
|
-
const { length } = nodes;
|
|
16
|
-
for (let index = 0;index < length; index += 1) {
|
|
17
|
-
const node = nodes[index];
|
|
18
|
-
if (node instanceof Comment) {
|
|
19
|
-
mapNode(data, node);
|
|
20
|
-
continue;
|
|
21
|
-
}
|
|
22
|
-
if (isHTMLOrSVGElement(node)) {
|
|
23
|
-
mapAttributes(data, node);
|
|
24
|
-
}
|
|
25
|
-
if (node.hasChildNodes()) {
|
|
26
|
-
mapNodes(data, [...node.childNodes]);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
function mapValue(data, comment, value2) {
|
|
31
|
-
switch (true) {
|
|
32
|
-
case typeof value2 === "function":
|
|
33
|
-
setComputedValue(data, comment, value2);
|
|
34
|
-
break;
|
|
35
|
-
case isReactive(value2):
|
|
36
|
-
setReactiveValue(data, comment, value2);
|
|
37
|
-
break;
|
|
38
|
-
default:
|
|
39
|
-
replaceComment(data, comment, value2);
|
|
40
|
-
break;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
function replaceComment(data, comment, value2) {
|
|
44
|
-
const item = data.items.find((item2) => item2.nodes.includes(comment));
|
|
45
|
-
const nodes = createNodes(value2);
|
|
46
|
-
if (item != null) {
|
|
47
|
-
item.fragments = isFragment(value2) ? [value2] : undefined;
|
|
48
|
-
item.nodes = nodes;
|
|
49
|
-
}
|
|
50
|
-
comment.replaceWith(...nodes);
|
|
51
|
-
}
|
|
52
|
-
function setComputedValue(data, comment, callback) {
|
|
53
|
-
const value2 = computed(callback);
|
|
54
|
-
data.sentinel.values.add(value2);
|
|
55
|
-
setReactiveValue(data, comment, value2);
|
|
56
|
-
}
|
|
57
|
-
var commentExpression = /^abydon\.(\d+)$/;
|
|
58
|
-
export {
|
|
59
|
-
mapNodes
|
|
60
|
-
};
|
package/dist/node/value.mjs
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
// src/node/value.ts
|
|
2
|
-
import {isNullableOrWhitespace} from "@oscarpalmer/atoms/is";
|
|
3
|
-
import {getString} from "@oscarpalmer/atoms/string";
|
|
4
|
-
import {effect} from "@oscarpalmer/sentinel";
|
|
5
|
-
import {compareArrays, isChildNode, isFragment} from "../helpers";
|
|
6
|
-
import {createNodes, replaceNodes} from "../helpers/dom";
|
|
7
|
-
function removeFragments(fragments) {
|
|
8
|
-
if (fragments != null) {
|
|
9
|
-
const { length } = fragments;
|
|
10
|
-
for (let index = 0;index < length; index += 1) {
|
|
11
|
-
fragments[index].remove();
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
function setArray(fragments, nodes, comment, text, value) {
|
|
16
|
-
if (value.length === 0) {
|
|
17
|
-
return {
|
|
18
|
-
nodes: setText(fragments, nodes, comment, text, value)
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
let templates = value.filter((item) => isFragment(item) && item.identifier != null);
|
|
22
|
-
const identifiers = templates.map((fragment) => fragment.identifier);
|
|
23
|
-
const oldIdentifiers = fragments?.map((fragment) => fragment.identifier) ?? [];
|
|
24
|
-
if (new Set(identifiers).size !== templates.length) {
|
|
25
|
-
templates = [];
|
|
26
|
-
}
|
|
27
|
-
const noTemplates = templates.length === 0;
|
|
28
|
-
if (noTemplates || nodes == null || oldIdentifiers.some((identifier) => identifier == null)) {
|
|
29
|
-
return {
|
|
30
|
-
fragments: noTemplates ? undefined : templates,
|
|
31
|
-
nodes: setNodes(fragments, nodes, comment, text, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
const next = templates.map((template) => fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
|
|
35
|
-
const comparison = compareArrays(fragments ?? [], templates);
|
|
36
|
-
if (comparison !== "removed") {
|
|
37
|
-
let position = nodes[0];
|
|
38
|
-
const before = comparison === "added" && !oldIdentifiers.includes(templates[0].identifier);
|
|
39
|
-
const items = next.flatMap((fragment) => fragment.get().flatMap((node) => ({
|
|
40
|
-
identifier: fragment.identifier,
|
|
41
|
-
value: node
|
|
42
|
-
})));
|
|
43
|
-
const { length: length2 } = items;
|
|
44
|
-
for (let index = 0;index < length2; index += 1) {
|
|
45
|
-
const item = items[index];
|
|
46
|
-
if (comparison === "dissimilar" || !oldIdentifiers.includes(item.identifier)) {
|
|
47
|
-
if (index === 0 && before) {
|
|
48
|
-
position.before(item.value);
|
|
49
|
-
} else {
|
|
50
|
-
position.after(item.value);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
position = item.value;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
const toRemove = fragments?.filter((fragment) => !identifiers.includes(fragment.identifier)) ?? [];
|
|
57
|
-
const { length } = toRemove;
|
|
58
|
-
for (let index = 0;index < length; index += 1) {
|
|
59
|
-
toRemove[index].remove();
|
|
60
|
-
}
|
|
61
|
-
return {
|
|
62
|
-
fragments: next,
|
|
63
|
-
nodes: next.flatMap((fragment) => fragment.get())
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
function setNodes(fragments, nodes, comment, text, next) {
|
|
67
|
-
if (nodes == null) {
|
|
68
|
-
if (comment.parentNode != null) {
|
|
69
|
-
replaceNodes([comment], next);
|
|
70
|
-
} else if (text.parentNode != null) {
|
|
71
|
-
replaceNodes([text], next);
|
|
72
|
-
}
|
|
73
|
-
} else {
|
|
74
|
-
replaceNodes(nodes, next);
|
|
75
|
-
}
|
|
76
|
-
removeFragments(fragments);
|
|
77
|
-
return next;
|
|
78
|
-
}
|
|
79
|
-
function setReactiveValue(data, comment, reactive) {
|
|
80
|
-
const item = data.items.find((item2) => item2.nodes.includes(comment));
|
|
81
|
-
const text = new Text;
|
|
82
|
-
let fragments;
|
|
83
|
-
let nodes;
|
|
84
|
-
data.sentinel.effects.add(effect(() => {
|
|
85
|
-
const value = reactive.get();
|
|
86
|
-
if (Array.isArray(value)) {
|
|
87
|
-
const result = setArray(fragments, nodes, comment, text, value);
|
|
88
|
-
fragments = typeof result === "boolean" ? undefined : result?.fragments;
|
|
89
|
-
nodes = typeof result === "boolean" ? result ? [text] : undefined : result?.nodes;
|
|
90
|
-
} else {
|
|
91
|
-
const valueIsFragment = isFragment(value);
|
|
92
|
-
fragments = valueIsFragment ? [value] : undefined;
|
|
93
|
-
if (valueIsFragment || isChildNode(value)) {
|
|
94
|
-
nodes = setNodes(fragments, nodes, comment, text, createNodes(value));
|
|
95
|
-
} else {
|
|
96
|
-
nodes = setText(fragments, nodes, comment, text, value);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
if (item != null) {
|
|
100
|
-
item.fragments = fragments;
|
|
101
|
-
item.nodes = [...nodes ?? [comment]];
|
|
102
|
-
}
|
|
103
|
-
}));
|
|
104
|
-
}
|
|
105
|
-
function setText(fragments, nodes, comment, text, value) {
|
|
106
|
-
const isNullable = isNullableOrWhitespace(value);
|
|
107
|
-
text.textContent = isNullable ? "" : getString(value);
|
|
108
|
-
let result = false;
|
|
109
|
-
if (nodes != null) {
|
|
110
|
-
replaceNodes(nodes, [isNullable ? comment : text]);
|
|
111
|
-
result = !isNullable;
|
|
112
|
-
} else if (isNullable && comment.parentNode == null) {
|
|
113
|
-
text.replaceWith(comment);
|
|
114
|
-
} else if (!isNullable && text.parentNode == null) {
|
|
115
|
-
comment.replaceWith(text);
|
|
116
|
-
result = true;
|
|
117
|
-
}
|
|
118
|
-
removeFragments(fragments);
|
|
119
|
-
return result ? [text] : undefined;
|
|
120
|
-
}
|
|
121
|
-
export {
|
|
122
|
-
setReactiveValue
|
|
123
|
-
};
|
package/types/html.d.ts
DELETED
|
File without changes
|