@servicetitan/web-components 30.3.1 → 31.1.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/common.js +17 -13
- package/dist/common.js.map +1 -1
- package/dist/contexts/index.js +1 -0
- package/dist/contexts/index.js.map +1 -1
- package/dist/contexts/mfe-data-context.js +2 -2
- package/dist/contexts/mfe-data-context.js.map +1 -1
- package/dist/contexts/mfe-metadata-context.js +1 -0
- package/dist/contexts/mfe-metadata-context.js.map +1 -1
- package/dist/contexts/tests/mfe-data-context.test.js +21 -11
- package/dist/contexts/tests/mfe-data-context.test.js.map +1 -1
- package/dist/contexts/tests/mfe-metadata-context.test.js +28 -13
- package/dist/contexts/tests/mfe-metadata-context.test.js.map +1 -1
- package/dist/delayed.js +8 -5
- package/dist/delayed.js.map +1 -1
- package/dist/event-bus.js +79 -97
- package/dist/event-bus.js.map +1 -1
- package/dist/get-value-for-environment.js +9 -4
- package/dist/get-value-for-environment.js.map +1 -1
- package/dist/globals.js +7 -7
- package/dist/globals.js.map +1 -1
- package/dist/headless-loader.d.ts +5 -0
- package/dist/headless-loader.d.ts.map +1 -0
- package/dist/headless-loader.js +17 -0
- package/dist/headless-loader.js.map +1 -0
- package/dist/history-manager.js +59 -69
- package/dist/history-manager.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/dist/loader.d.ts +10 -4
- package/dist/loader.d.ts.map +1 -1
- package/dist/loader.js +114 -79
- package/dist/loader.js.map +1 -1
- package/dist/register-headless.d.ts +9 -0
- package/dist/register-headless.d.ts.map +1 -0
- package/dist/register-headless.js +67 -0
- package/dist/register-headless.js.map +1 -0
- package/dist/register.js +182 -218
- package/dist/register.js.map +1 -1
- package/dist/render.js +11 -12
- package/dist/render.js.map +1 -1
- package/dist/types.d.ts +11 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +2 -1
- package/dist/types.js.map +1 -1
- package/dist/utils/get-bundle-info.d.ts +4 -12
- package/dist/utils/get-bundle-info.d.ts.map +1 -1
- package/dist/utils/get-bundle-info.js +41 -52
- package/dist/utils/get-bundle-info.js.map +1 -1
- package/dist/utils/get-cache-setting.d.ts +2 -0
- package/dist/utils/get-cache-setting.d.ts.map +1 -0
- package/dist/utils/get-cache-setting.js +6 -0
- package/dist/utils/get-cache-setting.js.map +1 -0
- package/dist/utils/get-cached-metadata.d.ts +18 -0
- package/dist/utils/get-cached-metadata.d.ts.map +1 -0
- package/dist/utils/get-cached-metadata.js +47 -0
- package/dist/utils/get-cached-metadata.js.map +1 -0
- package/dist/utils/get-element-name.js +1 -0
- package/dist/utils/get-element-name.js.map +1 -1
- package/dist/utils/get-entry-points.js +11 -4
- package/dist/utils/get-entry-points.js.map +1 -1
- package/dist/utils/get-ld-service-token.js +3 -3
- package/dist/utils/get-ld-service-token.js.map +1 -1
- package/dist/utils/get-mfe-has-compatible-launchdarkly-version.d.ts +1 -1
- package/dist/utils/get-mfe-has-compatible-launchdarkly-version.d.ts.map +1 -1
- package/dist/utils/get-mfe-has-compatible-launchdarkly-version.js +4 -4
- package/dist/utils/get-mfe-has-compatible-launchdarkly-version.js.map +1 -1
- package/dist/utils/get-mfe-has-unique-chunk-namespace.d.ts +1 -1
- package/dist/utils/get-mfe-has-unique-chunk-namespace.d.ts.map +1 -1
- package/dist/utils/get-mfe-has-unique-chunk-namespace.js +1 -0
- package/dist/utils/get-mfe-has-unique-chunk-namespace.js.map +1 -1
- package/dist/utils/get-mfe-supports-rerendering.d.ts +1 -1
- package/dist/utils/get-mfe-supports-rerendering.d.ts.map +1 -1
- package/dist/utils/get-mfe-supports-rerendering.js +4 -4
- package/dist/utils/get-mfe-supports-rerendering.js.map +1 -1
- package/dist/utils/get-version-mismatches.d.ts +1 -1
- package/dist/utils/get-version-mismatches.d.ts.map +1 -1
- package/dist/utils/get-version-mismatches.js +19 -12
- package/dist/utils/get-version-mismatches.js.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/is-compatible.js +1 -0
- package/dist/utils/is-compatible.js.map +1 -1
- package/dist/utils/is-versioned-url.js +2 -1
- package/dist/utils/is-versioned-url.js.map +1 -1
- package/dist/utils/load-scripts.js +7 -6
- package/dist/utils/load-scripts.js.map +1 -1
- package/dist/utils/ttl-cache.js +26 -27
- package/dist/utils/ttl-cache.js.map +1 -1
- package/dist/utils/validate-bundle-info.js +13 -10
- package/dist/utils/validate-bundle-info.js.map +1 -1
- package/dist/utils/web-component.d.ts +1 -1
- package/dist/utils/web-component.d.ts.map +1 -1
- package/dist/utils/web-component.js +51 -24
- package/dist/utils/web-component.js.map +1 -1
- package/package.json +12 -12
- package/src/__mocks__/test-component.tsx +2 -0
- package/src/__tests__/headless-loader.test.tsx +123 -0
- package/src/__tests__/loader.test.tsx +36 -14
- package/src/__tests__/register-headless.test.tsx +98 -0
- package/src/headless-loader.tsx +21 -0
- package/src/index.ts +2 -0
- package/src/loader.tsx +58 -46
- package/src/register-headless.ts +81 -0
- package/src/types.ts +9 -0
- package/src/utils/__tests__/get-version-mismatches.test.ts +1 -1
- package/src/utils/get-bundle-info.ts +37 -60
- package/src/utils/get-cache-setting.ts +5 -0
- package/src/utils/get-cached-metadata.ts +72 -0
- package/src/utils/get-mfe-has-compatible-launchdarkly-version.ts +1 -1
- package/src/utils/get-mfe-has-unique-chunk-namespace.ts +1 -1
- package/src/utils/get-mfe-supports-rerendering.ts +1 -1
- package/src/utils/get-version-mismatches.ts +1 -1
- package/src/utils/web-component.tsx +8 -6
- package/dist/__mocks__/expect-styles-in-dom.d.ts +0 -3
- package/dist/__mocks__/expect-styles-in-dom.d.ts.map +0 -1
- package/dist/__mocks__/expect-styles-in-dom.js +0 -9
- package/dist/__mocks__/expect-styles-in-dom.js.map +0 -1
- package/dist/__mocks__/index.d.ts +0 -4
- package/dist/__mocks__/index.d.ts.map +0 -1
- package/dist/__mocks__/index.js +0 -4
- package/dist/__mocks__/index.js.map +0 -1
- package/dist/__mocks__/register-component.d.ts +0 -4
- package/dist/__mocks__/register-component.d.ts.map +0 -1
- package/dist/__mocks__/register-component.js +0 -14
- package/dist/__mocks__/register-component.js.map +0 -1
- package/dist/__mocks__/test-component.d.ts +0 -3
- package/dist/__mocks__/test-component.d.ts.map +0 -1
- package/dist/__mocks__/test-component.js +0 -15
- package/dist/__mocks__/test-component.js.map +0 -1
|
@@ -2,28 +2,23 @@ import semver from 'semver';
|
|
|
2
2
|
import get from 'lodash.get';
|
|
3
3
|
|
|
4
4
|
import { ExposedDependencies, ExposedInstanceDependencies, getJson, GetJsonError } from '../common';
|
|
5
|
+
import { getCachedMetadata } from './get-cached-metadata';
|
|
6
|
+
import { getCacheSetting } from './get-cache-setting';
|
|
5
7
|
import { EntryPoints, getEntrypoints } from './get-entry-points';
|
|
6
|
-
import { getMFESupportsRerendering } from './get-mfe-supports-rerendering';
|
|
7
|
-
import { getVersionMismatches } from './get-version-mismatches';
|
|
8
|
-
import { isVersionedUrl } from './is-versioned-url';
|
|
9
8
|
import { getMFEHasCompatibleLaunchDarklyVersion } from './get-mfe-has-compatible-launchdarkly-version';
|
|
9
|
+
import { getMFESupportsRerendering } from './get-mfe-supports-rerendering';
|
|
10
10
|
import { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
name: string;
|
|
14
|
-
version?: string;
|
|
15
|
-
bundledWith?: Record<string, string | undefined>;
|
|
16
|
-
sharedDependencies: Record<string, string>;
|
|
17
|
-
dependencies?: Record<string, string>;
|
|
18
|
-
entrypoints?: Record<string, { css: string[]; js: string[] }>;
|
|
19
|
-
}
|
|
11
|
+
import { getVersionMismatches } from './get-version-mismatches';
|
|
12
|
+
import type { Metadata } from '../types';
|
|
20
13
|
|
|
21
14
|
export type BundleInfo = Awaited<ReturnType<typeof getBundleInfo>>;
|
|
22
15
|
|
|
23
16
|
interface GetBundleInfoProps {
|
|
17
|
+
cache: boolean | number;
|
|
24
18
|
exposedDependencies?: ExposedDependencies;
|
|
25
19
|
exposedInstanceDependencies?: ExposedInstanceDependencies;
|
|
26
20
|
fallbackPackageUrl?: string;
|
|
21
|
+
isHeadless?: boolean;
|
|
27
22
|
mainPackageUrl: string;
|
|
28
23
|
onRequestError?: (error: GetJsonError) => void;
|
|
29
24
|
retries?: number;
|
|
@@ -31,15 +26,18 @@ interface GetBundleInfoProps {
|
|
|
31
26
|
}
|
|
32
27
|
|
|
33
28
|
export async function getBundleInfo({
|
|
29
|
+
cache,
|
|
34
30
|
mainPackageUrl,
|
|
35
31
|
fallbackPackageUrl,
|
|
36
32
|
exposedDependencies = {},
|
|
37
33
|
exposedInstanceDependencies = {},
|
|
34
|
+
isHeadless,
|
|
38
35
|
signal,
|
|
39
36
|
retries,
|
|
40
37
|
onRequestError,
|
|
41
38
|
}: GetBundleInfoProps) {
|
|
42
|
-
const { data: metadata, url: packageUrl } = await
|
|
39
|
+
const { data: metadata, url: packageUrl } = await getCachedMetadata({
|
|
40
|
+
cache,
|
|
43
41
|
fallbackPackageUrl,
|
|
44
42
|
mainPackageUrl,
|
|
45
43
|
onRequestError,
|
|
@@ -49,14 +47,14 @@ export async function getBundleInfo({
|
|
|
49
47
|
|
|
50
48
|
const { bundledWith, name, sharedDependencies } = metadata;
|
|
51
49
|
const exactPackageUrl = packageUrl.replace('/dist/metadata.json', '');
|
|
52
|
-
const
|
|
50
|
+
const requestCache = getCacheSetting(exactPackageUrl);
|
|
53
51
|
|
|
54
52
|
let dependencies: NonNullable<Metadata['dependencies']>;
|
|
55
53
|
if (metadata.dependencies) {
|
|
56
54
|
dependencies = metadata.dependencies;
|
|
57
55
|
} else {
|
|
58
56
|
const { data: packageJson } = await getJson(`${exactPackageUrl}/package.json`, {
|
|
59
|
-
cache,
|
|
57
|
+
cache: requestCache,
|
|
60
58
|
retries,
|
|
61
59
|
signal,
|
|
62
60
|
});
|
|
@@ -64,23 +62,31 @@ export async function getBundleInfo({
|
|
|
64
62
|
dependencies = packageJson.dependencies;
|
|
65
63
|
}
|
|
66
64
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
let mismatch: ReturnType<typeof getVersionMismatches>;
|
|
66
|
+
let resolvedBundleType: 'headless' | 'light' | 'full';
|
|
67
|
+
|
|
68
|
+
if (isHeadless) {
|
|
69
|
+
resolvedBundleType = 'headless';
|
|
70
|
+
} else {
|
|
71
|
+
mismatch = getVersionMismatches(exposedDependencies, dependencies, sharedDependencies);
|
|
72
|
+
const startupVersion = bundledWith?.['@servicetitan/startup'];
|
|
73
|
+
const supportLightBundles = !!startupVersion && semver.gte(startupVersion, '17.0.0');
|
|
74
|
+
const embed = !mismatch && supportLightBundles;
|
|
75
|
+
resolvedBundleType = embed ? 'light' : 'full';
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const withBaseUrl = (path: string) =>
|
|
79
|
+
`${exactPackageUrl}/dist/bundle/${resolvedBundleType}/${path}`;
|
|
74
80
|
|
|
75
81
|
let entrypoints: EntryPoints;
|
|
76
|
-
if (metadata.entrypoints?.[
|
|
77
|
-
entrypoints = metadata.entrypoints[
|
|
82
|
+
if (metadata.entrypoints?.[resolvedBundleType]) {
|
|
83
|
+
entrypoints = metadata.entrypoints[resolvedBundleType];
|
|
78
84
|
} else {
|
|
79
|
-
entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'),
|
|
85
|
+
entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);
|
|
80
86
|
}
|
|
81
87
|
|
|
82
88
|
const disposer = () => {
|
|
83
|
-
if (
|
|
89
|
+
if (resolvedBundleType === 'light') {
|
|
84
90
|
const path = Object.values<string>(sharedDependencies).shift();
|
|
85
91
|
if (path) {
|
|
86
92
|
get(window, path).getStorage().clear(name);
|
|
@@ -93,6 +99,8 @@ export async function getBundleInfo({
|
|
|
93
99
|
{} as EntryPoints
|
|
94
100
|
);
|
|
95
101
|
|
|
102
|
+
const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;
|
|
103
|
+
|
|
96
104
|
return {
|
|
97
105
|
bundledWith,
|
|
98
106
|
disposer,
|
|
@@ -102,41 +110,10 @@ export async function getBundleInfo({
|
|
|
102
110
|
bundledWith,
|
|
103
111
|
exposedInstanceDependencies
|
|
104
112
|
),
|
|
105
|
-
mismatch
|
|
113
|
+
mismatch,
|
|
114
|
+
resolvedBundleType,
|
|
106
115
|
urls,
|
|
107
|
-
WebComponent:
|
|
116
|
+
WebComponent: elementName,
|
|
108
117
|
version: metadata.version,
|
|
109
118
|
};
|
|
110
119
|
}
|
|
111
|
-
|
|
112
|
-
async function getMetadata(props: {
|
|
113
|
-
fallbackPackageUrl?: string;
|
|
114
|
-
mainPackageUrl: string;
|
|
115
|
-
onRequestError?: (error: GetJsonError) => void;
|
|
116
|
-
signal?: AbortSignal;
|
|
117
|
-
retries?: number;
|
|
118
|
-
}) {
|
|
119
|
-
const { fallbackPackageUrl, mainPackageUrl, onRequestError, retries, signal } = props;
|
|
120
|
-
|
|
121
|
-
return getJson<Metadata>(`${mainPackageUrl}/dist/metadata.json`, {
|
|
122
|
-
cache: getCacheSetting(mainPackageUrl),
|
|
123
|
-
retries: fallbackPackageUrl ? 0 : retries,
|
|
124
|
-
onRequestError,
|
|
125
|
-
signal,
|
|
126
|
-
}).catch(e => {
|
|
127
|
-
if (!fallbackPackageUrl) {
|
|
128
|
-
throw e;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return getJson<Metadata>(`${fallbackPackageUrl}/dist/metadata.json`, {
|
|
132
|
-
retries,
|
|
133
|
-
onRequestError,
|
|
134
|
-
cache: getCacheSetting(fallbackPackageUrl),
|
|
135
|
-
signal,
|
|
136
|
-
});
|
|
137
|
-
});
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
function getCacheSetting(url: string) {
|
|
141
|
-
return isVersionedUrl(url) ? undefined : 'no-store';
|
|
142
|
-
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { getJson, GetJsonError } from '../common';
|
|
2
|
+
import type { Metadata } from '../types';
|
|
3
|
+
import { getCacheSetting } from './get-cache-setting';
|
|
4
|
+
import { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';
|
|
5
|
+
import { TtlCache } from './ttl-cache';
|
|
6
|
+
|
|
7
|
+
const MINUTE = 1000 * 60;
|
|
8
|
+
|
|
9
|
+
const metadataResponseCache = new TtlCache<Awaited<ReturnType<typeof getMetadata>>>({
|
|
10
|
+
ttlMs: 15 * MINUTE,
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
interface GetMetadataProps {
|
|
14
|
+
fallbackPackageUrl?: string;
|
|
15
|
+
mainPackageUrl: string;
|
|
16
|
+
onRequestError?: (error: GetJsonError) => void;
|
|
17
|
+
signal?: AbortSignal;
|
|
18
|
+
retries?: number;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
async function getMetadata(props: GetMetadataProps) {
|
|
22
|
+
const { fallbackPackageUrl, mainPackageUrl, onRequestError, retries, signal } = props;
|
|
23
|
+
|
|
24
|
+
try {
|
|
25
|
+
return await getJson<Metadata>(`${mainPackageUrl}/dist/metadata.json`, {
|
|
26
|
+
cache: getCacheSetting(mainPackageUrl),
|
|
27
|
+
retries: fallbackPackageUrl ? 0 : retries,
|
|
28
|
+
onRequestError,
|
|
29
|
+
signal,
|
|
30
|
+
});
|
|
31
|
+
} catch (e) {
|
|
32
|
+
if (!fallbackPackageUrl) {
|
|
33
|
+
throw e;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return getJson<Metadata>(`${fallbackPackageUrl}/dist/metadata.json`, {
|
|
37
|
+
retries,
|
|
38
|
+
onRequestError,
|
|
39
|
+
cache: getCacheSetting(fallbackPackageUrl),
|
|
40
|
+
signal,
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export async function getCachedMetadata(props: GetMetadataProps & { cache: boolean | number }) {
|
|
46
|
+
let cache = props.cache;
|
|
47
|
+
const cacheKey = props.mainPackageUrl;
|
|
48
|
+
|
|
49
|
+
let metadataResponse = cache ? metadataResponseCache.get(cacheKey) : undefined;
|
|
50
|
+
|
|
51
|
+
if (!metadataResponse) {
|
|
52
|
+
metadataResponse = await getMetadata(props);
|
|
53
|
+
|
|
54
|
+
const mfeHasUniqueChunkNamespace = getMFEHasUniqueChunkNamespace(
|
|
55
|
+
metadataResponse.data.bundledWith
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
if (cache === true && !mfeHasUniqueChunkNamespace) {
|
|
59
|
+
cache = -1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (cache) {
|
|
63
|
+
metadataResponseCache.set(
|
|
64
|
+
cacheKey,
|
|
65
|
+
metadataResponse,
|
|
66
|
+
typeof cache === 'number' ? cache : undefined
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return metadataResponse;
|
|
72
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import semver from 'semver';
|
|
2
|
-
import { Metadata } from '
|
|
2
|
+
import type { Metadata } from '../types';
|
|
3
3
|
|
|
4
4
|
// Check if the MFE loads it's chunks into a unique global chunk namespace
|
|
5
5
|
export function getMFEHasUniqueChunkNamespace(bundledWith: Metadata['bundledWith']) {
|
|
@@ -23,7 +23,8 @@ interface WebComponentProps {
|
|
|
23
23
|
|
|
24
24
|
export function webComponent(props: WebComponentProps) {
|
|
25
25
|
const { basename, bundleInfo, eventBus, exposedDependencies, ldService, logService } = props;
|
|
26
|
-
const { WebComponent, disposer, mfeSupportsRerendering, version } =
|
|
26
|
+
const { WebComponent, resolvedBundleType, disposer, mfeSupportsRerendering, version } =
|
|
27
|
+
bundleInfo;
|
|
27
28
|
const elementName = getElementName(bundleInfo);
|
|
28
29
|
|
|
29
30
|
const exposedInstanceDependencies = ensureLDVersion(
|
|
@@ -31,7 +32,7 @@ export function webComponent(props: WebComponentProps) {
|
|
|
31
32
|
bundleInfo.bundledWith?.['launchdarkly-js-client-sdk']
|
|
32
33
|
);
|
|
33
34
|
|
|
34
|
-
return ({ LoadingFallback, ...
|
|
35
|
+
return ({ LoadingFallback, ...innerProps }: LoaderDataProps) => {
|
|
35
36
|
const [isLoading, setIsLoading] = useState(true);
|
|
36
37
|
const [historyManager] = useOptionalDependencies(HistoryManager);
|
|
37
38
|
|
|
@@ -54,7 +55,7 @@ export function webComponent(props: WebComponentProps) {
|
|
|
54
55
|
};
|
|
55
56
|
|
|
56
57
|
// Stringify data object so that it can be passed as a data-attribute
|
|
57
|
-
const stringifiedData = useMemo(() => JSON.stringify(
|
|
58
|
+
const stringifiedData = useMemo(() => JSON.stringify(innerProps.data), [innerProps.data]);
|
|
58
59
|
|
|
59
60
|
/*
|
|
60
61
|
* Set key for rendering the web component so that if the data from the Host change,
|
|
@@ -63,7 +64,7 @@ export function webComponent(props: WebComponentProps) {
|
|
|
63
64
|
* This is only used as a fallback when the MFE's version is older.
|
|
64
65
|
*/
|
|
65
66
|
const key = mfeSupportsRerendering ? undefined : stringifiedData;
|
|
66
|
-
const dataAttrs = useMemo(() => composeDataAttributes(
|
|
67
|
+
const dataAttrs = useMemo(() => composeDataAttributes(innerProps.data), [innerProps.data]);
|
|
67
68
|
const styleUrls = getStyleUrls(bundleInfo);
|
|
68
69
|
|
|
69
70
|
return (
|
|
@@ -71,9 +72,8 @@ export function webComponent(props: WebComponentProps) {
|
|
|
71
72
|
{isLoading && <LoadingFallback />}
|
|
72
73
|
<WebComponent
|
|
73
74
|
key={key}
|
|
74
|
-
// @ts-expect-error because property ref does not exist on IntrinsicAttributes
|
|
75
75
|
ref={handleRef}
|
|
76
|
-
class={
|
|
76
|
+
class={innerProps.className}
|
|
77
77
|
{...(styleUrls && { 'style-urls': styleUrls })}
|
|
78
78
|
/*
|
|
79
79
|
* Continue to spread data as separate data attributes for backwards compatibility,
|
|
@@ -83,6 +83,8 @@ export function webComponent(props: WebComponentProps) {
|
|
|
83
83
|
data-mfe-data={stringifiedData}
|
|
84
84
|
data-mfe-name={elementName}
|
|
85
85
|
{...(version && { 'data-mfe-version': version })}
|
|
86
|
+
// @ts-expect-error style exists on HTMLElement
|
|
87
|
+
style={resolvedBundleType === 'headless' ? { display: 'none' } : undefined}
|
|
86
88
|
/>
|
|
87
89
|
</Fragment>
|
|
88
90
|
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"expect-styles-in-dom.d.ts","sourceRoot":"","sources":["../../src/__mocks__/expect-styles-in-dom.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,UAAU,QAQ7F"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom';
|
|
2
|
-
export function expectStylesInDom(styleUrls, shadowRootFn) {
|
|
3
|
-
[styleUrls].flat().forEach(styleUrl => {
|
|
4
|
-
const link = shadowRootFn().querySelector(`link[href='${styleUrl}'][rel='stylesheet'][crossorigin='anonymous']`);
|
|
5
|
-
expect(link).toBeInTheDocument();
|
|
6
|
-
});
|
|
7
|
-
expect(shadowRootFn().querySelectorAll('link').length).toBe([styleUrls].flat().length);
|
|
8
|
-
}
|
|
9
|
-
//# sourceMappingURL=expect-styles-in-dom.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"expect-styles-in-dom.js","sourceRoot":"","sources":["../../src/__mocks__/expect-styles-in-dom.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,MAAM,UAAU,iBAAiB,CAAC,SAA4B,EAAE,YAA8B;IAC1F,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAClC,MAAM,IAAI,GAAG,YAAY,EAAE,CAAC,aAAa,CACrC,cAAc,QAAQ,+CAA+C,CACxE,CAAC;QACF,MAAM,CAAC,IAAI,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,YAAY,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;AAC3F,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
|
package/dist/__mocks__/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
import { RegisterOptions } from '../register';
|
|
3
|
-
export declare function registerComponent(TestComponent: FunctionComponent, componentName: string | undefined, options?: RegisterOptions): void;
|
|
4
|
-
//# sourceMappingURL=register-component.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"register-component.d.ts","sourceRoot":"","sources":["../../src/__mocks__/register-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,iBAAiB,CAC7B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,OAAO,CAAC,EAAE,eAAe,QAa5B"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export function registerComponent(TestComponent, componentName, options) {
|
|
2
|
-
/*
|
|
3
|
-
* This register can only happen once, unfortunately. So the TestComponent needs to
|
|
4
|
-
* work for all tests. If ran more than once, window.customElements.define will throw
|
|
5
|
-
* the error: "NotSupportedError: This name has already been registered in the registry."
|
|
6
|
-
*
|
|
7
|
-
* Also note that there is not way to "unregister" a web component, so an afterAll
|
|
8
|
-
* cannot be used.
|
|
9
|
-
*/
|
|
10
|
-
global.WEB_COMPONENT_NAME = componentName;
|
|
11
|
-
const { register } = require('../register');
|
|
12
|
-
register(TestComponent, true, options);
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=register-component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"register-component.js","sourceRoot":"","sources":["../../src/__mocks__/register-component.tsx"],"names":[],"mappings":"AAGA,MAAM,UAAU,iBAAiB,CAC7B,aAAgC,EAChC,aAAiC,EACjC,OAAyB;IAEzB;;;;;;;OAOG;IACF,MAAc,CAAC,kBAAkB,GAAG,aAAa,CAAC;IACnD,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;AAC3C,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"test-component.d.ts","sourceRoot":"","sources":["../../src/__mocks__/test-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAqBjD,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { TablePopupPropsContext } from '@servicetitan/design-system';
|
|
4
|
-
import { useMFEDataContext, useMFEMetadataContext } from '../contexts';
|
|
5
|
-
export const MockComponent = props => {
|
|
6
|
-
const data = useMFEDataContext();
|
|
7
|
-
const metadata = useMFEMetadataContext();
|
|
8
|
-
const popupProps = useContext(TablePopupPropsContext);
|
|
9
|
-
const appendTo = popupProps === null || popupProps === void 0 ? void 0 : popupProps({}).appendTo;
|
|
10
|
-
return (_jsxs("div", { children: [Object.entries(props).map(([name, value]) => (_jsx("span", { children: `Prop: ${name}, Value: ${stringifyValue(value)}` }, name))), Object.entries(data).map(([name, value]) => (_jsx("span", { children: `Data: ${name}, Value: ${stringifyValue(value)}` }, name))), Object.entries(metadata).map(([name, value]) => (_jsx("span", { children: `Metadata: ${name}, Value: ${stringifyValue(value)}` }, name))), _jsxs("span", { children: ["TablePopupPropsContext appendTo: ", String(appendTo)] })] }));
|
|
11
|
-
};
|
|
12
|
-
function stringifyValue(value) {
|
|
13
|
-
return JSON.stringify(value, (_key, value) => value instanceof ShadowRoot ? 'ShadowRoot' : value);
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=test-component.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"test-component.js","sourceRoot":"","sources":["../../src/__mocks__/test-component.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,CAAC,MAAM,aAAa,GAA4B,KAAK,CAAC,EAAE;IAC1D,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,EAAE,EAAE,QAAQ,CAAC;IAE3C,OAAO,CACH,0BACK,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC1C,yBAAkB,SAAS,IAAI,YAAY,cAAc,CAAC,KAAK,CAAC,EAAE,IAAvD,IAAI,CAA2D,CAC7E,CAAC,EACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACzC,yBAAkB,SAAS,IAAI,YAAY,cAAc,CAAC,KAAK,CAAC,EAAE,IAAvD,IAAI,CAA2D,CAC7E,CAAC,EACD,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC7C,yBAAkB,aAAa,IAAI,YAAY,cAAc,CAAC,KAAK,CAAC,EAAE,IAA3D,IAAI,CAA+D,CACjF,CAAC,EAEF,gEAAwC,MAAM,CAAC,QAAQ,CAAC,IAAQ,IAC9D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,KAAU;IAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzC,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CACrD,CAAC;AACN,CAAC"}
|