@servicetitan/web-components 23.5.2 → 23.6.0
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/dist/register.d.ts +1 -0
- package/dist/register.d.ts.map +1 -1
- package/dist/register.js +22 -15
- package/dist/register.js.map +1 -1
- package/package.json +9 -9
- package/src/__tests__/register-anvil2.test.tsx +70 -0
- package/src/__tests__/register-legacy-root.test.tsx +5 -3
- package/src/__tests__/register.test.tsx +3 -1
- package/src/register.tsx +33 -18
package/dist/register.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
2
|
export interface RegisterOptions {
|
|
3
3
|
legacyRoot?: boolean;
|
|
4
|
+
sharedDependenciesNames?: string[];
|
|
4
5
|
}
|
|
5
6
|
export declare function register(Component: ComponentType, light: boolean, options?: RegisterOptions): void;
|
|
6
7
|
//# sourceMappingURL=register.d.ts.map
|
package/dist/register.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,aAAa,EAAa,MAAM,OAAO,CAAC;AAmCrD,MAAM,WAAW,eAAe;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,aAAa,EAAa,MAAM,OAAO,CAAC;AAmCrD,MAAM,WAAW,eAAe;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;CACtC;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,QA4L3F"}
|
package/dist/register.js
CHANGED
|
@@ -98,10 +98,8 @@ export function register(Component, light, options) {
|
|
|
98
98
|
for (const [key, value] of Object.entries(entries)) {
|
|
99
99
|
this[key] = value;
|
|
100
100
|
}
|
|
101
|
-
if (this.styles.loaded === this.styles.total) {
|
|
102
|
-
|
|
103
|
-
this.render();
|
|
104
|
-
}
|
|
101
|
+
if (this.styles.loaded === this.styles.total && Object.values(entries).some(v => !!v)) {
|
|
102
|
+
this.render();
|
|
105
103
|
}
|
|
106
104
|
}
|
|
107
105
|
});
|
|
@@ -183,15 +181,8 @@ export function register(Component, light, options) {
|
|
|
183
181
|
if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.isConnected) {
|
|
184
182
|
return;
|
|
185
183
|
}
|
|
186
|
-
const
|
|
187
|
-
|
|
188
|
-
: undefined;
|
|
189
|
-
const styleUrls = [
|
|
190
|
-
...(designSystemUrl ? [designSystemUrl] : []),
|
|
191
|
-
...(this.hasAttribute('style-urls')
|
|
192
|
-
? JSON.parse(decodeURIComponent(this.getAttribute('style-urls')))
|
|
193
|
-
: []),
|
|
194
|
-
];
|
|
184
|
+
const sharedDependenciesNames = (_b = options === null || options === void 0 ? void 0 : options.sharedDependenciesNames) !== null && _b !== void 0 ? _b : [];
|
|
185
|
+
const styleUrls = getStyleUrls(light, sharedDependenciesNames, this);
|
|
195
186
|
this.styles = {
|
|
196
187
|
total: styleUrls.length * 2,
|
|
197
188
|
loaded: 0,
|
|
@@ -208,8 +199,7 @@ export function register(Component, light, options) {
|
|
|
208
199
|
.appendChild(document.createElement('div'))
|
|
209
200
|
.attachShadow({ mode: 'open' });
|
|
210
201
|
this.view = render(_jsx(Placeholder, {}), this.root, options);
|
|
211
|
-
this.styles.elements.push(...this.attachStyles(this.root, styleUrls));
|
|
212
|
-
this.styles.elements.push(...this.attachStyles(this.portal, styleUrls));
|
|
202
|
+
this.styles.elements.push(...this.attachStyles(this.root, styleUrls), ...this.attachStyles(this.portal, styleUrls));
|
|
213
203
|
}
|
|
214
204
|
disconnectedCallback() {
|
|
215
205
|
var _a, _b, _c;
|
|
@@ -240,6 +230,23 @@ export function register(Component, light, options) {
|
|
|
240
230
|
}
|
|
241
231
|
window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
|
|
242
232
|
}
|
|
233
|
+
function getStyleUrls(light, sharedDependenciesNames, el) {
|
|
234
|
+
function getCssUrl(dependencyName, cssFileRegEx) {
|
|
235
|
+
var _a;
|
|
236
|
+
if (light && sharedDependenciesNames.includes(dependencyName)) {
|
|
237
|
+
return (_a = Array.from(document.getElementsByTagName('link')).find(({ href }) => href && cssFileRegEx.test(href))) === null || _a === void 0 ? void 0 : _a.href;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
const designSystemUrl = getCssUrl('@servicetitan/design-system', /design-system(\..+)?\.bundle\.css/);
|
|
241
|
+
const anvil2CssUrl = getCssUrl('@servicetitan/anvil2', /anvil2(\..+)?\.bundle\.css/);
|
|
242
|
+
return [
|
|
243
|
+
...(designSystemUrl ? [designSystemUrl] : []),
|
|
244
|
+
...(anvil2CssUrl ? [anvil2CssUrl] : []),
|
|
245
|
+
...(el.hasAttribute('style-urls')
|
|
246
|
+
? JSON.parse(decodeURIComponent(el.getAttribute('style-urls')))
|
|
247
|
+
: []),
|
|
248
|
+
];
|
|
249
|
+
}
|
|
243
250
|
function RenderCallback({ callback }) {
|
|
244
251
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
245
252
|
useEffect(() => callback(), []);
|
package/dist/register.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAEH,0BAA0B,EAG1B,cAAc,EACd,sBAAsB,EACtB,iBAAiB,GACpB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,SAAS,UAAU,CAAC,GAAW,EAAE,MAAkB;IAC/C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE/C,OAAO,CAAC,IAAI,GAAG,GAAG,CAAC;IACnB,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC;IAC3B,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;IAEzB,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,MAAM,WAAW,GAAO,GAAG,EAAE,CAAC,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/web-components",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.6.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,18 +15,18 @@
|
|
|
15
15
|
"src"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@servicetitan/error-boundary": "23.
|
|
18
|
+
"@servicetitan/error-boundary": "23.6.0",
|
|
19
19
|
"lodash.get": "~4.4.2",
|
|
20
20
|
"mitt": "~3.0.1",
|
|
21
21
|
"semver": "~7.5.4"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@servicetitan/design-system": "~14.0.0",
|
|
25
|
-
"@servicetitan/log-service": "23.
|
|
26
|
-
"@servicetitan/react-ioc": "23.
|
|
25
|
+
"@servicetitan/log-service": "23.6.0",
|
|
26
|
+
"@servicetitan/react-ioc": "23.6.0",
|
|
27
27
|
"@testing-library/dom": "^9.0.0",
|
|
28
|
-
"@testing-library/jest-dom": "^6.4.
|
|
29
|
-
"@testing-library/react": "^15.0.
|
|
28
|
+
"@testing-library/jest-dom": "^6.4.5",
|
|
29
|
+
"@testing-library/react": "^15.0.7",
|
|
30
30
|
"@types/history": "~4.7.10",
|
|
31
31
|
"@types/lodash.get": "~4.4.6",
|
|
32
32
|
"@types/react": "~18.3.0",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@servicetitan/design-system": ">=12.6.2",
|
|
42
|
-
"@servicetitan/log-service": "23.
|
|
43
|
-
"@servicetitan/react-ioc": "23.
|
|
42
|
+
"@servicetitan/log-service": "23.6.0",
|
|
43
|
+
"@servicetitan/react-ioc": "23.6.0",
|
|
44
44
|
"history": "~4.10.1",
|
|
45
45
|
"react": ">=17.0.2",
|
|
46
46
|
"react-dom": ">=17.0.2"
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"cli": {
|
|
52
52
|
"webpack": false
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "d7e765992dd65d46e2dca48c150bd611af6a034f"
|
|
55
55
|
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
|
+
|
|
4
|
+
import { MockComponent, registerComponent } from '../__mocks__';
|
|
5
|
+
|
|
6
|
+
describe('[web-components] register - anvil2 css', () => {
|
|
7
|
+
const componentName = 'mock-anvil2-app';
|
|
8
|
+
|
|
9
|
+
class Page {
|
|
10
|
+
static get componentShadowRoot() {
|
|
11
|
+
return document.querySelector(componentName)!.shadowRoot!;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
static get portalShadowRoot() {
|
|
15
|
+
return document.querySelector('body')!.lastElementChild!.shadowRoot!;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
beforeAll(() => {
|
|
20
|
+
registerComponent(MockComponent, componentName, {
|
|
21
|
+
sharedDependenciesNames: ['@servicetitan/anvil2'],
|
|
22
|
+
legacyRoot: true,
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
const subject = () => {
|
|
27
|
+
jest.spyOn(console, 'error').mockImplementation(jest.fn()); // suppress "ReactDOM.render deprecated" error
|
|
28
|
+
const Component: any = componentName;
|
|
29
|
+
return render(<Component />);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
describe(`when anvil2.bundle.css is present in the DOM`, () => {
|
|
33
|
+
let cssLink: HTMLLinkElement;
|
|
34
|
+
|
|
35
|
+
beforeEach(() => {
|
|
36
|
+
cssLink = Object.assign(document.createElement('link'), {
|
|
37
|
+
href: 'http://localhost/anvil2.bundle.css',
|
|
38
|
+
rel: 'stylesheet',
|
|
39
|
+
});
|
|
40
|
+
document.body.appendChild(cssLink);
|
|
41
|
+
const designSystemCssLink = Object.assign(document.createElement('link'), {
|
|
42
|
+
href: 'http://localhost/design-system.bundle.css',
|
|
43
|
+
rel: 'stylesheet',
|
|
44
|
+
});
|
|
45
|
+
document.body.appendChild(designSystemCssLink);
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
afterEach(() => {
|
|
49
|
+
cssLink.remove();
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
function expectStyleInDom(styleUrl: string, shadowRootFn: () => ShadowRoot) {
|
|
53
|
+
expect(shadowRootFn().querySelectorAll('link').length).toBe(1);
|
|
54
|
+
const link = shadowRootFn().querySelector(
|
|
55
|
+
`link[href='${styleUrl}'][rel='stylesheet'][crossorigin='anonymous']`
|
|
56
|
+
);
|
|
57
|
+
expect(link).toBeInTheDocument();
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
test(`loads anvil2.bundle.css into the component shadow DOM`, () => {
|
|
61
|
+
subject();
|
|
62
|
+
expectStyleInDom(cssLink.href, () => Page.componentShadowRoot);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
test(`loads anvil2.bundle.css into the portal shadow DOM`, () => {
|
|
66
|
+
subject();
|
|
67
|
+
expectStyleInDom(cssLink.href, () => Page.portalShadowRoot);
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import '@testing-library/jest-dom';
|
|
2
|
-
import { render } from '@testing-library/react';
|
|
2
|
+
import { render, waitFor } from '@testing-library/react';
|
|
3
3
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
4
4
|
// @ts-ignore because Jest mistakenly complains that "'shadow-dom-testing-library' cannot be imported using this construct".
|
|
5
5
|
import { screen } from 'shadow-dom-testing-library';
|
|
@@ -27,10 +27,12 @@ describe('[web-components] register', () => {
|
|
|
27
27
|
webComponent[0]?.setAttribute('data-mfe-data', JSON.stringify({ string: 'baz' }));
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
test('useMFEDataContext provides updated data', () => {
|
|
30
|
+
test('useMFEDataContext provides updated data', async () => {
|
|
31
31
|
setup();
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
await waitFor(() => {
|
|
34
|
+
expect(screen.getByShadowText(`Prop: string, Value: "baz"`)).toBeInTheDocument();
|
|
35
|
+
});
|
|
34
36
|
expect(screen.getByShadowText(`Data: string, Value: "baz"`)).toBeInTheDocument();
|
|
35
37
|
});
|
|
36
38
|
});
|
|
@@ -28,7 +28,9 @@ describe('[web-components] register', () => {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
beforeAll(() => {
|
|
31
|
-
registerComponent(MockComponent, componentName
|
|
31
|
+
registerComponent(MockComponent, componentName, {
|
|
32
|
+
sharedDependenciesNames: ['@servicetitan/design-system'],
|
|
33
|
+
});
|
|
32
34
|
/*
|
|
33
35
|
* mock <link>'s onload so that we can call it directly from the test,
|
|
34
36
|
* because it won't call itself in the test environment
|
package/src/register.tsx
CHANGED
|
@@ -35,6 +35,7 @@ const Placeholder: FC = () => <div style={{ display: 'none' }} />;
|
|
|
35
35
|
|
|
36
36
|
export interface RegisterOptions {
|
|
37
37
|
legacyRoot?: boolean;
|
|
38
|
+
sharedDependenciesNames?: string[];
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
|
|
@@ -66,18 +67,8 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
|
|
|
66
67
|
if (this.root?.isConnected) {
|
|
67
68
|
return;
|
|
68
69
|
}
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
({ href }) => href && /design-system(\..+)?\.bundle\.css/.test(href)
|
|
72
|
-
)?.href
|
|
73
|
-
: undefined;
|
|
74
|
-
|
|
75
|
-
const styleUrls = [
|
|
76
|
-
...(designSystemUrl ? [designSystemUrl] : []),
|
|
77
|
-
...(this.hasAttribute('style-urls')
|
|
78
|
-
? JSON.parse(decodeURIComponent(this.getAttribute('style-urls')!))
|
|
79
|
-
: []),
|
|
80
|
-
];
|
|
70
|
+
const sharedDependenciesNames = options?.sharedDependenciesNames ?? [];
|
|
71
|
+
const styleUrls = getStyleUrls(light, sharedDependenciesNames, this);
|
|
81
72
|
|
|
82
73
|
this.styles = {
|
|
83
74
|
total: styleUrls.length * 2,
|
|
@@ -98,8 +89,10 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
|
|
|
98
89
|
|
|
99
90
|
this.view = render(<Placeholder />, this.root, options);
|
|
100
91
|
|
|
101
|
-
this.styles.elements.push(
|
|
102
|
-
|
|
92
|
+
this.styles.elements.push(
|
|
93
|
+
...this.attachStyles(this.root, styleUrls),
|
|
94
|
+
...this.attachStyles(this.portal, styleUrls)
|
|
95
|
+
);
|
|
103
96
|
}
|
|
104
97
|
|
|
105
98
|
disconnectedCallback() {
|
|
@@ -132,10 +125,8 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
|
|
|
132
125
|
this[key as keyof IWebComponent] = value;
|
|
133
126
|
}
|
|
134
127
|
|
|
135
|
-
if (this.styles.loaded === this.styles.total) {
|
|
136
|
-
|
|
137
|
-
this.render();
|
|
138
|
-
}
|
|
128
|
+
if (this.styles.loaded === this.styles.total && Object.values(entries).some(v => !!v)) {
|
|
129
|
+
this.render();
|
|
139
130
|
}
|
|
140
131
|
};
|
|
141
132
|
|
|
@@ -237,6 +228,30 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
|
|
|
237
228
|
window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
|
|
238
229
|
}
|
|
239
230
|
|
|
231
|
+
function getStyleUrls(light: boolean, sharedDependenciesNames: string[], el: HTMLElement) {
|
|
232
|
+
function getCssUrl(dependencyName: string, cssFileRegEx: RegExp) {
|
|
233
|
+
if (light && sharedDependenciesNames.includes(dependencyName)) {
|
|
234
|
+
return Array.from(document.getElementsByTagName('link')).find(
|
|
235
|
+
({ href }) => href && cssFileRegEx.test(href)
|
|
236
|
+
)?.href;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
const designSystemUrl = getCssUrl(
|
|
241
|
+
'@servicetitan/design-system',
|
|
242
|
+
/design-system(\..+)?\.bundle\.css/
|
|
243
|
+
);
|
|
244
|
+
const anvil2CssUrl = getCssUrl('@servicetitan/anvil2', /anvil2(\..+)?\.bundle\.css/);
|
|
245
|
+
|
|
246
|
+
return [
|
|
247
|
+
...(designSystemUrl ? [designSystemUrl] : []),
|
|
248
|
+
...(anvil2CssUrl ? [anvil2CssUrl] : []),
|
|
249
|
+
...(el.hasAttribute('style-urls')
|
|
250
|
+
? JSON.parse(decodeURIComponent(el.getAttribute('style-urls')!))
|
|
251
|
+
: []),
|
|
252
|
+
];
|
|
253
|
+
}
|
|
254
|
+
|
|
240
255
|
function RenderCallback({ callback }: { callback: () => void }) {
|
|
241
256
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
242
257
|
useEffect(() => callback(), []);
|