@servicetitan/web-components 35.0.0 → 35.2.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":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,2BAA2B,EAAiB,MAAM,WAAW,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,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,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,IAWzC,oCAAoC,eAAe,
|
|
1
|
+
{"version":3,"file":"web-component.d.ts","sourceRoot":"","sources":["../../src/utils/web-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,2BAA2B,EAAiB,MAAM,WAAW,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,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,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,IAWzC,oCAAoC,eAAe,6CA6D9D"}
|
|
@@ -59,7 +59,7 @@ export function webComponent(props) {
|
|
|
59
59
|
'data-mfe-version': version
|
|
60
60
|
},
|
|
61
61
|
// @ts-expect-error style exists on HTMLElement
|
|
62
|
-
style: resolvedBundleType === 'headless' ? {
|
|
62
|
+
style: isLoading || resolvedBundleType === 'headless' ? {
|
|
63
63
|
display: 'none'
|
|
64
64
|
} : undefined
|
|
65
65
|
}, key)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/web-component.tsx"],"sourcesContent":["import { type LDService } from '@servicetitan/launchdarkly-service';\nimport { Log } from '@servicetitan/log-service';\nimport { useOptionalDependencies } from '@servicetitan/react-ioc';\nimport { ExposedDependencies } from '@servicetitan/startup-utils';\nimport { Fragment, useMemo, useState } from 'react';\nimport { ExposedInstanceDependencies, IWebComponent } from '../common';\nimport { MFEContextData } from '../contexts/mfe-data-context';\nimport { EventBus } from '../event-bus';\nimport { HistoryManager } from '../history-manager';\nimport { LoaderDataProps } from '../loader';\nimport { BundleInfo } from './get-bundle-info';\nimport { getElementName } from './get-element-name';\n\ninterface WebComponentProps {\n basename?: string;\n bundleInfo: BundleInfo;\n eventBus: EventBus;\n exposedDependencies?: ExposedDependencies;\n exposedInstanceDependencies?: ExposedInstanceDependencies;\n ldService?: LDService;\n logService?: Log;\n}\n\nexport function webComponent(props: WebComponentProps) {\n const { basename, bundleInfo, eventBus, exposedDependencies, ldService, logService } = props;\n const { WebComponent, resolvedBundleType, disposer, mfeSupportsRerendering, version } =\n bundleInfo;\n const elementName = getElementName(bundleInfo);\n\n const exposedInstanceDependencies = ensureLDVersion(\n props.exposedInstanceDependencies,\n bundleInfo.bundledWith?.['launchdarkly-js-client-sdk']\n );\n\n return ({ LoadingFallback, ...innerProps }: LoaderDataProps) => {\n const [isLoading, setIsLoading] = useState(true);\n const [historyManager] = useOptionalDependencies(HistoryManager);\n\n const handleRef = (webComponent: IWebComponent | null) => {\n webComponent?.provide({\n ldService,\n logService,\n historyManager,\n exposedDependencies,\n exposedInstanceDependencies,\n eventBus,\n basename,\n onReady: () => {\n setIsLoading(false);\n },\n onDispose: () => {\n disposer();\n },\n });\n };\n\n // Stringify data object so that it can be passed as a data-attribute\n const stringifiedData = useMemo(() => JSON.stringify(innerProps.data), [innerProps.data]);\n\n /*\n * Set key for rendering the web component so that if the data from the Host change,\n * and the MFE's version of startup doesn't support watching for data changes, then\n * the web component will be re-mounted whenever the data changes.\n * This is only used as a fallback when the MFE's version is older.\n */\n const key = mfeSupportsRerendering ? undefined : stringifiedData;\n const dataAttrs = useMemo(() => composeDataAttributes(innerProps.data), [innerProps.data]);\n const styleUrls = getStyleUrls(bundleInfo);\n\n return (\n <Fragment>\n {isLoading && <LoadingFallback />}\n <WebComponent\n key={key}\n ref={handleRef}\n class={innerProps.className}\n {...(styleUrls && { 'style-urls': styleUrls })}\n /*\n * Continue to spread data as separate data attributes for backwards compatibility,\n * in case the Host has updated web-components, but the MFE has not\n */\n {...dataAttrs}\n data-mfe-data={stringifiedData}\n data-mfe-name={elementName}\n {...(version && { 'data-mfe-version': version })}\n // @ts-expect-error style exists on HTMLElement\n style={resolvedBundleType === 'headless'
|
|
1
|
+
{"version":3,"sources":["../../src/utils/web-component.tsx"],"sourcesContent":["import { type LDService } from '@servicetitan/launchdarkly-service';\nimport { Log } from '@servicetitan/log-service';\nimport { useOptionalDependencies } from '@servicetitan/react-ioc';\nimport { ExposedDependencies } from '@servicetitan/startup-utils';\nimport { Fragment, useMemo, useState } from 'react';\nimport { ExposedInstanceDependencies, IWebComponent } from '../common';\nimport { MFEContextData } from '../contexts/mfe-data-context';\nimport { EventBus } from '../event-bus';\nimport { HistoryManager } from '../history-manager';\nimport { LoaderDataProps } from '../loader';\nimport { BundleInfo } from './get-bundle-info';\nimport { getElementName } from './get-element-name';\n\ninterface WebComponentProps {\n basename?: string;\n bundleInfo: BundleInfo;\n eventBus: EventBus;\n exposedDependencies?: ExposedDependencies;\n exposedInstanceDependencies?: ExposedInstanceDependencies;\n ldService?: LDService;\n logService?: Log;\n}\n\nexport function webComponent(props: WebComponentProps) {\n const { basename, bundleInfo, eventBus, exposedDependencies, ldService, logService } = props;\n const { WebComponent, resolvedBundleType, disposer, mfeSupportsRerendering, version } =\n bundleInfo;\n const elementName = getElementName(bundleInfo);\n\n const exposedInstanceDependencies = ensureLDVersion(\n props.exposedInstanceDependencies,\n bundleInfo.bundledWith?.['launchdarkly-js-client-sdk']\n );\n\n return ({ LoadingFallback, ...innerProps }: LoaderDataProps) => {\n const [isLoading, setIsLoading] = useState(true);\n const [historyManager] = useOptionalDependencies(HistoryManager);\n\n const handleRef = (webComponent: IWebComponent | null) => {\n webComponent?.provide({\n ldService,\n logService,\n historyManager,\n exposedDependencies,\n exposedInstanceDependencies,\n eventBus,\n basename,\n onReady: () => {\n setIsLoading(false);\n },\n onDispose: () => {\n disposer();\n },\n });\n };\n\n // Stringify data object so that it can be passed as a data-attribute\n const stringifiedData = useMemo(() => JSON.stringify(innerProps.data), [innerProps.data]);\n\n /*\n * Set key for rendering the web component so that if the data from the Host change,\n * and the MFE's version of startup doesn't support watching for data changes, then\n * the web component will be re-mounted whenever the data changes.\n * This is only used as a fallback when the MFE's version is older.\n */\n const key = mfeSupportsRerendering ? undefined : stringifiedData;\n const dataAttrs = useMemo(() => composeDataAttributes(innerProps.data), [innerProps.data]);\n const styleUrls = getStyleUrls(bundleInfo);\n\n return (\n <Fragment>\n {isLoading && <LoadingFallback />}\n <WebComponent\n key={key}\n ref={handleRef}\n class={innerProps.className}\n {...(styleUrls && { 'style-urls': styleUrls })}\n /*\n * Continue to spread data as separate data attributes for backwards compatibility,\n * in case the Host has updated web-components, but the MFE has not\n */\n {...dataAttrs}\n data-mfe-data={stringifiedData}\n data-mfe-name={elementName}\n {...(version && { 'data-mfe-version': version })}\n // @ts-expect-error style exists on HTMLElement\n style={\n isLoading || resolvedBundleType === 'headless'\n ? { display: 'none' }\n : undefined\n }\n />\n </Fragment>\n );\n };\n}\n\n/*\n * Convert camelCase data props to kebab-case data attributes, prepended with data-\n * Ex: fooBar -> data-foo-bar\n */\nfunction composeDataAttributes(data: MFEContextData<{}> | undefined = {}) {\n return Object.fromEntries(\n Object.entries(data).map(([key, value]) => [\n 'data-' + key.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()),\n value,\n ])\n );\n}\n\nfunction ensureLDVersion(\n exposedInstanceDependencies: ExposedInstanceDependencies = {},\n version?: string\n) {\n if (version && !exposedInstanceDependencies.launchDarkly?.ldService) {\n return { ...exposedInstanceDependencies, launchDarkly: { version } };\n }\n return exposedInstanceDependencies;\n}\n\nfunction getStyleUrls({ urls }: Pick<BundleInfo, 'urls'>) {\n if (urls.css.length) {\n return encodeURIComponent(JSON.stringify(urls.css));\n }\n}\n"],"names":["useOptionalDependencies","Fragment","useMemo","useState","HistoryManager","getElementName","webComponent","props","bundleInfo","basename","eventBus","exposedDependencies","ldService","logService","WebComponent","resolvedBundleType","disposer","mfeSupportsRerendering","version","elementName","exposedInstanceDependencies","ensureLDVersion","bundledWith","LoadingFallback","innerProps","isLoading","setIsLoading","historyManager","handleRef","provide","onReady","onDispose","stringifiedData","JSON","stringify","data","key","undefined","dataAttrs","composeDataAttributes","styleUrls","getStyleUrls","ref","class","className","data-mfe-data","data-mfe-name","style","display","Object","fromEntries","entries","map","value","replace","letter","toLowerCase","launchDarkly","urls","css","length","encodeURIComponent"],"mappings":";AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAIpD,SAASC,cAAc,QAAQ,qBAAqB;AAGpD,SAASC,cAAc,QAAQ,qBAAqB;AAYpD,OAAO,SAASC,aAAaC,KAAwB;QAQ7CC;IAPJ,MAAM,EAAEC,QAAQ,EAAED,UAAU,EAAEE,QAAQ,EAAEC,mBAAmB,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGN;IACvF,MAAM,EAAEO,YAAY,EAAEC,kBAAkB,EAAEC,QAAQ,EAAEC,sBAAsB,EAAEC,OAAO,EAAE,GACjFV;IACJ,MAAMW,cAAcd,eAAeG;IAEnC,MAAMY,8BAA8BC,gBAChCd,MAAMa,2BAA2B,GACjCZ,0BAAAA,WAAWc,WAAW,cAAtBd,8CAAAA,uBAAwB,CAAC,6BAA6B;IAG1D,OAAO,CAAC,EAAEe,eAAe,EAAE,GAAGC,YAA6B;QACvD,MAAM,CAACC,WAAWC,aAAa,GAAGvB,SAAS;QAC3C,MAAM,CAACwB,eAAe,GAAG3B,wBAAwBI;QAEjD,MAAMwB,YAAY,CAACtB;YACfA,yBAAAA,mCAAAA,aAAcuB,OAAO,CAAC;gBAClBjB;gBACAC;gBACAc;gBACAhB;gBACAS;gBACAV;gBACAD;gBACAqB,SAAS;oBACLJ,aAAa;gBACjB;gBACAK,WAAW;oBACPf;gBACJ;YACJ;QACJ;QAEA,qEAAqE;QACrE,MAAMgB,kBAAkB9B,QAAQ,IAAM+B,KAAKC,SAAS,CAACV,WAAWW,IAAI,GAAG;YAACX,WAAWW,IAAI;SAAC;QAExF;;;;;SAKC,GACD,MAAMC,MAAMnB,yBAAyBoB,YAAYL;QACjD,MAAMM,YAAYpC,QAAQ,IAAMqC,sBAAsBf,WAAWW,IAAI,GAAG;YAACX,WAAWW,IAAI;SAAC;QACzF,MAAMK,YAAYC,aAAajC;QAE/B,qBACI,MAACP;;gBACIwB,2BAAa,KAACF;8BACf,KAACT;oBAEG4B,KAAKd;oBACLe,OAAOnB,WAAWoB,SAAS;oBAC1B,GAAIJ,aAAa;wBAAE,cAAcA;oBAAU,CAAC;oBAK5C,GAAGF,SAAS;oBACbO,iBAAeb;oBACfc,iBAAe3B;oBACd,GAAID,WAAW;wBAAE,oBAAoBA;oBAAQ,CAAC;oBAC/C,+CAA+C;oBAC/C6B,OACItB,aAAaV,uBAAuB,aAC9B;wBAAEiC,SAAS;oBAAO,IAClBX;mBAhBLD;;;IAqBrB;AACJ;AAEA;;;CAGC,GACD,SAASG,sBAAsBJ,OAAuC,CAAC,CAAC;IACpE,OAAOc,OAAOC,WAAW,CACrBD,OAAOE,OAAO,CAAChB,MAAMiB,GAAG,CAAC,CAAC,CAAChB,KAAKiB,MAAM,GAAK;YACvC,UAAUjB,IAAIkB,OAAO,CAAC,UAAUC,CAAAA,SAAU,MAAMA,OAAOC,WAAW;YAClEH;SACH;AAET;AAEA,SAAShC,gBACLD,8BAA2D,CAAC,CAAC,EAC7DF,OAAgB;QAEAE;IAAhB,IAAIF,WAAW,GAACE,4CAAAA,4BAA4BqC,YAAY,cAAxCrC,gEAAAA,0CAA0CR,SAAS,GAAE;QACjE,OAAO;YAAE,GAAGQ,2BAA2B;YAAEqC,cAAc;gBAAEvC;YAAQ;QAAE;IACvE;IACA,OAAOE;AACX;AAEA,SAASqB,aAAa,EAAEiB,IAAI,EAA4B;IACpD,IAAIA,KAAKC,GAAG,CAACC,MAAM,EAAE;QACjB,OAAOC,mBAAmB5B,KAAKC,SAAS,CAACwB,KAAKC,GAAG;IACrD;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/web-components",
|
|
3
|
-
"version": "35.
|
|
3
|
+
"version": "35.2.0",
|
|
4
4
|
"description": "Framework to build, register, and load Microfrontends into host applications",
|
|
5
5
|
"homepage": "https://docs.st.dev/docs/frontend/uikit/web-components",
|
|
6
6
|
"repository": {
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
"src"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@servicetitan/error-boundary": "35.
|
|
20
|
-
"@servicetitan/startup-utils": "35.
|
|
19
|
+
"@servicetitan/error-boundary": "35.2.0",
|
|
20
|
+
"@servicetitan/startup-utils": "35.2.0",
|
|
21
21
|
"lodash.get": "~4.4.2",
|
|
22
22
|
"mitt": "~3.0.1",
|
|
23
23
|
"semver": "~7.7.4"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@servicetitan/anvil2": "^2.
|
|
26
|
+
"@servicetitan/anvil2": "^2.6.1",
|
|
27
27
|
"@servicetitan/design-system": "~14.5.3",
|
|
28
|
-
"@servicetitan/launchdarkly-service": "35.
|
|
29
|
-
"@servicetitan/log-service": "35.
|
|
30
|
-
"@servicetitan/react-ioc": "35.
|
|
28
|
+
"@servicetitan/launchdarkly-service": "35.2.0",
|
|
29
|
+
"@servicetitan/log-service": "35.2.0",
|
|
30
|
+
"@servicetitan/react-ioc": "35.2.0",
|
|
31
31
|
"@testing-library/dom": "^10.4.1",
|
|
32
32
|
"@testing-library/jest-dom": "^6.9.1",
|
|
33
33
|
"@testing-library/react": "^16.3.2",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@servicetitan/anvil2": ">=1.5.0",
|
|
47
47
|
"@servicetitan/design-system": ">=14.5.3",
|
|
48
|
-
"@servicetitan/launchdarkly-service": "35.
|
|
49
|
-
"@servicetitan/log-service": "35.
|
|
50
|
-
"@servicetitan/react-ioc": "35.
|
|
48
|
+
"@servicetitan/launchdarkly-service": "35.2.0",
|
|
49
|
+
"@servicetitan/log-service": "35.2.0",
|
|
50
|
+
"@servicetitan/react-ioc": "35.2.0",
|
|
51
51
|
"history": "~4.10.1",
|
|
52
52
|
"react": ">=17.0.2",
|
|
53
53
|
"react-dom": ">=17.0.2"
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"cli": {
|
|
70
70
|
"webpack": false
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "3dee12f1c7b7d2cf01180a187bd2b919a56c1fed"
|
|
73
73
|
}
|
|
@@ -302,6 +302,12 @@ describe('[web-components] Loader', () => {
|
|
|
302
302
|
return result;
|
|
303
303
|
}
|
|
304
304
|
|
|
305
|
+
test('hides web component', async () => {
|
|
306
|
+
await scriptLoadedSetup();
|
|
307
|
+
|
|
308
|
+
expect(document.querySelector(WEB_COMPONENT_NAME)).not.toBeVisible();
|
|
309
|
+
});
|
|
310
|
+
|
|
305
311
|
function itAddsJsEntrypointToWebComponent(entrypointTestText: string, urlFn: () => string) {
|
|
306
312
|
test(`adds the ${entrypointTestText} to a script tag`, async () => {
|
|
307
313
|
await scriptLoadedSetup();
|
|
@@ -608,6 +614,12 @@ describe('[web-components] Loader', () => {
|
|
|
608
614
|
expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
|
|
609
615
|
});
|
|
610
616
|
|
|
617
|
+
test('shows web component', async () => {
|
|
618
|
+
await webComponentReadySetup();
|
|
619
|
+
|
|
620
|
+
expect(document.querySelector(WEB_COMPONENT_NAME)).toBeVisible();
|
|
621
|
+
});
|
|
622
|
+
|
|
611
623
|
describe('when data is provided', () => {
|
|
612
624
|
beforeEach(() => {
|
|
613
625
|
props.data = { foo: 'bar' };
|
|
@@ -84,7 +84,11 @@ export function webComponent(props: WebComponentProps) {
|
|
|
84
84
|
data-mfe-name={elementName}
|
|
85
85
|
{...(version && { 'data-mfe-version': version })}
|
|
86
86
|
// @ts-expect-error style exists on HTMLElement
|
|
87
|
-
style={
|
|
87
|
+
style={
|
|
88
|
+
isLoading || resolvedBundleType === 'headless'
|
|
89
|
+
? { display: 'none' }
|
|
90
|
+
: undefined
|
|
91
|
+
}
|
|
88
92
|
/>
|
|
89
93
|
</Fragment>
|
|
90
94
|
);
|