p-elements-core 1.2.32-rc8 → 1.2.32
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/.editorconfig +17 -17
- package/.gitlab-ci.yml +18 -18
- package/CHANGELOG.md +201 -201
- package/demo/sample.js +1 -1
- package/demo/screen.css +16 -16
- package/dist/p-elements-core-modern.js +1 -1
- package/dist/p-elements-core.js +1 -1
- package/docs/package-lock.json +6897 -6897
- package/docs/package.json +27 -27
- package/docs/src/404.md +8 -8
- package/docs/src/_data/demos/hello-world/hello-world.tsx +35 -35
- package/docs/src/_data/demos/hello-world/index.html +10 -10
- package/docs/src/_data/demos/hello-world/project.json +7 -7
- package/docs/src/_data/demos/timer/demo-timer.tsx +120 -120
- package/docs/src/_data/demos/timer/icons.tsx +62 -62
- package/docs/src/_data/demos/timer/index.html +12 -12
- package/docs/src/_data/demos/timer/project.json +8 -8
- package/docs/src/_data/global.js +13 -13
- package/docs/src/_data/helpers.js +19 -19
- package/docs/src/_includes/layouts/base.njk +30 -30
- package/docs/src/_includes/layouts/playground.njk +40 -40
- package/docs/src/_includes/partials/app-header.njk +8 -8
- package/docs/src/_includes/partials/head.njk +14 -14
- package/docs/src/_includes/partials/nav.njk +19 -19
- package/docs/src/_includes/partials/top-nav.njk +51 -51
- package/docs/src/documentation/custom-element.md +221 -221
- package/docs/src/documentation/decorators/bind.md +71 -71
- package/docs/src/documentation/decorators/custom-element-config.md +63 -63
- package/docs/src/documentation/decorators/property.md +83 -83
- package/docs/src/documentation/decorators/query.md +66 -66
- package/docs/src/documentation/decorators/render-property-on-set.md +60 -60
- package/docs/src/documentation/decorators.md +9 -9
- package/docs/src/documentation/reactive-properties.md +53 -53
- package/docs/src/index.d.ts +25 -25
- package/docs/src/index.md +3 -3
- package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css +78 -78
- package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx +166 -166
- package/docs/src/scripts/components/app-playground/app-playground.tsx +189 -189
- package/docs/tsconfig.json +22 -22
- package/index.html +10 -2
- package/package.json +1 -1
- package/readme.md +206 -206
- package/src/custom-element-controller.ts +31 -31
- package/src/custom-element.test.ts +906 -906
- package/src/custom-element.ts +3 -8
- package/src/decorators/bind.test.ts +163 -163
- package/src/decorators/bind.ts +46 -46
- package/src/decorators/custom-element-config.ts +17 -17
- package/src/decorators/property.test.ts +279 -279
- package/src/decorators/query.test.ts +146 -146
- package/src/decorators/query.ts +12 -12
- package/src/decorators/render-property-on-set.ts +3 -3
- package/src/helpers/css.ts +71 -71
- package/src/maquette/cache.ts +35 -35
- package/src/maquette/dom.ts +115 -115
- package/src/maquette/h.ts +100 -100
- package/src/maquette/index.ts +12 -12
- package/src/maquette/interfaces.ts +536 -536
- package/src/maquette/jsx.ts +61 -61
- package/src/maquette/mapping.ts +56 -56
- package/src/maquette/projection.ts +666 -666
- package/src/maquette/projector.ts +205 -205
- package/src/sample/mixin/highlight.tsx +33 -33
- package/src/sample/sample.tsx +98 -0
package/src/maquette/jsx.ts
CHANGED
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
import { VNode, VNodeChild, VNodeProperties } from "./interfaces";
|
|
2
|
-
|
|
3
|
-
declare global {
|
|
4
|
-
function jsx(
|
|
5
|
-
tagName: string,
|
|
6
|
-
properties: VNodeProperties | null,
|
|
7
|
-
...children: (VNode | string)[]
|
|
8
|
-
): VNode;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
let toTextVNode = (data: any): VNode => {
|
|
12
|
-
return {
|
|
13
|
-
vnodeSelector: "",
|
|
14
|
-
properties: undefined,
|
|
15
|
-
children: undefined,
|
|
16
|
-
text: data.toString(),
|
|
17
|
-
domNode: null,
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
let appendChildren = (insertions: any[], main: VNode[]) => {
|
|
22
|
-
for (let i = 0, length = insertions.length; i < length; i++) {
|
|
23
|
-
let item = insertions[i];
|
|
24
|
-
if (Array.isArray(item)) {
|
|
25
|
-
appendChildren(item, main);
|
|
26
|
-
} else {
|
|
27
|
-
if (item !== null && item !== undefined && item !== false) {
|
|
28
|
-
if (!item.hasOwnProperty("vnodeSelector")) {
|
|
29
|
-
item = toTextVNode(item);
|
|
30
|
-
}
|
|
31
|
-
main.push(item);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export let jsx = (
|
|
38
|
-
tagName: string,
|
|
39
|
-
properties: VNodeProperties | null,
|
|
40
|
-
...childNodes: VNodeChild[]
|
|
41
|
-
): VNode => {
|
|
42
|
-
if (childNodes.length === 1 && typeof childNodes[0] === "string") {
|
|
43
|
-
return {
|
|
44
|
-
vnodeSelector: tagName,
|
|
45
|
-
properties: properties || undefined,
|
|
46
|
-
children: undefined,
|
|
47
|
-
text: childNodes[0],
|
|
48
|
-
domNode: null,
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
let children: VNode[] = [];
|
|
52
|
-
appendChildren(childNodes, children);
|
|
53
|
-
return {
|
|
54
|
-
vnodeSelector: tagName,
|
|
55
|
-
properties: properties || undefined,
|
|
56
|
-
children: children,
|
|
57
|
-
text: undefined,
|
|
58
|
-
domNode: null,
|
|
59
|
-
};
|
|
60
|
-
};
|
|
61
|
-
|
|
1
|
+
import { VNode, VNodeChild, VNodeProperties } from "./interfaces";
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
function jsx(
|
|
5
|
+
tagName: string,
|
|
6
|
+
properties: VNodeProperties | null,
|
|
7
|
+
...children: (VNode | string)[]
|
|
8
|
+
): VNode;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let toTextVNode = (data: any): VNode => {
|
|
12
|
+
return {
|
|
13
|
+
vnodeSelector: "",
|
|
14
|
+
properties: undefined,
|
|
15
|
+
children: undefined,
|
|
16
|
+
text: data.toString(),
|
|
17
|
+
domNode: null,
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
let appendChildren = (insertions: any[], main: VNode[]) => {
|
|
22
|
+
for (let i = 0, length = insertions.length; i < length; i++) {
|
|
23
|
+
let item = insertions[i];
|
|
24
|
+
if (Array.isArray(item)) {
|
|
25
|
+
appendChildren(item, main);
|
|
26
|
+
} else {
|
|
27
|
+
if (item !== null && item !== undefined && item !== false) {
|
|
28
|
+
if (!item.hasOwnProperty("vnodeSelector")) {
|
|
29
|
+
item = toTextVNode(item);
|
|
30
|
+
}
|
|
31
|
+
main.push(item);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export let jsx = (
|
|
38
|
+
tagName: string,
|
|
39
|
+
properties: VNodeProperties | null,
|
|
40
|
+
...childNodes: VNodeChild[]
|
|
41
|
+
): VNode => {
|
|
42
|
+
if (childNodes.length === 1 && typeof childNodes[0] === "string") {
|
|
43
|
+
return {
|
|
44
|
+
vnodeSelector: tagName,
|
|
45
|
+
properties: properties || undefined,
|
|
46
|
+
children: undefined,
|
|
47
|
+
text: childNodes[0],
|
|
48
|
+
domNode: null,
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
let children: VNode[] = [];
|
|
52
|
+
appendChildren(childNodes, children);
|
|
53
|
+
return {
|
|
54
|
+
vnodeSelector: tagName,
|
|
55
|
+
properties: properties || undefined,
|
|
56
|
+
children: children,
|
|
57
|
+
text: undefined,
|
|
58
|
+
domNode: null,
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
|
package/src/maquette/mapping.ts
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import { Mapping } from "./interfaces";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
|
|
5
|
-
* See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
|
|
6
|
-
*
|
|
7
|
-
* @param <Source> The type of source items. A database-record for instance.
|
|
8
|
-
* @param <Target> The type of target items. A [[MaquetteComponent]] for instance.
|
|
9
|
-
* @param getSourceKey `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
|
|
10
|
-
* @param createResult `function(source, index)` that must create a new result object from a given source. This function is identical
|
|
11
|
-
* to the `callback` argument in `Array.map(callback)`.
|
|
12
|
-
* @param updateResult `function(source, target, index)` that updates a result to an updated source.
|
|
13
|
-
*/
|
|
14
|
-
export let createMapping = <Source, Target>(
|
|
15
|
-
getSourceKey: (source: Source) => string | number,
|
|
16
|
-
createResult: (source: Source, index: number) => Target,
|
|
17
|
-
updateResult: (source: Source, target: Target, index: number) => void
|
|
18
|
-
): Mapping<Source, Target> => {
|
|
19
|
-
let keys = [] as unknown[];
|
|
20
|
-
let results = [] as Target[];
|
|
21
|
-
|
|
22
|
-
return {
|
|
23
|
-
results: results,
|
|
24
|
-
map: (newSources: Source[]) => {
|
|
25
|
-
let newKeys = newSources.map(getSourceKey);
|
|
26
|
-
let oldTargets = results.slice();
|
|
27
|
-
let oldIndex = 0;
|
|
28
|
-
for (let i = 0; i < newSources.length; i++) {
|
|
29
|
-
let source = newSources[i];
|
|
30
|
-
let sourceKey = newKeys[i];
|
|
31
|
-
if (sourceKey === keys[oldIndex]) {
|
|
32
|
-
results[i] = oldTargets[oldIndex];
|
|
33
|
-
updateResult(source, oldTargets[oldIndex], i);
|
|
34
|
-
oldIndex++;
|
|
35
|
-
} else {
|
|
36
|
-
let found = false;
|
|
37
|
-
for (let j = 1; j < keys.length + 1; j++) {
|
|
38
|
-
let searchIndex = (oldIndex + j) % keys.length;
|
|
39
|
-
if (keys[searchIndex] === sourceKey) {
|
|
40
|
-
results[i] = oldTargets[searchIndex];
|
|
41
|
-
updateResult(newSources[i], oldTargets[searchIndex], i);
|
|
42
|
-
oldIndex = searchIndex + 1;
|
|
43
|
-
found = true;
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
if (!found) {
|
|
48
|
-
results[i] = createResult(source, i);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
results.length = newSources.length;
|
|
53
|
-
keys = newKeys;
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
};
|
|
1
|
+
import { Mapping } from "./interfaces";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
|
|
5
|
+
* See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
|
|
6
|
+
*
|
|
7
|
+
* @param <Source> The type of source items. A database-record for instance.
|
|
8
|
+
* @param <Target> The type of target items. A [[MaquetteComponent]] for instance.
|
|
9
|
+
* @param getSourceKey `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
|
|
10
|
+
* @param createResult `function(source, index)` that must create a new result object from a given source. This function is identical
|
|
11
|
+
* to the `callback` argument in `Array.map(callback)`.
|
|
12
|
+
* @param updateResult `function(source, target, index)` that updates a result to an updated source.
|
|
13
|
+
*/
|
|
14
|
+
export let createMapping = <Source, Target>(
|
|
15
|
+
getSourceKey: (source: Source) => string | number,
|
|
16
|
+
createResult: (source: Source, index: number) => Target,
|
|
17
|
+
updateResult: (source: Source, target: Target, index: number) => void
|
|
18
|
+
): Mapping<Source, Target> => {
|
|
19
|
+
let keys = [] as unknown[];
|
|
20
|
+
let results = [] as Target[];
|
|
21
|
+
|
|
22
|
+
return {
|
|
23
|
+
results: results,
|
|
24
|
+
map: (newSources: Source[]) => {
|
|
25
|
+
let newKeys = newSources.map(getSourceKey);
|
|
26
|
+
let oldTargets = results.slice();
|
|
27
|
+
let oldIndex = 0;
|
|
28
|
+
for (let i = 0; i < newSources.length; i++) {
|
|
29
|
+
let source = newSources[i];
|
|
30
|
+
let sourceKey = newKeys[i];
|
|
31
|
+
if (sourceKey === keys[oldIndex]) {
|
|
32
|
+
results[i] = oldTargets[oldIndex];
|
|
33
|
+
updateResult(source, oldTargets[oldIndex], i);
|
|
34
|
+
oldIndex++;
|
|
35
|
+
} else {
|
|
36
|
+
let found = false;
|
|
37
|
+
for (let j = 1; j < keys.length + 1; j++) {
|
|
38
|
+
let searchIndex = (oldIndex + j) % keys.length;
|
|
39
|
+
if (keys[searchIndex] === sourceKey) {
|
|
40
|
+
results[i] = oldTargets[searchIndex];
|
|
41
|
+
updateResult(newSources[i], oldTargets[searchIndex], i);
|
|
42
|
+
oldIndex = searchIndex + 1;
|
|
43
|
+
found = true;
|
|
44
|
+
break;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
if (!found) {
|
|
48
|
+
results[i] = createResult(source, i);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
results.length = newSources.length;
|
|
53
|
+
keys = newKeys;
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
};
|