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.
Files changed (82) hide show
  1. package/.editorconfig +17 -17
  2. package/.gitlab-ci.yml +18 -18
  3. package/CHANGELOG.md +201 -0
  4. package/demo/sample.js +1 -1
  5. package/demo/screen.css +16 -16
  6. package/demo/theme.css +1 -0
  7. package/dist/p-elements-core-modern.js +1 -1
  8. package/dist/p-elements-core.js +1 -1
  9. package/docs/package-lock.json +6897 -6897
  10. package/docs/package.json +27 -27
  11. package/docs/src/404.md +8 -8
  12. package/docs/src/_data/demos/hello-world/hello-world.tsx +35 -35
  13. package/docs/src/_data/demos/hello-world/index.html +10 -10
  14. package/docs/src/_data/demos/hello-world/project.json +7 -7
  15. package/docs/src/_data/demos/timer/demo-timer.tsx +120 -120
  16. package/docs/src/_data/demos/timer/icons.tsx +62 -62
  17. package/docs/src/_data/demos/timer/index.html +12 -12
  18. package/docs/src/_data/demos/timer/project.json +8 -8
  19. package/docs/src/_data/global.js +13 -13
  20. package/docs/src/_data/helpers.js +19 -19
  21. package/docs/src/_includes/layouts/base.njk +30 -30
  22. package/docs/src/_includes/layouts/playground.njk +40 -40
  23. package/docs/src/_includes/partials/app-header.njk +8 -8
  24. package/docs/src/_includes/partials/head.njk +14 -14
  25. package/docs/src/_includes/partials/nav.njk +19 -19
  26. package/docs/src/_includes/partials/top-nav.njk +51 -51
  27. package/docs/src/documentation/custom-element.md +221 -221
  28. package/docs/src/documentation/decorators/bind.md +71 -71
  29. package/docs/src/documentation/decorators/custom-element-config.md +63 -63
  30. package/docs/src/documentation/decorators/property.md +83 -83
  31. package/docs/src/documentation/decorators/query.md +66 -66
  32. package/docs/src/documentation/decorators/render-property-on-set.md +60 -60
  33. package/docs/src/documentation/decorators.md +9 -9
  34. package/docs/src/documentation/reactive-properties.md +53 -53
  35. package/docs/src/index.d.ts +25 -25
  36. package/docs/src/index.md +3 -3
  37. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css +78 -78
  38. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx +166 -166
  39. package/docs/src/scripts/components/app-playground/app-playground.tsx +189 -189
  40. package/docs/tsconfig.json +22 -22
  41. package/index.html +15 -2
  42. package/p-elements-core.d.ts +11 -1
  43. package/package.json +11 -4
  44. package/readme.md +206 -206
  45. package/src/custom-element-controller.test.ts +226 -0
  46. package/src/custom-element-controller.ts +31 -31
  47. package/src/custom-element.test.ts +906 -0
  48. package/src/custom-element.ts +471 -188
  49. package/src/custom-style-element.ts +4 -1
  50. package/src/decorators/bind.test.ts +163 -0
  51. package/src/decorators/bind.ts +46 -46
  52. package/src/decorators/custom-element-config.ts +17 -17
  53. package/src/decorators/property.test.ts +279 -0
  54. package/src/decorators/property.ts +822 -150
  55. package/src/decorators/query.test.ts +146 -0
  56. package/src/decorators/query.ts +12 -12
  57. package/src/decorators/render-property-on-set.ts +3 -3
  58. package/src/helpers/css.test.ts +150 -0
  59. package/src/helpers/css.ts +71 -71
  60. package/src/maquette/cache.test.ts +150 -0
  61. package/src/maquette/cache.ts +35 -35
  62. package/src/maquette/dom.test.ts +263 -0
  63. package/src/maquette/dom.ts +115 -115
  64. package/src/maquette/h.test.ts +165 -0
  65. package/src/maquette/h.ts +100 -100
  66. package/src/maquette/index.ts +12 -12
  67. package/src/maquette/interfaces.ts +536 -536
  68. package/src/maquette/jsx.ts +61 -61
  69. package/src/maquette/mapping.test.ts +294 -0
  70. package/src/maquette/mapping.ts +56 -56
  71. package/src/maquette/maquette.test.ts +493 -0
  72. package/src/maquette/projection.test.ts +366 -0
  73. package/src/maquette/projection.ts +666 -666
  74. package/src/maquette/projector.test.ts +351 -0
  75. package/src/maquette/projector.ts +200 -200
  76. package/src/sample/mixin/highlight.tsx +33 -32
  77. package/src/sample/sample.tsx +167 -7
  78. package/src/test-setup.ts +85 -0
  79. package/src/test-utils.ts +223 -0
  80. package/tsconfig.json +1 -0
  81. package/vitest.config.ts +41 -0
  82. 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
+ }
@@ -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";