@gears-frontx/react 0.2.0-alpha.0 → 0.2.0-alpha.15
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/CLAUDE.md +118 -61
- package/dist/index.cjs +607 -426
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +365 -100
- package/dist/index.d.ts +365 -100
- package/dist/index.js +437 -253
- package/dist/index.js.map +1 -1
- package/dist/testing.cjs +7 -4
- package/dist/testing.cjs.map +1 -1
- package/dist/testing.js +7 -2
- package/dist/testing.js.map +1 -1
- package/dist/{types-Cjd20AT-.d.cts → types-JtpziA_B.d.cts} +5 -12
- package/dist/{types-Cjd20AT-.d.ts → types-JtpziA_B.d.ts} +5 -12
- package/dist/types.cjs.map +1 -1
- package/dist/types.d.cts +1 -1
- package/dist/types.d.ts +1 -1
- package/llms.txt +38 -12
- package/package.json +20 -15
- package/commands/frontx-duplicate-screenset.md +0 -58
- package/commands/frontx-new-component.md +0 -57
- package/commands/frontx-new-mfe.md +0 -153
- package/commands/frontx-new-screen.md +0 -45
- package/commands/frontx-new-screenset.md +0 -57
package/dist/index.cjs
CHANGED
|
@@ -30,172 +30,164 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var src_exports = {};
|
|
32
32
|
__export(src_exports, {
|
|
33
|
-
ACCOUNTS_DOMAIN: () =>
|
|
34
|
-
ActionHandler: () =>
|
|
35
|
-
ApiPlugin: () =>
|
|
36
|
-
ApiPluginBase: () =>
|
|
37
|
-
ApiProtocol: () =>
|
|
38
|
-
|
|
33
|
+
ACCOUNTS_DOMAIN: () => import_framework4.ACCOUNTS_DOMAIN,
|
|
34
|
+
ActionHandler: () => import_framework13.ActionHandler,
|
|
35
|
+
ApiPlugin: () => import_framework4.ApiPlugin,
|
|
36
|
+
ApiPluginBase: () => import_framework4.ApiPluginBase,
|
|
37
|
+
ApiProtocol: () => import_framework4.ApiProtocol,
|
|
38
|
+
AuthEvents: () => import_framework4.AuthEvents,
|
|
39
|
+
BaseApiService: () => import_framework4.BaseApiService,
|
|
39
40
|
CanAccess: () => CanAccess,
|
|
40
|
-
ChildMfeBridge: () =>
|
|
41
|
-
ConcurrentMountStrategy: () =>
|
|
42
|
-
ExclusiveMountStrategy: () =>
|
|
43
|
-
ExtensionDomainImplementation: () =>
|
|
44
|
-
ExtensionDomainImplementationFactory: () =>
|
|
41
|
+
ChildMfeBridge: () => import_framework13.ChildMfeBridge,
|
|
42
|
+
ConcurrentMountStrategy: () => import_framework13.ConcurrentMountStrategy,
|
|
43
|
+
ExclusiveMountStrategy: () => import_framework13.ExclusiveMountStrategy,
|
|
44
|
+
ExtensionDomainImplementation: () => import_framework13.ExtensionDomainImplementation,
|
|
45
|
+
ExtensionDomainImplementationFactory: () => import_framework13.ExtensionDomainImplementationFactory,
|
|
45
46
|
ExtensionDomainSlot: () => ExtensionDomainSlot,
|
|
46
|
-
ExtensionMounter: () =>
|
|
47
|
-
FRONTX_ACTION_LOAD_EXT: () =>
|
|
48
|
-
FRONTX_ACTION_MOUNT_EXT: () =>
|
|
49
|
-
FRONTX_ACTION_UNMOUNT_EXT: () =>
|
|
50
|
-
FRONTX_MFE_ENTRY_MF: () =>
|
|
51
|
-
FRONTX_OVERLAY_DOMAIN: () =>
|
|
52
|
-
FRONTX_POPUP_DOMAIN: () =>
|
|
53
|
-
FRONTX_SCREEN_DOMAIN: () =>
|
|
54
|
-
FRONTX_SCREEN_EXTENSION_TYPE: () =>
|
|
55
|
-
FRONTX_SHARED_PROPERTY_LANGUAGE: () =>
|
|
56
|
-
FRONTX_SHARED_PROPERTY_THEME: () =>
|
|
57
|
-
FRONTX_SIDEBAR_DOMAIN: () =>
|
|
47
|
+
ExtensionMounter: () => import_framework13.ExtensionMounter,
|
|
48
|
+
FRONTX_ACTION_LOAD_EXT: () => import_framework11.FRONTX_ACTION_LOAD_EXT,
|
|
49
|
+
FRONTX_ACTION_MOUNT_EXT: () => import_framework11.FRONTX_ACTION_MOUNT_EXT,
|
|
50
|
+
FRONTX_ACTION_UNMOUNT_EXT: () => import_framework11.FRONTX_ACTION_UNMOUNT_EXT,
|
|
51
|
+
FRONTX_MFE_ENTRY_MF: () => import_framework10.FRONTX_MFE_ENTRY_MF,
|
|
52
|
+
FRONTX_OVERLAY_DOMAIN: () => import_framework9.FRONTX_OVERLAY_DOMAIN,
|
|
53
|
+
FRONTX_POPUP_DOMAIN: () => import_framework9.FRONTX_POPUP_DOMAIN,
|
|
54
|
+
FRONTX_SCREEN_DOMAIN: () => import_framework9.FRONTX_SCREEN_DOMAIN,
|
|
55
|
+
FRONTX_SCREEN_EXTENSION_TYPE: () => import_framework10.FRONTX_SCREEN_EXTENSION_TYPE,
|
|
56
|
+
FRONTX_SHARED_PROPERTY_LANGUAGE: () => import_framework12.FRONTX_SHARED_PROPERTY_LANGUAGE,
|
|
57
|
+
FRONTX_SHARED_PROPERTY_THEME: () => import_framework12.FRONTX_SHARED_PROPERTY_THEME,
|
|
58
|
+
FRONTX_SIDEBAR_DOMAIN: () => import_framework9.FRONTX_SIDEBAR_DOMAIN,
|
|
58
59
|
FrontXContext: () => FrontXContext,
|
|
59
60
|
FrontXProvider: () => FrontXProvider,
|
|
60
|
-
I18nRegistry: () =>
|
|
61
|
-
I18nRegistryImpl: () =>
|
|
62
|
-
LAYOUT_SLICE_NAME: () =>
|
|
63
|
-
Language: () =>
|
|
64
|
-
LanguageDisplayMode: () =>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
MfeBridgeFactory: () => import_framework14.MfeBridgeFactory,
|
|
61
|
+
I18nRegistry: () => import_framework4.I18nRegistry,
|
|
62
|
+
I18nRegistryImpl: () => import_framework4.I18nRegistryImpl,
|
|
63
|
+
LAYOUT_SLICE_NAME: () => import_framework4.LAYOUT_SLICE_NAME,
|
|
64
|
+
Language: () => import_framework5.Language,
|
|
65
|
+
LanguageDisplayMode: () => import_framework5.LanguageDisplayMode,
|
|
66
|
+
MOCK_PLUGIN: () => import_framework4.MOCK_PLUGIN,
|
|
67
|
+
MfeBridgeFactory: () => import_framework13.MfeBridgeFactory,
|
|
68
68
|
MfeContext: () => MfeContext,
|
|
69
|
-
MfeHandler: () =>
|
|
70
|
-
MfeHandlerMF: () =>
|
|
69
|
+
MfeHandler: () => import_framework13.MfeHandler,
|
|
70
|
+
MfeHandlerMF: () => import_framework14.MfeHandlerMF,
|
|
71
71
|
MfeProvider: () => MfeProvider,
|
|
72
|
-
MfeRegistry: () =>
|
|
73
|
-
MfeRegistryFactory: () =>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
TENANT_SLICE_NAME: () => import_framework5.TENANT_SLICE_NAME,
|
|
91
|
-
TenantEvents: () => import_framework5.TenantEvents,
|
|
92
|
-
TextDirection: () => import_framework6.TextDirection,
|
|
72
|
+
MfeRegistry: () => import_framework13.MfeRegistry,
|
|
73
|
+
MfeRegistryFactory: () => import_framework13.MfeRegistryFactory,
|
|
74
|
+
MockEvents: () => import_framework4.MockEvents,
|
|
75
|
+
MountStrategy: () => import_framework13.MountStrategy,
|
|
76
|
+
OptionalMountStrategy: () => import_framework13.OptionalMountStrategy,
|
|
77
|
+
ParentMfeBridge: () => import_framework13.ParentMfeBridge,
|
|
78
|
+
RestEndpointProtocol: () => import_framework4.RestEndpointProtocol,
|
|
79
|
+
RestPlugin: () => import_framework4.RestPlugin,
|
|
80
|
+
RestPluginWithConfig: () => import_framework4.RestPluginWithConfig,
|
|
81
|
+
RestProtocol: () => import_framework4.RestProtocol,
|
|
82
|
+
SUPPORTED_LANGUAGES: () => import_framework4.SUPPORTED_LANGUAGES,
|
|
83
|
+
SsePlugin: () => import_framework4.SsePlugin,
|
|
84
|
+
SsePluginWithConfig: () => import_framework4.SsePluginWithConfig,
|
|
85
|
+
SseProtocol: () => import_framework4.SseProtocol,
|
|
86
|
+
SseStreamProtocol: () => import_framework4.SseStreamProtocol,
|
|
87
|
+
TENANT_SLICE_NAME: () => import_framework4.TENANT_SLICE_NAME,
|
|
88
|
+
TenantEvents: () => import_framework4.TenantEvents,
|
|
89
|
+
TextDirection: () => import_framework5.TextDirection,
|
|
93
90
|
ThemeAwareReactLifecycle: () => ThemeAwareReactLifecycle,
|
|
94
|
-
apiRegistry: () =>
|
|
95
|
-
auth: () =>
|
|
96
|
-
changeTenant: () =>
|
|
97
|
-
clearTenant: () =>
|
|
98
|
-
clearTenantAction: () =>
|
|
99
|
-
clearUser: () =>
|
|
100
|
-
closeAllPopups: () =>
|
|
101
|
-
closePopup: () =>
|
|
102
|
-
closeTopPopup: () =>
|
|
103
|
-
createFrontX: () =>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
effects: () => import_framework5.effects,
|
|
91
|
+
apiRegistry: () => import_framework4.apiRegistry,
|
|
92
|
+
auth: () => import_framework4.auth,
|
|
93
|
+
changeTenant: () => import_framework4.changeTenant,
|
|
94
|
+
clearTenant: () => import_framework4.clearTenant,
|
|
95
|
+
clearTenantAction: () => import_framework4.clearTenantAction,
|
|
96
|
+
clearUser: () => import_framework4.clearUser,
|
|
97
|
+
closeAllPopups: () => import_framework4.closeAllPopups,
|
|
98
|
+
closePopup: () => import_framework4.closePopup,
|
|
99
|
+
closeTopPopup: () => import_framework4.closeTopPopup,
|
|
100
|
+
createFrontX: () => import_framework4.createFrontX,
|
|
101
|
+
createI18nRegistry: () => import_framework4.createI18nRegistry,
|
|
102
|
+
createShadowRoot: () => import_framework15.createShadowRoot,
|
|
103
|
+
createSlice: () => import_framework4.createSlice,
|
|
104
|
+
createStore: () => import_framework4.createStore,
|
|
105
|
+
createThemeRegistry: () => import_framework4.createThemeRegistry,
|
|
106
|
+
effects: () => import_framework4.effects,
|
|
111
107
|
eventBus: () => eventBus2,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
injectCssVariables: () => import_framework17.injectCssVariables,
|
|
108
|
+
extractGtsPackage: () => import_framework15.extractGtsPackage,
|
|
109
|
+
footerActions: () => import_framework4.footerActions,
|
|
110
|
+
footerSlice: () => import_framework4.footerSlice,
|
|
111
|
+
frontxApiTransport: () => import_framework4.frontxApiTransport,
|
|
112
|
+
getLanguageMetadata: () => import_framework4.getLanguageMetadata,
|
|
113
|
+
getStore: () => import_framework4.getStore,
|
|
114
|
+
gtsPlugin: () => import_framework14.gtsPlugin,
|
|
115
|
+
hasSlice: () => import_framework4.hasSlice,
|
|
116
|
+
headerActions: () => import_framework4.headerActions,
|
|
117
|
+
headerSlice: () => import_framework4.headerSlice,
|
|
118
|
+
hideOverlay: () => import_framework4.hideOverlay,
|
|
119
|
+
i18n: () => import_framework4.i18n,
|
|
120
|
+
i18nRegistry: () => import_framework4.i18nRegistry,
|
|
121
|
+
initMockEffects: () => import_framework4.initMockEffects,
|
|
122
|
+
initTenantEffects: () => import_framework4.initTenantEffects,
|
|
123
|
+
injectCssVariables: () => import_framework15.injectCssVariables,
|
|
129
124
|
invalidateQueryCacheForApp: () => invalidateQueryCacheForApp,
|
|
130
|
-
isMockPlugin: () =>
|
|
131
|
-
isRestShortCircuit: () =>
|
|
132
|
-
isShortCircuit: () =>
|
|
133
|
-
isSseShortCircuit: () =>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
toggleSidebar: () => import_framework5.toggleSidebar,
|
|
197
|
-
unmountExtension: () => import_framework8.unmountExtension,
|
|
198
|
-
unregisterExtension: () => import_framework8.unregisterExtension,
|
|
125
|
+
isMockPlugin: () => import_framework4.isMockPlugin,
|
|
126
|
+
isRestShortCircuit: () => import_framework4.isRestShortCircuit,
|
|
127
|
+
isShortCircuit: () => import_framework4.isShortCircuit,
|
|
128
|
+
isSseShortCircuit: () => import_framework4.isSseShortCircuit,
|
|
129
|
+
layout: () => import_framework4.layout,
|
|
130
|
+
layoutDomainReducers: () => import_framework4.layoutDomainReducers,
|
|
131
|
+
layoutReducer: () => import_framework4.layoutReducer,
|
|
132
|
+
loadExtension: () => import_framework7.loadExtension,
|
|
133
|
+
menuActions: () => import_framework4.menuActions,
|
|
134
|
+
menuSlice: () => import_framework4.menuSlice,
|
|
135
|
+
mfeRegistryFactory: () => import_framework13.mfeRegistryFactory,
|
|
136
|
+
microfrontends: () => import_framework6.microfrontends,
|
|
137
|
+
mock: () => import_framework6.mock,
|
|
138
|
+
mockActions: () => import_framework4.mockActions,
|
|
139
|
+
mockSlice: () => import_framework4.mockSlice,
|
|
140
|
+
mountExtension: () => import_framework7.mountExtension,
|
|
141
|
+
openPopup: () => import_framework4.openPopup,
|
|
142
|
+
overlayActions: () => import_framework4.overlayActions,
|
|
143
|
+
overlayDomain: () => import_framework9.overlayDomain,
|
|
144
|
+
overlaySlice: () => import_framework4.overlaySlice,
|
|
145
|
+
popupActions: () => import_framework4.popupActions,
|
|
146
|
+
popupDomain: () => import_framework9.popupDomain,
|
|
147
|
+
popupSlice: () => import_framework4.popupSlice,
|
|
148
|
+
presets: () => import_framework4.presets,
|
|
149
|
+
queryCache: () => import_framework4.queryCache,
|
|
150
|
+
queryCacheShared: () => import_framework4.queryCacheShared,
|
|
151
|
+
registerExtension: () => import_framework7.registerExtension,
|
|
152
|
+
registerSlice: () => import_framework4.registerSlice,
|
|
153
|
+
screenDomain: () => import_framework9.screenDomain,
|
|
154
|
+
selectExtensionError: () => import_framework8.selectExtensionError,
|
|
155
|
+
selectExtensionState: () => import_framework8.selectExtensionState,
|
|
156
|
+
selectRegisteredExtensions: () => import_framework8.selectRegisteredExtensions,
|
|
157
|
+
setFooterConfig: () => import_framework4.setFooterConfig,
|
|
158
|
+
setFooterVisible: () => import_framework4.setFooterVisible,
|
|
159
|
+
setHeaderLoading: () => import_framework4.setHeaderLoading,
|
|
160
|
+
setMenuCollapsed: () => import_framework4.setMenuCollapsed,
|
|
161
|
+
setMenuConfig: () => import_framework4.setMenuConfig,
|
|
162
|
+
setMenuItems: () => import_framework4.setMenuItems,
|
|
163
|
+
setMenuVisible: () => import_framework4.setMenuVisible,
|
|
164
|
+
setMockEnabled: () => import_framework4.setMockEnabled,
|
|
165
|
+
setOverlayVisible: () => import_framework4.setOverlayVisible,
|
|
166
|
+
setSidebarCollapsed: () => import_framework4.setSidebarCollapsed,
|
|
167
|
+
setSidebarConfig: () => import_framework4.setSidebarConfig,
|
|
168
|
+
setSidebarContent: () => import_framework4.setSidebarContent,
|
|
169
|
+
setSidebarPosition: () => import_framework4.setSidebarPosition,
|
|
170
|
+
setSidebarTitle: () => import_framework4.setSidebarTitle,
|
|
171
|
+
setSidebarVisible: () => import_framework4.setSidebarVisible,
|
|
172
|
+
setSidebarWidth: () => import_framework4.setSidebarWidth,
|
|
173
|
+
setTenant: () => import_framework4.setTenant,
|
|
174
|
+
setTenantLoading: () => import_framework4.setTenantLoading,
|
|
175
|
+
setTenantLoadingState: () => import_framework4.setTenantLoadingState,
|
|
176
|
+
setUser: () => import_framework4.setUser,
|
|
177
|
+
showOverlay: () => import_framework4.showOverlay,
|
|
178
|
+
sidebarActions: () => import_framework4.sidebarActions,
|
|
179
|
+
sidebarDomain: () => import_framework9.sidebarDomain,
|
|
180
|
+
sidebarSlice: () => import_framework4.sidebarSlice,
|
|
181
|
+
subscribeQueryCacheRuntimeChanged: () => import_framework4.subscribeQueryCacheRuntimeChanged,
|
|
182
|
+
tenantActions: () => import_framework4.tenantActions,
|
|
183
|
+
tenantReducer: () => import_framework4.tenantReducer,
|
|
184
|
+
tenantSlice: () => import_framework4.tenantSlice,
|
|
185
|
+
themes: () => import_framework4.themes,
|
|
186
|
+
toggleMenu: () => import_framework4.toggleMenu,
|
|
187
|
+
toggleMockMode: () => import_framework4.toggleMockMode,
|
|
188
|
+
toggleSidebar: () => import_framework4.toggleSidebar,
|
|
189
|
+
unmountExtension: () => import_framework7.unmountExtension,
|
|
190
|
+
unregisterExtension: () => import_framework7.unregisterExtension,
|
|
199
191
|
useApiInfiniteQuery: () => useApiInfiniteQuery,
|
|
200
192
|
useApiMutation: () => useApiMutation,
|
|
201
193
|
useApiQuery: () => useApiQuery,
|
|
@@ -211,7 +203,7 @@ __export(src_exports, {
|
|
|
211
203
|
useHostAction: () => useHostAction,
|
|
212
204
|
useMfeBridge: () => useMfeBridge,
|
|
213
205
|
useMfeContext: () => useMfeContext,
|
|
214
|
-
|
|
206
|
+
useMfeRegistry: () => useMfeRegistry,
|
|
215
207
|
useQueryCache: () => useQueryCache,
|
|
216
208
|
useRegisteredPackages: () => useRegisteredPackages,
|
|
217
209
|
useScreenTranslations: () => useScreenTranslations,
|
|
@@ -222,9 +214,8 @@ __export(src_exports, {
|
|
|
222
214
|
module.exports = __toCommonJS(src_exports);
|
|
223
215
|
|
|
224
216
|
// src/FrontXProvider.tsx
|
|
225
|
-
var
|
|
217
|
+
var import_react5 = require("react");
|
|
226
218
|
var import_react_redux = require("react-redux");
|
|
227
|
-
var import_framework3 = require("@gears-frontx/framework");
|
|
228
219
|
|
|
229
220
|
// src/FrontXContext.tsx
|
|
230
221
|
var import_react = require("react");
|
|
@@ -259,7 +250,7 @@ var MfeProvider = ({ value, children }) => {
|
|
|
259
250
|
};
|
|
260
251
|
|
|
261
252
|
// src/queryClient.tsx
|
|
262
|
-
var
|
|
253
|
+
var import_react4 = __toESM(require("react"), 1);
|
|
263
254
|
var import_react_query = require("@tanstack/react-query");
|
|
264
255
|
var import_framework2 = require("@gears-frontx/framework");
|
|
265
256
|
|
|
@@ -368,13 +359,23 @@ function createQueryCache(queryClient) {
|
|
|
368
359
|
};
|
|
369
360
|
}
|
|
370
361
|
|
|
362
|
+
// src/hooks/useLatest.ts
|
|
363
|
+
var import_react3 = require("react");
|
|
364
|
+
function useLatest(value) {
|
|
365
|
+
const ref = (0, import_react3.useRef)(value);
|
|
366
|
+
(0, import_react3.useEffect)(() => {
|
|
367
|
+
ref.current = value;
|
|
368
|
+
});
|
|
369
|
+
return ref;
|
|
370
|
+
}
|
|
371
|
+
|
|
371
372
|
// src/queryClient.tsx
|
|
372
373
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
373
374
|
var APP_QUERY_CLIENT_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client");
|
|
374
375
|
var APP_QUERY_CLIENT_RESOLVER_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client-resolver");
|
|
375
376
|
var APP_QUERY_CLIENT_ACTIVATOR_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client-activator");
|
|
376
|
-
var FrontXQueryClientContext = (0,
|
|
377
|
-
var useCommitEffect = typeof globalThis.window === "undefined" ?
|
|
377
|
+
var FrontXQueryClientContext = (0, import_react4.createContext)(void 0);
|
|
378
|
+
var useCommitEffect = typeof globalThis.window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;
|
|
378
379
|
function resolveFrontXQueryClient(app) {
|
|
379
380
|
const clientApp = app;
|
|
380
381
|
return clientApp[APP_QUERY_CLIENT_SYMBOL] ?? clientApp[APP_QUERY_CLIENT_RESOLVER_SYMBOL]?.();
|
|
@@ -399,8 +400,8 @@ function bootstrapFrontXQueryClient(app) {
|
|
|
399
400
|
return resolveFrontXQueryClient(app);
|
|
400
401
|
}
|
|
401
402
|
function useBootstrappedFrontXQueryClient(app) {
|
|
402
|
-
const fromApp = (0,
|
|
403
|
-
const [eventResolvedClient, setEventResolvedClient] = (0,
|
|
403
|
+
const fromApp = (0, import_react4.useMemo)(() => bootstrapFrontXQueryClient(app), [app]);
|
|
404
|
+
const [eventResolvedClient, setEventResolvedClient] = (0, import_react4.useState)(
|
|
404
405
|
void 0
|
|
405
406
|
);
|
|
406
407
|
const queryClient = fromApp ?? (eventResolvedClient?.app === app ? eventResolvedClient.queryClient : void 0);
|
|
@@ -442,7 +443,7 @@ function FrontXQueryClientProvider({
|
|
|
442
443
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FrontXQueryClientContext.Provider, { value: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children }) });
|
|
443
444
|
}
|
|
444
445
|
function useOptionalFrontXQueryClient() {
|
|
445
|
-
return (0,
|
|
446
|
+
return (0, import_react4.useContext)(FrontXQueryClientContext);
|
|
446
447
|
}
|
|
447
448
|
function useRequiredFrontXQueryClient() {
|
|
448
449
|
const queryClient = useOptionalFrontXQueryClient();
|
|
@@ -465,24 +466,45 @@ function normalizeFetchStaleTime(staleTime) {
|
|
|
465
466
|
if (staleTime === "static") {
|
|
466
467
|
return Number.POSITIVE_INFINITY;
|
|
467
468
|
}
|
|
469
|
+
if (typeof staleTime === "function") {
|
|
470
|
+
return 0;
|
|
471
|
+
}
|
|
468
472
|
return typeof staleTime === "number" ? staleTime : void 0;
|
|
469
473
|
}
|
|
470
|
-
function resolveFetchStaleTime(queryClient, descriptor, overrideStaleTime) {
|
|
474
|
+
function resolveFetchStaleTime(queryClient, queryKey, descriptor, overrideStaleTime) {
|
|
475
|
+
const clientDefaults = {
|
|
476
|
+
...queryClient.getDefaultOptions().queries,
|
|
477
|
+
...queryClient.getQueryDefaults(queryKey)
|
|
478
|
+
};
|
|
471
479
|
return normalizeFetchStaleTime(
|
|
472
|
-
overrideStaleTime ?? descriptor.staleTime ??
|
|
480
|
+
overrideStaleTime ?? descriptor.staleTime ?? clientDefaults.staleTime
|
|
473
481
|
);
|
|
474
482
|
}
|
|
483
|
+
function cacheTimeOptions(staleTime, gcTime) {
|
|
484
|
+
return {
|
|
485
|
+
...staleTime === void 0 ? {} : { staleTime },
|
|
486
|
+
...gcTime === void 0 ? {} : { gcTime }
|
|
487
|
+
};
|
|
488
|
+
}
|
|
475
489
|
function fetchDescriptor(descriptor, options) {
|
|
476
490
|
return descriptor.fetch(options);
|
|
477
491
|
}
|
|
478
492
|
function useFrontXQuery(descriptor, overrides) {
|
|
479
493
|
const queryClient = useRequiredFrontXQueryClient();
|
|
480
|
-
const staleTime = resolveFetchStaleTime(
|
|
494
|
+
const staleTime = resolveFetchStaleTime(
|
|
495
|
+
queryClient,
|
|
496
|
+
descriptor.key,
|
|
497
|
+
descriptor,
|
|
498
|
+
overrides?.staleTime
|
|
499
|
+
);
|
|
481
500
|
const result = (0, import_react_query.useQuery)({
|
|
482
501
|
queryKey: descriptor.key,
|
|
483
502
|
queryFn: ({ signal }) => fetchDescriptor(descriptor, { signal, staleTime }),
|
|
484
|
-
|
|
485
|
-
|
|
503
|
+
...cacheTimeOptions(
|
|
504
|
+
overrides?.staleTime ?? descriptor.staleTime,
|
|
505
|
+
overrides?.gcTime ?? descriptor.gcTime
|
|
506
|
+
),
|
|
507
|
+
...overrides?.enabled === void 0 ? {} : { enabled: overrides.enabled }
|
|
486
508
|
});
|
|
487
509
|
return {
|
|
488
510
|
data: result.data,
|
|
@@ -495,12 +517,19 @@ function useFrontXQuery(descriptor, overrides) {
|
|
|
495
517
|
}
|
|
496
518
|
function useFrontXSuspenseQuery(descriptor, overrides) {
|
|
497
519
|
const queryClient = useRequiredFrontXQueryClient();
|
|
498
|
-
const staleTime = resolveFetchStaleTime(
|
|
520
|
+
const staleTime = resolveFetchStaleTime(
|
|
521
|
+
queryClient,
|
|
522
|
+
descriptor.key,
|
|
523
|
+
descriptor,
|
|
524
|
+
overrides?.staleTime
|
|
525
|
+
);
|
|
499
526
|
const result = (0, import_react_query.useSuspenseQuery)({
|
|
500
527
|
queryKey: descriptor.key,
|
|
501
528
|
queryFn: ({ signal }) => fetchDescriptor(descriptor, { signal, staleTime }),
|
|
502
|
-
|
|
503
|
-
|
|
529
|
+
...cacheTimeOptions(
|
|
530
|
+
overrides?.staleTime ?? descriptor.staleTime,
|
|
531
|
+
overrides?.gcTime ?? descriptor.gcTime
|
|
532
|
+
)
|
|
504
533
|
});
|
|
505
534
|
return {
|
|
506
535
|
data: result.data,
|
|
@@ -518,7 +547,12 @@ function useFrontXInfiniteQuery(options) {
|
|
|
518
547
|
initialPageParam: options.initialPage,
|
|
519
548
|
queryFn: ({ pageParam, signal }) => fetchDescriptor(pageParam, {
|
|
520
549
|
signal,
|
|
521
|
-
staleTime: resolveFetchStaleTime(
|
|
550
|
+
staleTime: resolveFetchStaleTime(
|
|
551
|
+
queryClient,
|
|
552
|
+
options.initialPage.key,
|
|
553
|
+
pageParam,
|
|
554
|
+
options.staleTime
|
|
555
|
+
)
|
|
522
556
|
}),
|
|
523
557
|
getNextPageParam: (lastPage, allPages, lastPageDescriptor, allPageDescriptors) => options.getNextPage(
|
|
524
558
|
buildPageContext(
|
|
@@ -537,9 +571,12 @@ function useFrontXInfiniteQuery(options) {
|
|
|
537
571
|
)
|
|
538
572
|
) : void 0,
|
|
539
573
|
select: (data) => data.pages,
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
574
|
+
...cacheTimeOptions(
|
|
575
|
+
options.staleTime ?? options.initialPage.staleTime,
|
|
576
|
+
options.gcTime ?? options.initialPage.gcTime
|
|
577
|
+
),
|
|
578
|
+
maxPages: options.maxPages,
|
|
579
|
+
...options.enabled === void 0 ? {} : { enabled: options.enabled }
|
|
543
580
|
});
|
|
544
581
|
return {
|
|
545
582
|
data: result.data,
|
|
@@ -569,7 +606,12 @@ function useFrontXSuspenseInfiniteQuery(options) {
|
|
|
569
606
|
initialPageParam: options.initialPage,
|
|
570
607
|
queryFn: ({ pageParam, signal }) => fetchDescriptor(pageParam, {
|
|
571
608
|
signal,
|
|
572
|
-
staleTime: resolveFetchStaleTime(
|
|
609
|
+
staleTime: resolveFetchStaleTime(
|
|
610
|
+
queryClient,
|
|
611
|
+
options.initialPage.key,
|
|
612
|
+
pageParam,
|
|
613
|
+
options.staleTime
|
|
614
|
+
)
|
|
573
615
|
}),
|
|
574
616
|
getNextPageParam: (lastPage, allPages, lastPageDescriptor, allPageDescriptors) => options.getNextPage(
|
|
575
617
|
buildPageContext(
|
|
@@ -588,8 +630,10 @@ function useFrontXSuspenseInfiniteQuery(options) {
|
|
|
588
630
|
)
|
|
589
631
|
) : void 0,
|
|
590
632
|
select: (data) => data.pages,
|
|
591
|
-
|
|
592
|
-
|
|
633
|
+
...cacheTimeOptions(
|
|
634
|
+
options.staleTime ?? options.initialPage.staleTime,
|
|
635
|
+
options.gcTime ?? options.initialPage.gcTime
|
|
636
|
+
),
|
|
593
637
|
maxPages: options.maxPages
|
|
594
638
|
});
|
|
595
639
|
return {
|
|
@@ -611,23 +655,49 @@ function useFrontXSuspenseInfiniteQuery(options) {
|
|
|
611
655
|
}
|
|
612
656
|
};
|
|
613
657
|
}
|
|
658
|
+
var mutationScopes = /* @__PURE__ */ new WeakMap();
|
|
659
|
+
function scopeBoundQueryCache(queryCache2, scope) {
|
|
660
|
+
const scopeChanged = () => (0, import_framework2.readQueryCacheScopeGeneration)(scope.queryClient) !== scope.generation;
|
|
661
|
+
const dropped = () => {
|
|
662
|
+
if (!scopeChanged()) return false;
|
|
663
|
+
(0, import_framework2.recordQueryCacheScopeWriteDropped)(scope.queryClient, scope.generation);
|
|
664
|
+
return true;
|
|
665
|
+
};
|
|
666
|
+
return {
|
|
667
|
+
get: queryCache2.get,
|
|
668
|
+
getState: queryCache2.getState,
|
|
669
|
+
set: (key, dataOrUpdater) => {
|
|
670
|
+
if (!dropped()) queryCache2.set(key, dataOrUpdater);
|
|
671
|
+
},
|
|
672
|
+
cancel: (key) => scopeChanged() ? Promise.resolve() : queryCache2.cancel(key),
|
|
673
|
+
invalidate: (key) => dropped() ? Promise.resolve() : queryCache2.invalidate(key),
|
|
674
|
+
invalidateMany: (filters) => dropped() ? Promise.resolve() : queryCache2.invalidateMany(filters),
|
|
675
|
+
remove: (key) => {
|
|
676
|
+
if (!dropped()) queryCache2.remove(key);
|
|
677
|
+
}
|
|
678
|
+
};
|
|
679
|
+
}
|
|
680
|
+
function scopeBoundCallbackCtx(callbackCtx, scope) {
|
|
681
|
+
return scope ? { queryCache: scopeBoundQueryCache(createQueryCache(scope.queryClient), scope) } : callbackCtx;
|
|
682
|
+
}
|
|
614
683
|
function useFrontXMutation(options, callbackCtx) {
|
|
615
|
-
useRequiredFrontXQueryClient();
|
|
616
|
-
const latestRef =
|
|
617
|
-
|
|
618
|
-
const
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
if (latestRef.current.options.abortOnUnmount) {
|
|
623
|
-
for (const controller of fetchAbortControllers) {
|
|
624
|
-
controller.abort();
|
|
625
|
-
}
|
|
626
|
-
fetchAbortControllers.clear();
|
|
684
|
+
const queryClient = useRequiredFrontXQueryClient();
|
|
685
|
+
const latestRef = useLatest({ options, callbackCtx, queryClient });
|
|
686
|
+
const fetchAbortControllersRef = import_react4.default.useRef(/* @__PURE__ */ new Set());
|
|
687
|
+
const abortFetchesOnUnmount = import_react4.default.useEffectEvent(() => {
|
|
688
|
+
if (options.abortOnUnmount) {
|
|
689
|
+
for (const controller of fetchAbortControllersRef.current) {
|
|
690
|
+
controller.abort();
|
|
627
691
|
}
|
|
692
|
+
fetchAbortControllersRef.current.clear();
|
|
693
|
+
}
|
|
694
|
+
});
|
|
695
|
+
import_react4.default.useEffect(() => {
|
|
696
|
+
return () => {
|
|
697
|
+
abortFetchesOnUnmount();
|
|
628
698
|
};
|
|
629
699
|
}, []);
|
|
630
|
-
const mutationFn =
|
|
700
|
+
const mutationFn = import_react4.default.useCallback((variables, context) => {
|
|
631
701
|
const cancelOnSupersede = latestRef.current.options.cancelOnSupersede;
|
|
632
702
|
if (cancelOnSupersede) {
|
|
633
703
|
for (const controller2 of fetchAbortControllersRef.current) {
|
|
@@ -648,35 +718,50 @@ function useFrontXMutation(options, callbackCtx) {
|
|
|
648
718
|
return latestRef.current.options.endpoint.fetch(variables, { signal: controller.signal }).finally(() => {
|
|
649
719
|
fetchAbortControllersRef.current.delete(controller);
|
|
650
720
|
});
|
|
651
|
-
}, []);
|
|
652
|
-
const onMutate =
|
|
721
|
+
}, [latestRef]);
|
|
722
|
+
const onMutate = import_react4.default.useCallback(async (variables, mutationFnContext) => {
|
|
653
723
|
const current = latestRef.current;
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
724
|
+
const scope = {
|
|
725
|
+
queryClient: current.queryClient,
|
|
726
|
+
generation: (0, import_framework2.readQueryCacheScopeGeneration)(current.queryClient)
|
|
727
|
+
};
|
|
728
|
+
mutationScopes.set(mutationFnContext, scope);
|
|
729
|
+
return current.options.onMutate?.(
|
|
730
|
+
variables,
|
|
731
|
+
scopeBoundCallbackCtx(current.callbackCtx, scope)
|
|
732
|
+
);
|
|
733
|
+
}, [latestRef]);
|
|
734
|
+
const onSuccess = import_react4.default.useCallback((data, variables, context, mutationFnContext) => {
|
|
660
735
|
const current = latestRef.current;
|
|
661
|
-
return current.options.onSuccess?.(
|
|
662
|
-
|
|
663
|
-
|
|
736
|
+
return current.options.onSuccess?.(
|
|
737
|
+
data,
|
|
738
|
+
variables,
|
|
739
|
+
context,
|
|
740
|
+
scopeBoundCallbackCtx(current.callbackCtx, mutationScopes.get(mutationFnContext))
|
|
741
|
+
);
|
|
742
|
+
}, [latestRef]);
|
|
743
|
+
const onError = import_react4.default.useCallback((error, variables, context, mutationFnContext) => {
|
|
664
744
|
const current = latestRef.current;
|
|
665
|
-
return current.options.onError?.(
|
|
666
|
-
|
|
667
|
-
|
|
745
|
+
return current.options.onError?.(
|
|
746
|
+
error,
|
|
747
|
+
variables,
|
|
748
|
+
context,
|
|
749
|
+
scopeBoundCallbackCtx(current.callbackCtx, mutationScopes.get(mutationFnContext))
|
|
750
|
+
);
|
|
751
|
+
}, [latestRef]);
|
|
752
|
+
const onSettled = import_react4.default.useCallback((data, error, variables, context, mutationFnContext) => {
|
|
668
753
|
const current = latestRef.current;
|
|
669
754
|
return current.options.onSettled?.(
|
|
670
755
|
data,
|
|
671
756
|
error,
|
|
672
757
|
variables,
|
|
673
758
|
context,
|
|
674
|
-
current.callbackCtx
|
|
759
|
+
scopeBoundCallbackCtx(current.callbackCtx, mutationScopes.get(mutationFnContext))
|
|
675
760
|
);
|
|
676
|
-
}, []);
|
|
761
|
+
}, [latestRef]);
|
|
677
762
|
const mutation = (0, import_react_query.useMutation)({
|
|
678
763
|
mutationFn,
|
|
679
|
-
onMutate
|
|
764
|
+
onMutate,
|
|
680
765
|
onSuccess: options.onSuccess ? onSuccess : void 0,
|
|
681
766
|
onError: options.onError ? onError : void 0,
|
|
682
767
|
onSettled: options.onSettled ? onSettled : void 0
|
|
@@ -693,38 +778,14 @@ function useFrontXMutation(options, callbackCtx) {
|
|
|
693
778
|
|
|
694
779
|
// src/FrontXProvider.tsx
|
|
695
780
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
696
|
-
function shallowEqual(a, b) {
|
|
697
|
-
if (a === b) return true;
|
|
698
|
-
if (!a || !b) return false;
|
|
699
|
-
const keysA = Object.keys(a);
|
|
700
|
-
if (keysA.length !== Object.keys(b).length) return false;
|
|
701
|
-
return keysA.every((k) => Object.is(a[k], b[k]));
|
|
702
|
-
}
|
|
703
|
-
function createProviderOwnedApp(config) {
|
|
704
|
-
return (0, import_framework3.createFrontXApp)(config);
|
|
705
|
-
}
|
|
706
781
|
var FrontXProvider = ({
|
|
707
782
|
children,
|
|
708
|
-
|
|
709
|
-
app: providedApp,
|
|
783
|
+
app,
|
|
710
784
|
mfeBridge
|
|
711
785
|
}) => {
|
|
712
|
-
const [stableConfig, setStableConfig] = (0, import_react4.useState)(config);
|
|
713
|
-
if (!shallowEqual(
|
|
714
|
-
stableConfig,
|
|
715
|
-
config
|
|
716
|
-
)) {
|
|
717
|
-
setStableConfig(config);
|
|
718
|
-
}
|
|
719
|
-
const app = (0, import_react4.useMemo)(() => {
|
|
720
|
-
if (providedApp) {
|
|
721
|
-
return providedApp;
|
|
722
|
-
}
|
|
723
|
-
return createProviderOwnedApp(stableConfig);
|
|
724
|
-
}, [providedApp, stableConfig]);
|
|
725
786
|
const queryClient = useBootstrappedFrontXQueryClient(app);
|
|
726
787
|
const deferQuerySubtree = hasFrontXQueryClientActivator(app) && queryClient === void 0;
|
|
727
|
-
(0,
|
|
788
|
+
(0, import_react5.useEffect)(() => {
|
|
728
789
|
if (queryClient || hasFrontXQueryClientActivator(app) || process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test" || process.env.VITEST === "true") {
|
|
729
790
|
return;
|
|
730
791
|
}
|
|
@@ -732,13 +793,6 @@ var FrontXProvider = ({
|
|
|
732
793
|
"[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition. useApiQuery/useApiMutation will fail without it."
|
|
733
794
|
);
|
|
734
795
|
}, [app, queryClient]);
|
|
735
|
-
(0, import_react4.useEffect)(() => {
|
|
736
|
-
return () => {
|
|
737
|
-
if (!providedApp) {
|
|
738
|
-
app.destroy();
|
|
739
|
-
}
|
|
740
|
-
};
|
|
741
|
-
}, [app, providedApp]);
|
|
742
796
|
const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FrontXContext.Provider, { value: app, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_redux.Provider, { store: app.store, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FrontXQueryClientProvider, { queryClient, children: deferQuerySubtree ? null : children }) }) });
|
|
743
797
|
if (mfeBridge) {
|
|
744
798
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MfeProvider, { value: mfeBridge, children: content });
|
|
@@ -747,7 +801,7 @@ var FrontXProvider = ({
|
|
|
747
801
|
};
|
|
748
802
|
|
|
749
803
|
// src/hooks/useCanAccess.ts
|
|
750
|
-
var
|
|
804
|
+
var import_react6 = require("react");
|
|
751
805
|
function serializeRecordValue(value) {
|
|
752
806
|
if (value === null) return "n:";
|
|
753
807
|
if (typeof value === "string") return `s:${value}`;
|
|
@@ -764,24 +818,23 @@ function accessQueryKey(query) {
|
|
|
764
818
|
function getAuthRuntime(app) {
|
|
765
819
|
return app.auth ?? null;
|
|
766
820
|
}
|
|
821
|
+
var DENIED_NO_AUTH = { allow: false, isResolving: false };
|
|
767
822
|
function useCanAccess(query) {
|
|
768
823
|
const app = useFrontX();
|
|
824
|
+
const auth2 = getAuthRuntime(app);
|
|
769
825
|
const stableKey = accessQueryKey(query);
|
|
770
|
-
const [stableQuery, setStableQuery] = (0,
|
|
771
|
-
const [
|
|
772
|
-
const [result, setResult] = (0,
|
|
773
|
-
if (
|
|
774
|
-
|
|
826
|
+
const [stableQuery, setStableQuery] = (0, import_react6.useState)(() => query);
|
|
827
|
+
const [runState, setRunState] = (0, import_react6.useState)({ auth: auth2, stableKey });
|
|
828
|
+
const [result, setResult] = (0, import_react6.useState)({ allow: false, isResolving: true });
|
|
829
|
+
if (runState.auth !== auth2 || runState.stableKey !== stableKey) {
|
|
830
|
+
setRunState({ auth: auth2, stableKey });
|
|
775
831
|
setStableQuery(query);
|
|
776
832
|
setResult({ allow: false, isResolving: true });
|
|
777
833
|
}
|
|
778
|
-
(0,
|
|
779
|
-
const auth2 = getAuthRuntime(app);
|
|
834
|
+
(0, import_react6.useEffect)(() => {
|
|
780
835
|
if (!auth2) {
|
|
781
|
-
setResult({ allow: false, isResolving: false });
|
|
782
836
|
return;
|
|
783
837
|
}
|
|
784
|
-
setResult({ allow: false, isResolving: true });
|
|
785
838
|
let alive = true;
|
|
786
839
|
const controller = new AbortController();
|
|
787
840
|
void auth2.canAccess(stableQuery, { signal: controller.signal }).then((decision) => {
|
|
@@ -797,8 +850,8 @@ function useCanAccess(query) {
|
|
|
797
850
|
alive = false;
|
|
798
851
|
controller.abort();
|
|
799
852
|
};
|
|
800
|
-
}, [
|
|
801
|
-
return result;
|
|
853
|
+
}, [auth2, stableQuery]);
|
|
854
|
+
return auth2 ? result : DENIED_NO_AUTH;
|
|
802
855
|
}
|
|
803
856
|
|
|
804
857
|
// src/components/CanAccess.tsx
|
|
@@ -826,12 +879,12 @@ var import_react_redux3 = require("react-redux");
|
|
|
826
879
|
var useAppSelector = import_react_redux3.useSelector;
|
|
827
880
|
|
|
828
881
|
// src/hooks/useTranslation.ts
|
|
829
|
-
var
|
|
882
|
+
var import_react7 = require("react");
|
|
830
883
|
function useTranslation() {
|
|
831
884
|
const app = useFrontX();
|
|
832
885
|
const { i18nRegistry: i18nRegistry2 } = app;
|
|
833
|
-
const version = (0,
|
|
834
|
-
(0,
|
|
886
|
+
const version = (0, import_react7.useSyncExternalStore)(
|
|
887
|
+
(0, import_react7.useCallback)(
|
|
835
888
|
(callback) => {
|
|
836
889
|
return i18nRegistry2.subscribe(callback);
|
|
837
890
|
},
|
|
@@ -840,17 +893,17 @@ function useTranslation() {
|
|
|
840
893
|
() => i18nRegistry2.getVersion(),
|
|
841
894
|
() => i18nRegistry2.getVersion()
|
|
842
895
|
);
|
|
843
|
-
const language = (0,
|
|
896
|
+
const language = (0, import_react7.useMemo)(() => {
|
|
844
897
|
void version;
|
|
845
898
|
return i18nRegistry2.getLanguage();
|
|
846
899
|
}, [i18nRegistry2, version]);
|
|
847
|
-
const t = (0,
|
|
900
|
+
const t = (0, import_react7.useCallback)(
|
|
848
901
|
(key, params) => {
|
|
849
902
|
return i18nRegistry2.t(key, params);
|
|
850
903
|
},
|
|
851
904
|
[i18nRegistry2]
|
|
852
905
|
);
|
|
853
|
-
const setLanguage = (0,
|
|
906
|
+
const setLanguage = (0, import_react7.useCallback)(
|
|
854
907
|
(lang) => {
|
|
855
908
|
if (app.actions.setLanguage) {
|
|
856
909
|
app.actions.setLanguage({ language: lang });
|
|
@@ -858,7 +911,7 @@ function useTranslation() {
|
|
|
858
911
|
},
|
|
859
912
|
[app.actions]
|
|
860
913
|
);
|
|
861
|
-
const isRTL = (0,
|
|
914
|
+
const isRTL = (0, import_react7.useMemo)(() => {
|
|
862
915
|
void language;
|
|
863
916
|
return i18nRegistry2.isRTL();
|
|
864
917
|
}, [i18nRegistry2, language]);
|
|
@@ -871,29 +924,28 @@ function useTranslation() {
|
|
|
871
924
|
}
|
|
872
925
|
|
|
873
926
|
// src/hooks/useScreenTranslations.ts
|
|
874
|
-
var
|
|
927
|
+
var import_react8 = require("react");
|
|
875
928
|
function isTranslationLoader(input) {
|
|
876
929
|
return typeof input === "function";
|
|
877
930
|
}
|
|
878
931
|
function useScreenTranslations(screensetId, screenId, translations) {
|
|
879
932
|
const app = useFrontX();
|
|
880
933
|
const { i18nRegistry: i18nRegistry2 } = app;
|
|
881
|
-
const [loadedLanguage, setLoadedLanguage] = (0,
|
|
882
|
-
const [
|
|
883
|
-
const
|
|
884
|
-
|
|
885
|
-
(0, import_react7.useCallback)(
|
|
934
|
+
const [loadedLanguage, setLoadedLanguage] = (0, import_react8.useState)(null);
|
|
935
|
+
const [error, setError] = (0, import_react8.useState)(null);
|
|
936
|
+
const version = (0, import_react8.useSyncExternalStore)(
|
|
937
|
+
(0, import_react8.useCallback)(
|
|
886
938
|
(callback) => i18nRegistry2.subscribe(callback),
|
|
887
939
|
[i18nRegistry2]
|
|
888
940
|
),
|
|
889
941
|
() => i18nRegistry2.getVersion(),
|
|
890
942
|
() => i18nRegistry2.getVersion()
|
|
891
943
|
);
|
|
892
|
-
const currentLanguage = (0,
|
|
944
|
+
const currentLanguage = (0, import_react8.useMemo)(() => {
|
|
893
945
|
void version;
|
|
894
946
|
return i18nRegistry2.getLanguage();
|
|
895
947
|
}, [i18nRegistry2, version]);
|
|
896
|
-
const loader = (0,
|
|
948
|
+
const loader = (0, import_react8.useMemo)(() => {
|
|
897
949
|
if (isTranslationLoader(translations)) {
|
|
898
950
|
return translations;
|
|
899
951
|
}
|
|
@@ -906,12 +958,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
|
|
|
906
958
|
return module2.default;
|
|
907
959
|
};
|
|
908
960
|
}, [translations]);
|
|
909
|
-
(0,
|
|
961
|
+
(0, import_react8.useEffect)(() => {
|
|
910
962
|
if (!currentLanguage || currentLanguage === loadedLanguage) {
|
|
911
963
|
return;
|
|
912
964
|
}
|
|
913
965
|
let cancelled = false;
|
|
914
|
-
setIsLoading(true);
|
|
915
966
|
const loadTranslations = async () => {
|
|
916
967
|
try {
|
|
917
968
|
const namespace = `screen.${screensetId}.${screenId}`;
|
|
@@ -920,13 +971,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
|
|
|
920
971
|
i18nRegistry2.register(namespace, currentLanguage, loadedTranslations);
|
|
921
972
|
if (!cancelled) {
|
|
922
973
|
setLoadedLanguage(currentLanguage);
|
|
923
|
-
setIsLoading(false);
|
|
924
974
|
setError(null);
|
|
925
975
|
}
|
|
926
976
|
} catch (err) {
|
|
927
977
|
if (!cancelled) {
|
|
928
978
|
setError(err instanceof Error ? err : new Error(String(err)));
|
|
929
|
-
setIsLoading(false);
|
|
930
979
|
}
|
|
931
980
|
}
|
|
932
981
|
};
|
|
@@ -935,29 +984,29 @@ function useScreenTranslations(screensetId, screenId, translations) {
|
|
|
935
984
|
cancelled = true;
|
|
936
985
|
};
|
|
937
986
|
}, [screensetId, screenId, loader, i18nRegistry2, currentLanguage, loadedLanguage]);
|
|
938
|
-
const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage
|
|
987
|
+
const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage;
|
|
939
988
|
return { isLoaded, error };
|
|
940
989
|
}
|
|
941
990
|
|
|
942
991
|
// src/hooks/useFormatters.ts
|
|
943
|
-
var
|
|
944
|
-
var
|
|
992
|
+
var import_react9 = require("react");
|
|
993
|
+
var import_framework3 = require("@gears-frontx/framework");
|
|
945
994
|
function useFormatters() {
|
|
946
995
|
const { language } = useTranslation();
|
|
947
|
-
return (0,
|
|
996
|
+
return (0, import_react9.useMemo)(
|
|
948
997
|
() => {
|
|
949
998
|
void language;
|
|
950
999
|
return {
|
|
951
|
-
formatDate:
|
|
952
|
-
formatTime:
|
|
953
|
-
formatDateTime:
|
|
954
|
-
formatRelative:
|
|
955
|
-
formatNumber:
|
|
956
|
-
formatPercent:
|
|
957
|
-
formatCompact:
|
|
958
|
-
formatCurrency:
|
|
959
|
-
compareStrings:
|
|
960
|
-
createCollator:
|
|
1000
|
+
formatDate: import_framework3.formatDate,
|
|
1001
|
+
formatTime: import_framework3.formatTime,
|
|
1002
|
+
formatDateTime: import_framework3.formatDateTime,
|
|
1003
|
+
formatRelative: import_framework3.formatRelative,
|
|
1004
|
+
formatNumber: import_framework3.formatNumber,
|
|
1005
|
+
formatPercent: import_framework3.formatPercent,
|
|
1006
|
+
formatCompact: import_framework3.formatCompact,
|
|
1007
|
+
formatCurrency: import_framework3.formatCurrency,
|
|
1008
|
+
compareStrings: import_framework3.compareStrings,
|
|
1009
|
+
createCollator: import_framework3.createCollator
|
|
961
1010
|
};
|
|
962
1011
|
},
|
|
963
1012
|
[language]
|
|
@@ -965,12 +1014,12 @@ function useFormatters() {
|
|
|
965
1014
|
}
|
|
966
1015
|
|
|
967
1016
|
// src/hooks/useTheme.ts
|
|
968
|
-
var
|
|
1017
|
+
var import_react10 = require("react");
|
|
969
1018
|
function useTheme() {
|
|
970
1019
|
const app = useFrontX();
|
|
971
1020
|
const { themeRegistry } = app;
|
|
972
|
-
const version = (0,
|
|
973
|
-
(0,
|
|
1021
|
+
const version = (0, import_react10.useSyncExternalStore)(
|
|
1022
|
+
(0, import_react10.useCallback)(
|
|
974
1023
|
(callback) => {
|
|
975
1024
|
return themeRegistry.subscribe(callback);
|
|
976
1025
|
},
|
|
@@ -979,18 +1028,18 @@ function useTheme() {
|
|
|
979
1028
|
() => themeRegistry.getVersion(),
|
|
980
1029
|
() => themeRegistry.getVersion()
|
|
981
1030
|
);
|
|
982
|
-
const currentTheme = (0,
|
|
1031
|
+
const currentTheme = (0, import_react10.useMemo)(() => {
|
|
983
1032
|
void version;
|
|
984
1033
|
const theme = themeRegistry.getCurrent();
|
|
985
1034
|
return theme?.id;
|
|
986
1035
|
}, [themeRegistry, version]);
|
|
987
|
-
const themes2 = (0,
|
|
1036
|
+
const themes2 = (0, import_react10.useMemo)(() => {
|
|
988
1037
|
return themeRegistry.getAll().map((theme) => ({
|
|
989
1038
|
id: theme.id,
|
|
990
1039
|
name: theme.name
|
|
991
1040
|
}));
|
|
992
1041
|
}, [themeRegistry]);
|
|
993
|
-
const setTheme = (0,
|
|
1042
|
+
const setTheme = (0, import_react10.useCallback)(
|
|
994
1043
|
(themeId) => {
|
|
995
1044
|
if (app.actions.changeTheme) {
|
|
996
1045
|
app.actions.changeTheme({ themeId });
|
|
@@ -1026,35 +1075,48 @@ function useApiSuspenseInfiniteQuery(options) {
|
|
|
1026
1075
|
}
|
|
1027
1076
|
|
|
1028
1077
|
// src/hooks/useApiMutation.ts
|
|
1029
|
-
var
|
|
1078
|
+
var import_react11 = require("react");
|
|
1030
1079
|
function useApiMutation(options) {
|
|
1031
1080
|
const queryClient = useRequiredFrontXQueryClient();
|
|
1032
|
-
const queryCache2 = (0,
|
|
1033
|
-
const callbackCtx = (0,
|
|
1081
|
+
const queryCache2 = (0, import_react11.useMemo)(() => createQueryCache(queryClient), [queryClient]);
|
|
1082
|
+
const callbackCtx = (0, import_react11.useMemo)(() => ({ queryCache: queryCache2 }), [queryCache2]);
|
|
1034
1083
|
return useFrontXMutation(options, callbackCtx);
|
|
1035
1084
|
}
|
|
1036
1085
|
|
|
1037
1086
|
// src/hooks/useApiStream.ts
|
|
1038
|
-
var
|
|
1087
|
+
var import_react12 = require("react");
|
|
1039
1088
|
function useApiStream(descriptor, options) {
|
|
1040
1089
|
const mode = options?.mode ?? "latest";
|
|
1041
1090
|
const enabled = options?.enabled ?? true;
|
|
1042
|
-
const [data, setData] = (0,
|
|
1043
|
-
const [events, setEvents] = (0,
|
|
1044
|
-
const [status, setStatus] = (0,
|
|
1045
|
-
const [error, setError] = (0,
|
|
1046
|
-
const connectPromiseRef = (0,
|
|
1047
|
-
const connectionIdRef = (0,
|
|
1048
|
-
const disconnectRequestedRef = (0,
|
|
1049
|
-
const descriptorRef = (
|
|
1050
|
-
|
|
1051
|
-
const
|
|
1052
|
-
(0,
|
|
1091
|
+
const [data, setData] = (0, import_react12.useState)(void 0);
|
|
1092
|
+
const [events, setEvents] = (0, import_react12.useState)([]);
|
|
1093
|
+
const [status, setStatus] = (0, import_react12.useState)(() => enabled ? "connecting" : "idle");
|
|
1094
|
+
const [error, setError] = (0, import_react12.useState)(null);
|
|
1095
|
+
const connectPromiseRef = (0, import_react12.useRef)(null);
|
|
1096
|
+
const connectionIdRef = (0, import_react12.useRef)(null);
|
|
1097
|
+
const disconnectRequestedRef = (0, import_react12.useRef)(false);
|
|
1098
|
+
const descriptorRef = useLatest(descriptor);
|
|
1099
|
+
const descriptorKey = (0, import_react12.useMemo)(() => JSON.stringify(descriptor.key), [descriptor.key]);
|
|
1100
|
+
const resetKey = `${descriptorKey}:${mode}`;
|
|
1101
|
+
const [prevResetKey, setPrevResetKey] = (0, import_react12.useState)(resetKey);
|
|
1102
|
+
if (resetKey !== prevResetKey) {
|
|
1103
|
+
setPrevResetKey(resetKey);
|
|
1053
1104
|
setData(void 0);
|
|
1054
1105
|
setEvents([]);
|
|
1055
1106
|
setError(null);
|
|
1056
|
-
}
|
|
1057
|
-
const
|
|
1107
|
+
}
|
|
1108
|
+
const connectKey = `${resetKey}:${enabled}`;
|
|
1109
|
+
const [prevConnectKey, setPrevConnectKey] = (0, import_react12.useState)(connectKey);
|
|
1110
|
+
if (connectKey !== prevConnectKey) {
|
|
1111
|
+
setPrevConnectKey(connectKey);
|
|
1112
|
+
if (enabled) {
|
|
1113
|
+
setData(void 0);
|
|
1114
|
+
setEvents([]);
|
|
1115
|
+
setStatus("connecting");
|
|
1116
|
+
setError(null);
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
const disconnect = (0, import_react12.useCallback)(() => {
|
|
1058
1120
|
disconnectRequestedRef.current = true;
|
|
1059
1121
|
if (connectionIdRef.current) {
|
|
1060
1122
|
descriptorRef.current.disconnect(connectionIdRef.current);
|
|
@@ -1062,19 +1124,14 @@ function useApiStream(descriptor, options) {
|
|
|
1062
1124
|
disconnectRequestedRef.current = false;
|
|
1063
1125
|
}
|
|
1064
1126
|
setStatus("disconnected");
|
|
1065
|
-
}, []);
|
|
1066
|
-
(0,
|
|
1127
|
+
}, [descriptorRef]);
|
|
1128
|
+
(0, import_react12.useEffect)(() => {
|
|
1067
1129
|
if (!enabled) {
|
|
1068
|
-
setStatus("idle");
|
|
1069
1130
|
return;
|
|
1070
1131
|
}
|
|
1071
1132
|
let cancelled = false;
|
|
1072
1133
|
disconnectRequestedRef.current = false;
|
|
1073
1134
|
const d = descriptorRef.current;
|
|
1074
|
-
setData(void 0);
|
|
1075
|
-
setEvents([]);
|
|
1076
|
-
setStatus("connecting");
|
|
1077
|
-
setError(null);
|
|
1078
1135
|
const connectPromise = d.connect(
|
|
1079
1136
|
(event) => {
|
|
1080
1137
|
if (cancelled) return;
|
|
@@ -1120,12 +1177,12 @@ function useApiStream(descriptor, options) {
|
|
|
1120
1177
|
connectPromiseRef.current = null;
|
|
1121
1178
|
connectionIdRef.current = null;
|
|
1122
1179
|
};
|
|
1123
|
-
}, [descriptorKey, enabled, mode]);
|
|
1124
|
-
return { data, events, status, error, disconnect };
|
|
1180
|
+
}, [descriptorKey, enabled, mode, descriptorRef]);
|
|
1181
|
+
return { data, events, status: enabled ? status : "idle", error, disconnect };
|
|
1125
1182
|
}
|
|
1126
1183
|
|
|
1127
1184
|
// src/hooks/useQueryCache.ts
|
|
1128
|
-
var
|
|
1185
|
+
var import_react13 = require("react");
|
|
1129
1186
|
function useQueryCache() {
|
|
1130
1187
|
const queryClient = useOptionalFrontXQueryClient();
|
|
1131
1188
|
if (!queryClient) {
|
|
@@ -1133,7 +1190,7 @@ function useQueryCache() {
|
|
|
1133
1190
|
"[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition."
|
|
1134
1191
|
);
|
|
1135
1192
|
}
|
|
1136
|
-
return (0,
|
|
1193
|
+
return (0, import_react13.useMemo)(() => createQueryCache(queryClient), [queryClient]);
|
|
1137
1194
|
}
|
|
1138
1195
|
|
|
1139
1196
|
// src/mfe/hooks/useMfeBridge.ts
|
|
@@ -1143,94 +1200,77 @@ function useMfeBridge() {
|
|
|
1143
1200
|
}
|
|
1144
1201
|
|
|
1145
1202
|
// src/mfe/hooks/useSharedProperty.ts
|
|
1146
|
-
var
|
|
1147
|
-
function useSharedProperty(propertyTypeId) {
|
|
1148
|
-
const
|
|
1149
|
-
const
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1203
|
+
var import_react14 = require("react");
|
|
1204
|
+
function useSharedProperty(propertyTypeId, options) {
|
|
1205
|
+
const contextValue = (0, import_react14.useContext)(MfeContext);
|
|
1206
|
+
const bridge = options?.bridge ?? contextValue?.bridge;
|
|
1207
|
+
const fallback = options?.fallback;
|
|
1208
|
+
if (!bridge) {
|
|
1209
|
+
throw new Error(
|
|
1210
|
+
"useSharedProperty must be used within a MfeProvider, or given an explicit `bridge` option, for components that never mount MfeProvider."
|
|
1211
|
+
);
|
|
1212
|
+
}
|
|
1213
|
+
const subscribe = (0, import_react14.useCallback)(
|
|
1214
|
+
(onStoreChange) => bridge.subscribeToProperty(propertyTypeId, () => {
|
|
1215
|
+
onStoreChange();
|
|
1216
|
+
}),
|
|
1217
|
+
[bridge, propertyTypeId]
|
|
1218
|
+
);
|
|
1219
|
+
const getSnapshot = (0, import_react14.useCallback)(() => {
|
|
1220
|
+
const raw = bridge.getProperty(propertyTypeId)?.value;
|
|
1221
|
+
return raw === void 0 ? fallback : raw;
|
|
1222
|
+
}, [bridge, propertyTypeId, fallback]);
|
|
1223
|
+
return (0, import_react14.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
|
|
1160
1224
|
}
|
|
1161
1225
|
|
|
1162
1226
|
// src/mfe/hooks/useHostAction.ts
|
|
1163
|
-
var
|
|
1227
|
+
var import_react15 = require("react");
|
|
1164
1228
|
function useHostAction(actionTypeId) {
|
|
1165
1229
|
const { bridge } = useMfeContext();
|
|
1166
|
-
return (0,
|
|
1230
|
+
return (0, import_react15.useCallback)((payload) => {
|
|
1167
1231
|
const chain = {
|
|
1168
1232
|
action: {
|
|
1169
1233
|
type: actionTypeId,
|
|
1170
|
-
target: bridge.
|
|
1234
|
+
target: bridge.extDomainId,
|
|
1171
1235
|
payload
|
|
1172
1236
|
}
|
|
1173
1237
|
};
|
|
1174
|
-
bridge.executeActionsChain(chain)
|
|
1175
|
-
console.error(
|
|
1176
|
-
`[useHostAction] Failed to send action '${actionTypeId}':`,
|
|
1177
|
-
error
|
|
1178
|
-
);
|
|
1179
|
-
});
|
|
1238
|
+
bridge.executeActionsChain(chain);
|
|
1180
1239
|
}, [actionTypeId, bridge]);
|
|
1181
1240
|
}
|
|
1182
1241
|
|
|
1183
|
-
// src/mfe/hooks/
|
|
1184
|
-
|
|
1185
|
-
function useDomainExtensions(domainId) {
|
|
1186
|
-
const app = useFrontX();
|
|
1242
|
+
// src/mfe/hooks/useMfeRegistry.ts
|
|
1243
|
+
function resolveMfeRegistry(app, callerName) {
|
|
1187
1244
|
const registry = app.mfeRegistry;
|
|
1188
1245
|
if (!registry) {
|
|
1189
1246
|
throw new Error(
|
|
1190
|
-
|
|
1247
|
+
`${callerName} requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration.`
|
|
1191
1248
|
);
|
|
1192
1249
|
}
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
);
|
|
1199
|
-
const cacheRef = (0, import_react15.useRef)({ ids: "", extensions: [] });
|
|
1200
|
-
const getSnapshot = (0, import_react15.useCallback)(() => {
|
|
1201
|
-
const extensions = registry.getExtensionsForDomain(domainId);
|
|
1202
|
-
const ids = extensions.map((e) => e.id).join(",");
|
|
1203
|
-
if (ids !== cacheRef.current.ids) {
|
|
1204
|
-
cacheRef.current = { ids, extensions };
|
|
1205
|
-
}
|
|
1206
|
-
return cacheRef.current.extensions;
|
|
1207
|
-
}, [registry, domainId]);
|
|
1208
|
-
return (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
|
|
1250
|
+
return registry;
|
|
1251
|
+
}
|
|
1252
|
+
function useMfeRegistry() {
|
|
1253
|
+
const app = useFrontX();
|
|
1254
|
+
return resolveMfeRegistry(app, "useMfeRegistry");
|
|
1209
1255
|
}
|
|
1210
1256
|
|
|
1211
|
-
// src/mfe/hooks/
|
|
1257
|
+
// src/mfe/hooks/useDomainExtensions.ts
|
|
1212
1258
|
var import_react16 = require("react");
|
|
1213
|
-
function
|
|
1259
|
+
function useDomainExtensions(domainId) {
|
|
1214
1260
|
const app = useFrontX();
|
|
1215
|
-
const registry = app
|
|
1216
|
-
if (!registry) {
|
|
1217
|
-
throw new Error(
|
|
1218
|
-
"useMountedExtensions requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
|
|
1219
|
-
);
|
|
1220
|
-
}
|
|
1261
|
+
const registry = resolveMfeRegistry(app, "useDomainExtensions");
|
|
1221
1262
|
const subscribe = (0, import_react16.useCallback)(
|
|
1222
1263
|
(onStoreChange) => {
|
|
1223
1264
|
return app.store.subscribe(onStoreChange);
|
|
1224
1265
|
},
|
|
1225
1266
|
[app.store]
|
|
1226
1267
|
);
|
|
1227
|
-
const cacheRef = (0, import_react16.useRef)({
|
|
1268
|
+
const cacheRef = (0, import_react16.useRef)({ ids: "", extensions: [] });
|
|
1228
1269
|
const getSnapshot = (0, import_react16.useCallback)(() => {
|
|
1229
|
-
const
|
|
1230
|
-
const
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
cacheRef.current = { key, extensions: resolved };
|
|
1270
|
+
const extensions = registry.getExtensionsForDomain(domainId);
|
|
1271
|
+
const ids = extensions.map((e) => e.id).join(",");
|
|
1272
|
+
if (ids !== cacheRef.current.ids) {
|
|
1273
|
+
cacheRef.current = { ids, extensions };
|
|
1234
1274
|
}
|
|
1235
1275
|
return cacheRef.current.extensions;
|
|
1236
1276
|
}, [registry, domainId]);
|
|
@@ -1241,12 +1281,7 @@ function useMountedExtensions(domainId) {
|
|
|
1241
1281
|
var import_react17 = require("react");
|
|
1242
1282
|
function useRegisteredPackages() {
|
|
1243
1283
|
const app = useFrontX();
|
|
1244
|
-
const registry = app
|
|
1245
|
-
if (!registry) {
|
|
1246
|
-
throw new Error(
|
|
1247
|
-
"useRegisteredPackages requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
|
|
1248
|
-
);
|
|
1249
|
-
}
|
|
1284
|
+
const registry = resolveMfeRegistry(app, "useRegisteredPackages");
|
|
1250
1285
|
const subscribe = (0, import_react17.useCallback)(
|
|
1251
1286
|
(onStoreChange) => {
|
|
1252
1287
|
return app.store.subscribe(onStoreChange);
|
|
@@ -1267,7 +1302,35 @@ function useRegisteredPackages() {
|
|
|
1267
1302
|
|
|
1268
1303
|
// src/mfe/ThemeAwareReactLifecycle.tsx
|
|
1269
1304
|
var import_client = require("react-dom/client");
|
|
1305
|
+
|
|
1306
|
+
// src/mfe/domainTeardownCollector.ts
|
|
1307
|
+
var activeCollector;
|
|
1308
|
+
function collectDomainTeardowns(fn) {
|
|
1309
|
+
const previousCollector = activeCollector;
|
|
1310
|
+
const collector = [];
|
|
1311
|
+
activeCollector = collector;
|
|
1312
|
+
try {
|
|
1313
|
+
fn();
|
|
1314
|
+
} finally {
|
|
1315
|
+
activeCollector = previousCollector;
|
|
1316
|
+
}
|
|
1317
|
+
return collector;
|
|
1318
|
+
}
|
|
1319
|
+
function registerDomainTeardown(promise) {
|
|
1320
|
+
activeCollector?.push(promise);
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
// src/mfe/ThemeAwareReactLifecycle.tsx
|
|
1270
1324
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1325
|
+
var ADOPTED_HOST_STYLE_ATTR = "data-frontx-adopted-host-style";
|
|
1326
|
+
var BASE_RESETS_STYLE_ID = "__frontx-base-resets__";
|
|
1327
|
+
var SHELL_OWNED_SHADOW_STYLE_IDS = ["__frontx-shadow-isolation__", "__frontx-css-variables__"];
|
|
1328
|
+
function cssToCopy(style) {
|
|
1329
|
+
const text = style.textContent ?? "";
|
|
1330
|
+
const sheet = style.sheet;
|
|
1331
|
+
if (text.trim() || !sheet) return text;
|
|
1332
|
+
return Array.from(sheet.cssRules, (rule) => rule.cssText).join("\n");
|
|
1333
|
+
}
|
|
1271
1334
|
function resolveProviderMountOptions(app, bridge, mountContext) {
|
|
1272
1335
|
const extensionId = mountContext?.extensionId;
|
|
1273
1336
|
const domainId = mountContext?.domainId;
|
|
@@ -1295,6 +1358,7 @@ var ThemeAwareReactLifecycle = class {
|
|
|
1295
1358
|
app;
|
|
1296
1359
|
root = null;
|
|
1297
1360
|
mount(container, bridge, mountContext) {
|
|
1361
|
+
void this.app.mfeRegistry;
|
|
1298
1362
|
if (container instanceof ShadowRoot) {
|
|
1299
1363
|
this.adoptHostStylesIntoShadowRoot(container);
|
|
1300
1364
|
}
|
|
@@ -1313,36 +1377,149 @@ var ThemeAwareReactLifecycle = class {
|
|
|
1313
1377
|
)
|
|
1314
1378
|
);
|
|
1315
1379
|
}
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1380
|
+
/**
|
|
1381
|
+
* `Root.unmount()` itself is synchronous, but a nested `ExtensionDomainSlot`
|
|
1382
|
+
* mounted anywhere in this root's own tree cannot make ITS cleanup
|
|
1383
|
+
* synchronous too — its mounter's own `detach()` awaits per-extension
|
|
1384
|
+
* unmounts. Collecting whatever that cleanup fire-and-forgets (through
|
|
1385
|
+
* `domainTeardownCollector`, scoped to this one `Root.unmount()` call) and
|
|
1386
|
+
* awaiting it here is what makes this method's own returned promise settle
|
|
1387
|
+
* only once every nested domain this root owns has actually finished
|
|
1388
|
+
* tearing down — never before. A root with no routed nested domain
|
|
1389
|
+
* collects nothing, and this resolves exactly as before (a microtask after
|
|
1390
|
+
* the synchronous unmount, same observable timing `void | Promise<void>`
|
|
1391
|
+
* already allows).
|
|
1392
|
+
*/
|
|
1393
|
+
async unmount(_container) {
|
|
1394
|
+
if (!this.root) return;
|
|
1395
|
+
const root = this.root;
|
|
1396
|
+
this.root = null;
|
|
1397
|
+
const pendingTeardowns = collectDomainTeardowns(() => root.unmount());
|
|
1398
|
+
const settled = await Promise.allSettled(pendingTeardowns);
|
|
1399
|
+
const failed = settled.find((result) => result.status === "rejected");
|
|
1400
|
+
if (failed) throw failed.reason;
|
|
1321
1401
|
}
|
|
1322
1402
|
/**
|
|
1323
1403
|
* Copy all inline <style> and <link rel="stylesheet"> from the host document
|
|
1324
1404
|
* into the shadow root so that Tailwind and component styles apply inside the MFE.
|
|
1405
|
+
*
|
|
1406
|
+
* The clones are inserted ahead of everything already in the shadow root, never
|
|
1407
|
+
* appended, because adopted host styles are context rather than authority: where
|
|
1408
|
+
* they and the MFE's own CSS declare the same property at equal specificity, the
|
|
1409
|
+
* MFE has to win. Appending inverted that. `MfeHandlerMF` injects the MFE's
|
|
1410
|
+
* compiled stylesheet into the shadow root before it calls mount, so an appended
|
|
1411
|
+
* clone of the shell's Tailwind preflight - whose
|
|
1412
|
+
* `button, [type='button'], [type='reset'], [type='submit']` rule sets
|
|
1413
|
+
* `background-color: transparent` at specificity (0,1,0) - tied with
|
|
1414
|
+
* `@gears-frontx/ui-kit`'s single-class button rule and won on document order,
|
|
1415
|
+
* leaving every kit Button transparent until it was hovered.
|
|
1416
|
+
*
|
|
1417
|
+
* Inserting at the front rather than pushing MFE styles to the back is what makes
|
|
1418
|
+
* the invariant hold for stylesheets that appear after mount too - a lazily
|
|
1419
|
+
* imported component's CSS module, or whatever initializeStyles() adds - since
|
|
1420
|
+
* those land behind the adopted block by construction.
|
|
1421
|
+
*
|
|
1422
|
+
* A cascade layer around the adopted CSS was the alternative and is rejected:
|
|
1423
|
+
* layered rules lose to unlayered ones at *any* specificity, so a host utility
|
|
1424
|
+
* class would stop overriding an MFE element selector. Document order keeps
|
|
1425
|
+
* specificity in charge and only settles the ties.
|
|
1426
|
+
*
|
|
1427
|
+
* The block replaces its predecessor instead of stacking on it, the same
|
|
1428
|
+
* upsert shape `injectStylesheet` and `injectCssVariables` use in
|
|
1429
|
+
* `@gears-frontx/mfes`' shadow utilities, widened from one id-keyed node to a
|
|
1430
|
+
* marked block. Replacement is required rather than tidy: `createShadowRoot`
|
|
1431
|
+
* hands back an existing `element.shadowRoot` instead of attaching a new one,
|
|
1432
|
+
* so remounting the same container runs this method again on a shadow root
|
|
1433
|
+
* that already holds a full adopted block, and appending would grow it once
|
|
1434
|
+
* per mount with no bound. It does not save re-resolving the cloned `<link>`s -
|
|
1435
|
+
* every mount clones them afresh and the browser resolves each clone; what
|
|
1436
|
+
* replacement buys is that the count stays at one block instead of one per
|
|
1437
|
+
* mount.
|
|
1438
|
+
*
|
|
1439
|
+
* The block is rebuilt from the host head rather than left in place, because
|
|
1440
|
+
* the head is not fixed: a lazily imported chunk adds stylesheets to it after
|
|
1441
|
+
* the first mount, and the second mount has to pick those up.
|
|
1442
|
+
*
|
|
1443
|
+
* A `<style>` is copied into a new element that holds the host's CSS - see
|
|
1444
|
+
* `cssToCopy` - and takes three things from the host element: `media`,
|
|
1445
|
+
* without which a print-only host style applies on screen inside the MFE;
|
|
1446
|
+
* `type`, which keeps the copy of a non-CSS element as inert as the original;
|
|
1447
|
+
* and the nonce, without which a nonce-based CSP blocks the copy. The nonce is read from the `nonce` property, because
|
|
1448
|
+
* browsers blank the attribute in a document served with a CSP header.
|
|
1449
|
+
* Nothing else is carried over, because libraries look for their own
|
|
1450
|
+
* attributes inside the shadow root: styled-components, rendering into it,
|
|
1451
|
+
* puts its tag right after the last `style[data-styled]` there, so a copy of
|
|
1452
|
+
* the host's tag would pull the MFE's rules ahead of the base resets and the
|
|
1453
|
+
* MFE's own CSS. A `<link>` is a deep clone and is loaded from its `href`
|
|
1454
|
+
* again.
|
|
1455
|
+
*
|
|
1456
|
+
* The fresh block goes in before the previous one comes out. Removing first
|
|
1457
|
+
* leaves the shadow root with no host CSS at all, and everything between that
|
|
1458
|
+
* removal and the insertion is synchronous work in this same task - so the gap
|
|
1459
|
+
* never reaches a paint, but any code that reads computed styles from the tree
|
|
1460
|
+
* in between sees an unstyled one. Inserting first costs one moment with two
|
|
1461
|
+
* blocks present, which changes nothing: the old block is a clone of the same
|
|
1462
|
+
* host head and loses every tie to the new one on document order anyway.
|
|
1325
1463
|
*/
|
|
1326
1464
|
adoptHostStylesIntoShadowRoot(shadowRoot) {
|
|
1327
|
-
const
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1465
|
+
const supersededStyles = Array.from(shadowRoot.querySelectorAll(`[${ADOPTED_HOST_STYLE_ATTR}]`));
|
|
1466
|
+
const adoptedStyles = document.createDocumentFragment();
|
|
1467
|
+
const hostStyleNodes = document.head.querySelectorAll('style, link[rel="stylesheet"]');
|
|
1468
|
+
hostStyleNodes.forEach((el) => {
|
|
1469
|
+
if (el instanceof HTMLStyleElement) {
|
|
1470
|
+
const copy = document.createElement("style");
|
|
1471
|
+
if (el.media) copy.media = el.media;
|
|
1472
|
+
if (el.type) copy.type = el.type;
|
|
1473
|
+
if (el.nonce) copy.nonce = el.nonce;
|
|
1474
|
+
copy.textContent = cssToCopy(el);
|
|
1475
|
+
copy.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
|
|
1476
|
+
adoptedStyles.appendChild(copy);
|
|
1477
|
+
return;
|
|
1478
|
+
}
|
|
1479
|
+
const linkClone = el.cloneNode(true);
|
|
1480
|
+
linkClone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
|
|
1481
|
+
adoptedStyles.appendChild(linkClone);
|
|
1337
1482
|
});
|
|
1483
|
+
shadowRoot.insertBefore(adoptedStyles, shadowRoot.firstChild);
|
|
1484
|
+
supersededStyles.forEach((el) => el.remove());
|
|
1338
1485
|
}
|
|
1339
1486
|
/**
|
|
1340
1487
|
* Box-model resets and :host defaults needed inside every shadow root.
|
|
1341
1488
|
* These aren't part of Tailwind's compiled output but are required for
|
|
1342
1489
|
* consistent rendering across browsers.
|
|
1490
|
+
*
|
|
1491
|
+
* Reuses the node a previous mount left behind, exactly as `injectStylesheet`
|
|
1492
|
+
* does in `@gears-frontx/mfes`' shadow utilities: a remount runs against a
|
|
1493
|
+
* shadow root that `createShadowRoot` handed back intact, and appending a
|
|
1494
|
+
* second copy would add one node per mount forever.
|
|
1495
|
+
*
|
|
1496
|
+
* Reuse alone is not enough, which is why the node is also positioned on every
|
|
1497
|
+
* mount rather than left where the previous one sat. These resets are context
|
|
1498
|
+
* like the adopted block is - `border-color: currentColor` on `*` is a 0-0-0
|
|
1499
|
+
* declaration that beats an MFE preflight's own 0-0-0 reset purely on document
|
|
1500
|
+
* order - so they have to stay ahead of the MFE's CSS, and where they land is
|
|
1501
|
+
* not stable on its own. `MfeHandlerMF.wrapLifecycleWithStylesheets` removes the
|
|
1502
|
+
* MFE's stylesheet on unmount and appends a fresh one before the next mount, so
|
|
1503
|
+
* a node merely left in place ends up ahead of that stylesheet on a remount and
|
|
1504
|
+
* behind it on the first mount: two different cascades for one component.
|
|
1505
|
+
* Anchoring it to the end of the shell-owned head gives every mount the same
|
|
1506
|
+
* order - adopted block, isolation, resets, MFE - which is also the order the
|
|
1507
|
+
* adoption method's invariant is written against.
|
|
1508
|
+
*
|
|
1509
|
+
* With no shell-owned node to anchor to, the resets go to the front. That is the
|
|
1510
|
+
* plain-`Element` container: no adopted block, no isolation style, and the MFE
|
|
1511
|
+
* stylesheet already appended by the handler, so the front is again the only
|
|
1512
|
+
* position that leaves the MFE winning ties.
|
|
1513
|
+
*
|
|
1514
|
+
* Looked up by attribute-selector form rather than `getElementById`, which
|
|
1515
|
+
* `ShadowRoot` has but `Element` does not, and this hook takes either.
|
|
1343
1516
|
*/
|
|
1344
1517
|
injectBaseResets(container) {
|
|
1345
|
-
const
|
|
1518
|
+
const existing = container.querySelector(
|
|
1519
|
+
`style[id="${BASE_RESETS_STYLE_ID}"]`
|
|
1520
|
+
);
|
|
1521
|
+
const style = existing ?? document.createElement("style");
|
|
1522
|
+
style.id = BASE_RESETS_STYLE_ID;
|
|
1346
1523
|
style.textContent = `
|
|
1347
1524
|
*, *::before, *::after {
|
|
1348
1525
|
box-sizing: border-box;
|
|
@@ -1356,11 +1533,21 @@ var ThemeAwareReactLifecycle = class {
|
|
|
1356
1533
|
line-height: 1.5;
|
|
1357
1534
|
-webkit-font-smoothing: antialiased;
|
|
1358
1535
|
-moz-osx-font-smoothing: grayscale;
|
|
1359
|
-
color:
|
|
1360
|
-
background-color:
|
|
1536
|
+
color: var(--foreground);
|
|
1537
|
+
background-color: var(--background);
|
|
1361
1538
|
}
|
|
1362
1539
|
`;
|
|
1363
|
-
container.
|
|
1540
|
+
const shellOwnedHead = container.querySelectorAll(
|
|
1541
|
+
[
|
|
1542
|
+
`[${ADOPTED_HOST_STYLE_ATTR}]`,
|
|
1543
|
+
...SHELL_OWNED_SHADOW_STYLE_IDS.map((id) => `[id="${id}"]`)
|
|
1544
|
+
].join(", ")
|
|
1545
|
+
);
|
|
1546
|
+
const lastShellOwnedNode = shellOwnedHead[shellOwnedHead.length - 1];
|
|
1547
|
+
container.insertBefore(
|
|
1548
|
+
style,
|
|
1549
|
+
lastShellOwnedNode ? lastShellOwnedNode.nextSibling : container.firstChild
|
|
1550
|
+
);
|
|
1364
1551
|
}
|
|
1365
1552
|
/**
|
|
1366
1553
|
* Hook for subclasses to inject additional CSS not covered by the adopted host
|
|
@@ -1385,10 +1572,12 @@ function ExtensionDomainSlot(props) {
|
|
|
1385
1572
|
loadingComponent = null
|
|
1386
1573
|
} = props;
|
|
1387
1574
|
const rootRef = (0, import_react18.useRef)(null);
|
|
1388
|
-
const
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1575
|
+
const emitAttached = (0, import_react18.useEffectEvent)((root) => {
|
|
1576
|
+
onAttached?.(root);
|
|
1577
|
+
});
|
|
1578
|
+
const emitDetached = (0, import_react18.useEffectEvent)(() => {
|
|
1579
|
+
onDetached?.();
|
|
1580
|
+
});
|
|
1392
1581
|
const [attached, setAttached] = (0, import_react18.useState)(false);
|
|
1393
1582
|
(0, import_react18.useEffect)(() => {
|
|
1394
1583
|
const root = rootRef.current;
|
|
@@ -1398,11 +1587,12 @@ function ExtensionDomainSlot(props) {
|
|
|
1398
1587
|
const mounter = registry.getMounter(domainId);
|
|
1399
1588
|
mounter.attach(root);
|
|
1400
1589
|
setAttached(true);
|
|
1401
|
-
|
|
1590
|
+
emitAttached(root);
|
|
1402
1591
|
return () => {
|
|
1403
|
-
|
|
1592
|
+
const detachPromise = mounter.detach();
|
|
1593
|
+
registerDomainTeardown(detachPromise);
|
|
1404
1594
|
setAttached(false);
|
|
1405
|
-
|
|
1595
|
+
emitDetached();
|
|
1406
1596
|
};
|
|
1407
1597
|
}, [registry, domainId]);
|
|
1408
1598
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
@@ -1417,6 +1607,7 @@ function ExtensionDomainSlot(props) {
|
|
|
1417
1607
|
}
|
|
1418
1608
|
|
|
1419
1609
|
// src/index.ts
|
|
1610
|
+
var import_framework4 = require("@gears-frontx/framework");
|
|
1420
1611
|
var import_framework5 = require("@gears-frontx/framework");
|
|
1421
1612
|
var import_framework6 = require("@gears-frontx/framework");
|
|
1422
1613
|
var import_framework7 = require("@gears-frontx/framework");
|
|
@@ -1429,9 +1620,7 @@ var import_framework13 = require("@gears-frontx/framework");
|
|
|
1429
1620
|
var import_framework14 = require("@gears-frontx/framework");
|
|
1430
1621
|
var import_framework15 = require("@gears-frontx/framework");
|
|
1431
1622
|
var import_framework16 = require("@gears-frontx/framework");
|
|
1432
|
-
var
|
|
1433
|
-
var import_framework18 = require("@gears-frontx/framework");
|
|
1434
|
-
var eventBus2 = import_framework18.eventBus;
|
|
1623
|
+
var eventBus2 = import_framework16.eventBus;
|
|
1435
1624
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1436
1625
|
0 && (module.exports = {
|
|
1437
1626
|
ACCOUNTS_DOMAIN,
|
|
@@ -1439,6 +1628,7 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1439
1628
|
ApiPlugin,
|
|
1440
1629
|
ApiPluginBase,
|
|
1441
1630
|
ApiProtocol,
|
|
1631
|
+
AuthEvents,
|
|
1442
1632
|
BaseApiService,
|
|
1443
1633
|
CanAccess,
|
|
1444
1634
|
ChildMfeBridge,
|
|
@@ -1466,7 +1656,6 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1466
1656
|
LAYOUT_SLICE_NAME,
|
|
1467
1657
|
Language,
|
|
1468
1658
|
LanguageDisplayMode,
|
|
1469
|
-
LayoutDomain,
|
|
1470
1659
|
MOCK_PLUGIN,
|
|
1471
1660
|
MfeBridgeFactory,
|
|
1472
1661
|
MfeContext,
|
|
@@ -1475,18 +1664,15 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1475
1664
|
MfeProvider,
|
|
1476
1665
|
MfeRegistry,
|
|
1477
1666
|
MfeRegistryFactory,
|
|
1478
|
-
MockEventSource,
|
|
1479
1667
|
MockEvents,
|
|
1480
1668
|
MountStrategy,
|
|
1481
1669
|
OptionalMountStrategy,
|
|
1482
1670
|
ParentMfeBridge,
|
|
1483
1671
|
RestEndpointProtocol,
|
|
1484
|
-
RestMockPlugin,
|
|
1485
1672
|
RestPlugin,
|
|
1486
1673
|
RestPluginWithConfig,
|
|
1487
1674
|
RestProtocol,
|
|
1488
1675
|
SUPPORTED_LANGUAGES,
|
|
1489
|
-
SseMockPlugin,
|
|
1490
1676
|
SsePlugin,
|
|
1491
1677
|
SsePluginWithConfig,
|
|
1492
1678
|
SseProtocol,
|
|
@@ -1505,7 +1691,6 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1505
1691
|
closePopup,
|
|
1506
1692
|
closeTopPopup,
|
|
1507
1693
|
createFrontX,
|
|
1508
|
-
createFrontXApp,
|
|
1509
1694
|
createI18nRegistry,
|
|
1510
1695
|
createShadowRoot,
|
|
1511
1696
|
createSlice,
|
|
@@ -1513,7 +1698,6 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1513
1698
|
createThemeRegistry,
|
|
1514
1699
|
effects,
|
|
1515
1700
|
eventBus,
|
|
1516
|
-
extensionScreenSchema,
|
|
1517
1701
|
extractGtsPackage,
|
|
1518
1702
|
footerActions,
|
|
1519
1703
|
footerSlice,
|
|
@@ -1535,7 +1719,6 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1535
1719
|
isRestShortCircuit,
|
|
1536
1720
|
isShortCircuit,
|
|
1537
1721
|
isSseShortCircuit,
|
|
1538
|
-
languageSchema,
|
|
1539
1722
|
layout,
|
|
1540
1723
|
layoutDomainReducers,
|
|
1541
1724
|
layoutReducer,
|
|
@@ -1563,7 +1746,6 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1563
1746
|
screenDomain,
|
|
1564
1747
|
selectExtensionError,
|
|
1565
1748
|
selectExtensionState,
|
|
1566
|
-
selectMountedExtensions,
|
|
1567
1749
|
selectRegisteredExtensions,
|
|
1568
1750
|
setFooterConfig,
|
|
1569
1751
|
setFooterVisible,
|
|
@@ -1593,7 +1775,6 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1593
1775
|
tenantActions,
|
|
1594
1776
|
tenantReducer,
|
|
1595
1777
|
tenantSlice,
|
|
1596
|
-
themeSchema,
|
|
1597
1778
|
themes,
|
|
1598
1779
|
toggleMenu,
|
|
1599
1780
|
toggleMockMode,
|
|
@@ -1615,7 +1796,7 @@ var eventBus2 = import_framework18.eventBus;
|
|
|
1615
1796
|
useHostAction,
|
|
1616
1797
|
useMfeBridge,
|
|
1617
1798
|
useMfeContext,
|
|
1618
|
-
|
|
1799
|
+
useMfeRegistry,
|
|
1619
1800
|
useQueryCache,
|
|
1620
1801
|
useRegisteredPackages,
|
|
1621
1802
|
useScreenTranslations,
|