p-elements-core 1.2.31 → 1.2.32-rc-10
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 -0
- package/demo/sample.js +1 -1
- package/demo/screen.css +16 -16
- package/demo/theme.css +1 -0
- 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 +15 -2
- package/p-elements-core.d.ts +11 -1
- package/package.json +11 -4
- package/readme.md +206 -206
- package/src/custom-element-controller.test.ts +226 -0
- package/src/custom-element-controller.ts +31 -31
- package/src/custom-element.test.ts +906 -0
- package/src/custom-element.ts +471 -188
- package/src/custom-style-element.ts +4 -1
- package/src/decorators/bind.test.ts +163 -0
- package/src/decorators/bind.ts +46 -46
- package/src/decorators/custom-element-config.ts +17 -17
- package/src/decorators/property.test.ts +279 -0
- package/src/decorators/property.ts +822 -150
- package/src/decorators/query.test.ts +146 -0
- package/src/decorators/query.ts +12 -12
- package/src/decorators/render-property-on-set.ts +3 -3
- package/src/helpers/css.test.ts +150 -0
- package/src/helpers/css.ts +71 -71
- package/src/maquette/cache.test.ts +150 -0
- package/src/maquette/cache.ts +35 -35
- package/src/maquette/dom.test.ts +263 -0
- package/src/maquette/dom.ts +115 -115
- package/src/maquette/h.test.ts +165 -0
- 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.test.ts +294 -0
- package/src/maquette/mapping.ts +56 -56
- package/src/maquette/maquette.test.ts +493 -0
- package/src/maquette/projection.test.ts +366 -0
- package/src/maquette/projection.ts +666 -666
- package/src/maquette/projector.test.ts +351 -0
- package/src/maquette/projector.ts +200 -200
- package/src/sample/mixin/highlight.tsx +33 -32
- package/src/sample/sample.tsx +167 -7
- package/src/test-setup.ts +85 -0
- package/src/test-utils.ts +223 -0
- package/tsconfig.json +1 -0
- package/vitest.config.ts +41 -0
- package/webpack.config.js +1 -1
package/src/maquette/h.ts
CHANGED
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
import { VNode, VNodeChild, VNodeProperties } from "./interfaces";
|
|
2
|
-
|
|
3
|
-
let toTextVNode = (data: string): VNode => {
|
|
4
|
-
return {
|
|
5
|
-
vnodeSelector: "",
|
|
6
|
-
properties: undefined,
|
|
7
|
-
children: undefined,
|
|
8
|
-
text: data.toString(),
|
|
9
|
-
domNode: null,
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
let appendChildren = (parentSelector: string, insertions: VNodeChild[], main: VNode[]) => {
|
|
14
|
-
for (let i = 0, length = insertions.length; i < length; i++) {
|
|
15
|
-
let item = insertions[i];
|
|
16
|
-
if (Array.isArray(item)) {
|
|
17
|
-
appendChildren(parentSelector, item, main);
|
|
18
|
-
} else {
|
|
19
|
-
if (item !== null && item !== undefined && item !== false) {
|
|
20
|
-
if (typeof item === "string") {
|
|
21
|
-
item = toTextVNode(item);
|
|
22
|
-
}
|
|
23
|
-
main.push(item);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* The `h` function is used to create a virtual DOM node.
|
|
31
|
-
* This function is largely inspired by the mercuryjs and mithril frameworks.
|
|
32
|
-
* The `h` stands for (virtual) hyperscript.
|
|
33
|
-
*
|
|
34
|
-
* @param selector Contains the tagName, id and fixed css classnames in CSS selector format.
|
|
35
|
-
* It is formatted as follows: `tagname.cssclass1.cssclass2#id`.
|
|
36
|
-
* @param properties An object literal containing properties that will be placed on the DOM node.
|
|
37
|
-
* @param children Virtual DOM nodes and strings to add as child nodes.
|
|
38
|
-
* `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.
|
|
39
|
-
* Nested arrays are flattened, `null` and `undefined` are removed.
|
|
40
|
-
*
|
|
41
|
-
* @returns A VNode object, used to render a real DOM later.
|
|
42
|
-
*
|
|
43
|
-
* NOTE: There are {@link http://maquettejs.org/docs/rules.html two basic rules} you should be aware of when updating the virtual DOM.
|
|
44
|
-
*/
|
|
45
|
-
export function h(
|
|
46
|
-
selector: string,
|
|
47
|
-
properties?: VNodeProperties,
|
|
48
|
-
children?: VNodeChild[] | null
|
|
49
|
-
): VNode;
|
|
50
|
-
/**
|
|
51
|
-
* The `h` function is used to create a virtual DOM node.
|
|
52
|
-
* This function is largely inspired by the mercuryjs and mithril frameworks.
|
|
53
|
-
* The `h` stands for (virtual) hyperscript.
|
|
54
|
-
*
|
|
55
|
-
* @param selector Contains the tagName, id and fixed css classnames in CSS selector format.
|
|
56
|
-
* It is formatted as follows: `tagname.cssclass1.cssclass2#id`.
|
|
57
|
-
* @param children Virtual DOM nodes and strings to add as child nodes.
|
|
58
|
-
* `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.
|
|
59
|
-
* Nested arrays are flattened, `null` and `undefined` are removed.
|
|
60
|
-
*
|
|
61
|
-
* @returns A VNode object, used to render a real DOM later.
|
|
62
|
-
*
|
|
63
|
-
* NOTE: There are {@link http://maquettejs.org/docs/rules.html two basic rules} you should be aware of when updating the virtual DOM.
|
|
64
|
-
*/
|
|
65
|
-
export function h(selector: string, children: VNodeChild[]): VNode;
|
|
66
|
-
|
|
67
|
-
export function h(
|
|
68
|
-
selector: string,
|
|
69
|
-
properties?: VNodeProperties,
|
|
70
|
-
children?: VNodeChild[] | null
|
|
71
|
-
): VNode {
|
|
72
|
-
if (Array.isArray(properties)) {
|
|
73
|
-
children = properties;
|
|
74
|
-
properties = undefined;
|
|
75
|
-
} else if (
|
|
76
|
-
(properties && (typeof (properties as any) === "string" || properties.vnodeSelector)) ||
|
|
77
|
-
(children && (typeof (children as any) === "string" || (children as any).vnodeSelector))
|
|
78
|
-
) {
|
|
79
|
-
throw new Error("h called with invalid arguments");
|
|
80
|
-
}
|
|
81
|
-
let text: string | undefined;
|
|
82
|
-
let flattenedChildren: VNode[] | undefined;
|
|
83
|
-
// Recognize a common special case where there is only a single text node
|
|
84
|
-
if (children && children.length === 1 && typeof children[0] === "string") {
|
|
85
|
-
text = children[0];
|
|
86
|
-
} else if (children) {
|
|
87
|
-
flattenedChildren = [];
|
|
88
|
-
appendChildren(selector, children, flattenedChildren);
|
|
89
|
-
if (flattenedChildren.length === 0) {
|
|
90
|
-
flattenedChildren = undefined;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
return {
|
|
94
|
-
vnodeSelector: selector,
|
|
95
|
-
properties: properties,
|
|
96
|
-
children: flattenedChildren,
|
|
97
|
-
text: text === "" ? undefined : text,
|
|
98
|
-
domNode: null,
|
|
99
|
-
};
|
|
100
|
-
}
|
|
1
|
+
import { VNode, VNodeChild, VNodeProperties } from "./interfaces";
|
|
2
|
+
|
|
3
|
+
let toTextVNode = (data: string): VNode => {
|
|
4
|
+
return {
|
|
5
|
+
vnodeSelector: "",
|
|
6
|
+
properties: undefined,
|
|
7
|
+
children: undefined,
|
|
8
|
+
text: data.toString(),
|
|
9
|
+
domNode: null,
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
let appendChildren = (parentSelector: string, insertions: VNodeChild[], main: VNode[]) => {
|
|
14
|
+
for (let i = 0, length = insertions.length; i < length; i++) {
|
|
15
|
+
let item = insertions[i];
|
|
16
|
+
if (Array.isArray(item)) {
|
|
17
|
+
appendChildren(parentSelector, item, main);
|
|
18
|
+
} else {
|
|
19
|
+
if (item !== null && item !== undefined && item !== false) {
|
|
20
|
+
if (typeof item === "string") {
|
|
21
|
+
item = toTextVNode(item);
|
|
22
|
+
}
|
|
23
|
+
main.push(item);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* The `h` function is used to create a virtual DOM node.
|
|
31
|
+
* This function is largely inspired by the mercuryjs and mithril frameworks.
|
|
32
|
+
* The `h` stands for (virtual) hyperscript.
|
|
33
|
+
*
|
|
34
|
+
* @param selector Contains the tagName, id and fixed css classnames in CSS selector format.
|
|
35
|
+
* It is formatted as follows: `tagname.cssclass1.cssclass2#id`.
|
|
36
|
+
* @param properties An object literal containing properties that will be placed on the DOM node.
|
|
37
|
+
* @param children Virtual DOM nodes and strings to add as child nodes.
|
|
38
|
+
* `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.
|
|
39
|
+
* Nested arrays are flattened, `null` and `undefined` are removed.
|
|
40
|
+
*
|
|
41
|
+
* @returns A VNode object, used to render a real DOM later.
|
|
42
|
+
*
|
|
43
|
+
* NOTE: There are {@link http://maquettejs.org/docs/rules.html two basic rules} you should be aware of when updating the virtual DOM.
|
|
44
|
+
*/
|
|
45
|
+
export function h(
|
|
46
|
+
selector: string,
|
|
47
|
+
properties?: VNodeProperties,
|
|
48
|
+
children?: VNodeChild[] | null
|
|
49
|
+
): VNode;
|
|
50
|
+
/**
|
|
51
|
+
* The `h` function is used to create a virtual DOM node.
|
|
52
|
+
* This function is largely inspired by the mercuryjs and mithril frameworks.
|
|
53
|
+
* The `h` stands for (virtual) hyperscript.
|
|
54
|
+
*
|
|
55
|
+
* @param selector Contains the tagName, id and fixed css classnames in CSS selector format.
|
|
56
|
+
* It is formatted as follows: `tagname.cssclass1.cssclass2#id`.
|
|
57
|
+
* @param children Virtual DOM nodes and strings to add as child nodes.
|
|
58
|
+
* `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.
|
|
59
|
+
* Nested arrays are flattened, `null` and `undefined` are removed.
|
|
60
|
+
*
|
|
61
|
+
* @returns A VNode object, used to render a real DOM later.
|
|
62
|
+
*
|
|
63
|
+
* NOTE: There are {@link http://maquettejs.org/docs/rules.html two basic rules} you should be aware of when updating the virtual DOM.
|
|
64
|
+
*/
|
|
65
|
+
export function h(selector: string, children: VNodeChild[]): VNode;
|
|
66
|
+
|
|
67
|
+
export function h(
|
|
68
|
+
selector: string,
|
|
69
|
+
properties?: VNodeProperties,
|
|
70
|
+
children?: VNodeChild[] | null
|
|
71
|
+
): VNode {
|
|
72
|
+
if (Array.isArray(properties)) {
|
|
73
|
+
children = properties;
|
|
74
|
+
properties = undefined;
|
|
75
|
+
} else if (
|
|
76
|
+
(properties && (typeof (properties as any) === "string" || properties.vnodeSelector)) ||
|
|
77
|
+
(children && (typeof (children as any) === "string" || (children as any).vnodeSelector))
|
|
78
|
+
) {
|
|
79
|
+
throw new Error("h called with invalid arguments");
|
|
80
|
+
}
|
|
81
|
+
let text: string | undefined;
|
|
82
|
+
let flattenedChildren: VNode[] | undefined;
|
|
83
|
+
// Recognize a common special case where there is only a single text node
|
|
84
|
+
if (children && children.length === 1 && typeof children[0] === "string") {
|
|
85
|
+
text = children[0];
|
|
86
|
+
} else if (children) {
|
|
87
|
+
flattenedChildren = [];
|
|
88
|
+
appendChildren(selector, children, flattenedChildren);
|
|
89
|
+
if (flattenedChildren.length === 0) {
|
|
90
|
+
flattenedChildren = undefined;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
return {
|
|
94
|
+
vnodeSelector: selector,
|
|
95
|
+
properties: properties,
|
|
96
|
+
children: flattenedChildren,
|
|
97
|
+
text: text === "" ? undefined : text,
|
|
98
|
+
domNode: null,
|
|
99
|
+
};
|
|
100
|
+
}
|
package/src/maquette/index.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
// Comment that is displayed in the API documentation for the maquette module:
|
|
2
|
-
/**
|
|
3
|
-
* Welcome to the API documentation of the **maquette** library.
|
|
4
|
-
*
|
|
5
|
-
* [[https://maquettejs.org/|To the maquette homepage]]
|
|
6
|
-
*/
|
|
7
|
-
export * from "./interfaces";
|
|
8
|
-
export { dom } from "./dom";
|
|
9
|
-
export { h } from "./h";
|
|
10
|
-
export { createProjector } from "./projector";
|
|
11
|
-
export { createCache } from "./cache";
|
|
12
|
-
export { createMapping } from "./mapping";
|
|
1
|
+
// Comment that is displayed in the API documentation for the maquette module:
|
|
2
|
+
/**
|
|
3
|
+
* Welcome to the API documentation of the **maquette** library.
|
|
4
|
+
*
|
|
5
|
+
* [[https://maquettejs.org/|To the maquette homepage]]
|
|
6
|
+
*/
|
|
7
|
+
export * from "./interfaces";
|
|
8
|
+
export { dom } from "./dom";
|
|
9
|
+
export { h } from "./h";
|
|
10
|
+
export { createProjector } from "./projector";
|
|
11
|
+
export { createCache } from "./cache";
|
|
12
|
+
export { createMapping } from "./mapping";
|