@joist/element 4.0.0-next.12 → 4.0.0-next.15
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/package.json +1 -1
- package/src/lib/listen.ts +4 -4
- package/src/lib/metadata.ts +7 -7
- package/src/lib/template.test.ts +30 -2
- package/src/lib/template.ts +19 -16
- package/target/lib/listen.d.ts +1 -1
- package/target/lib/listen.js.map +1 -1
- package/target/lib/metadata.d.ts +7 -7
- package/target/lib/metadata.js.map +1 -1
- package/target/lib/template.d.ts +3 -1
- package/target/lib/template.js +15 -11
- package/target/lib/template.js.map +1 -1
- package/target/lib/template.test.js +23 -2
- package/target/lib/template.test.js.map +1 -1
package/package.json
CHANGED
package/src/lib/listen.ts
CHANGED
|
@@ -2,16 +2,16 @@ import { ListenerSelector, metadataStore } from './metadata.js';
|
|
|
2
2
|
|
|
3
3
|
export function listen<This extends HTMLElement>(
|
|
4
4
|
event: string,
|
|
5
|
-
selector?: ListenerSelector | string
|
|
5
|
+
selector?: ListenerSelector<This> | string
|
|
6
6
|
) {
|
|
7
7
|
return function listenDecorator(value: (e: any) => void, ctx: ClassMethodDecoratorContext<This>) {
|
|
8
|
-
const metadata = metadataStore.read(ctx.metadata);
|
|
8
|
+
const metadata = metadataStore.read<This>(ctx.metadata);
|
|
9
9
|
|
|
10
|
-
let selectorInternal: ListenerSelector = (el
|
|
10
|
+
let selectorInternal: ListenerSelector<This> = (el) => el.shadowRoot ?? el;
|
|
11
11
|
|
|
12
12
|
if (selector) {
|
|
13
13
|
if (typeof selector === 'string') {
|
|
14
|
-
selectorInternal = (el:
|
|
14
|
+
selectorInternal = (el: This) => {
|
|
15
15
|
if (el.shadowRoot) {
|
|
16
16
|
return el.shadowRoot.querySelector(selector);
|
|
17
17
|
}
|
package/src/lib/metadata.ts
CHANGED
|
@@ -6,22 +6,22 @@ export interface AttrDef {
|
|
|
6
6
|
observe: boolean;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export type ListenerSelector = (el:
|
|
9
|
+
export type ListenerSelector<T> = (el: T) => Element | ShadowRoot | null;
|
|
10
10
|
|
|
11
|
-
export interface Listener {
|
|
11
|
+
export interface Listener<T> {
|
|
12
12
|
event: string;
|
|
13
13
|
cb: (e: Event) => void;
|
|
14
|
-
selector: ListenerSelector
|
|
14
|
+
selector: ListenerSelector<T>;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
export class ElementMetadata {
|
|
17
|
+
export class ElementMetadata<T> {
|
|
18
18
|
attrs: AttrDef[] = [];
|
|
19
|
-
listeners: Listener[] = [];
|
|
19
|
+
listeners: Listener<T>[] = [];
|
|
20
20
|
onReady = new Set<Function>();
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
export class MetadataStore extends WeakMap<object, ElementMetadata
|
|
24
|
-
read(value: object) {
|
|
23
|
+
export class MetadataStore extends WeakMap<object, ElementMetadata<unknown>> {
|
|
24
|
+
read<T>(value: object): ElementMetadata<T> {
|
|
25
25
|
if (!this.has(value)) {
|
|
26
26
|
this.set(value, new ElementMetadata());
|
|
27
27
|
}
|
package/src/lib/template.test.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { template } from './template.js';
|
|
|
4
4
|
|
|
5
5
|
// Run all tests with both shadow and light dom
|
|
6
6
|
const TESTS = [
|
|
7
|
-
function
|
|
7
|
+
function bindableNodes(el: HTMLElement, root: HTMLElement | ShadowRoot) {
|
|
8
8
|
it(`should intialize bindable nodes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
|
|
9
9
|
el.title = 'Hello World';
|
|
10
10
|
el.ariaLabel = 'This is the label';
|
|
@@ -32,7 +32,7 @@ const TESTS = [
|
|
|
32
32
|
);
|
|
33
33
|
});
|
|
34
34
|
},
|
|
35
|
-
function
|
|
35
|
+
function attributeNodes(el: HTMLElement, root: HTMLElement | ShadowRoot) {
|
|
36
36
|
it(`should intialize template attributes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
|
|
37
37
|
el.ariaLabel = 'This is the label';
|
|
38
38
|
el.ariaDescription = 'This is the description';
|
|
@@ -83,6 +83,34 @@ const TESTS = [
|
|
|
83
83
|
'<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>'
|
|
84
84
|
);
|
|
85
85
|
});
|
|
86
|
+
},
|
|
87
|
+
function customPrefix(el: HTMLElement, root: HTMLElement | ShadowRoot) {
|
|
88
|
+
it(`should use custom getter for values ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
|
|
89
|
+
el.title = 'Hello World';
|
|
90
|
+
el.ariaLabel = 'This is the label';
|
|
91
|
+
el.ariaDescription = 'This is the description';
|
|
92
|
+
|
|
93
|
+
root.innerHTML = /*html*/ `
|
|
94
|
+
<span x-bind="title"></span>
|
|
95
|
+
|
|
96
|
+
<ul x-aria-label="ariaLabel">
|
|
97
|
+
<li x-bind="ariaLabel"></li>
|
|
98
|
+
<li x-bind="ariaDescription"></li>
|
|
99
|
+
</ul>
|
|
100
|
+
`;
|
|
101
|
+
|
|
102
|
+
const render = template({ tokenPrefix: 'x-' }).bind(el);
|
|
103
|
+
|
|
104
|
+
render();
|
|
105
|
+
|
|
106
|
+
assert.equal(
|
|
107
|
+
root.innerHTML
|
|
108
|
+
.split('\n')
|
|
109
|
+
.map((res) => res.trim())
|
|
110
|
+
.join(''),
|
|
111
|
+
'<span x-bind="title">Hello World</span><ul x-aria-label="ariaLabel" aria-label="This is the label"><li x-bind="ariaLabel">This is the label</li><li x-bind="ariaDescription">This is the description</li></ul>'
|
|
112
|
+
);
|
|
113
|
+
});
|
|
86
114
|
}
|
|
87
115
|
];
|
|
88
116
|
|
package/src/lib/template.ts
CHANGED
|
@@ -1,25 +1,26 @@
|
|
|
1
|
-
const TOKEN_PREFIX = '#:';
|
|
2
|
-
|
|
3
1
|
type Updater = () => void;
|
|
4
2
|
class Updates extends Set<Updater> {}
|
|
5
3
|
type TemplateValueGetter = (key: string) => string;
|
|
6
4
|
|
|
7
5
|
export interface TemplateOpts {
|
|
8
6
|
value?: TemplateValueGetter;
|
|
7
|
+
tokenPrefix?: string;
|
|
9
8
|
}
|
|
10
9
|
|
|
11
|
-
export interface RenderOpts {
|
|
10
|
+
export interface RenderOpts {
|
|
11
|
+
refresh?: boolean;
|
|
12
|
+
}
|
|
12
13
|
|
|
13
|
-
export function template(
|
|
14
|
+
export function template({ tokenPrefix = '#:', value }: TemplateOpts = {}) {
|
|
14
15
|
// Track all nodes that can be updated and their associated property
|
|
15
16
|
let updates: Updates | null = null;
|
|
16
17
|
|
|
17
|
-
return function render<T extends HTMLElement>(this: T) {
|
|
18
|
-
if (!updates) {
|
|
19
|
-
updates = findUpdates(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
);
|
|
18
|
+
return function render<T extends HTMLElement>(this: T, opts?: RenderOpts) {
|
|
19
|
+
if (!updates || opts?.refresh) {
|
|
20
|
+
updates = findUpdates(this, {
|
|
21
|
+
tokenPrefix,
|
|
22
|
+
value: value ?? ((key: string) => getTemplateValue(this, key))
|
|
23
|
+
});
|
|
23
24
|
} else {
|
|
24
25
|
for (let update of updates) {
|
|
25
26
|
update();
|
|
@@ -28,12 +29,12 @@ export function template(templateOpts?: TemplateOpts) {
|
|
|
28
29
|
};
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
function findUpdates(el: HTMLElement,
|
|
32
|
+
function findUpdates(el: HTMLElement, opts: Required<TemplateOpts>): Updates {
|
|
32
33
|
const iterator = document.createTreeWalker(el.shadowRoot ?? el, NodeFilter.SHOW_ELEMENT);
|
|
33
34
|
const updates = new Updates();
|
|
34
35
|
|
|
35
36
|
while (iterator.nextNode()) {
|
|
36
|
-
const res = trackElement(iterator.currentNode, updates,
|
|
37
|
+
const res = trackElement(iterator.currentNode, updates, opts);
|
|
37
38
|
|
|
38
39
|
if (res !== null) {
|
|
39
40
|
iterator.currentNode = res;
|
|
@@ -46,16 +47,18 @@ function findUpdates(el: HTMLElement, getter: TemplateValueGetter): Updates {
|
|
|
46
47
|
/**
|
|
47
48
|
* configures and tracks a given Node so that it can be updated in place later.
|
|
48
49
|
*/
|
|
49
|
-
function trackElement(node: Node, updates: Updates,
|
|
50
|
+
function trackElement(node: Node, updates: Updates, opts: Required<TemplateOpts>): Node | null {
|
|
50
51
|
const element = node as Element;
|
|
52
|
+
const getter = opts.value;
|
|
53
|
+
const tokenPrefix = opts.tokenPrefix;
|
|
51
54
|
|
|
52
55
|
for (let attr of element.attributes) {
|
|
53
56
|
const nodeValue = attr.value.trim();
|
|
54
|
-
const realAttributeName = attr.name.replace(
|
|
57
|
+
const realAttributeName = attr.name.replace(tokenPrefix, '');
|
|
55
58
|
|
|
56
59
|
let update: Updater | null = null;
|
|
57
60
|
|
|
58
|
-
if (attr.name.startsWith(`${
|
|
61
|
+
if (attr.name.startsWith(`${tokenPrefix}bind`)) {
|
|
59
62
|
update = () => {
|
|
60
63
|
const value = getter(attr.value);
|
|
61
64
|
|
|
@@ -63,7 +66,7 @@ function trackElement(node: Node, updates: Updates, getter: TemplateValueGetter)
|
|
|
63
66
|
element.textContent = getter(attr.value);
|
|
64
67
|
}
|
|
65
68
|
};
|
|
66
|
-
} else if (attr.name.startsWith(
|
|
69
|
+
} else if (attr.name.startsWith(tokenPrefix)) {
|
|
67
70
|
const isBooleanAttr = nodeValue.startsWith('!');
|
|
68
71
|
const isPositive = nodeValue.startsWith('!!');
|
|
69
72
|
const propertyKey = nodeValue.replaceAll('!', '');
|
package/target/lib/listen.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ListenerSelector } from './metadata.js';
|
|
2
|
-
export declare function listen<This extends HTMLElement>(event: string, selector?: ListenerSelector | string): (value: (e: any) => void, ctx: ClassMethodDecoratorContext<This>) => void;
|
|
2
|
+
export declare function listen<This extends HTMLElement>(event: string, selector?: ListenerSelector<This> | string): (value: (e: any) => void, ctx: ClassMethodDecoratorContext<This>) => void;
|
package/target/lib/listen.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,UAAU,MAAM,CACpB,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,UAAU,MAAM,CACpB,KAAa,EACb,QAA0C;IAE1C,OAAO,SAAS,eAAe,CAAC,KAAuB,EAAE,GAAsC;QAC7F,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QAExD,IAAI,gBAAgB,GAA2B,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC;QAE3E,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBACjC,gBAAgB,GAAG,CAAC,EAAQ,EAAE,EAAE;oBAC9B,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;wBAClB,OAAO,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC/C,CAAC;oBAED,OAAO,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACpC,CAAC,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,gBAAgB,GAAG,QAAQ,CAAC;YAC9B,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC;YACtB,KAAK;YACL,EAAE,EAAE,KAAK;YACT,QAAQ,EAAE,gBAAgB;SAC3B,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
|
package/target/lib/metadata.d.ts
CHANGED
|
@@ -3,18 +3,18 @@ export interface AttrDef {
|
|
|
3
3
|
attrName: string;
|
|
4
4
|
observe: boolean;
|
|
5
5
|
}
|
|
6
|
-
export type ListenerSelector = (el:
|
|
7
|
-
export interface Listener {
|
|
6
|
+
export type ListenerSelector<T> = (el: T) => Element | ShadowRoot | null;
|
|
7
|
+
export interface Listener<T> {
|
|
8
8
|
event: string;
|
|
9
9
|
cb: (e: Event) => void;
|
|
10
|
-
selector: ListenerSelector
|
|
10
|
+
selector: ListenerSelector<T>;
|
|
11
11
|
}
|
|
12
|
-
export declare class ElementMetadata {
|
|
12
|
+
export declare class ElementMetadata<T> {
|
|
13
13
|
attrs: AttrDef[];
|
|
14
|
-
listeners: Listener[];
|
|
14
|
+
listeners: Listener<T>[];
|
|
15
15
|
onReady: Set<Function>;
|
|
16
16
|
}
|
|
17
|
-
export declare class MetadataStore extends WeakMap<object, ElementMetadata
|
|
18
|
-
read(value: object): ElementMetadata
|
|
17
|
+
export declare class MetadataStore extends WeakMap<object, ElementMetadata<unknown>> {
|
|
18
|
+
read<T>(value: object): ElementMetadata<T>;
|
|
19
19
|
}
|
|
20
20
|
export declare const metadataStore: MetadataStore;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAgBvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,
|
|
1
|
+
{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAgBvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,GAAkB,EAAE,CAAC;IAC9B,OAAO,GAAG,IAAI,GAAG,EAAY,CAAC;CAC/B;AAED,MAAM,OAAO,aAAc,SAAQ,OAAyC;IAC1E,IAAI,CAAI,KAAa;QACnB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}
|
package/target/lib/template.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
type TemplateValueGetter = (key: string) => string;
|
|
2
2
|
export interface TemplateOpts {
|
|
3
3
|
value?: TemplateValueGetter;
|
|
4
|
+
tokenPrefix?: string;
|
|
4
5
|
}
|
|
5
6
|
export interface RenderOpts {
|
|
7
|
+
refresh?: boolean;
|
|
6
8
|
}
|
|
7
|
-
export declare function template(
|
|
9
|
+
export declare function template({ tokenPrefix, value }?: TemplateOpts): <T extends HTMLElement>(this: T, opts?: RenderOpts) => void;
|
|
8
10
|
export declare function getTemplateValue(obj: object, key: string): any;
|
|
9
11
|
export {};
|
package/target/lib/template.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
const TOKEN_PREFIX = '#:';
|
|
2
1
|
class Updates extends Set {
|
|
3
2
|
}
|
|
4
|
-
export function template(
|
|
3
|
+
export function template({ tokenPrefix = '#:', value } = {}) {
|
|
5
4
|
let updates = null;
|
|
6
|
-
return function render() {
|
|
7
|
-
if (!updates) {
|
|
8
|
-
updates = findUpdates(this,
|
|
5
|
+
return function render(opts) {
|
|
6
|
+
if (!updates || opts?.refresh) {
|
|
7
|
+
updates = findUpdates(this, {
|
|
8
|
+
tokenPrefix,
|
|
9
|
+
value: value ?? ((key) => getTemplateValue(this, key))
|
|
10
|
+
});
|
|
9
11
|
}
|
|
10
12
|
else {
|
|
11
13
|
for (let update of updates) {
|
|
@@ -14,24 +16,26 @@ export function template(templateOpts) {
|
|
|
14
16
|
}
|
|
15
17
|
};
|
|
16
18
|
}
|
|
17
|
-
function findUpdates(el,
|
|
19
|
+
function findUpdates(el, opts) {
|
|
18
20
|
const iterator = document.createTreeWalker(el.shadowRoot ?? el, NodeFilter.SHOW_ELEMENT);
|
|
19
21
|
const updates = new Updates();
|
|
20
22
|
while (iterator.nextNode()) {
|
|
21
|
-
const res = trackElement(iterator.currentNode, updates,
|
|
23
|
+
const res = trackElement(iterator.currentNode, updates, opts);
|
|
22
24
|
if (res !== null) {
|
|
23
25
|
iterator.currentNode = res;
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
return updates;
|
|
27
29
|
}
|
|
28
|
-
function trackElement(node, updates,
|
|
30
|
+
function trackElement(node, updates, opts) {
|
|
29
31
|
const element = node;
|
|
32
|
+
const getter = opts.value;
|
|
33
|
+
const tokenPrefix = opts.tokenPrefix;
|
|
30
34
|
for (let attr of element.attributes) {
|
|
31
35
|
const nodeValue = attr.value.trim();
|
|
32
|
-
const realAttributeName = attr.name.replace(
|
|
36
|
+
const realAttributeName = attr.name.replace(tokenPrefix, '');
|
|
33
37
|
let update = null;
|
|
34
|
-
if (attr.name.startsWith(`${
|
|
38
|
+
if (attr.name.startsWith(`${tokenPrefix}bind`)) {
|
|
35
39
|
update = () => {
|
|
36
40
|
const value = getter(attr.value);
|
|
37
41
|
if (element.textContent !== value) {
|
|
@@ -39,7 +43,7 @@ function trackElement(node, updates, getter) {
|
|
|
39
43
|
}
|
|
40
44
|
};
|
|
41
45
|
}
|
|
42
|
-
else if (attr.name.startsWith(
|
|
46
|
+
else if (attr.name.startsWith(tokenPrefix)) {
|
|
43
47
|
const isBooleanAttr = nodeValue.startsWith('!');
|
|
44
48
|
const isPositive = nodeValue.startsWith('!!');
|
|
45
49
|
const propertyKey = nodeValue.replaceAll('!', '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/lib/template.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/lib/template.ts"],"names":[],"mappings":"AACA,MAAM,OAAQ,SAAQ,GAAY;CAAG;AAYrC,MAAM,UAAU,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,KAAK,KAAmB,EAAE;IAEvE,IAAI,OAAO,GAAmB,IAAI,CAAC;IAEnC,OAAO,SAAS,MAAM,CAAiC,IAAiB;QACtE,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;YAC9B,OAAO,GAAG,WAAW,CAAC,IAAI,EAAE;gBAC1B,WAAW;gBACX,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;aAC/D,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,KAAK,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC3B,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC;IACH,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAe,EAAE,IAA4B;IAChE,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACzF,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;IAE9B,OAAO,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC3B,MAAM,GAAG,GAAG,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QAE9D,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;YACjB,QAAQ,CAAC,WAAW,GAAG,GAAG,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAKD,SAAS,YAAY,CAAC,IAAU,EAAE,OAAgB,EAAE,IAA4B;IAC9E,MAAM,OAAO,GAAG,IAAe,CAAC;IAChC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1B,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IAErC,KAAK,IAAI,IAAI,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;QACpC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACpC,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QAE7D,IAAI,MAAM,GAAmB,IAAI,CAAC;QAElC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW,MAAM,CAAC,EAAE,CAAC;YAC/C,MAAM,GAAG,GAAG,EAAE;gBACZ,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAEjC,IAAI,OAAO,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;oBAClC,OAAO,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7C,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;YAChD,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC9C,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAElD,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,GAAG,GAAG,EAAE;oBACZ,IAAI,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;oBAEtE,IAAI,KAAK,EAAE,CAAC;wBACV,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;oBAC9C,CAAC;yBAAM,CAAC;wBACN,OAAO,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;oBAC7C,CAAC;gBACH,CAAC,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,MAAM,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;gBAClE,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;gBAExC,MAAM,GAAG,GAAG,EAAE;oBACZ,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;oBAEhC,IAAI,aAAa,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;wBAClC,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;oBAC9B,CAAC;gBACH,CAAC,CAAC;YACJ,CAAC;QACH,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEpB,MAAM,EAAE,CAAC;QACX,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,GAAW,EAAE,GAAW;IACvD,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE9B,IAAI,OAAO,GAAQ,GAAG,CAAC;IAEvB,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { assert } from 'chai';
|
|
2
2
|
import { template } from './template.js';
|
|
3
3
|
const TESTS = [
|
|
4
|
-
function
|
|
4
|
+
function bindableNodes(el, root) {
|
|
5
5
|
it(`should intialize bindable nodes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
|
|
6
6
|
el.title = 'Hello World';
|
|
7
7
|
el.ariaLabel = 'This is the label';
|
|
@@ -22,7 +22,7 @@ const TESTS = [
|
|
|
22
22
|
.join(''), '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>');
|
|
23
23
|
});
|
|
24
24
|
},
|
|
25
|
-
function
|
|
25
|
+
function attributeNodes(el, root) {
|
|
26
26
|
it(`should intialize template attributes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
|
|
27
27
|
el.ariaLabel = 'This is the label';
|
|
28
28
|
el.ariaDescription = 'This is the description';
|
|
@@ -59,6 +59,27 @@ const TESTS = [
|
|
|
59
59
|
.map((res) => res.trim())
|
|
60
60
|
.join(''), '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>');
|
|
61
61
|
});
|
|
62
|
+
},
|
|
63
|
+
function customPrefix(el, root) {
|
|
64
|
+
it(`should use custom getter for values ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
|
|
65
|
+
el.title = 'Hello World';
|
|
66
|
+
el.ariaLabel = 'This is the label';
|
|
67
|
+
el.ariaDescription = 'This is the description';
|
|
68
|
+
root.innerHTML = `
|
|
69
|
+
<span x-bind="title"></span>
|
|
70
|
+
|
|
71
|
+
<ul x-aria-label="ariaLabel">
|
|
72
|
+
<li x-bind="ariaLabel"></li>
|
|
73
|
+
<li x-bind="ariaDescription"></li>
|
|
74
|
+
</ul>
|
|
75
|
+
`;
|
|
76
|
+
const render = template({ tokenPrefix: 'x-' }).bind(el);
|
|
77
|
+
render();
|
|
78
|
+
assert.equal(root.innerHTML
|
|
79
|
+
.split('\n')
|
|
80
|
+
.map((res) => res.trim())
|
|
81
|
+
.join(''), '<span x-bind="title">Hello World</span><ul x-aria-label="ariaLabel" aria-label="This is the label"><li x-bind="ariaLabel">This is the label</li><li x-bind="ariaDescription">This is the description</li></ul>');
|
|
82
|
+
});
|
|
62
83
|
}
|
|
63
84
|
];
|
|
64
85
|
for (let test of TESTS) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.test.js","sourceRoot":"","sources":["../../src/lib/template.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,KAAK,GAAG;IACZ,SAAS,
|
|
1
|
+
{"version":3,"file":"template.test.js","sourceRoot":"","sources":["../../src/lib/template.test.ts"],"names":[],"mappings":"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"}
|