@roots/bud-client 2023.9.4-8 → 2023.9.5-7
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/lib/hot/components/indicator/indicator.component.d.ts +14 -14
- package/lib/hot/components/indicator/indicator.component.js +36 -36
- package/lib/hot/components/overlay/overlay.component.d.ts +1 -1
- package/lib/hot/components/overlay/overlay.component.js +3 -3
- package/lib/hot/events.js +11 -11
- package/package.json +2 -2
- package/src/hot/components/indicator/indicator.component.ts +43 -48
- package/src/hot/components/overlay/overlay.component.ts +3 -4
- package/src/hot/events.ts +14 -15
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Indicator web component
|
|
4
4
|
*/
|
|
5
5
|
export declare class Component extends HTMLElement {
|
|
6
|
+
static get observedAttributes(): string[];
|
|
6
7
|
/**
|
|
7
8
|
* Status indicator colors
|
|
8
9
|
*/
|
|
@@ -23,20 +24,6 @@ export declare class Component extends HTMLElement {
|
|
|
23
24
|
* Class constructor
|
|
24
25
|
*/
|
|
25
26
|
constructor();
|
|
26
|
-
static get observedAttributes(): string[];
|
|
27
|
-
attributeChangedCallback(): void;
|
|
28
|
-
/**
|
|
29
|
-
* Get accessor: has errors
|
|
30
|
-
*/
|
|
31
|
-
get hasErrors(): boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Get accessor: has warnings
|
|
34
|
-
*/
|
|
35
|
-
get hasWarnings(): boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Hide status indicator
|
|
38
|
-
*/
|
|
39
|
-
hide(): void;
|
|
40
27
|
/**
|
|
41
28
|
* Status is error
|
|
42
29
|
*/
|
|
@@ -53,6 +40,19 @@ export declare class Component extends HTMLElement {
|
|
|
53
40
|
* Status is warning
|
|
54
41
|
*/
|
|
55
42
|
onWarning(): void;
|
|
43
|
+
attributeChangedCallback(): void;
|
|
44
|
+
/**
|
|
45
|
+
* Get accessor: has errors
|
|
46
|
+
*/
|
|
47
|
+
get hasErrors(): boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Get accessor: has warnings
|
|
50
|
+
*/
|
|
51
|
+
get hasWarnings(): boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Hide status indicator
|
|
54
|
+
*/
|
|
55
|
+
hide(): void;
|
|
56
56
|
/**
|
|
57
57
|
* Render status indicator
|
|
58
58
|
*/
|
|
@@ -3,6 +3,9 @@ import { pulse } from './indicator.pulse.js';
|
|
|
3
3
|
* Indicator web component
|
|
4
4
|
*/
|
|
5
5
|
export class Component extends HTMLElement {
|
|
6
|
+
static get observedAttributes() {
|
|
7
|
+
return [`has-errors`, `has-warnings`, `action`];
|
|
8
|
+
}
|
|
6
9
|
/**
|
|
7
10
|
* Class constructor
|
|
8
11
|
*/
|
|
@@ -23,42 +26,6 @@ export class Component extends HTMLElement {
|
|
|
23
26
|
this.name = `bud-activity-indicator`;
|
|
24
27
|
this.renderShadow();
|
|
25
28
|
}
|
|
26
|
-
static get observedAttributes() {
|
|
27
|
-
return [`has-errors`, `has-warnings`, `action`];
|
|
28
|
-
}
|
|
29
|
-
attributeChangedCallback() {
|
|
30
|
-
if (this.hasAttribute(`has-errors`))
|
|
31
|
-
return this.onError();
|
|
32
|
-
if (this.hasAttribute(`has-warnings`))
|
|
33
|
-
return this.onWarning();
|
|
34
|
-
if (!this.hasAttribute(`has-errors`) &&
|
|
35
|
-
!this.hasAttribute(`has-warnings`) &&
|
|
36
|
-
this.getAttribute(`action`) === `built`)
|
|
37
|
-
return this.onSuccess();
|
|
38
|
-
if (this.getAttribute(`action`) == `building` ||
|
|
39
|
-
this.getAttribute(`action`) == `sync`)
|
|
40
|
-
return this.onPending();
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Get accessor: has errors
|
|
44
|
-
*/
|
|
45
|
-
get hasErrors() {
|
|
46
|
-
return this.getAttribute(`has-errors`) == `true`;
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* Get accessor: has warnings
|
|
50
|
-
*/
|
|
51
|
-
get hasWarnings() {
|
|
52
|
-
return this.getAttribute(`has-warnings`) == `true`;
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Hide status indicator
|
|
56
|
-
*/
|
|
57
|
-
hide() {
|
|
58
|
-
this.hideTimeout = setTimeout(() => {
|
|
59
|
-
this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
|
|
60
|
-
}, 2000);
|
|
61
|
-
}
|
|
62
29
|
/**
|
|
63
30
|
* Status is error
|
|
64
31
|
*/
|
|
@@ -101,6 +68,39 @@ export class Component extends HTMLElement {
|
|
|
101
68
|
.classList.remove(`error`, `success`, `pending`);
|
|
102
69
|
this.shadowRoot.querySelector(this.selector).classList.add(`warning`);
|
|
103
70
|
}
|
|
71
|
+
attributeChangedCallback() {
|
|
72
|
+
if (this.hasAttribute(`has-errors`))
|
|
73
|
+
return this.onError();
|
|
74
|
+
if (this.hasAttribute(`has-warnings`))
|
|
75
|
+
return this.onWarning();
|
|
76
|
+
if (!this.hasAttribute(`has-errors`) &&
|
|
77
|
+
!this.hasAttribute(`has-warnings`) &&
|
|
78
|
+
this.getAttribute(`action`) === `built`)
|
|
79
|
+
return this.onSuccess();
|
|
80
|
+
if (this.getAttribute(`action`) == `building` ||
|
|
81
|
+
this.getAttribute(`action`) == `sync`)
|
|
82
|
+
return this.onPending();
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Get accessor: has errors
|
|
86
|
+
*/
|
|
87
|
+
get hasErrors() {
|
|
88
|
+
return this.getAttribute(`has-errors`) == `true`;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Get accessor: has warnings
|
|
92
|
+
*/
|
|
93
|
+
get hasWarnings() {
|
|
94
|
+
return this.getAttribute(`has-warnings`) == `true`;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Hide status indicator
|
|
98
|
+
*/
|
|
99
|
+
hide() {
|
|
100
|
+
this.hideTimeout = setTimeout(() => {
|
|
101
|
+
this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
|
|
102
|
+
}, 2000);
|
|
103
|
+
}
|
|
104
104
|
/**
|
|
105
105
|
* Render status indicator
|
|
106
106
|
*/
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Component container
|
|
3
3
|
*/
|
|
4
4
|
export declare class Component extends HTMLElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
5
6
|
documentBodyStyle: any;
|
|
6
7
|
name: string;
|
|
7
8
|
/**
|
|
@@ -9,7 +10,6 @@ export declare class Component extends HTMLElement {
|
|
|
9
10
|
*/
|
|
10
11
|
payload: any;
|
|
11
12
|
constructor();
|
|
12
|
-
static get observedAttributes(): string[];
|
|
13
13
|
attributeChangedCallback(): void;
|
|
14
14
|
connectedCallback(): void;
|
|
15
15
|
get message(): string;
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
* Component container
|
|
3
3
|
*/
|
|
4
4
|
export class Component extends HTMLElement {
|
|
5
|
+
static get observedAttributes() {
|
|
6
|
+
return [`message`];
|
|
7
|
+
}
|
|
5
8
|
constructor() {
|
|
6
9
|
super();
|
|
7
10
|
this.name = `bud-overlay`;
|
|
8
11
|
this.renderShadow();
|
|
9
12
|
}
|
|
10
|
-
static get observedAttributes() {
|
|
11
|
-
return [`message`];
|
|
12
|
-
}
|
|
13
13
|
attributeChangedCallback() {
|
|
14
14
|
if (!this.documentBodyStyle)
|
|
15
15
|
this.documentBodyStyle = document.body?.style;
|
package/lib/hot/events.js
CHANGED
|
@@ -7,6 +7,17 @@ export const injectEvents = (eventSource) => {
|
|
|
7
7
|
* mocking in tests
|
|
8
8
|
*/
|
|
9
9
|
return class Events extends eventSource {
|
|
10
|
+
/**
|
|
11
|
+
* Singleton constructor
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
14
|
+
static make(options) {
|
|
15
|
+
if (typeof window.bud.hmr[options.name] === `undefined`)
|
|
16
|
+
Object.assign(window.bud.hmr, {
|
|
17
|
+
[options.name]: new Events(options),
|
|
18
|
+
});
|
|
19
|
+
return window.bud.hmr[options.name];
|
|
20
|
+
}
|
|
10
21
|
/**
|
|
11
22
|
* Class constructor
|
|
12
23
|
*
|
|
@@ -46,17 +57,6 @@ export const injectEvents = (eventSource) => {
|
|
|
46
57
|
this.onmessage = this.onmessage.bind(this);
|
|
47
58
|
this.addListener = this.addListener.bind(this);
|
|
48
59
|
}
|
|
49
|
-
/**
|
|
50
|
-
* Singleton constructor
|
|
51
|
-
*
|
|
52
|
-
*/
|
|
53
|
-
static make(options) {
|
|
54
|
-
if (typeof window.bud.hmr[options.name] === `undefined`)
|
|
55
|
-
Object.assign(window.bud.hmr, {
|
|
56
|
-
[options.name]: new Events(options),
|
|
57
|
-
});
|
|
58
|
-
return window.bud.hmr[options.name];
|
|
59
|
-
}
|
|
60
60
|
/**
|
|
61
61
|
* EventSource `addMessageListener` handler
|
|
62
62
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roots/bud-client",
|
|
3
|
-
"version": "2023.9.
|
|
3
|
+
"version": "2023.9.5-7",
|
|
4
4
|
"description": "Client scripts for @roots/bud",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=16"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"types": "./lib/index.d.ts",
|
|
70
70
|
"module": "./lib/index.mjs",
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@roots/bud": "2023.9.
|
|
72
|
+
"@roots/bud": "2023.9.5-7",
|
|
73
73
|
"@skypack/package-check": "0.2.2",
|
|
74
74
|
"@types/node": "18.17.9",
|
|
75
75
|
"@types/webpack-env": "1.18.1"
|
|
@@ -4,6 +4,9 @@ import {pulse} from './indicator.pulse.js'
|
|
|
4
4
|
* Indicator web component
|
|
5
5
|
*/
|
|
6
6
|
export class Component extends HTMLElement {
|
|
7
|
+
public static get observedAttributes() {
|
|
8
|
+
return [`has-errors`, `has-warnings`, `action`]
|
|
9
|
+
}
|
|
7
10
|
/**
|
|
8
11
|
* Status indicator colors
|
|
9
12
|
*/
|
|
@@ -37,51 +40,6 @@ export class Component extends HTMLElement {
|
|
|
37
40
|
this.renderShadow()
|
|
38
41
|
}
|
|
39
42
|
|
|
40
|
-
public static get observedAttributes() {
|
|
41
|
-
return [`has-errors`, `has-warnings`, `action`]
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
public attributeChangedCallback() {
|
|
45
|
-
if (this.hasAttribute(`has-errors`)) return this.onError()
|
|
46
|
-
if (this.hasAttribute(`has-warnings`)) return this.onWarning()
|
|
47
|
-
|
|
48
|
-
if (
|
|
49
|
-
!this.hasAttribute(`has-errors`) &&
|
|
50
|
-
!this.hasAttribute(`has-warnings`) &&
|
|
51
|
-
this.getAttribute(`action`) === `built`
|
|
52
|
-
)
|
|
53
|
-
return this.onSuccess()
|
|
54
|
-
|
|
55
|
-
if (
|
|
56
|
-
this.getAttribute(`action`) == `building` ||
|
|
57
|
-
this.getAttribute(`action`) == `sync`
|
|
58
|
-
)
|
|
59
|
-
return this.onPending()
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Get accessor: has errors
|
|
64
|
-
*/
|
|
65
|
-
public get hasErrors(): boolean {
|
|
66
|
-
return this.getAttribute(`has-errors`) == `true`
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Get accessor: has warnings
|
|
71
|
-
*/
|
|
72
|
-
public get hasWarnings(): boolean {
|
|
73
|
-
return this.getAttribute(`has-warnings`) == `true`
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Hide status indicator
|
|
78
|
-
*/
|
|
79
|
-
public hide() {
|
|
80
|
-
this.hideTimeout = setTimeout(() => {
|
|
81
|
-
this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
|
|
82
|
-
}, 2000)
|
|
83
|
-
}
|
|
84
|
-
|
|
85
43
|
/**
|
|
86
44
|
* Status is error
|
|
87
45
|
*/
|
|
@@ -93,7 +51,6 @@ export class Component extends HTMLElement {
|
|
|
93
51
|
.classList.remove(`warning`, `success`, `pending`)
|
|
94
52
|
this.shadowRoot.querySelector(this.selector).classList.add(`error`)
|
|
95
53
|
}
|
|
96
|
-
|
|
97
54
|
/**
|
|
98
55
|
* Status is pending
|
|
99
56
|
*/
|
|
@@ -108,7 +65,6 @@ export class Component extends HTMLElement {
|
|
|
108
65
|
|
|
109
66
|
this.hide()
|
|
110
67
|
}
|
|
111
|
-
|
|
112
68
|
/**
|
|
113
69
|
* Status is success
|
|
114
70
|
*/
|
|
@@ -123,7 +79,6 @@ export class Component extends HTMLElement {
|
|
|
123
79
|
|
|
124
80
|
this.hide()
|
|
125
81
|
}
|
|
126
|
-
|
|
127
82
|
/**
|
|
128
83
|
* Status is warning
|
|
129
84
|
*/
|
|
@@ -136,6 +91,46 @@ export class Component extends HTMLElement {
|
|
|
136
91
|
|
|
137
92
|
this.shadowRoot.querySelector(this.selector).classList.add(`warning`)
|
|
138
93
|
}
|
|
94
|
+
public attributeChangedCallback() {
|
|
95
|
+
if (this.hasAttribute(`has-errors`)) return this.onError()
|
|
96
|
+
if (this.hasAttribute(`has-warnings`)) return this.onWarning()
|
|
97
|
+
|
|
98
|
+
if (
|
|
99
|
+
!this.hasAttribute(`has-errors`) &&
|
|
100
|
+
!this.hasAttribute(`has-warnings`) &&
|
|
101
|
+
this.getAttribute(`action`) === `built`
|
|
102
|
+
)
|
|
103
|
+
return this.onSuccess()
|
|
104
|
+
|
|
105
|
+
if (
|
|
106
|
+
this.getAttribute(`action`) == `building` ||
|
|
107
|
+
this.getAttribute(`action`) == `sync`
|
|
108
|
+
)
|
|
109
|
+
return this.onPending()
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Get accessor: has errors
|
|
114
|
+
*/
|
|
115
|
+
public get hasErrors(): boolean {
|
|
116
|
+
return this.getAttribute(`has-errors`) == `true`
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Get accessor: has warnings
|
|
121
|
+
*/
|
|
122
|
+
public get hasWarnings(): boolean {
|
|
123
|
+
return this.getAttribute(`has-warnings`) == `true`
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Hide status indicator
|
|
128
|
+
*/
|
|
129
|
+
public hide() {
|
|
130
|
+
this.hideTimeout = setTimeout(() => {
|
|
131
|
+
this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
|
|
132
|
+
}, 2000)
|
|
133
|
+
}
|
|
139
134
|
|
|
140
135
|
/**
|
|
141
136
|
* Render status indicator
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
* Component container
|
|
3
3
|
*/
|
|
4
4
|
export class Component extends HTMLElement {
|
|
5
|
+
public static get observedAttributes() {
|
|
6
|
+
return [`message`]
|
|
7
|
+
}
|
|
5
8
|
public documentBodyStyle: any
|
|
6
9
|
|
|
7
10
|
public name: string = `bud-overlay`
|
|
@@ -16,10 +19,6 @@ export class Component extends HTMLElement {
|
|
|
16
19
|
this.renderShadow()
|
|
17
20
|
}
|
|
18
21
|
|
|
19
|
-
public static get observedAttributes() {
|
|
20
|
-
return [`message`]
|
|
21
|
-
}
|
|
22
|
-
|
|
23
22
|
public attributeChangedCallback() {
|
|
24
23
|
if (!this.documentBodyStyle)
|
|
25
24
|
this.documentBodyStyle = document.body?.style
|
package/src/hot/events.ts
CHANGED
|
@@ -11,6 +11,20 @@ export const injectEvents = (eventSource: EventSourceFactory) => {
|
|
|
11
11
|
* mocking in tests
|
|
12
12
|
*/
|
|
13
13
|
return class Events extends eventSource {
|
|
14
|
+
/**
|
|
15
|
+
* Singleton constructor
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
|
+
public static make(
|
|
19
|
+
options: Partial<Options> & {name: string; path: string},
|
|
20
|
+
): Events {
|
|
21
|
+
if (typeof window.bud.hmr[options.name] === `undefined`)
|
|
22
|
+
Object.assign(window.bud.hmr, {
|
|
23
|
+
[options.name]: new Events(options),
|
|
24
|
+
})
|
|
25
|
+
|
|
26
|
+
return window.bud.hmr[options.name]
|
|
27
|
+
}
|
|
14
28
|
/**
|
|
15
29
|
* Registered listeners
|
|
16
30
|
*/
|
|
@@ -58,21 +72,6 @@ export const injectEvents = (eventSource: EventSourceFactory) => {
|
|
|
58
72
|
this.addListener = this.addListener.bind(this)
|
|
59
73
|
}
|
|
60
74
|
|
|
61
|
-
/**
|
|
62
|
-
* Singleton constructor
|
|
63
|
-
*
|
|
64
|
-
*/
|
|
65
|
-
public static make(
|
|
66
|
-
options: Partial<Options> & {name: string; path: string},
|
|
67
|
-
): Events {
|
|
68
|
-
if (typeof window.bud.hmr[options.name] === `undefined`)
|
|
69
|
-
Object.assign(window.bud.hmr, {
|
|
70
|
-
[options.name]: new Events(options),
|
|
71
|
-
})
|
|
72
|
-
|
|
73
|
-
return window.bud.hmr[options.name]
|
|
74
|
-
}
|
|
75
|
-
|
|
76
75
|
/**
|
|
77
76
|
* EventSource `addMessageListener` handler
|
|
78
77
|
*/
|