@servicetitan/web-components 23.3.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.
Files changed (10) hide show
  1. package/dist/utils/web-component.d.ts +1 -1
  2. package/dist/utils/web-component.d.ts.map +1 -1
  3. package/dist/utils/web-component.js +6 -1
  4. package/dist/utils/web-component.js.map +1 -1
  5. package/package.json +11 -11
  6. package/src/__tests__/loader.test.tsx +11 -1
  7. package/src/__tests__/register-legacy-root.test.tsx +1 -0
  8. package/src/__tests__/register.test.tsx +2 -0
  9. package/src/loader.tsx +1 -1
  10. package/src/utils/web-component.tsx +8 -2
package/dist/utils/web-component.d.ts CHANGED
@@ -12,6 +12,6 @@ interface WebComponentProps {
12
12
  logService?: Log;
13
13
  LoadingFallback: () => JSX.Element;
14
14
  }
15
- export declare function webComponent(props: WebComponentProps): (props: LoaderDataProps) => JSX.Element;
15
+ export declare function webComponent(props: WebComponentProps): (props: LoaderDataProps) => import("react/jsx-runtime").JSX.Element;
16
16
  export {};
17
17
  //# sourceMappingURL=web-component.d.ts.map
package/dist/utils/web-component.d.ts.map CHANGED
@@ -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,WAKlC,eAAe,KAAG,WAAW,CAmD/C"}
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"}
package/dist/utils/web-component.js CHANGED
@@ -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
package/dist/utils/web-component.js.map CHANGED
@@ -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;IAEtE,OAAO,CAAC,KAAsB,EAAe,EAAE;QAC3C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,CAAC,cAAc,CAAC,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QAEjE,MAAM,SAAS,GAAG,CAAC,YAAkC,EAAE,EAAE;YACrD,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC;gBAClB,UAAU;gBACV,cAAc;gBACd,mBAAmB;gBACnB,QAAQ;gBACR,QAAQ;gBACR,OAAO,EAAE,GAAG,EAAE;oBACV,YAAY,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC;gBACD,SAAS,EAAE,GAAG,EAAE;oBACZ,QAAQ,EAAE,CAAC;gBACf,CAAC;aACJ,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAEhF;;;;;WAKG;QACH,MAAM,GAAG,GAAG,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;QACjE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACjF,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;QAE3C,OAAO,CACH,MAAC,QAAQ,eACJ,SAAS,IAAI,KAAC,eAAe,KAAG,EACjC,KAAC,YAAY,kBAET,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,IAClB,CAAC,SAAS,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAK1C,SAAS,qBAEE,eAAe,KAVzB,GAAG,CAWV,IACK,CACd,CAAC;IACN,CAAC,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,SAAS,qBAAqB,CAAC,OAAuC,EAAE;IACpE,OAAO,MAAM,CAAC,WAAW,CACrB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QACvC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;QACrE,KAAK;KACR,CAAC,CACL,CAAC;AACN,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,IAAI,EAA4B;IACpD,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;QACjB,OAAO,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;KACvD;AACL,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.0",
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.3.0",
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.3.0",
26
- "@servicetitan/react-ioc": "23.3.0",
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": "^14.2.1",
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.2.55",
33
- "@types/react-dom": "~18.2.19",
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.2.0",
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.3.0",
43
- "@servicetitan/react-ioc": "23.3.0",
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": "4a3420cf55cf34ff10b5ba6164d940b39f0925e6"
54
+ "gitHead": "fa1290f233700757bd3504849eea54c7d8e04af5"
55
55
  }
package/src/__tests__/loader.test.tsx CHANGED
@@ -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 WEB_COMPONENT_NAME = 'mfe-component';
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();
package/src/__tests__/register-legacy-root.test.tsx CHANGED
@@ -14,6 +14,7 @@ describe('[web-components] register', () => {
14
14
  });
15
15
 
16
16
  const subject = () => {
17
+ jest.spyOn(console, 'error').mockImplementation(jest.fn()); // suppress "ReactDOM.render deprecated" error
17
18
  const Component: any = componentName;
18
19
  return render(<Component />);
19
20
  };
package/src/__tests__/register.test.tsx CHANGED
@@ -49,6 +49,8 @@ describe('[web-components] register', () => {
49
49
  });
50
50
 
51
51
  const subject = (props: Record<string, any> = {}, dataAttrs: Record<string, any> = {}) => {
52
+ jest.spyOn(console, 'error').mockImplementation(jest.fn()); // suppress "attempt to unmount root while rendering" error
53
+
52
54
  const data = props && { 'data-mfe-data': JSON.stringify(props) };
53
55
  const Component: any = componentName;
54
56
  const renderResult = render(<Component ref={handleRef} {...data} {...dataAttrs} />);
package/src/loader.tsx CHANGED
@@ -175,6 +175,6 @@ function lazyWebComponent(props: LazyLoaderProps) {
175
175
  });
176
176
  }
177
177
 
178
- function getFallback(node: FallbackNode | undefined, message: string): () => JSX.Element {
178
+ function getFallback(node: FallbackNode | undefined, message: string) {
179
179
  return () => (node !== undefined ? (node as ReactElement) : <h2>{message}</h2>);
180
180
  }
package/src/utils/web-component.tsx CHANGED
@@ -22,8 +22,9 @@ 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
- return (props: LoaderDataProps): JSX.Element => {
27
+ return (props: LoaderDataProps) => {
27
28
  const [isLoading, setIsLoading] = useState(true);
28
29
  const [historyManager] = useOptionalDependencies(HistoryManager);
29
30
 
@@ -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
+ }