@servicetitan/web-components 23.4.0 → 23.5.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../../src/utils/web-component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAGhD,OAAO,EAAE,mBAAmB,EAAiB,MAAM,WAAW,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,UAAU,iBAAiB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../../src/utils/web-component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAGhD,OAAO,EAAE,mBAAmB,EAAiB,MAAM,WAAW,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,UAAU,iBAAiB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,WAMlC,eAAe,6CAoDjC"}
|
|
@@ -5,6 +5,7 @@ import { HistoryManager } from '../history-manager';
|
|
|
5
5
|
export function webComponent(props) {
|
|
6
6
|
const { basename, bundleInfo, eventBus, exposedDependencies, logService, LoadingFallback } = props;
|
|
7
7
|
const { WebComponent, disposer, mfeSupportsRerendering } = bundleInfo;
|
|
8
|
+
const elementName = getElementName(bundleInfo);
|
|
8
9
|
return (props) => {
|
|
9
10
|
const [isLoading, setIsLoading] = useState(true);
|
|
10
11
|
const [historyManager] = useOptionalDependencies(HistoryManager);
|
|
@@ -23,6 +24,7 @@ export function webComponent(props) {
|
|
|
23
24
|
},
|
|
24
25
|
});
|
|
25
26
|
};
|
|
27
|
+
// Stringify data object so that it can be passed as a data-attribute
|
|
26
28
|
const stringifiedData = useMemo(() => JSON.stringify(props.data), [props.data]);
|
|
27
29
|
/*
|
|
28
30
|
* Set key for rendering the web component so that if the data from the Host change,
|
|
@@ -33,7 +35,7 @@ export function webComponent(props) {
|
|
|
33
35
|
const key = mfeSupportsRerendering ? undefined : stringifiedData;
|
|
34
36
|
const dataAttrs = useMemo(() => composeDataAttributes(props.data), [props.data]);
|
|
35
37
|
const styleUrls = getStyleUrls(bundleInfo);
|
|
36
|
-
return (_jsxs(Fragment, { children: [isLoading && _jsx(LoadingFallback, {}), _jsx(WebComponent, Object.assign({ ref: handleRef, class: props.className }, (styleUrls && { 'style-urls': styleUrls }), dataAttrs, { "data-mfe-data": stringifiedData }), key)] }));
|
|
38
|
+
return (_jsxs(Fragment, { children: [isLoading && _jsx(LoadingFallback, {}), _jsx(WebComponent, Object.assign({ ref: handleRef, class: props.className }, (styleUrls && { 'style-urls': styleUrls }), dataAttrs, { "data-mfe-data": stringifiedData, "data-mfe-name": elementName }), key)] }));
|
|
37
39
|
};
|
|
38
40
|
}
|
|
39
41
|
/*
|
|
@@ -51,4 +53,7 @@ function getStyleUrls({ urls }) {
|
|
|
51
53
|
return encodeURIComponent(JSON.stringify(urls.css));
|
|
52
54
|
}
|
|
53
55
|
}
|
|
56
|
+
function getElementName({ WebComponent }) {
|
|
57
|
+
return WebComponent.replace(/-[^-]+$/, '');
|
|
58
|
+
}
|
|
54
59
|
//# sourceMappingURL=web-component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../../src/utils/web-component.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAMlE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAYpD,MAAM,UAAU,YAAY,CAAC,KAAwB;IACjD,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,EAAE,GACtF,KAAK,CAAC;IACV,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../../src/utils/web-component.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.5.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,32 +15,32 @@
|
|
|
15
15
|
"src"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@servicetitan/error-boundary": "23.
|
|
18
|
+
"@servicetitan/error-boundary": "23.5.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.5.0",
|
|
26
|
+
"@servicetitan/react-ioc": "23.5.0",
|
|
27
27
|
"@testing-library/dom": "^9.0.0",
|
|
28
28
|
"@testing-library/jest-dom": "^6.4.2",
|
|
29
|
-
"@testing-library/react": "^
|
|
29
|
+
"@testing-library/react": "^15.0.5",
|
|
30
30
|
"@types/history": "~4.7.10",
|
|
31
31
|
"@types/lodash.get": "~4.4.6",
|
|
32
|
-
"@types/react": "~18.
|
|
33
|
-
"@types/react-dom": "~18.
|
|
32
|
+
"@types/react": "~18.3.0",
|
|
33
|
+
"@types/react-dom": "~18.3.0",
|
|
34
34
|
"@types/semver": "~7.5.0",
|
|
35
35
|
"history": "~4.10.1",
|
|
36
|
-
"react": "~18.
|
|
36
|
+
"react": "~18.3.1",
|
|
37
37
|
"react-dom": "~18.2.0",
|
|
38
38
|
"shadow-dom-testing-library": "^1.11.0"
|
|
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.5.0",
|
|
43
|
+
"@servicetitan/react-ioc": "23.5.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": "fa1290f233700757bd3504849eea54c7d8e04af5"
|
|
55
55
|
}
|
|
@@ -18,7 +18,8 @@ jest.mock('../utils/get-version-mismatches', () => ({
|
|
|
18
18
|
|
|
19
19
|
describe('[web-components] Loader', () => {
|
|
20
20
|
const baseUrl = 'http://localhost/mfe';
|
|
21
|
-
const
|
|
21
|
+
const baseName = 'mfe-component';
|
|
22
|
+
const WEB_COMPONENT_NAME = `${baseName}-abc123`;
|
|
22
23
|
let webComponentState: Partial<Entries>;
|
|
23
24
|
let webComponent: WebComponent | undefined;
|
|
24
25
|
class WebComponent extends HTMLElement {
|
|
@@ -464,6 +465,15 @@ describe('[web-components] Loader', () => {
|
|
|
464
465
|
expect(document.querySelector(WEB_COMPONENT_NAME)).toBeInTheDocument();
|
|
465
466
|
});
|
|
466
467
|
|
|
468
|
+
test('renders "data-mfe-name" attribute with undecorated name', async () => {
|
|
469
|
+
await scriptLoadedSetup();
|
|
470
|
+
|
|
471
|
+
expect(document.querySelector(WEB_COMPONENT_NAME)).toHaveAttribute(
|
|
472
|
+
'data-mfe-name',
|
|
473
|
+
baseName
|
|
474
|
+
);
|
|
475
|
+
});
|
|
476
|
+
|
|
467
477
|
describe('after the web component is ready', () => {
|
|
468
478
|
async function webComponentReadySetup() {
|
|
469
479
|
await scriptLoadedSetup();
|
|
@@ -22,6 +22,7 @@ export function webComponent(props: WebComponentProps) {
|
|
|
22
22
|
const { basename, bundleInfo, eventBus, exposedDependencies, logService, LoadingFallback } =
|
|
23
23
|
props;
|
|
24
24
|
const { WebComponent, disposer, mfeSupportsRerendering } = bundleInfo;
|
|
25
|
+
const elementName = getElementName(bundleInfo);
|
|
25
26
|
|
|
26
27
|
return (props: LoaderDataProps) => {
|
|
27
28
|
const [isLoading, setIsLoading] = useState(true);
|
|
@@ -43,6 +44,7 @@ export function webComponent(props: WebComponentProps) {
|
|
|
43
44
|
});
|
|
44
45
|
};
|
|
45
46
|
|
|
47
|
+
// Stringify data object so that it can be passed as a data-attribute
|
|
46
48
|
const stringifiedData = useMemo(() => JSON.stringify(props.data), [props.data]);
|
|
47
49
|
|
|
48
50
|
/*
|
|
@@ -68,8 +70,8 @@ export function webComponent(props: WebComponentProps) {
|
|
|
68
70
|
* in case the Host has updated web-components, but the MFE has not
|
|
69
71
|
*/
|
|
70
72
|
{...dataAttrs}
|
|
71
|
-
// Stringify data object so that it can be passed as a data-attribute
|
|
72
73
|
data-mfe-data={stringifiedData}
|
|
74
|
+
data-mfe-name={elementName}
|
|
73
75
|
/>
|
|
74
76
|
</Fragment>
|
|
75
77
|
);
|
|
@@ -94,3 +96,7 @@ function getStyleUrls({ urls }: Pick<BundleInfo, 'urls'>) {
|
|
|
94
96
|
return encodeURIComponent(JSON.stringify(urls.css));
|
|
95
97
|
}
|
|
96
98
|
}
|
|
99
|
+
|
|
100
|
+
function getElementName({ WebComponent }: BundleInfo) {
|
|
101
|
+
return WebComponent.replace(/-[^-]+$/, '');
|
|
102
|
+
}
|