@servicetitan/web-components 34.2.1 → 34.3.0-beta.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/globals.d.ts +3 -3
- package/dist/globals.d.ts.map +1 -1
- package/dist/globals.js +11 -4
- package/dist/globals.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/register-headless.d.ts.map +1 -1
- package/dist/register-headless.js +1 -0
- package/dist/register-headless.js.map +1 -1
- package/dist/register.d.ts.map +1 -1
- package/dist/register.js +34 -35
- package/dist/register.js.map +1 -1
- package/dist/render.d.ts.map +1 -1
- package/dist/render.js +3 -11
- package/dist/render.js.map +1 -1
- package/dist/style-injector.d.ts +14 -0
- package/dist/style-injector.d.ts.map +1 -0
- package/dist/style-injector.js +73 -0
- package/dist/style-injector.js.map +1 -0
- package/dist/utils/get-bundle-info.d.ts +1 -0
- package/dist/utils/get-bundle-info.d.ts.map +1 -1
- package/dist/utils/get-bundle-info.js +16 -4
- package/dist/utils/get-bundle-info.js.map +1 -1
- package/dist/utils/get-entry-points.d.ts +2 -0
- package/dist/utils/get-entry-points.d.ts.map +1 -1
- package/dist/utils/get-entry-points.js.map +1 -1
- package/dist/utils/get-ld-service-token.d.ts +2 -3
- package/dist/utils/get-ld-service-token.d.ts.map +1 -1
- package/dist/utils/get-ld-service-token.js +2 -7
- package/dist/utils/get-ld-service-token.js.map +1 -1
- package/dist/utils/load-scripts.d.ts +1 -1
- package/dist/utils/load-scripts.d.ts.map +1 -1
- package/dist/utils/load-scripts.js +6 -2
- package/dist/utils/load-scripts.js.map +1 -1
- package/package.json +11 -12
- package/src/globals.ts +21 -10
- package/src/index.ts +1 -0
- package/src/register-headless.ts +1 -0
- package/src/register.tsx +45 -42
- package/src/render.ts +3 -14
- package/src/style-injector.tsx +93 -0
- package/src/utils/get-bundle-info.ts +16 -4
- package/src/utils/get-entry-points.ts +2 -0
- package/src/utils/get-ld-service-token.ts +2 -10
- package/src/utils/load-scripts.ts +7 -2
- package/src/vite-env.d.ts +2 -0
package/dist/globals.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ declare global {
|
|
|
5
5
|
export const EXPOSED_INSTANCE_DEPENDENCIES: ExposedInstanceDependencies | undefined;
|
|
6
6
|
export const WEB_COMPONENT_NAME: string | undefined;
|
|
7
7
|
}
|
|
8
|
-
declare const _EXPOSED_DEPENDENCIES:
|
|
9
|
-
declare const _WEB_COMPONENT_NAME:
|
|
10
|
-
declare const _EXPOSED_INSTANCE_DEPENDENCIES:
|
|
8
|
+
declare const _EXPOSED_DEPENDENCIES: any;
|
|
9
|
+
declare const _WEB_COMPONENT_NAME: any;
|
|
10
|
+
declare const _EXPOSED_INSTANCE_DEPENDENCIES: any;
|
|
11
11
|
export { _EXPOSED_DEPENDENCIES as EXPOSED_DEPENDENCIES, _EXPOSED_INSTANCE_DEPENDENCIES as EXPOSED_INSTANCE_DEPENDENCIES, _WEB_COMPONENT_NAME as WEB_COMPONENT_NAME, };
|
|
12
12
|
//# sourceMappingURL=globals.d.ts.map
|
package/dist/globals.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,CAAC,MAAM,CAAC;IACX,MAAM,CAAC,MAAM,oBAAoB,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,MAAM,6BAA6B,EAAE,2BAA2B,GAAG,SAAS,CAAC;IACpF,MAAM,CAAC,MAAM,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;CACvD;AAUD,QAAA,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,CAAC,MAAM,CAAC;IACX,MAAM,CAAC,MAAM,oBAAoB,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,MAAM,6BAA6B,EAAE,2BAA2B,GAAG,SAAS,CAAC;IACpF,MAAM,CAAC,MAAM,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;CACvD;AAUD,QAAA,MAAM,qBAAqB,KAMrB,CAAC;AAEP,QAAA,MAAM,mBAAmB,KAMnB,CAAC;AACP,QAAA,MAAM,8BAA8B,KAM9B,CAAC;AAEP,OAAO,EACH,qBAAqB,IAAI,oBAAoB,EAC7C,8BAA8B,IAAI,6BAA6B,EAC/D,mBAAmB,IAAI,kBAAkB,GAC5C,CAAC"}
|
package/dist/globals.js
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/naming-convention */
|
|
1
|
+
/* eslint-disable @typescript-eslint/naming-convention */ var _get, _get1, _get2;
|
|
2
|
+
function get(fetch) {
|
|
2
3
|
try {
|
|
3
4
|
return fetch();
|
|
4
5
|
} catch (unused) {
|
|
5
6
|
return undefined;
|
|
6
7
|
}
|
|
7
8
|
}
|
|
8
|
-
const _EXPOSED_DEPENDENCIES = get(()=>{
|
|
9
|
+
const _EXPOSED_DEPENDENCIES = (_get = get(()=>{
|
|
9
10
|
return EXPOSED_DEPENDENCIES;
|
|
11
|
+
})) !== null && _get !== void 0 ? _get : get(()=>{
|
|
12
|
+
return import.meta.env.EXPOSED_DEPENDENCIES;
|
|
10
13
|
});
|
|
11
|
-
const _WEB_COMPONENT_NAME = get(()=>{
|
|
14
|
+
const _WEB_COMPONENT_NAME = (_get1 = get(()=>{
|
|
12
15
|
return WEB_COMPONENT_NAME;
|
|
16
|
+
})) !== null && _get1 !== void 0 ? _get1 : get(()=>{
|
|
17
|
+
return import.meta.env.WEB_COMPONENT_NAME;
|
|
13
18
|
});
|
|
14
|
-
const _EXPOSED_INSTANCE_DEPENDENCIES = get(()=>{
|
|
19
|
+
const _EXPOSED_INSTANCE_DEPENDENCIES = (_get2 = get(()=>{
|
|
15
20
|
return EXPOSED_INSTANCE_DEPENDENCIES;
|
|
21
|
+
})) !== null && _get2 !== void 0 ? _get2 : get(()=>{
|
|
22
|
+
return import.meta.env.EXPOSED_INSTANCE_DEPENDENCIES;
|
|
16
23
|
});
|
|
17
24
|
export { _EXPOSED_DEPENDENCIES as EXPOSED_DEPENDENCIES, _EXPOSED_INSTANCE_DEPENDENCIES as EXPOSED_INSTANCE_DEPENDENCIES, _WEB_COMPONENT_NAME as WEB_COMPONENT_NAME };
|
|
18
25
|
|
package/dist/globals.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/globals.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { ExposedDependencies } from '@servicetitan/startup-utils';\nimport { ExposedInstanceDependencies } from './common';\n\ndeclare global {\n export const EXPOSED_DEPENDENCIES: ExposedDependencies | undefined;\n export const EXPOSED_INSTANCE_DEPENDENCIES: ExposedInstanceDependencies | undefined;\n export const WEB_COMPONENT_NAME: string | undefined;\n}\n\nfunction get<T>(fetch: () => T) {\n try {\n return fetch();\n } catch {\n return undefined;\n }\n}\n\nconst _EXPOSED_DEPENDENCIES
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { ExposedDependencies } from '@servicetitan/startup-utils';\nimport { ExposedInstanceDependencies } from './common';\n\ndeclare global {\n export const EXPOSED_DEPENDENCIES: ExposedDependencies | undefined;\n export const EXPOSED_INSTANCE_DEPENDENCIES: ExposedInstanceDependencies | undefined;\n export const WEB_COMPONENT_NAME: string | undefined;\n}\n\nfunction get<T>(fetch: () => T) {\n try {\n return fetch();\n } catch {\n return undefined;\n }\n}\n\nconst _EXPOSED_DEPENDENCIES =\n get(() => {\n return EXPOSED_DEPENDENCIES;\n }) ??\n get(() => {\n return import.meta.env.EXPOSED_DEPENDENCIES;\n });\n\nconst _WEB_COMPONENT_NAME =\n get(() => {\n return WEB_COMPONENT_NAME;\n }) ??\n get(() => {\n return import.meta.env.WEB_COMPONENT_NAME;\n });\nconst _EXPOSED_INSTANCE_DEPENDENCIES =\n get(() => {\n return EXPOSED_INSTANCE_DEPENDENCIES;\n }) ??\n get(() => {\n return import.meta.env.EXPOSED_INSTANCE_DEPENDENCIES;\n });\n\nexport {\n _EXPOSED_DEPENDENCIES as EXPOSED_DEPENDENCIES,\n _EXPOSED_INSTANCE_DEPENDENCIES as EXPOSED_INSTANCE_DEPENDENCIES,\n _WEB_COMPONENT_NAME as WEB_COMPONENT_NAME,\n};\n"],"names":["get","fetch","undefined","_EXPOSED_DEPENDENCIES","EXPOSED_DEPENDENCIES","env","_WEB_COMPONENT_NAME","WEB_COMPONENT_NAME","_EXPOSED_INSTANCE_DEPENDENCIES","EXPOSED_INSTANCE_DEPENDENCIES"],"mappings":"AAAA,uDAAuD,OAmBnDA,MAQAA,OAOAA;AAxBJ,SAASA,IAAOC,KAAc;IAC1B,IAAI;QACA,OAAOA;IACX,EAAE,eAAM;QACJ,OAAOC;IACX;AACJ;AAEA,MAAMC,yBACFH,OAAAA,IAAI;IACA,OAAOI;AACX,gBAFAJ,kBAAAA,OAGAA,IAAI;IACA,OAAO,YAAYK,GAAG,CAACD,oBAAoB;AAC/C;AAEJ,MAAME,uBACFN,QAAAA,IAAI;IACA,OAAOO;AACX,gBAFAP,mBAAAA,QAGAA,IAAI;IACA,OAAO,YAAYK,GAAG,CAACE,kBAAkB;AAC7C;AACJ,MAAMC,kCACFR,QAAAA,IAAI;IACA,OAAOS;AACX,gBAFAT,mBAAAA,QAGAA,IAAI;IACA,OAAO,YAAYK,GAAG,CAACI,6BAA6B;AACxD;AAEJ,SACIN,yBAAyBC,oBAAoB,EAC7CI,kCAAkCC,6BAA6B,EAC/DH,uBAAuBC,kBAAkB,GAC3C"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,5 +8,6 @@ export * from './loader';
|
|
|
8
8
|
export * from './register';
|
|
9
9
|
export * from './register-headless';
|
|
10
10
|
export * from './use-prefetch';
|
|
11
|
+
export { withStyleInjector } from './style-injector';
|
|
11
12
|
export type { JSON, JSONPrimitive, Serializable } from './types';
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAE/B,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './common';\nexport * from './contexts';\nexport * from './event-bus';\nexport * from './get-value-for-environment';\nexport * from './headless-loader';\nexport * from './history-manager';\nexport * from './loader';\nexport * from './register';\nexport * from './register-headless';\nexport * from './use-prefetch';\n\nexport type { JSON, JSONPrimitive, Serializable } from './types';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,8BAA8B;AAC5C,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './common';\nexport * from './contexts';\nexport * from './event-bus';\nexport * from './get-value-for-environment';\nexport * from './headless-loader';\nexport * from './history-manager';\nexport * from './loader';\nexport * from './register';\nexport * from './register-headless';\nexport * from './use-prefetch';\n\nexport { withStyleInjector } from './style-injector';\nexport type { JSON, JSONPrimitive, Serializable } from './types';\n"],"names":["withStyleInjector"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,8BAA8B;AAC5C,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAE/B,SAASA,iBAAiB,QAAQ,mBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register-headless.d.ts","sourceRoot":"","sources":["../src/register-headless.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAiB,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"register-headless.d.ts","sourceRoot":"","sources":["../src/register-headless.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAiB,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,oBAAoB,CAAC,QAAQ,EAAE,SAAS,SAAS,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAC7E,OAAO,EACP,WAAW,GAAG,YAAY,CAC7B,GAAG;IACA,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACpC,CAAC;AACF,MAAM,MAAM,gBAAgB,CAAC,QAAQ,GAAG,GAAG,EAAE,SAAS,SAAS,QAAQ,GAAG,QAAQ,IAAI,CAClF,MAAM,EAAE,oBAAoB,CAAC,QAAQ,EAAE,SAAS,CAAC,KAChD,IAAI,CAAC;AAEV,wBAAgB,gBAAgB,CAC5B,iBAAiB,CAAC,EAAE,gBAAgB,EACpC,oBAAoB,CAAC,EAAE,gBAAgB,QAmE1C"}
|
|
@@ -11,6 +11,7 @@ function _define_property(obj, key, value) {
|
|
|
11
11
|
}
|
|
12
12
|
return obj;
|
|
13
13
|
}
|
|
14
|
+
import { WEB_COMPONENT_NAME } from './globals';
|
|
14
15
|
export function registerHeadless(connectedCallback, disconnectedCallback) {
|
|
15
16
|
class Headless extends HTMLElement {
|
|
16
17
|
async connectedCallback() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/register-headless.ts"],"sourcesContent":["import type { LDService } from '@servicetitan/launchdarkly-service';\nimport type { Log } from '@servicetitan/log-service';\nimport type { Entries, IWebComponent } from './common';\nimport type { EventBus } from './event-bus';\nimport { Serializable } from './types';\n\ntype HeadlessCallbackArgs<TMfeData, TEventBus extends EventBus = EventBus> = Pick<\n Entries,\n 'ldService' | 'logService'\n> & {\n eventBus?: TEventBus;\n mfeData?: Serializable<TMfeData>;\n};\nexport type HeadlessCallback<TMfeData = any, TEventBus extends EventBus = EventBus> = (\n params: HeadlessCallbackArgs<TMfeData, TEventBus>\n) => void;\n\nexport function registerHeadless(\n connectedCallback?: HeadlessCallback,\n disconnectedCallback?: HeadlessCallback\n) {\n class Headless extends HTMLElement implements IWebComponent {\n private ldService?: LDService;\n private logService?: Log;\n private eventBus?: EventBus;\n private readonly readyPromise: Promise<void>;\n private resolveReadyPromise!: () => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise(resolve => {\n this.resolveReadyPromise = resolve;\n });\n }\n\n provide = (entries: Entries) => {\n this.ldService = entries.ldService;\n this.logService = entries.logService;\n this.eventBus = entries.eventBus;\n this.resolveReadyPromise();\n };\n\n async connectedCallback() {\n await this.readyPromise;\n connectedCallback?.({\n ...this.services,\n mfeData: this.mfeData,\n });\n }\n\n async disconnectedCallback() {\n await this.readyPromise;\n disconnectedCallback?.({\n ...this.services,\n mfeData: this.mfeData,\n });\n }\n\n connectedMoveCallback() {\n /*\n * Defining connectedMoveCallback prevents connectedCallback or disconnectedCallback\n * from running when the element is moved in the DOM\n * https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks\n */\n }\n\n private get services() {\n return {\n ldService: this.ldService,\n logService: this.logService,\n eventBus: this.eventBus,\n };\n }\n\n private get mfeData() {\n return JSON.parse(this.dataset.mfeData ?? '{}');\n }\n }\n\n if (!WEB_COMPONENT_NAME) {\n // eslint-disable-next-line no-console\n console.error('\"WEB_COMPONENT_NAME\" is not defined!');\n return;\n }\n\n window.customElements.define(`headless-${WEB_COMPONENT_NAME}`, Headless);\n}\n"],"names":["registerHeadless","connectedCallback","disconnectedCallback","Headless","HTMLElement","readyPromise","services","mfeData","connectedMoveCallback","ldService","logService","eventBus","JSON","parse","dataset","resolveReadyPromise","provide","entries","Promise","resolve","
|
|
1
|
+
{"version":3,"sources":["../src/register-headless.ts"],"sourcesContent":["import type { LDService } from '@servicetitan/launchdarkly-service';\nimport type { Log } from '@servicetitan/log-service';\nimport type { Entries, IWebComponent } from './common';\nimport type { EventBus } from './event-bus';\nimport { WEB_COMPONENT_NAME } from './globals';\nimport { Serializable } from './types';\n\ntype HeadlessCallbackArgs<TMfeData, TEventBus extends EventBus = EventBus> = Pick<\n Entries,\n 'ldService' | 'logService'\n> & {\n eventBus?: TEventBus;\n mfeData?: Serializable<TMfeData>;\n};\nexport type HeadlessCallback<TMfeData = any, TEventBus extends EventBus = EventBus> = (\n params: HeadlessCallbackArgs<TMfeData, TEventBus>\n) => void;\n\nexport function registerHeadless(\n connectedCallback?: HeadlessCallback,\n disconnectedCallback?: HeadlessCallback\n) {\n class Headless extends HTMLElement implements IWebComponent {\n private ldService?: LDService;\n private logService?: Log;\n private eventBus?: EventBus;\n private readonly readyPromise: Promise<void>;\n private resolveReadyPromise!: () => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise(resolve => {\n this.resolveReadyPromise = resolve;\n });\n }\n\n provide = (entries: Entries) => {\n this.ldService = entries.ldService;\n this.logService = entries.logService;\n this.eventBus = entries.eventBus;\n this.resolveReadyPromise();\n };\n\n async connectedCallback() {\n await this.readyPromise;\n connectedCallback?.({\n ...this.services,\n mfeData: this.mfeData,\n });\n }\n\n async disconnectedCallback() {\n await this.readyPromise;\n disconnectedCallback?.({\n ...this.services,\n mfeData: this.mfeData,\n });\n }\n\n connectedMoveCallback() {\n /*\n * Defining connectedMoveCallback prevents connectedCallback or disconnectedCallback\n * from running when the element is moved in the DOM\n * https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks\n */\n }\n\n private get services() {\n return {\n ldService: this.ldService,\n logService: this.logService,\n eventBus: this.eventBus,\n };\n }\n\n private get mfeData() {\n return JSON.parse(this.dataset.mfeData ?? '{}');\n }\n }\n\n if (!WEB_COMPONENT_NAME) {\n // eslint-disable-next-line no-console\n console.error('\"WEB_COMPONENT_NAME\" is not defined!');\n return;\n }\n\n window.customElements.define(`headless-${WEB_COMPONENT_NAME}`, Headless);\n}\n"],"names":["WEB_COMPONENT_NAME","registerHeadless","connectedCallback","disconnectedCallback","Headless","HTMLElement","readyPromise","services","mfeData","connectedMoveCallback","ldService","logService","eventBus","JSON","parse","dataset","resolveReadyPromise","provide","entries","Promise","resolve","console","error","window","customElements","define"],"mappings":";;;;;;;;;;;;;AAIA,SAASA,kBAAkB,QAAQ,YAAY;AAc/C,OAAO,SAASC,iBACZC,iBAAoC,EACpCC,oBAAuC;IAEvC,MAAMC,iBAAiBC;QAqBnB,MAAMH,oBAAoB;YACtB,MAAM,IAAI,CAACI,YAAY;YACvBJ,8BAAAA,wCAAAA,kBAAoB;gBAChB,GAAG,IAAI,CAACK,QAAQ;gBAChBC,SAAS,IAAI,CAACA,OAAO;YACzB;QACJ;QAEA,MAAML,uBAAuB;YACzB,MAAM,IAAI,CAACG,YAAY;YACvBH,iCAAAA,2CAAAA,qBAAuB;gBACnB,GAAG,IAAI,CAACI,QAAQ;gBAChBC,SAAS,IAAI,CAACA,OAAO;YACzB;QACJ;QAEAC,wBAAwB;QACpB;;;;aAIC,GACL;QAEA,IAAYF,WAAW;YACnB,OAAO;gBACHG,WAAW,IAAI,CAACA,SAAS;gBACzBC,YAAY,IAAI,CAACA,UAAU;gBAC3BC,UAAU,IAAI,CAACA,QAAQ;YAC3B;QACJ;QAEA,IAAYJ,UAAU;gBACA;YAAlB,OAAOK,KAAKC,KAAK,EAAC,wBAAA,IAAI,CAACC,OAAO,CAACP,OAAO,cAApB,mCAAA,wBAAwB;QAC9C;QAhDA,aAAc;YACV,KAAK,IAPT,uBAAQE,aAAR,KAAA,IACA,uBAAQC,cAAR,KAAA,IACA,uBAAQC,YAAR,KAAA,IACA,uBAAiBN,gBAAjB,KAAA,IACA,uBAAQU,uBAAR,KAAA,IASAC,uBAAAA,WAAU,CAACC;gBACP,IAAI,CAACR,SAAS,GAAGQ,QAAQR,SAAS;gBAClC,IAAI,CAACC,UAAU,GAAGO,QAAQP,UAAU;gBACpC,IAAI,CAACC,QAAQ,GAAGM,QAAQN,QAAQ;gBAChC,IAAI,CAACI,mBAAmB;YAC5B;YAVI,IAAI,CAACV,YAAY,GAAG,IAAIa,QAAQC,CAAAA;gBAC5B,IAAI,CAACJ,mBAAmB,GAAGI;YAC/B;QACJ;IA4CJ;IAEA,IAAI,CAACpB,oBAAoB;QACrB,sCAAsC;QACtCqB,QAAQC,KAAK,CAAC;QACd;IACJ;IAEAC,OAAOC,cAAc,CAACC,MAAM,CAAC,CAAC,SAAS,EAAEzB,oBAAoB,EAAEI;AACnE"}
|
package/dist/register.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAkD,MAAM,OAAO,CAAC;AAiCtF,MAAM,WAAW,eAAe;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;CACtC;AAoCD,wBAAgB,QAAQ,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,QAiN3F"}
|
package/dist/register.js
CHANGED
|
@@ -12,6 +12,8 @@ function _define_property(obj, key, value) {
|
|
|
12
12
|
return obj;
|
|
13
13
|
}
|
|
14
14
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
+
import * as Anvil2 from '@servicetitan/anvil2';
|
|
16
|
+
import * as Anvil1 from '@servicetitan/design-system';
|
|
15
17
|
import { Log } from '@servicetitan/log-service';
|
|
16
18
|
import { Provider } from '@servicetitan/react-ioc';
|
|
17
19
|
import { useEffect } from 'react';
|
|
@@ -37,6 +39,30 @@ const Placeholder = ()=>/*#__PURE__*/ _jsx("div", {
|
|
|
37
39
|
display: 'none'
|
|
38
40
|
}
|
|
39
41
|
});
|
|
42
|
+
const Anvil1Providers = ({ root, portal, children })=>{
|
|
43
|
+
if (Anvil1.DefaultPortalContext === undefined || Anvil1.TablePopupPropsContext === undefined) {
|
|
44
|
+
return children;
|
|
45
|
+
}
|
|
46
|
+
return /*#__PURE__*/ _jsx(Anvil1.DefaultPortalContext.Provider, {
|
|
47
|
+
value: portal,
|
|
48
|
+
children: /*#__PURE__*/ _jsx(Anvil1.TablePopupPropsContext.Provider, {
|
|
49
|
+
value: (props)=>({
|
|
50
|
+
...props,
|
|
51
|
+
appendTo: root
|
|
52
|
+
}),
|
|
53
|
+
children: children
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
const Anvil2Providers = ({ portalAnvilContainer, children })=>{
|
|
58
|
+
if (Anvil2.PortalProvider === undefined) {
|
|
59
|
+
return children;
|
|
60
|
+
}
|
|
61
|
+
return /*#__PURE__*/ _jsx(Anvil2.PortalProvider, {
|
|
62
|
+
root: portalAnvilContainer,
|
|
63
|
+
children: children
|
|
64
|
+
});
|
|
65
|
+
};
|
|
40
66
|
export function register(Component, light, options) {
|
|
41
67
|
class WebComponent extends HTMLElement {
|
|
42
68
|
connectedCallback() {
|
|
@@ -103,42 +129,15 @@ export function register(Component, light, options) {
|
|
|
103
129
|
attributeChangedCallback() {
|
|
104
130
|
this.render();
|
|
105
131
|
}
|
|
106
|
-
withAnvil1Providers(children) {
|
|
107
|
-
try {
|
|
108
|
-
/**
|
|
109
|
-
* Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
|
|
110
|
-
* @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
|
|
111
|
-
*/ const { DefaultPortalContext, TablePopupPropsContext } = require('@servicetitan/design-system');
|
|
112
|
-
return /*#__PURE__*/ _jsx(DefaultPortalContext.Provider, {
|
|
113
|
-
value: this.portal,
|
|
114
|
-
children: /*#__PURE__*/ _jsx(TablePopupPropsContext.Provider, {
|
|
115
|
-
value: (props)=>({
|
|
116
|
-
...props,
|
|
117
|
-
appendTo: this.root
|
|
118
|
-
}),
|
|
119
|
-
children: children
|
|
120
|
-
})
|
|
121
|
-
});
|
|
122
|
-
} catch (unused) {
|
|
123
|
-
return children;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
withAnvil2Providers(children) {
|
|
127
|
-
try {
|
|
128
|
-
/**
|
|
129
|
-
* Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
|
|
130
|
-
* @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
|
|
131
|
-
*/ const { PortalProvider } = require('@servicetitan/anvil2');
|
|
132
|
-
return /*#__PURE__*/ _jsx(PortalProvider, {
|
|
133
|
-
root: this.portalAnvilContainer,
|
|
134
|
-
children: children
|
|
135
|
-
});
|
|
136
|
-
} catch (unused) {
|
|
137
|
-
return children;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
132
|
withProviders(children) {
|
|
141
|
-
return
|
|
133
|
+
return /*#__PURE__*/ _jsx(Anvil2Providers, {
|
|
134
|
+
portalAnvilContainer: this.portalAnvilContainer,
|
|
135
|
+
children: /*#__PURE__*/ _jsx(Anvil1Providers, {
|
|
136
|
+
root: this.root,
|
|
137
|
+
portal: this.portal,
|
|
138
|
+
children: children
|
|
139
|
+
})
|
|
140
|
+
});
|
|
142
141
|
}
|
|
143
142
|
constructor(...args){
|
|
144
143
|
super(...args), _define_property(this, "root", void 0), _define_property(this, "portal", void 0), _define_property(this, "portalAnvilContainer", void 0), _define_property(this, "styles", {
|
package/dist/register.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/register.tsx"],"sourcesContent":["import { type LDService } from '@servicetitan/launchdarkly-service';\nimport { Log } from '@servicetitan/log-service';\nimport { Provider } from '@servicetitan/react-ioc';\nimport { ExposedDependencies } from '@servicetitan/startup-utils';\nimport { ComponentType, FC, ReactElement, useEffect } from 'react';\nimport {\n BASENAME_TOKEN,\n Entries,\n EXPOSED_DEPENDENCIES_TOKEN,\n EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,\n ExposedInstanceDependencies,\n IS_WEB_COMPONENT_TOKEN,\n IWebComponent,\n RENDER_ROOT_TOKEN,\n} from './common';\nimport { MFEDataContext } from './contexts/mfe-data-context';\nimport { MFEMetadataContext } from './contexts/mfe-metadata-context';\nimport { EVENT_BUS_TOKEN, EventBus } from './event-bus';\nimport { WEB_COMPONENT_NAME } from './globals';\nimport { HistoryManager } from './history-manager';\nimport { render } from './render';\nimport { getElementName, getLDServiceToken } from './utils';\n\nfunction createLink(url: string, onLoad: () => void) {\n const element = document.createElement('link');\n\n element.href = url;\n element.rel = 'stylesheet';\n element.crossOrigin = 'anonymous';\n element.onload = onLoad;\n element.onerror = onLoad;\n\n return element;\n}\n\nconst Placeholder: FC = () => <div style={{ display: 'none' }} />;\n\nexport interface RegisterOptions {\n legacyRoot?: boolean;\n sharedDependenciesNames?: string[];\n}\n\nexport function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {\n class WebComponent extends HTMLElement implements IWebComponent {\n private root?: ShadowRoot;\n private portal?: ShadowRoot;\n private portalAnvilContainer?: HTMLDivElement;\n\n private styles: {\n total: number;\n loaded: number;\n elements: HTMLElement[];\n } = { total: 0, loaded: 0, elements: [] };\n\n private ldService?: LDService;\n private logService?: Log;\n private historyManager?: HistoryManager;\n private exposedDependencies?: ExposedDependencies;\n private exposedInstanceDependencies?: ExposedInstanceDependencies;\n private eventBus?: EventBus;\n private basename?: string;\n private onReady?: () => void;\n private onDispose?: () => void;\n private view?: ReturnType<typeof render>;\n\n connectedCallback() {\n /*\n * connectedCallback can be called when DOM element has moved\n * check that root is still connected to the DOM\n * if that's the case we don't need to reconnect MFE\n */\n if (this.root?.isConnected) {\n return;\n }\n const sharedDependenciesNames = options?.sharedDependenciesNames ?? [];\n const styleUrls = getStyleUrls(light, sharedDependenciesNames, this);\n\n this.styles = {\n total: styleUrls.length * 2,\n loaded: 0,\n elements: [],\n };\n\n this.root = this.shadowRoot ?? this.attachShadow({ mode: 'open' });\n /*\n * Portal shadow dom is created at the bottom of the body in order to be used as\n * the element for the design system components to attach modals and popups to.\n * This element is passed down the tree through context, and used within\n * the design system components.\n */\n const portalElement = document.createElement('div');\n portalElement.setAttribute(\n 'data-mfe-portal-name',\n getElementName({ WebComponent: WEB_COMPONENT_NAME! })\n );\n this.portal = document.body.appendChild(portalElement).attachShadow({ mode: 'open' });\n /*\n * Add element inside of portal so that Anvil 2 can attach modals and popups to it\n * since floating-ui does not support attaching straight to shadow dom\n */\n this.portalAnvilContainer = document.createElement('div');\n this.portal.appendChild(this.portalAnvilContainer);\n\n this.view = render(<Placeholder />, this.root, options);\n\n this.styles.elements.push(\n ...this.attachStyles(this.root, styleUrls),\n ...this.attachStyles(this.portal, styleUrls)\n );\n }\n\n disconnectedCallback() {\n if (!this.root || this.root.isConnected) {\n return;\n }\n for (const element of this.styles.elements) {\n element.remove();\n }\n\n this.view?.unmount();\n document.body?.removeChild(this.portal!.host);\n this.root = undefined;\n this.portal = undefined;\n this.portalAnvilContainer = undefined;\n\n this.onDispose?.();\n }\n\n // Observe changes to the data-mfe-data attribute so that we can re-render when it changes\n static get observedAttributes() {\n return ['data-mfe-data'];\n }\n\n attributeChangedCallback() {\n this.render();\n }\n\n provide = (entries: Entries) => {\n for (const [key, value] of Object.entries(entries)) {\n this[key as keyof IWebComponent] = value;\n }\n\n if (this.styles.loaded === this.styles.total) {\n this.render();\n }\n };\n\n private handleLoad = () => {\n this.styles.loaded++;\n\n if (this.styles.loaded === this.styles.total) {\n this.render();\n }\n };\n\n private attachStyles = (node: ShadowRoot, urls: string[]) => {\n const elements: HTMLElement[] = [];\n\n for (const url of urls) {\n const element = createLink(url, this.handleLoad);\n node.appendChild(element);\n elements.push(element);\n }\n\n return elements;\n };\n\n private withAnvil1Providers(children: ReactElement): ReactElement {\n try {\n /**\n * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.\n * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}\n */\n const { DefaultPortalContext, TablePopupPropsContext } =\n require('@servicetitan/design-system') as typeof import('@servicetitan/design-system');\n return (\n <DefaultPortalContext.Provider value={this.portal as unknown as HTMLElement}>\n <TablePopupPropsContext.Provider\n value={props => ({\n ...props,\n appendTo: this.root as unknown as HTMLElement,\n })}\n >\n {children}\n </TablePopupPropsContext.Provider>\n </DefaultPortalContext.Provider>\n );\n } catch {\n return children;\n }\n }\n\n private withAnvil2Providers(children: ReactElement): ReactElement {\n try {\n /**\n * Note, the webpack.IgnorePlugin must be configured to ignore this dependency.\n * @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}\n */\n const { PortalProvider } =\n require('@servicetitan/anvil2') as typeof import('@servicetitan/anvil2');\n return <PortalProvider root={this.portalAnvilContainer}>{children}</PortalProvider>;\n } catch {\n return children;\n }\n }\n\n private withProviders(children: ReactElement): ReactElement {\n return this.withAnvil2Providers(this.withAnvil1Providers(children));\n }\n\n private render = () => {\n /*\n * Check for this.root first, otherwise we get error when\n * attributeChangedCallback happens on load\n */\n if (this.root) {\n const mfeData = this.dataset.mfeData\n ? /*\n * Data was stringified in order to come through the data-mfe-data attribute\n * So we must JSON.parse it here to get an object back\n */\n JSON.parse(this.dataset.mfeData)\n : /*\n * If mfeData isn't there, then the Host may not be up to date with web-components\n * and is instead passing data through separate data-attributes, so we want to\n * spread all of those instead\n */\n { ...this.dataset };\n\n const metadata = {\n shadowRoot: this.root,\n portalShadowRoot: this.portal!,\n };\n\n this.view?.rerender(\n <Provider\n singletons={[\n { provide: IS_WEB_COMPONENT_TOKEN, useValue: true },\n { provide: RENDER_ROOT_TOKEN, useValue: this.root },\n ]}\n >\n <Provider\n singletons={[\n { provide: Log, useValue: this.logService },\n {\n provide: HistoryManager,\n useValue: this.historyManager,\n },\n {\n provide: EXPOSED_DEPENDENCIES_TOKEN,\n useValue: this.exposedDependencies,\n },\n {\n provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,\n useValue: this.exposedInstanceDependencies,\n },\n { provide: BASENAME_TOKEN, useValue: this.basename },\n { provide: EVENT_BUS_TOKEN, useValue: this.eventBus },\n { provide: getLDServiceToken(), useValue: this.ldService },\n ].filter(\n ({ provide, useValue }) =>\n useValue !== undefined && provide !== undefined\n )}\n >\n <MFEDataContext.Provider value={{ ...mfeData }}>\n <MFEMetadataContext.Provider value={metadata}>\n {this.withProviders(<Component {...mfeData} />)}\n {this.onReady && <RenderCallback callback={this.onReady} />}\n </MFEMetadataContext.Provider>\n </MFEDataContext.Provider>\n </Provider>\n </Provider>\n );\n }\n };\n }\n\n if (!WEB_COMPONENT_NAME) {\n // eslint-disable-next-line no-console\n console.error('\"WEB_COMPONENT_NAME\" is not defined!');\n return;\n }\n\n window.customElements.define(WEB_COMPONENT_NAME, WebComponent);\n}\n\nfunction getStyleUrls(light: boolean, sharedDependenciesNames: string[], el: HTMLElement) {\n function getCssUrl(dependencyName: string, cssFileRegEx: RegExp) {\n if (light && sharedDependenciesNames.includes(dependencyName)) {\n return Array.from(document.getElementsByTagName('link')).find(\n ({ href }) => href && cssFileRegEx.test(href)\n )?.href;\n }\n }\n\n const designSystemUrl = getCssUrl(\n '@servicetitan/design-system',\n /design-system(\\..+)?\\.bundle\\.css/\n );\n const anvil2CssUrl = getCssUrl('@servicetitan/anvil2', /anvil2(\\..+)?\\.bundle\\.css/);\n\n return [\n ...(designSystemUrl ? [designSystemUrl] : []),\n ...(anvil2CssUrl ? [anvil2CssUrl] : []),\n ...(el.hasAttribute('style-urls')\n ? JSON.parse(decodeURIComponent(el.getAttribute('style-urls')!))\n : []),\n ];\n}\n\nfunction RenderCallback({ callback }: { callback: () => void }) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => callback(), []);\n return null;\n}\n"],"names":["Log","Provider","useEffect","BASENAME_TOKEN","EXPOSED_DEPENDENCIES_TOKEN","EXPOSED_INSTANCE_DEPENDENCIES_TOKEN","IS_WEB_COMPONENT_TOKEN","RENDER_ROOT_TOKEN","MFEDataContext","MFEMetadataContext","EVENT_BUS_TOKEN","WEB_COMPONENT_NAME","HistoryManager","render","getElementName","getLDServiceToken","createLink","url","onLoad","element","document","createElement","href","rel","crossOrigin","onload","onerror","Placeholder","div","style","display","register","Component","light","options","WebComponent","HTMLElement","connectedCallback","root","isConnected","sharedDependenciesNames","styleUrls","getStyleUrls","styles","total","length","loaded","elements","shadowRoot","attachShadow","mode","portalElement","setAttribute","portal","body","appendChild","portalAnvilContainer","view","push","attachStyles","disconnectedCallback","remove","unmount","removeChild","host","undefined","onDispose","observedAttributes","attributeChangedCallback","withAnvil1Providers","children","DefaultPortalContext","TablePopupPropsContext","require","value","props","appendTo","withAnvil2Providers","PortalProvider","withProviders","ldService","logService","historyManager","exposedDependencies","exposedInstanceDependencies","eventBus","basename","onReady","provide","entries","key","Object","handleLoad","node","urls","mfeData","dataset","JSON","parse","metadata","portalShadowRoot","rerender","singletons","useValue","filter","RenderCallback","callback","console","error","window","customElements","define","el","getCssUrl","dependencyName","cssFileRegEx","includes","Array","from","getElementsByTagName","find","test","designSystemUrl","anvil2CssUrl","hasAttribute","decodeURIComponent","getAttribute"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/register.tsx"],"sourcesContent":["import * as Anvil2 from '@servicetitan/anvil2';\nimport * as Anvil1 from '@servicetitan/design-system';\nimport { type LDService } from '@servicetitan/launchdarkly-service';\nimport { Log } from '@servicetitan/log-service';\nimport { Provider } from '@servicetitan/react-ioc';\nimport { ExposedDependencies } from '@servicetitan/startup-utils';\nimport { ComponentType, FC, PropsWithChildren, ReactElement, useEffect } from 'react';\nimport {\n BASENAME_TOKEN,\n Entries,\n EXPOSED_DEPENDENCIES_TOKEN,\n EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,\n ExposedInstanceDependencies,\n IS_WEB_COMPONENT_TOKEN,\n IWebComponent,\n RENDER_ROOT_TOKEN,\n} from './common';\nimport { MFEDataContext } from './contexts/mfe-data-context';\nimport { MFEMetadataContext } from './contexts/mfe-metadata-context';\nimport { EVENT_BUS_TOKEN, EventBus } from './event-bus';\nimport { WEB_COMPONENT_NAME } from './globals';\nimport { HistoryManager } from './history-manager';\nimport { render } from './render';\nimport { getElementName, getLDServiceToken } from './utils';\n\nfunction createLink(url: string, onLoad: () => void) {\n const element = document.createElement('link');\n\n element.href = url;\n element.rel = 'stylesheet';\n element.crossOrigin = 'anonymous';\n element.onload = onLoad;\n element.onerror = onLoad;\n\n return element;\n}\n\nconst Placeholder: FC = () => <div style={{ display: 'none' }} />;\n\nexport interface RegisterOptions {\n legacyRoot?: boolean;\n sharedDependenciesNames?: string[];\n}\n\nconst Anvil1Providers: FC<{ root: ShadowRoot; portal: ShadowRoot } & PropsWithChildren> = ({\n root,\n portal,\n children,\n}) => {\n if (Anvil1.DefaultPortalContext === undefined || Anvil1.TablePopupPropsContext === undefined) {\n return children;\n }\n\n return (\n <Anvil1.DefaultPortalContext.Provider value={portal as unknown as HTMLElement}>\n <Anvil1.TablePopupPropsContext.Provider\n value={props => ({\n ...props,\n appendTo: root as unknown as HTMLElement,\n })}\n >\n {children}\n </Anvil1.TablePopupPropsContext.Provider>\n </Anvil1.DefaultPortalContext.Provider>\n );\n};\n\nconst Anvil2Providers: FC<{ portalAnvilContainer: HTMLDivElement } & PropsWithChildren> = ({\n portalAnvilContainer,\n children,\n}) => {\n if (Anvil2.PortalProvider === undefined) {\n return children;\n }\n\n return <Anvil2.PortalProvider root={portalAnvilContainer}>{children}</Anvil2.PortalProvider>;\n};\n\nexport function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {\n class WebComponent extends HTMLElement implements IWebComponent {\n private root?: ShadowRoot;\n private portal?: ShadowRoot;\n private portalAnvilContainer?: HTMLDivElement;\n\n private styles: {\n total: number;\n loaded: number;\n elements: HTMLElement[];\n } = { total: 0, loaded: 0, elements: [] };\n\n private ldService?: LDService;\n private logService?: Log;\n private historyManager?: HistoryManager;\n private exposedDependencies?: ExposedDependencies;\n private exposedInstanceDependencies?: ExposedInstanceDependencies;\n private eventBus?: EventBus;\n private basename?: string;\n private onReady?: () => void;\n private onDispose?: () => void;\n private view?: ReturnType<typeof render>;\n\n connectedCallback() {\n /*\n * connectedCallback can be called when DOM element has moved\n * check that root is still connected to the DOM\n * if that's the case we don't need to reconnect MFE\n */\n if (this.root?.isConnected) {\n return;\n }\n const sharedDependenciesNames = options?.sharedDependenciesNames ?? [];\n const styleUrls = getStyleUrls(light, sharedDependenciesNames, this);\n\n this.styles = {\n total: styleUrls.length * 2,\n loaded: 0,\n elements: [],\n };\n\n this.root = this.shadowRoot ?? this.attachShadow({ mode: 'open' });\n /*\n * Portal shadow dom is created at the bottom of the body in order to be used as\n * the element for the design system components to attach modals and popups to.\n * This element is passed down the tree through context, and used within\n * the design system components.\n */\n const portalElement = document.createElement('div');\n portalElement.setAttribute(\n 'data-mfe-portal-name',\n getElementName({ WebComponent: WEB_COMPONENT_NAME! })\n );\n this.portal = document.body.appendChild(portalElement).attachShadow({ mode: 'open' });\n /*\n * Add element inside of portal so that Anvil 2 can attach modals and popups to it\n * since floating-ui does not support attaching straight to shadow dom\n */\n this.portalAnvilContainer = document.createElement('div');\n this.portal.appendChild(this.portalAnvilContainer);\n\n this.view = render(<Placeholder />, this.root, options);\n\n this.styles.elements.push(\n ...this.attachStyles(this.root, styleUrls),\n ...this.attachStyles(this.portal, styleUrls)\n );\n }\n\n disconnectedCallback() {\n if (!this.root || this.root.isConnected) {\n return;\n }\n for (const element of this.styles.elements) {\n element.remove();\n }\n\n this.view?.unmount();\n document.body?.removeChild(this.portal!.host);\n this.root = undefined;\n this.portal = undefined;\n this.portalAnvilContainer = undefined;\n\n this.onDispose?.();\n }\n\n // Observe changes to the data-mfe-data attribute so that we can re-render when it changes\n static get observedAttributes() {\n return ['data-mfe-data'];\n }\n\n attributeChangedCallback() {\n this.render();\n }\n\n provide = (entries: Entries) => {\n for (const [key, value] of Object.entries(entries)) {\n this[key as keyof IWebComponent] = value;\n }\n\n if (this.styles.loaded === this.styles.total) {\n this.render();\n }\n };\n\n private handleLoad = () => {\n this.styles.loaded++;\n\n if (this.styles.loaded === this.styles.total) {\n this.render();\n }\n };\n\n private attachStyles = (node: ShadowRoot, urls: string[]) => {\n const elements: HTMLElement[] = [];\n\n for (const url of urls) {\n const element = createLink(url, this.handleLoad);\n node.appendChild(element);\n elements.push(element);\n }\n\n return elements;\n };\n\n private withProviders(children: ReactElement) {\n return (\n <Anvil2Providers portalAnvilContainer={this.portalAnvilContainer!}>\n <Anvil1Providers root={this.root!} portal={this.portal!}>\n {children}\n </Anvil1Providers>\n </Anvil2Providers>\n );\n }\n\n private render = () => {\n /*\n * Check for this.root first, otherwise we get error when\n * attributeChangedCallback happens on load\n */\n if (this.root) {\n const mfeData = this.dataset.mfeData\n ? /*\n * Data was stringified in order to come through the data-mfe-data attribute\n * So we must JSON.parse it here to get an object back\n */\n JSON.parse(this.dataset.mfeData)\n : /*\n * If mfeData isn't there, then the Host may not be up to date with web-components\n * and is instead passing data through separate data-attributes, so we want to\n * spread all of those instead\n */\n { ...this.dataset };\n\n const metadata = {\n shadowRoot: this.root,\n portalShadowRoot: this.portal!,\n };\n\n this.view?.rerender(\n <Provider\n singletons={[\n { provide: IS_WEB_COMPONENT_TOKEN, useValue: true },\n { provide: RENDER_ROOT_TOKEN, useValue: this.root },\n ]}\n >\n <Provider\n singletons={[\n { provide: Log, useValue: this.logService },\n {\n provide: HistoryManager,\n useValue: this.historyManager,\n },\n {\n provide: EXPOSED_DEPENDENCIES_TOKEN,\n useValue: this.exposedDependencies,\n },\n {\n provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,\n useValue: this.exposedInstanceDependencies,\n },\n { provide: BASENAME_TOKEN, useValue: this.basename },\n { provide: EVENT_BUS_TOKEN, useValue: this.eventBus },\n { provide: getLDServiceToken(), useValue: this.ldService },\n ].filter(\n ({ provide, useValue }) =>\n useValue !== undefined && provide !== undefined\n )}\n >\n <MFEDataContext.Provider value={{ ...mfeData }}>\n <MFEMetadataContext.Provider value={metadata}>\n {this.withProviders(<Component {...mfeData} />)}\n {this.onReady && <RenderCallback callback={this.onReady} />}\n </MFEMetadataContext.Provider>\n </MFEDataContext.Provider>\n </Provider>\n </Provider>\n );\n }\n };\n }\n\n if (!WEB_COMPONENT_NAME) {\n // eslint-disable-next-line no-console\n console.error('\"WEB_COMPONENT_NAME\" is not defined!');\n return;\n }\n\n window.customElements.define(WEB_COMPONENT_NAME, WebComponent);\n}\n\nfunction getStyleUrls(light: boolean, sharedDependenciesNames: string[], el: HTMLElement) {\n function getCssUrl(dependencyName: string, cssFileRegEx: RegExp) {\n if (light && sharedDependenciesNames.includes(dependencyName)) {\n return Array.from(document.getElementsByTagName('link')).find(\n ({ href }) => href && cssFileRegEx.test(href)\n )?.href;\n }\n }\n\n const designSystemUrl = getCssUrl(\n '@servicetitan/design-system',\n /design-system(\\..+)?\\.bundle\\.css/\n );\n const anvil2CssUrl = getCssUrl('@servicetitan/anvil2', /anvil2(\\..+)?\\.bundle\\.css/);\n\n return [\n ...(designSystemUrl ? [designSystemUrl] : []),\n ...(anvil2CssUrl ? [anvil2CssUrl] : []),\n ...(el.hasAttribute('style-urls')\n ? JSON.parse(decodeURIComponent(el.getAttribute('style-urls')!))\n : []),\n ];\n}\n\nfunction RenderCallback({ callback }: { callback: () => void }) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => callback(), []);\n return null;\n}\n"],"names":["Anvil2","Anvil1","Log","Provider","useEffect","BASENAME_TOKEN","EXPOSED_DEPENDENCIES_TOKEN","EXPOSED_INSTANCE_DEPENDENCIES_TOKEN","IS_WEB_COMPONENT_TOKEN","RENDER_ROOT_TOKEN","MFEDataContext","MFEMetadataContext","EVENT_BUS_TOKEN","WEB_COMPONENT_NAME","HistoryManager","render","getElementName","getLDServiceToken","createLink","url","onLoad","element","document","createElement","href","rel","crossOrigin","onload","onerror","Placeholder","div","style","display","Anvil1Providers","root","portal","children","DefaultPortalContext","undefined","TablePopupPropsContext","value","props","appendTo","Anvil2Providers","portalAnvilContainer","PortalProvider","register","Component","light","options","WebComponent","HTMLElement","connectedCallback","isConnected","sharedDependenciesNames","styleUrls","getStyleUrls","styles","total","length","loaded","elements","shadowRoot","attachShadow","mode","portalElement","setAttribute","body","appendChild","view","push","attachStyles","disconnectedCallback","remove","unmount","removeChild","host","onDispose","observedAttributes","attributeChangedCallback","withProviders","ldService","logService","historyManager","exposedDependencies","exposedInstanceDependencies","eventBus","basename","onReady","provide","entries","key","Object","handleLoad","node","urls","mfeData","dataset","JSON","parse","metadata","portalShadowRoot","rerender","singletons","useValue","filter","RenderCallback","callback","console","error","window","customElements","define","el","getCssUrl","dependencyName","cssFileRegEx","includes","Array","from","getElementsByTagName","find","test","designSystemUrl","anvil2CssUrl","hasAttribute","decodeURIComponent","getAttribute"],"mappings":"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"}
|
package/dist/render.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,UAAU,aAAa;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,YAAY;IAClB,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IACtC,OAAO,IAAI,IAAI,CAAC;CACnB;AAED,wBAAgB,MAAM,CAClB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,OAAO,GAAG,gBAAgB,EACrC,OAAO,CAAC,EAAE,aAAa,GACxB,YAAY,CAgBd"}
|
package/dist/render.js
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
/* eslint-disable react/no-deprecated */ import ReactDOM from 'react-dom';
|
|
2
|
-
|
|
3
|
-
try {
|
|
4
|
-
/**
|
|
5
|
-
* Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
|
|
6
|
-
* @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
|
|
7
|
-
*/ createRoot = require('react-dom/client').createRoot;
|
|
8
|
-
} catch (unused) {
|
|
9
|
-
// ignore
|
|
10
|
-
}
|
|
2
|
+
import * as ReactDOMClient from 'react-dom/client';
|
|
11
3
|
export function render(element, container, options) {
|
|
12
|
-
if (typeof createRoot !== 'function' || (options === null || options === void 0 ? void 0 : options.legacyRoot)) {
|
|
4
|
+
if (typeof ReactDOMClient.createRoot !== 'function' || (options === null || options === void 0 ? void 0 : options.legacyRoot)) {
|
|
13
5
|
return renderLegacyRoot(element, container);
|
|
14
6
|
}
|
|
15
|
-
const root = createRoot(container);
|
|
7
|
+
const root = ReactDOMClient.createRoot(container);
|
|
16
8
|
root.render(element);
|
|
17
9
|
return {
|
|
18
10
|
rerender (element) {
|
package/dist/render.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/render.ts"],"sourcesContent":["/* eslint-disable react/no-deprecated */\nimport { ReactElement } from 'react';\nimport ReactDOM from 'react-dom';\nimport
|
|
1
|
+
{"version":3,"sources":["../src/render.ts"],"sourcesContent":["/* eslint-disable react/no-deprecated */\nimport { ReactElement } from 'react';\nimport ReactDOM from 'react-dom';\nimport * as ReactDOMClient from 'react-dom/client';\n\ninterface RenderOptions {\n legacyRoot?: boolean;\n}\n\ninterface RenderResult {\n rerender(element: ReactElement): void;\n unmount(): void;\n}\n\nexport function render(\n element: ReactElement,\n container: Element | DocumentFragment,\n options?: RenderOptions\n): RenderResult {\n if (typeof ReactDOMClient.createRoot !== 'function' || options?.legacyRoot) {\n return renderLegacyRoot(element, container);\n }\n\n const root = ReactDOMClient.createRoot(container);\n root.render(element);\n\n return {\n rerender(element: ReactElement) {\n root.render(element);\n },\n unmount() {\n root.unmount();\n },\n };\n}\n\nfunction renderLegacyRoot(\n element: ReactElement,\n container: Element | DocumentFragment\n): RenderResult {\n ReactDOM.render(element, container);\n\n return {\n rerender(element: ReactElement) {\n ReactDOM.render(element, container);\n },\n unmount() {\n ReactDOM.unmountComponentAtNode(container);\n },\n };\n}\n"],"names":["ReactDOM","ReactDOMClient","render","element","container","options","createRoot","legacyRoot","renderLegacyRoot","root","rerender","unmount","unmountComponentAtNode"],"mappings":"AAAA,sCAAsC,GAEtC,OAAOA,cAAc,YAAY;AACjC,YAAYC,oBAAoB,mBAAmB;AAWnD,OAAO,SAASC,OACZC,OAAqB,EACrBC,SAAqC,EACrCC,OAAuB;IAEvB,IAAI,OAAOJ,eAAeK,UAAU,KAAK,eAAcD,oBAAAA,8BAAAA,QAASE,UAAU,GAAE;QACxE,OAAOC,iBAAiBL,SAASC;IACrC;IAEA,MAAMK,OAAOR,eAAeK,UAAU,CAACF;IACvCK,KAAKP,MAAM,CAACC;IAEZ,OAAO;QACHO,UAASP,OAAqB;YAC1BM,KAAKP,MAAM,CAACC;QAChB;QACAQ;YACIF,KAAKE,OAAO;QAChB;IACJ;AACJ;AAEA,SAASH,iBACLL,OAAqB,EACrBC,SAAqC;IAErCJ,SAASE,MAAM,CAACC,SAASC;IAEzB,OAAO;QACHM,UAASP,OAAqB;YAC1BH,SAASE,MAAM,CAACC,SAASC;QAC7B;QACAO;YACIX,SAASY,sBAAsB,CAACR;QACpC;IACJ;AACJ"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
interface StyleData {
|
|
3
|
+
css: string;
|
|
4
|
+
attributes: Record<string, string>;
|
|
5
|
+
}
|
|
6
|
+
declare global {
|
|
7
|
+
interface Window {
|
|
8
|
+
__VITE_WEB_COMPONENT_STYLES__?: Record<string, StyleData[]>;
|
|
9
|
+
__injectWebComponentStyles__?: Record<string, ((style: StyleData) => void)[]>;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
export declare function withStyleInjector<P extends object>(Component: ComponentType<P>): ComponentType<P>;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=style-injector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-injector.d.ts","sourceRoot":"","sources":["../src/style-injector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA0B,MAAM,OAAO,CAAC;AAI9D,UAAU,SAAS;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QAEZ,6BAA6B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QAE5D,4BAA4B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;KACjF;CACJ;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CA0EjG"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect } from 'react';
|
|
3
|
+
import { useMFEMetadataContext } from './contexts/mfe-metadata-context';
|
|
4
|
+
import { WEB_COMPONENT_NAME } from './globals';
|
|
5
|
+
export function withStyleInjector(Component) {
|
|
6
|
+
return function StyleInjectorWrapper(props) {
|
|
7
|
+
// TODO: inject to portal shadow root as well
|
|
8
|
+
const { shadowRoot } = useMFEMetadataContext();
|
|
9
|
+
const injectStyle = useCallback((styleData)=>{
|
|
10
|
+
if (!shadowRoot) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
// Check if we should update an existing style element
|
|
14
|
+
const devId = styleData.attributes['data-vite-dev-id'];
|
|
15
|
+
const existingStyleElement = shadowRoot.querySelector(`style[data-vite-dev-id="${devId}"]`);
|
|
16
|
+
if (existingStyleElement) {
|
|
17
|
+
// Update existing style element
|
|
18
|
+
existingStyleElement.textContent = styleData.css;
|
|
19
|
+
// Update attributes
|
|
20
|
+
Object.entries(styleData.attributes).forEach(([key, value])=>{
|
|
21
|
+
existingStyleElement.setAttribute(key, String(value));
|
|
22
|
+
});
|
|
23
|
+
} else {
|
|
24
|
+
// Create new style element
|
|
25
|
+
const styleElement = document.createElement('style');
|
|
26
|
+
styleElement.textContent = styleData.css;
|
|
27
|
+
// Apply attributes
|
|
28
|
+
Object.entries(styleData.attributes).forEach(([key, value])=>{
|
|
29
|
+
styleElement.setAttribute(key, String(value));
|
|
30
|
+
});
|
|
31
|
+
shadowRoot.appendChild(styleElement);
|
|
32
|
+
}
|
|
33
|
+
}, [
|
|
34
|
+
shadowRoot
|
|
35
|
+
]);
|
|
36
|
+
useEffect(()=>{
|
|
37
|
+
var // Register callback for runtime style injection
|
|
38
|
+
_window, ___injectWebComponentStyles__, _window___injectWebComponentStyles__, _WEB_COMPONENT_NAME, _;
|
|
39
|
+
var _window___VITE_WEB_COMPONENT_STYLES__;
|
|
40
|
+
// Inject all pre-initialization styles from the array
|
|
41
|
+
const preInitStyles = (_window___VITE_WEB_COMPONENT_STYLES__ = window.__VITE_WEB_COMPONENT_STYLES__) === null || _window___VITE_WEB_COMPONENT_STYLES__ === void 0 ? void 0 : _window___VITE_WEB_COMPONENT_STYLES__[WEB_COMPONENT_NAME];
|
|
42
|
+
if (preInitStyles) {
|
|
43
|
+
preInitStyles.forEach((styleData)=>{
|
|
44
|
+
injectStyle(styleData);
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
(___injectWebComponentStyles__ = (_window = window).__injectWebComponentStyles__) !== null && ___injectWebComponentStyles__ !== void 0 ? ___injectWebComponentStyles__ : _window.__injectWebComponentStyles__ = {};
|
|
48
|
+
(_ = (_window___injectWebComponentStyles__ = window.__injectWebComponentStyles__)[_WEB_COMPONENT_NAME = WEB_COMPONENT_NAME]) !== null && _ !== void 0 ? _ : _window___injectWebComponentStyles__[_WEB_COMPONENT_NAME] = [];
|
|
49
|
+
const callback = (styleData)=>{
|
|
50
|
+
injectStyle(styleData);
|
|
51
|
+
};
|
|
52
|
+
window.__injectWebComponentStyles__[WEB_COMPONENT_NAME].push(callback);
|
|
53
|
+
return ()=>{
|
|
54
|
+
var _window___injectWebComponentStyles__;
|
|
55
|
+
// Unregister callback on unmount
|
|
56
|
+
const callbacks = (_window___injectWebComponentStyles__ = window.__injectWebComponentStyles__) === null || _window___injectWebComponentStyles__ === void 0 ? void 0 : _window___injectWebComponentStyles__[WEB_COMPONENT_NAME];
|
|
57
|
+
if (callbacks) {
|
|
58
|
+
const index = callbacks.indexOf(callback);
|
|
59
|
+
if (index > -1) {
|
|
60
|
+
callbacks.splice(index, 1);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
}, [
|
|
65
|
+
injectStyle
|
|
66
|
+
]);
|
|
67
|
+
return /*#__PURE__*/ _jsx(Component, {
|
|
68
|
+
...props
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
//# sourceMappingURL=style-injector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/style-injector.tsx"],"sourcesContent":["import { ComponentType, useCallback, useEffect } from 'react';\nimport { useMFEMetadataContext } from './contexts/mfe-metadata-context';\nimport { WEB_COMPONENT_NAME } from './globals';\n\ninterface StyleData {\n css: string;\n attributes: Record<string, string>;\n}\n\ndeclare global {\n interface Window {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n __VITE_WEB_COMPONENT_STYLES__?: Record<string, StyleData[]>;\n // eslint-disable-next-line @typescript-eslint/naming-convention\n __injectWebComponentStyles__?: Record<string, ((style: StyleData) => void)[]>;\n }\n}\n\nexport function withStyleInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {\n return function StyleInjectorWrapper(props: P) {\n // TODO: inject to portal shadow root as well\n const { shadowRoot } = useMFEMetadataContext();\n\n const injectStyle = useCallback(\n (styleData: StyleData) => {\n if (!shadowRoot) {\n return;\n }\n\n // Check if we should update an existing style element\n const devId = styleData.attributes['data-vite-dev-id'];\n const existingStyleElement = shadowRoot.querySelector<HTMLStyleElement>(\n `style[data-vite-dev-id=\"${devId}\"]`\n );\n\n if (existingStyleElement) {\n // Update existing style element\n existingStyleElement.textContent = styleData.css;\n\n // Update attributes\n Object.entries(styleData.attributes).forEach(([key, value]) => {\n existingStyleElement.setAttribute(key, String(value));\n });\n } else {\n // Create new style element\n const styleElement = document.createElement('style');\n styleElement.textContent = styleData.css;\n\n // Apply attributes\n Object.entries(styleData.attributes).forEach(([key, value]) => {\n styleElement.setAttribute(key, String(value));\n });\n\n shadowRoot.appendChild(styleElement);\n }\n },\n [shadowRoot]\n );\n\n useEffect(() => {\n // Inject all pre-initialization styles from the array\n const preInitStyles = window.__VITE_WEB_COMPONENT_STYLES__?.[WEB_COMPONENT_NAME];\n if (preInitStyles) {\n preInitStyles.forEach(styleData => {\n injectStyle(styleData);\n });\n }\n\n // Register callback for runtime style injection\n window.__injectWebComponentStyles__ ??= {};\n window.__injectWebComponentStyles__[WEB_COMPONENT_NAME] ??= [];\n\n const callback = (styleData: StyleData) => {\n injectStyle(styleData);\n };\n\n window.__injectWebComponentStyles__[WEB_COMPONENT_NAME].push(callback);\n\n return () => {\n // Unregister callback on unmount\n const callbacks = window.__injectWebComponentStyles__?.[WEB_COMPONENT_NAME];\n if (callbacks) {\n const index = callbacks.indexOf(callback);\n if (index > -1) {\n callbacks.splice(index, 1);\n }\n }\n };\n }, [injectStyle]);\n\n return <Component {...props} />;\n };\n}\n"],"names":["useCallback","useEffect","useMFEMetadataContext","WEB_COMPONENT_NAME","withStyleInjector","Component","StyleInjectorWrapper","props","shadowRoot","injectStyle","styleData","devId","attributes","existingStyleElement","querySelector","textContent","css","Object","entries","forEach","key","value","setAttribute","String","styleElement","document","createElement","appendChild","window","preInitStyles","__VITE_WEB_COMPONENT_STYLES__","__injectWebComponentStyles__","callback","push","callbacks","index","indexOf","splice"],"mappings":";AAAA,SAAwBA,WAAW,EAAEC,SAAS,QAAQ,QAAQ;AAC9D,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,kBAAkB,QAAQ,YAAY;AAgB/C,OAAO,SAASC,kBAAoCC,SAA2B;IAC3E,OAAO,SAASC,qBAAqBC,KAAQ;QACzC,6CAA6C;QAC7C,MAAM,EAAEC,UAAU,EAAE,GAAGN;QAEvB,MAAMO,cAAcT,YAChB,CAACU;YACG,IAAI,CAACF,YAAY;gBACb;YACJ;YAEA,sDAAsD;YACtD,MAAMG,QAAQD,UAAUE,UAAU,CAAC,mBAAmB;YACtD,MAAMC,uBAAuBL,WAAWM,aAAa,CACjD,CAAC,wBAAwB,EAAEH,MAAM,EAAE,CAAC;YAGxC,IAAIE,sBAAsB;gBACtB,gCAAgC;gBAChCA,qBAAqBE,WAAW,GAAGL,UAAUM,GAAG;gBAEhD,oBAAoB;gBACpBC,OAAOC,OAAO,CAACR,UAAUE,UAAU,EAAEO,OAAO,CAAC,CAAC,CAACC,KAAKC,MAAM;oBACtDR,qBAAqBS,YAAY,CAACF,KAAKG,OAAOF;gBAClD;YACJ,OAAO;gBACH,2BAA2B;gBAC3B,MAAMG,eAAeC,SAASC,aAAa,CAAC;gBAC5CF,aAAaT,WAAW,GAAGL,UAAUM,GAAG;gBAExC,mBAAmB;gBACnBC,OAAOC,OAAO,CAACR,UAAUE,UAAU,EAAEO,OAAO,CAAC,CAAC,CAACC,KAAKC,MAAM;oBACtDG,aAAaF,YAAY,CAACF,KAAKG,OAAOF;gBAC1C;gBAEAb,WAAWmB,WAAW,CAACH;YAC3B;QACJ,GACA;YAAChB;SAAW;QAGhBP,UAAU;gBASN,gDAAgD;YAChD2B,SAAAA,+BACAA,sCAAoCzB,qBAApCyB;gBATsBA;YADtB,sDAAsD;YACtD,MAAMC,iBAAgBD,wCAAAA,OAAOE,6BAA6B,cAApCF,4DAAAA,qCAAsC,CAACzB,mBAAmB;YAChF,IAAI0B,eAAe;gBACfA,cAAcV,OAAO,CAACT,CAAAA;oBAClBD,YAAYC;gBAChB;YACJ;aAGAkB,gCAAAA,CAAAA,UAAAA,QAAOG,4BAA4B,cAAnCH,2CAAAA,gCAAAA,QAAOG,4BAA4B,GAAK,CAAC;aACzCH,IAAAA,CAAAA,uCAAAA,OAAOG,4BAA4B,CAAA,CAAC5B,sBAAAA,mBAAmB,cAAvDyB,eAAAA,IAAAA,oCAAmC,CAACzB,oBAAmB,GAAK,EAAE;YAE9D,MAAM6B,WAAW,CAACtB;gBACdD,YAAYC;YAChB;YAEAkB,OAAOG,4BAA4B,CAAC5B,mBAAmB,CAAC8B,IAAI,CAACD;YAE7D,OAAO;oBAEeJ;gBADlB,iCAAiC;gBACjC,MAAMM,aAAYN,uCAAAA,OAAOG,4BAA4B,cAAnCH,2DAAAA,oCAAqC,CAACzB,mBAAmB;gBAC3E,IAAI+B,WAAW;oBACX,MAAMC,QAAQD,UAAUE,OAAO,CAACJ;oBAChC,IAAIG,QAAQ,CAAC,GAAG;wBACZD,UAAUG,MAAM,CAACF,OAAO;oBAC5B;gBACJ;YACJ;QACJ,GAAG;YAAC1B;SAAY;QAEhB,qBAAO,KAACJ;YAAW,GAAGE,KAAK;;IAC/B;AACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-bundle-info.d.ts","sourceRoot":"","sources":["../../src/utils/get-bundle-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAGxF,OAAO,EAAE,2BAA2B,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAI/E,OAAO,EAAE,WAAW,EAAkB,MAAM,oBAAoB,CAAC;AAKjE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;AAEnE,UAAU,kBAAkB;IACxB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACxB;AAED,wBAAsB,aAAa,CAAC,EAChC,KAAK,EACL,cAAc,EACd,kBAAkB,EAClB,mBAAwB,EACxB,2BAAgC,EAChC,UAAU,EACV,MAAM,EACN,OAAO,EACP,cAAc,GACjB,EAAE,kBAAkB
|
|
1
|
+
{"version":3,"file":"get-bundle-info.d.ts","sourceRoot":"","sources":["../../src/utils/get-bundle-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAGxF,OAAO,EAAE,2BAA2B,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAI/E,OAAO,EAAE,WAAW,EAAkB,MAAM,oBAAoB,CAAC;AAKjE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;AAEnE,UAAU,kBAAkB;IACxB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACxB;AAED,wBAAsB,aAAa,CAAC,EAChC,KAAK,EACL,cAAc,EACd,kBAAkB,EAClB,mBAAwB,EACxB,2BAAgC,EAChC,UAAU,EACV,MAAM,EACN,OAAO,EACP,cAAc,GACjB,EAAE,kBAAkB;;;;;;;;;;;;;;;;GAkGpB"}
|
|
@@ -43,13 +43,21 @@ export async function getBundleInfo({ cache, mainPackageUrl, fallbackPackageUrl,
|
|
|
43
43
|
const embed = !mismatch && supportLightBundles;
|
|
44
44
|
resolvedBundleType = embed ? 'light' : 'full';
|
|
45
45
|
}
|
|
46
|
-
|
|
46
|
+
let bundleBaseUrl = `${exactPackageUrl}/dist/bundle/${resolvedBundleType}`;
|
|
47
|
+
const withBaseUrl = (path)=>`${bundleBaseUrl}/${path}`;
|
|
47
48
|
let entrypoints;
|
|
48
49
|
if ((_metadata_entrypoints = metadata.entrypoints) === null || _metadata_entrypoints === void 0 ? void 0 : _metadata_entrypoints[resolvedBundleType]) {
|
|
49
50
|
entrypoints = metadata.entrypoints[resolvedBundleType];
|
|
50
51
|
} else {
|
|
51
52
|
entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);
|
|
52
53
|
}
|
|
54
|
+
// In dev mode, entrypoints include the dev server port. Replace the port in
|
|
55
|
+
// the base URL so asset requests go directly to the MFE's dev server.
|
|
56
|
+
if (entrypoints.port) {
|
|
57
|
+
const url = new URL(bundleBaseUrl);
|
|
58
|
+
url.port = String(entrypoints.port);
|
|
59
|
+
bundleBaseUrl = url.toString();
|
|
60
|
+
}
|
|
53
61
|
const disposer = ()=>{
|
|
54
62
|
if (resolvedBundleType === 'light') {
|
|
55
63
|
const path = Object.values(sharedDependencies).shift();
|
|
@@ -58,9 +66,12 @@ export async function getBundleInfo({ cache, mainPackageUrl, fallbackPackageUrl,
|
|
|
58
66
|
}
|
|
59
67
|
}
|
|
60
68
|
};
|
|
61
|
-
const urls = Object.entries(
|
|
69
|
+
const urls = Object.entries({
|
|
70
|
+
css: entrypoints.css,
|
|
71
|
+
js: entrypoints.js
|
|
72
|
+
}).reduce((result, [key, value])=>({
|
|
62
73
|
...result,
|
|
63
|
-
[key]: value.map(withBaseUrl)
|
|
74
|
+
[key]: value.map((url)=>withBaseUrl(url))
|
|
64
75
|
}), {});
|
|
65
76
|
const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;
|
|
66
77
|
return {
|
|
@@ -74,7 +85,8 @@ export async function getBundleInfo({ cache, mainPackageUrl, fallbackPackageUrl,
|
|
|
74
85
|
resolvedBundleType,
|
|
75
86
|
urls,
|
|
76
87
|
WebComponent: elementName,
|
|
77
|
-
version: metadata.version
|
|
88
|
+
version: metadata.version,
|
|
89
|
+
type: entrypoints.type
|
|
78
90
|
};
|
|
79
91
|
}
|
|
80
92
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/get-bundle-info.ts"],"sourcesContent":["import { ExposedDependencies, getVersionMismatches } from '@servicetitan/startup-utils';\nimport get from 'lodash.get';\nimport semver from 'semver';\nimport { ExposedInstanceDependencies, getJson, GetJsonError } from '../common';\nimport type { Metadata } from '../types';\nimport { getCacheSetting } from './get-cache-setting';\nimport { getCachedMetadata } from './get-cached-metadata';\nimport { EntryPoints, getEntrypoints } from './get-entry-points';\nimport { getMFEHasCompatibleLaunchDarklyVersion } from './get-mfe-has-compatible-launchdarkly-version';\nimport { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';\nimport { getMFESupportsRerendering } from './get-mfe-supports-rerendering';\n\nexport type BundleInfo = Awaited<ReturnType<typeof getBundleInfo>>;\n\ninterface GetBundleInfoProps {\n cache: boolean | number;\n exposedDependencies?: ExposedDependencies;\n exposedInstanceDependencies?: ExposedInstanceDependencies;\n fallbackPackageUrl?: string;\n isHeadless?: boolean;\n mainPackageUrl: string;\n onRequestError?: (error: GetJsonError) => void;\n retries?: number;\n signal?: AbortSignal;\n}\n\nexport async function getBundleInfo({\n cache,\n mainPackageUrl,\n fallbackPackageUrl,\n exposedDependencies = {},\n exposedInstanceDependencies = {},\n isHeadless,\n signal,\n retries,\n onRequestError,\n}: GetBundleInfoProps) {\n const {\n cacheHit,\n data: metadata,\n url: packageUrl,\n } = await getCachedMetadata({\n cache,\n fallbackPackageUrl,\n mainPackageUrl,\n onRequestError,\n retries,\n signal,\n });\n\n const { bundledWith, name, sharedDependencies } = metadata;\n const exactPackageUrl = packageUrl.replace('/dist/metadata.json', '');\n const requestCache = getCacheSetting(exactPackageUrl);\n\n let dependencies: NonNullable<Metadata['dependencies']>;\n if (metadata.dependencies) {\n dependencies = metadata.dependencies;\n } else {\n const { data: packageJson } = await getJson(`${exactPackageUrl}/package.json`, {\n cache: requestCache,\n retries,\n signal,\n });\n\n dependencies = packageJson.dependencies;\n }\n\n let mismatch: ReturnType<typeof getVersionMismatches>;\n let resolvedBundleType: 'headless' | 'light' | 'full';\n\n if (isHeadless) {\n resolvedBundleType = 'headless';\n } else {\n mismatch = getVersionMismatches(exposedDependencies, dependencies, sharedDependencies);\n const startupVersion = bundledWith?.['@servicetitan/startup'];\n const supportLightBundles = !!startupVersion && semver.gte(startupVersion, '17.0.0');\n const embed = !mismatch && supportLightBundles;\n resolvedBundleType = embed ? 'light' : 'full';\n }\n\n const withBaseUrl = (path: string)
|
|
1
|
+
{"version":3,"sources":["../../src/utils/get-bundle-info.ts"],"sourcesContent":["import { ExposedDependencies, getVersionMismatches } from '@servicetitan/startup-utils';\nimport get from 'lodash.get';\nimport semver from 'semver';\nimport { ExposedInstanceDependencies, getJson, GetJsonError } from '../common';\nimport type { Metadata } from '../types';\nimport { getCacheSetting } from './get-cache-setting';\nimport { getCachedMetadata } from './get-cached-metadata';\nimport { EntryPoints, getEntrypoints } from './get-entry-points';\nimport { getMFEHasCompatibleLaunchDarklyVersion } from './get-mfe-has-compatible-launchdarkly-version';\nimport { getMFEHasUniqueChunkNamespace } from './get-mfe-has-unique-chunk-namespace';\nimport { getMFESupportsRerendering } from './get-mfe-supports-rerendering';\n\nexport type BundleInfo = Awaited<ReturnType<typeof getBundleInfo>>;\n\ninterface GetBundleInfoProps {\n cache: boolean | number;\n exposedDependencies?: ExposedDependencies;\n exposedInstanceDependencies?: ExposedInstanceDependencies;\n fallbackPackageUrl?: string;\n isHeadless?: boolean;\n mainPackageUrl: string;\n onRequestError?: (error: GetJsonError) => void;\n retries?: number;\n signal?: AbortSignal;\n}\n\nexport async function getBundleInfo({\n cache,\n mainPackageUrl,\n fallbackPackageUrl,\n exposedDependencies = {},\n exposedInstanceDependencies = {},\n isHeadless,\n signal,\n retries,\n onRequestError,\n}: GetBundleInfoProps) {\n const {\n cacheHit,\n data: metadata,\n url: packageUrl,\n } = await getCachedMetadata({\n cache,\n fallbackPackageUrl,\n mainPackageUrl,\n onRequestError,\n retries,\n signal,\n });\n\n const { bundledWith, name, sharedDependencies } = metadata;\n const exactPackageUrl = packageUrl.replace('/dist/metadata.json', '');\n const requestCache = getCacheSetting(exactPackageUrl);\n\n let dependencies: NonNullable<Metadata['dependencies']>;\n if (metadata.dependencies) {\n dependencies = metadata.dependencies;\n } else {\n const { data: packageJson } = await getJson(`${exactPackageUrl}/package.json`, {\n cache: requestCache,\n retries,\n signal,\n });\n\n dependencies = packageJson.dependencies;\n }\n\n let mismatch: ReturnType<typeof getVersionMismatches>;\n let resolvedBundleType: 'headless' | 'light' | 'full';\n\n if (isHeadless) {\n resolvedBundleType = 'headless';\n } else {\n mismatch = getVersionMismatches(exposedDependencies, dependencies, sharedDependencies);\n const startupVersion = bundledWith?.['@servicetitan/startup'];\n const supportLightBundles = !!startupVersion && semver.gte(startupVersion, '17.0.0');\n const embed = !mismatch && supportLightBundles;\n resolvedBundleType = embed ? 'light' : 'full';\n }\n\n let bundleBaseUrl = `${exactPackageUrl}/dist/bundle/${resolvedBundleType}`;\n const withBaseUrl = (path: string) => `${bundleBaseUrl}/${path}`;\n\n let entrypoints: EntryPoints;\n if (metadata.entrypoints?.[resolvedBundleType]) {\n entrypoints = metadata.entrypoints[resolvedBundleType];\n } else {\n entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);\n }\n\n // In dev mode, entrypoints include the dev server port. Replace the port in\n // the base URL so asset requests go directly to the MFE's dev server.\n if (entrypoints.port) {\n const url = new URL(bundleBaseUrl);\n url.port = String(entrypoints.port);\n bundleBaseUrl = url.toString();\n }\n\n const disposer = () => {\n if (resolvedBundleType === 'light') {\n const path = Object.values<string>(sharedDependencies).shift();\n if (path) {\n get(window, path).getStorage().clear(name);\n }\n }\n };\n\n const urls = Object.entries({ css: entrypoints.css, js: entrypoints.js }).reduce(\n (result, [key, value]) => ({\n ...result,\n [key]: value.map(url => withBaseUrl(url)),\n }),\n {} as EntryPoints\n );\n\n const elementName = resolvedBundleType === 'headless' ? `headless-${name}` : name;\n\n return {\n bundledWith,\n cacheHit,\n disposer,\n mfeSupportsRerendering: getMFESupportsRerendering(bundledWith, dependencies),\n mfeHasUniqueChunkNamespace: getMFEHasUniqueChunkNamespace(bundledWith),\n mfeHasCompatibleLaunchDarklyVersion: getMFEHasCompatibleLaunchDarklyVersion(\n bundledWith,\n exposedInstanceDependencies\n ),\n mismatch,\n resolvedBundleType,\n urls,\n WebComponent: elementName,\n version: metadata.version,\n type: entrypoints.type,\n };\n}\n"],"names":["getVersionMismatches","get","semver","getJson","getCacheSetting","getCachedMetadata","getEntrypoints","getMFEHasCompatibleLaunchDarklyVersion","getMFEHasUniqueChunkNamespace","getMFESupportsRerendering","getBundleInfo","cache","mainPackageUrl","fallbackPackageUrl","exposedDependencies","exposedInstanceDependencies","isHeadless","signal","retries","onRequestError","metadata","cacheHit","data","url","packageUrl","bundledWith","name","sharedDependencies","exactPackageUrl","replace","requestCache","dependencies","packageJson","mismatch","resolvedBundleType","startupVersion","supportLightBundles","gte","embed","bundleBaseUrl","withBaseUrl","path","entrypoints","port","URL","String","toString","disposer","Object","values","shift","window","getStorage","clear","urls","entries","css","js","reduce","result","key","value","map","elementName","mfeSupportsRerendering","mfeHasUniqueChunkNamespace","mfeHasCompatibleLaunchDarklyVersion","WebComponent","version","type"],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export interface EntryPoints {
|
|
2
2
|
css: string[];
|
|
3
3
|
js: string[];
|
|
4
|
+
type?: 'module';
|
|
5
|
+
port?: number;
|
|
4
6
|
}
|
|
5
7
|
export declare function getEntrypoints(url: string, cache: 'no-store' | undefined, signal?: AbortSignal): Promise<EntryPoints>;
|
|
6
8
|
//# sourceMappingURL=get-entry-points.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-entry-points.d.ts","sourceRoot":"","sources":["../../src/utils/get-entry-points.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,MAAM,EAAE,CAAC;IACd,EAAE,EAAE,MAAM,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"get-entry-points.d.ts","sourceRoot":"","sources":["../../src/utils/get-entry-points.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,MAAM,EAAE,CAAC;IACd,EAAE,EAAE,MAAM,EAAE,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAsB,cAAc,CAChC,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,UAAU,GAAG,SAAS,EAC7B,MAAM,CAAC,EAAE,WAAW,GACrB,OAAO,CAAC,WAAW,CAAC,CAWtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/get-entry-points.ts"],"sourcesContent":["import { getJson } from '../common';\n\nexport interface EntryPoints {\n css: string[];\n js: string[];\n}\n\nexport async function getEntrypoints(\n url: string,\n cache: 'no-store' | undefined,\n signal?: AbortSignal\n): Promise<EntryPoints> {\n try {\n return (\n await getJson(url, {\n cache,\n signal,\n })\n ).data;\n } catch {\n return { css: ['index.css'], js: ['index.js'] };\n }\n}\n"],"names":["getJson","getEntrypoints","url","cache","signal","data","css","js"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;
|
|
1
|
+
{"version":3,"sources":["../../src/utils/get-entry-points.ts"],"sourcesContent":["import { getJson } from '../common';\n\nexport interface EntryPoints {\n css: string[];\n js: string[];\n type?: 'module';\n port?: number;\n}\n\nexport async function getEntrypoints(\n url: string,\n cache: 'no-store' | undefined,\n signal?: AbortSignal\n): Promise<EntryPoints> {\n try {\n return (\n await getJson(url, {\n cache,\n signal,\n })\n ).data;\n } catch {\n return { css: ['index.css'], js: ['index.js'] };\n }\n}\n"],"names":["getJson","getEntrypoints","url","cache","signal","data","css","js"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AASpC,OAAO,eAAeC,eAClBC,GAAW,EACXC,KAA6B,EAC7BC,MAAoB;IAEpB,IAAI;QACA,OAAO,AACH,CAAA,MAAMJ,QAAQE,KAAK;YACfC;YACAC;QACJ,EAAC,EACHC,IAAI;IACV,EAAE,eAAM;QACJ,OAAO;YAAEC,KAAK;gBAAC;aAAY;YAAEC,IAAI;gBAAC;aAAW;QAAC;IAClD;AACJ"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export declare function getLDServiceToken(): SymbolToken<LDService>;
|
|
1
|
+
import * as LDService from '@servicetitan/launchdarkly-service';
|
|
2
|
+
export declare function getLDServiceToken(): import("@servicetitan/react-ioc").SymbolToken<LDService.LDService>;
|
|
4
3
|
//# sourceMappingURL=get-ld-service-token.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-ld-service-token.d.ts","sourceRoot":"","sources":["../../src/utils/get-ld-service-token.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"get-ld-service-token.d.ts","sourceRoot":"","sources":["../../src/utils/get-ld-service-token.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,oCAAoC,CAAC;AAEhE,wBAAgB,iBAAiB,uEAEhC"}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
try {
|
|
3
|
-
token = require('@servicetitan/launchdarkly-service').LD_SERVICE_TOKEN;
|
|
4
|
-
} catch (unused) {
|
|
5
|
-
// ignore
|
|
6
|
-
}
|
|
1
|
+
import * as LDService from '@servicetitan/launchdarkly-service';
|
|
7
2
|
export function getLDServiceToken() {
|
|
8
|
-
return
|
|
3
|
+
return LDService.LD_SERVICE_TOKEN;
|
|
9
4
|
}
|
|
10
5
|
|
|
11
6
|
//# sourceMappingURL=get-ld-service-token.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/get-ld-service-token.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../src/utils/get-ld-service-token.ts"],"sourcesContent":["import * as LDService from '@servicetitan/launchdarkly-service';\n\nexport function getLDServiceToken() {\n return LDService.LD_SERVICE_TOKEN;\n}\n"],"names":["LDService","getLDServiceToken","LD_SERVICE_TOKEN"],"mappings":"AAAA,YAAYA,eAAe,qCAAqC;AAEhE,OAAO,SAASC;IACZ,OAAOD,UAAUE,gBAAgB;AACrC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { BundleInfo } from './get-bundle-info';
|
|
2
|
-
export declare function loadScripts({ urls, WebComponent }: BundleInfo): Promise<void[]>;
|
|
2
|
+
export declare function loadScripts({ urls, WebComponent, type }: BundleInfo): Promise<void[]>;
|
|
3
3
|
//# sourceMappingURL=load-scripts.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"load-scripts.d.ts","sourceRoot":"","sources":["../../src/utils/load-scripts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"load-scripts.d.ts","sourceRoot":"","sources":["../../src/utils/load-scripts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,UAAU,mBAwCnE"}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
export function loadScripts({ urls, WebComponent }) {
|
|
1
|
+
export function loadScripts({ urls, WebComponent, type }) {
|
|
2
2
|
return Promise.all(urls.js.map((url)=>{
|
|
3
3
|
const script = Array.from(document.scripts).find(({ src })=>src === url);
|
|
4
4
|
if (!script) {
|
|
5
5
|
return new Promise((resolve)=>{
|
|
6
6
|
const script = document.createElement('script');
|
|
7
|
+
if (type === 'module') {
|
|
8
|
+
script.type = type;
|
|
9
|
+
}
|
|
10
|
+
// TODO: need async for Vite modules?
|
|
11
|
+
script.async = true;
|
|
7
12
|
script.crossOrigin = 'anonymous';
|
|
8
13
|
script.onload = ()=>{
|
|
9
14
|
script.dataset.webComponent = WebComponent;
|
|
10
15
|
script.onload = null;
|
|
11
16
|
resolve();
|
|
12
17
|
};
|
|
13
|
-
script.async = true;
|
|
14
18
|
script.src = url;
|
|
15
19
|
document.body.append(script);
|
|
16
20
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/load-scripts.ts"],"sourcesContent":["import { BundleInfo } from './get-bundle-info';\n\nexport function loadScripts({ urls, WebComponent }: BundleInfo) {\n return Promise.all(\n urls.js.map(url => {\n const script = Array.from(document.scripts).find(({ src }) => src === url);\n if (!script) {\n return new Promise<void>(resolve => {\n const script = document.createElement('script');\n\n script.crossOrigin = 'anonymous';\n script.onload = () => {\n script.dataset.webComponent = WebComponent;\n script.onload = null;\n resolve();\n };\n script.
|
|
1
|
+
{"version":3,"sources":["../../src/utils/load-scripts.ts"],"sourcesContent":["import { BundleInfo } from './get-bundle-info';\n\nexport function loadScripts({ urls, WebComponent, type }: BundleInfo) {\n return Promise.all(\n urls.js.map(url => {\n const script = Array.from(document.scripts).find(({ src }) => src === url);\n if (!script) {\n return new Promise<void>(resolve => {\n const script = document.createElement('script');\n\n if (type === 'module') {\n script.type = type;\n }\n\n // TODO: need async for Vite modules?\n script.async = true;\n script.crossOrigin = 'anonymous';\n script.onload = () => {\n script.dataset.webComponent = WebComponent;\n script.onload = null;\n resolve();\n };\n script.src = url;\n\n document.body.append(script);\n });\n }\n\n if (!script.dataset.webComponent) {\n return new Promise<void>(resolve => {\n const originalOnload = script.onload;\n script.onload = (...args) => {\n originalOnload?.call(script, ...args);\n script.onload = null;\n resolve();\n };\n });\n }\n\n return Promise.resolve();\n })\n );\n}\n"],"names":["loadScripts","urls","WebComponent","type","Promise","all","js","map","url","script","Array","from","document","scripts","find","src","resolve","createElement","async","crossOrigin","onload","dataset","webComponent","body","append","originalOnload","args","call"],"mappings":"AAEA,OAAO,SAASA,YAAY,EAAEC,IAAI,EAAEC,YAAY,EAAEC,IAAI,EAAc;IAChE,OAAOC,QAAQC,GAAG,CACdJ,KAAKK,EAAE,CAACC,GAAG,CAACC,CAAAA;QACR,MAAMC,SAASC,MAAMC,IAAI,CAACC,SAASC,OAAO,EAAEC,IAAI,CAAC,CAAC,EAAEC,GAAG,EAAE,GAAKA,QAAQP;QACtE,IAAI,CAACC,QAAQ;YACT,OAAO,IAAIL,QAAcY,CAAAA;gBACrB,MAAMP,SAASG,SAASK,aAAa,CAAC;gBAEtC,IAAId,SAAS,UAAU;oBACnBM,OAAON,IAAI,GAAGA;gBAClB;gBAEA,qCAAqC;gBACrCM,OAAOS,KAAK,GAAG;gBACfT,OAAOU,WAAW,GAAG;gBACrBV,OAAOW,MAAM,GAAG;oBACZX,OAAOY,OAAO,CAACC,YAAY,GAAGpB;oBAC9BO,OAAOW,MAAM,GAAG;oBAChBJ;gBACJ;gBACAP,OAAOM,GAAG,GAAGP;gBAEbI,SAASW,IAAI,CAACC,MAAM,CAACf;YACzB;QACJ;QAEA,IAAI,CAACA,OAAOY,OAAO,CAACC,YAAY,EAAE;YAC9B,OAAO,IAAIlB,QAAcY,CAAAA;gBACrB,MAAMS,iBAAiBhB,OAAOW,MAAM;gBACpCX,OAAOW,MAAM,GAAG,CAAC,GAAGM;oBAChBD,2BAAAA,qCAAAA,eAAgBE,IAAI,CAAClB,WAAWiB;oBAChCjB,OAAOW,MAAM,GAAG;oBAChBJ;gBACJ;YACJ;QACJ;QAEA,OAAOZ,QAAQY,OAAO;IAC1B;AAER"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/web-components",
|
|
3
|
-
"version": "34.
|
|
3
|
+
"version": "34.3.0-beta.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": "34.
|
|
20
|
-
"@servicetitan/startup-utils": "34.
|
|
19
|
+
"@servicetitan/error-boundary": "34.3.0-beta.0",
|
|
20
|
+
"@servicetitan/startup-utils": "34.3.0-beta.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.2.0",
|
|
27
27
|
"@servicetitan/design-system": "~14.5.3",
|
|
28
|
-
"@servicetitan/launchdarkly-service": "34.
|
|
29
|
-
"@servicetitan/log-service": "34.
|
|
30
|
-
"@servicetitan/react-ioc": "34.
|
|
28
|
+
"@servicetitan/launchdarkly-service": "34.3.0-beta.0",
|
|
29
|
+
"@servicetitan/log-service": "34.3.0-beta.0",
|
|
30
|
+
"@servicetitan/react-ioc": "34.3.0-beta.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": "34.
|
|
49
|
-
"@servicetitan/log-service": "34.
|
|
50
|
-
"@servicetitan/react-ioc": "34.
|
|
48
|
+
"@servicetitan/launchdarkly-service": "34.3.0-beta.0",
|
|
49
|
+
"@servicetitan/log-service": "34.3.0-beta.0",
|
|
50
|
+
"@servicetitan/react-ioc": "34.3.0-beta.0",
|
|
51
51
|
"history": "~4.10.1",
|
|
52
52
|
"react": ">=17.0.2",
|
|
53
53
|
"react-dom": ">=17.0.2"
|
|
@@ -68,6 +68,5 @@
|
|
|
68
68
|
},
|
|
69
69
|
"cli": {
|
|
70
70
|
"webpack": false
|
|
71
|
-
}
|
|
72
|
-
"gitHead": "6de619a1f399b1cba23012e60155830b0e7f4777"
|
|
71
|
+
}
|
|
73
72
|
}
|
package/src/globals.ts
CHANGED
|
@@ -16,17 +16,28 @@ function get<T>(fetch: () => T) {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
const _EXPOSED_DEPENDENCIES =
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
const _EXPOSED_DEPENDENCIES =
|
|
20
|
+
get(() => {
|
|
21
|
+
return EXPOSED_DEPENDENCIES;
|
|
22
|
+
}) ??
|
|
23
|
+
get(() => {
|
|
24
|
+
return import.meta.env.EXPOSED_DEPENDENCIES;
|
|
25
|
+
});
|
|
22
26
|
|
|
23
|
-
const _WEB_COMPONENT_NAME =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
});
|
|
27
|
+
const _WEB_COMPONENT_NAME =
|
|
28
|
+
get(() => {
|
|
29
|
+
return WEB_COMPONENT_NAME;
|
|
30
|
+
}) ??
|
|
31
|
+
get(() => {
|
|
32
|
+
return import.meta.env.WEB_COMPONENT_NAME;
|
|
33
|
+
});
|
|
34
|
+
const _EXPOSED_INSTANCE_DEPENDENCIES =
|
|
35
|
+
get(() => {
|
|
36
|
+
return EXPOSED_INSTANCE_DEPENDENCIES;
|
|
37
|
+
}) ??
|
|
38
|
+
get(() => {
|
|
39
|
+
return import.meta.env.EXPOSED_INSTANCE_DEPENDENCIES;
|
|
40
|
+
});
|
|
30
41
|
|
|
31
42
|
export {
|
|
32
43
|
_EXPOSED_DEPENDENCIES as EXPOSED_DEPENDENCIES,
|
package/src/index.ts
CHANGED
package/src/register-headless.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { LDService } from '@servicetitan/launchdarkly-service';
|
|
|
2
2
|
import type { Log } from '@servicetitan/log-service';
|
|
3
3
|
import type { Entries, IWebComponent } from './common';
|
|
4
4
|
import type { EventBus } from './event-bus';
|
|
5
|
+
import { WEB_COMPONENT_NAME } from './globals';
|
|
5
6
|
import { Serializable } from './types';
|
|
6
7
|
|
|
7
8
|
type HeadlessCallbackArgs<TMfeData, TEventBus extends EventBus = EventBus> = Pick<
|
package/src/register.tsx
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import * as Anvil2 from '@servicetitan/anvil2';
|
|
2
|
+
import * as Anvil1 from '@servicetitan/design-system';
|
|
1
3
|
import { type LDService } from '@servicetitan/launchdarkly-service';
|
|
2
4
|
import { Log } from '@servicetitan/log-service';
|
|
3
5
|
import { Provider } from '@servicetitan/react-ioc';
|
|
4
6
|
import { ExposedDependencies } from '@servicetitan/startup-utils';
|
|
5
|
-
import { ComponentType, FC, ReactElement, useEffect } from 'react';
|
|
7
|
+
import { ComponentType, FC, PropsWithChildren, ReactElement, useEffect } from 'react';
|
|
6
8
|
import {
|
|
7
9
|
BASENAME_TOKEN,
|
|
8
10
|
Entries,
|
|
@@ -40,6 +42,40 @@ export interface RegisterOptions {
|
|
|
40
42
|
sharedDependenciesNames?: string[];
|
|
41
43
|
}
|
|
42
44
|
|
|
45
|
+
const Anvil1Providers: FC<{ root: ShadowRoot; portal: ShadowRoot } & PropsWithChildren> = ({
|
|
46
|
+
root,
|
|
47
|
+
portal,
|
|
48
|
+
children,
|
|
49
|
+
}) => {
|
|
50
|
+
if (Anvil1.DefaultPortalContext === undefined || Anvil1.TablePopupPropsContext === undefined) {
|
|
51
|
+
return children;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<Anvil1.DefaultPortalContext.Provider value={portal as unknown as HTMLElement}>
|
|
56
|
+
<Anvil1.TablePopupPropsContext.Provider
|
|
57
|
+
value={props => ({
|
|
58
|
+
...props,
|
|
59
|
+
appendTo: root as unknown as HTMLElement,
|
|
60
|
+
})}
|
|
61
|
+
>
|
|
62
|
+
{children}
|
|
63
|
+
</Anvil1.TablePopupPropsContext.Provider>
|
|
64
|
+
</Anvil1.DefaultPortalContext.Provider>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const Anvil2Providers: FC<{ portalAnvilContainer: HTMLDivElement } & PropsWithChildren> = ({
|
|
69
|
+
portalAnvilContainer,
|
|
70
|
+
children,
|
|
71
|
+
}) => {
|
|
72
|
+
if (Anvil2.PortalProvider === undefined) {
|
|
73
|
+
return children;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return <Anvil2.PortalProvider root={portalAnvilContainer}>{children}</Anvil2.PortalProvider>;
|
|
77
|
+
};
|
|
78
|
+
|
|
43
79
|
export function register(Component: ComponentType, light: boolean, options?: RegisterOptions) {
|
|
44
80
|
class WebComponent extends HTMLElement implements IWebComponent {
|
|
45
81
|
private root?: ShadowRoot;
|
|
@@ -165,47 +201,14 @@ export function register(Component: ComponentType, light: boolean, options?: Reg
|
|
|
165
201
|
return elements;
|
|
166
202
|
};
|
|
167
203
|
|
|
168
|
-
private
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
return (
|
|
177
|
-
<DefaultPortalContext.Provider value={this.portal as unknown as HTMLElement}>
|
|
178
|
-
<TablePopupPropsContext.Provider
|
|
179
|
-
value={props => ({
|
|
180
|
-
...props,
|
|
181
|
-
appendTo: this.root as unknown as HTMLElement,
|
|
182
|
-
})}
|
|
183
|
-
>
|
|
184
|
-
{children}
|
|
185
|
-
</TablePopupPropsContext.Provider>
|
|
186
|
-
</DefaultPortalContext.Provider>
|
|
187
|
-
);
|
|
188
|
-
} catch {
|
|
189
|
-
return children;
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
private withAnvil2Providers(children: ReactElement): ReactElement {
|
|
194
|
-
try {
|
|
195
|
-
/**
|
|
196
|
-
* Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
|
|
197
|
-
* @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
|
|
198
|
-
*/
|
|
199
|
-
const { PortalProvider } =
|
|
200
|
-
require('@servicetitan/anvil2') as typeof import('@servicetitan/anvil2');
|
|
201
|
-
return <PortalProvider root={this.portalAnvilContainer}>{children}</PortalProvider>;
|
|
202
|
-
} catch {
|
|
203
|
-
return children;
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
private withProviders(children: ReactElement): ReactElement {
|
|
208
|
-
return this.withAnvil2Providers(this.withAnvil1Providers(children));
|
|
204
|
+
private withProviders(children: ReactElement) {
|
|
205
|
+
return (
|
|
206
|
+
<Anvil2Providers portalAnvilContainer={this.portalAnvilContainer!}>
|
|
207
|
+
<Anvil1Providers root={this.root!} portal={this.portal!}>
|
|
208
|
+
{children}
|
|
209
|
+
</Anvil1Providers>
|
|
210
|
+
</Anvil2Providers>
|
|
211
|
+
);
|
|
209
212
|
}
|
|
210
213
|
|
|
211
214
|
private render = () => {
|
package/src/render.ts
CHANGED
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
/* eslint-disable react/no-deprecated */
|
|
2
2
|
import { ReactElement } from 'react';
|
|
3
3
|
import ReactDOM from 'react-dom';
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
let createRoot: typeof ReactDOMClient.createRoot;
|
|
7
|
-
try {
|
|
8
|
-
/**
|
|
9
|
-
* Note, the webpack.IgnorePlugin must be configured to ignore this dependency.
|
|
10
|
-
* @see {@link file://./../../startup/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts}
|
|
11
|
-
*/
|
|
12
|
-
createRoot = require('react-dom/client').createRoot;
|
|
13
|
-
} catch {
|
|
14
|
-
// ignore
|
|
15
|
-
}
|
|
4
|
+
import * as ReactDOMClient from 'react-dom/client';
|
|
16
5
|
|
|
17
6
|
interface RenderOptions {
|
|
18
7
|
legacyRoot?: boolean;
|
|
@@ -28,11 +17,11 @@ export function render(
|
|
|
28
17
|
container: Element | DocumentFragment,
|
|
29
18
|
options?: RenderOptions
|
|
30
19
|
): RenderResult {
|
|
31
|
-
if (typeof createRoot !== 'function' || options?.legacyRoot) {
|
|
20
|
+
if (typeof ReactDOMClient.createRoot !== 'function' || options?.legacyRoot) {
|
|
32
21
|
return renderLegacyRoot(element, container);
|
|
33
22
|
}
|
|
34
23
|
|
|
35
|
-
const root = createRoot(container);
|
|
24
|
+
const root = ReactDOMClient.createRoot(container);
|
|
36
25
|
root.render(element);
|
|
37
26
|
|
|
38
27
|
return {
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { ComponentType, useCallback, useEffect } from 'react';
|
|
2
|
+
import { useMFEMetadataContext } from './contexts/mfe-metadata-context';
|
|
3
|
+
import { WEB_COMPONENT_NAME } from './globals';
|
|
4
|
+
|
|
5
|
+
interface StyleData {
|
|
6
|
+
css: string;
|
|
7
|
+
attributes: Record<string, string>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
declare global {
|
|
11
|
+
interface Window {
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
13
|
+
__VITE_WEB_COMPONENT_STYLES__?: Record<string, StyleData[]>;
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
15
|
+
__injectWebComponentStyles__?: Record<string, ((style: StyleData) => void)[]>;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export function withStyleInjector<P extends object>(Component: ComponentType<P>): ComponentType<P> {
|
|
20
|
+
return function StyleInjectorWrapper(props: P) {
|
|
21
|
+
// TODO: inject to portal shadow root as well
|
|
22
|
+
const { shadowRoot } = useMFEMetadataContext();
|
|
23
|
+
|
|
24
|
+
const injectStyle = useCallback(
|
|
25
|
+
(styleData: StyleData) => {
|
|
26
|
+
if (!shadowRoot) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Check if we should update an existing style element
|
|
31
|
+
const devId = styleData.attributes['data-vite-dev-id'];
|
|
32
|
+
const existingStyleElement = shadowRoot.querySelector<HTMLStyleElement>(
|
|
33
|
+
`style[data-vite-dev-id="${devId}"]`
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
if (existingStyleElement) {
|
|
37
|
+
// Update existing style element
|
|
38
|
+
existingStyleElement.textContent = styleData.css;
|
|
39
|
+
|
|
40
|
+
// Update attributes
|
|
41
|
+
Object.entries(styleData.attributes).forEach(([key, value]) => {
|
|
42
|
+
existingStyleElement.setAttribute(key, String(value));
|
|
43
|
+
});
|
|
44
|
+
} else {
|
|
45
|
+
// Create new style element
|
|
46
|
+
const styleElement = document.createElement('style');
|
|
47
|
+
styleElement.textContent = styleData.css;
|
|
48
|
+
|
|
49
|
+
// Apply attributes
|
|
50
|
+
Object.entries(styleData.attributes).forEach(([key, value]) => {
|
|
51
|
+
styleElement.setAttribute(key, String(value));
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
shadowRoot.appendChild(styleElement);
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
[shadowRoot]
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
// Inject all pre-initialization styles from the array
|
|
62
|
+
const preInitStyles = window.__VITE_WEB_COMPONENT_STYLES__?.[WEB_COMPONENT_NAME];
|
|
63
|
+
if (preInitStyles) {
|
|
64
|
+
preInitStyles.forEach(styleData => {
|
|
65
|
+
injectStyle(styleData);
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Register callback for runtime style injection
|
|
70
|
+
window.__injectWebComponentStyles__ ??= {};
|
|
71
|
+
window.__injectWebComponentStyles__[WEB_COMPONENT_NAME] ??= [];
|
|
72
|
+
|
|
73
|
+
const callback = (styleData: StyleData) => {
|
|
74
|
+
injectStyle(styleData);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
window.__injectWebComponentStyles__[WEB_COMPONENT_NAME].push(callback);
|
|
78
|
+
|
|
79
|
+
return () => {
|
|
80
|
+
// Unregister callback on unmount
|
|
81
|
+
const callbacks = window.__injectWebComponentStyles__?.[WEB_COMPONENT_NAME];
|
|
82
|
+
if (callbacks) {
|
|
83
|
+
const index = callbacks.indexOf(callback);
|
|
84
|
+
if (index > -1) {
|
|
85
|
+
callbacks.splice(index, 1);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
}, [injectStyle]);
|
|
90
|
+
|
|
91
|
+
return <Component {...props} />;
|
|
92
|
+
};
|
|
93
|
+
}
|
|
@@ -78,8 +78,8 @@ export async function getBundleInfo({
|
|
|
78
78
|
resolvedBundleType = embed ? 'light' : 'full';
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
let bundleBaseUrl = `${exactPackageUrl}/dist/bundle/${resolvedBundleType}`;
|
|
82
|
+
const withBaseUrl = (path: string) => `${bundleBaseUrl}/${path}`;
|
|
83
83
|
|
|
84
84
|
let entrypoints: EntryPoints;
|
|
85
85
|
if (metadata.entrypoints?.[resolvedBundleType]) {
|
|
@@ -88,6 +88,14 @@ export async function getBundleInfo({
|
|
|
88
88
|
entrypoints = await getEntrypoints(withBaseUrl('entrypoints.json'), requestCache);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
// In dev mode, entrypoints include the dev server port. Replace the port in
|
|
92
|
+
// the base URL so asset requests go directly to the MFE's dev server.
|
|
93
|
+
if (entrypoints.port) {
|
|
94
|
+
const url = new URL(bundleBaseUrl);
|
|
95
|
+
url.port = String(entrypoints.port);
|
|
96
|
+
bundleBaseUrl = url.toString();
|
|
97
|
+
}
|
|
98
|
+
|
|
91
99
|
const disposer = () => {
|
|
92
100
|
if (resolvedBundleType === 'light') {
|
|
93
101
|
const path = Object.values<string>(sharedDependencies).shift();
|
|
@@ -97,8 +105,11 @@ export async function getBundleInfo({
|
|
|
97
105
|
}
|
|
98
106
|
};
|
|
99
107
|
|
|
100
|
-
const urls = Object.entries(entrypoints).reduce(
|
|
101
|
-
(result, [key, value]) => ({
|
|
108
|
+
const urls = Object.entries({ css: entrypoints.css, js: entrypoints.js }).reduce(
|
|
109
|
+
(result, [key, value]) => ({
|
|
110
|
+
...result,
|
|
111
|
+
[key]: value.map(url => withBaseUrl(url)),
|
|
112
|
+
}),
|
|
102
113
|
{} as EntryPoints
|
|
103
114
|
);
|
|
104
115
|
|
|
@@ -119,5 +130,6 @@ export async function getBundleInfo({
|
|
|
119
130
|
urls,
|
|
120
131
|
WebComponent: elementName,
|
|
121
132
|
version: metadata.version,
|
|
133
|
+
type: entrypoints.type,
|
|
122
134
|
};
|
|
123
135
|
}
|
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { SymbolToken } from '@servicetitan/react-ioc';
|
|
3
|
-
|
|
4
|
-
let token: SymbolToken<LDService>;
|
|
5
|
-
try {
|
|
6
|
-
token = require('@servicetitan/launchdarkly-service').LD_SERVICE_TOKEN;
|
|
7
|
-
} catch {
|
|
8
|
-
// ignore
|
|
9
|
-
}
|
|
1
|
+
import * as LDService from '@servicetitan/launchdarkly-service';
|
|
10
2
|
|
|
11
3
|
export function getLDServiceToken() {
|
|
12
|
-
return
|
|
4
|
+
return LDService.LD_SERVICE_TOKEN;
|
|
13
5
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BundleInfo } from './get-bundle-info';
|
|
2
2
|
|
|
3
|
-
export function loadScripts({ urls, WebComponent }: BundleInfo) {
|
|
3
|
+
export function loadScripts({ urls, WebComponent, type }: BundleInfo) {
|
|
4
4
|
return Promise.all(
|
|
5
5
|
urls.js.map(url => {
|
|
6
6
|
const script = Array.from(document.scripts).find(({ src }) => src === url);
|
|
@@ -8,13 +8,18 @@ export function loadScripts({ urls, WebComponent }: BundleInfo) {
|
|
|
8
8
|
return new Promise<void>(resolve => {
|
|
9
9
|
const script = document.createElement('script');
|
|
10
10
|
|
|
11
|
+
if (type === 'module') {
|
|
12
|
+
script.type = type;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// TODO: need async for Vite modules?
|
|
16
|
+
script.async = true;
|
|
11
17
|
script.crossOrigin = 'anonymous';
|
|
12
18
|
script.onload = () => {
|
|
13
19
|
script.dataset.webComponent = WebComponent;
|
|
14
20
|
script.onload = null;
|
|
15
21
|
resolve();
|
|
16
22
|
};
|
|
17
|
-
script.async = true;
|
|
18
23
|
script.src = url;
|
|
19
24
|
|
|
20
25
|
document.body.append(script);
|