@gears-frontx/react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +421 -0
- package/commands/hai3-duplicate-screenset.md +58 -0
- package/commands/hai3-new-component.md +48 -0
- package/commands/hai3-new-mfe.md +166 -0
- package/commands/hai3-new-screen.md +39 -0
- package/commands/hai3-new-screenset.md +47 -0
- package/dist/index.cjs +903 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +590 -0
- package/dist/index.d.ts +590 -0
- package/dist/index.js +872 -0
- package/dist/index.js.map +1 -0
- package/dist/types-Cp8Zm5s0.d.cts +136 -0
- package/dist/types-Cp8Zm5s0.d.ts +136 -0
- package/dist/types.cjs +19 -0
- package/dist/types.cjs.map +1 -0
- package/dist/types.d.cts +3 -0
- package/dist/types.d.ts +3 -0
- package/dist/types.js +1 -0
- package/dist/types.js.map +1 -0
- package/llms.txt +122 -0
- package/package.json +75 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,872 @@
|
|
|
1
|
+
// src/HAI3Provider.tsx
|
|
2
|
+
import { useMemo, useEffect } from "react";
|
|
3
|
+
import { Provider as ReduxProvider } from "react-redux";
|
|
4
|
+
import { createHAI3App } from "@gears-frontx/framework";
|
|
5
|
+
|
|
6
|
+
// src/HAI3Context.tsx
|
|
7
|
+
import { createContext, useContext } from "react";
|
|
8
|
+
var HAI3Context = createContext(null);
|
|
9
|
+
function useHAI3() {
|
|
10
|
+
const context = useContext(HAI3Context);
|
|
11
|
+
if (!context) {
|
|
12
|
+
throw new Error(
|
|
13
|
+
"useHAI3 must be used within a HAI3Provider. Wrap your application with <HAI3Provider> to access HAI3 features."
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
return context;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// src/mfe/MfeContext.tsx
|
|
20
|
+
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
21
|
+
var MfeContext = createContext2(null);
|
|
22
|
+
function useMfeContext() {
|
|
23
|
+
const context = useContext2(MfeContext);
|
|
24
|
+
if (!context) {
|
|
25
|
+
throw new Error(
|
|
26
|
+
"useMfeContext must be used within a MfeProvider. This hook can only be used inside MFE components."
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
return context;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// src/mfe/MfeProvider.tsx
|
|
33
|
+
import { jsx } from "react/jsx-runtime";
|
|
34
|
+
var MfeProvider = ({ value, children }) => {
|
|
35
|
+
return /* @__PURE__ */ jsx(MfeContext.Provider, { value, children });
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// src/HAI3Provider.tsx
|
|
39
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
40
|
+
var HAI3Provider = ({
|
|
41
|
+
children,
|
|
42
|
+
config,
|
|
43
|
+
app: providedApp,
|
|
44
|
+
mfeBridge
|
|
45
|
+
}) => {
|
|
46
|
+
const app = useMemo(() => {
|
|
47
|
+
if (providedApp) {
|
|
48
|
+
return providedApp;
|
|
49
|
+
}
|
|
50
|
+
return createHAI3App(config);
|
|
51
|
+
}, [providedApp, config]);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
return () => {
|
|
54
|
+
if (!providedApp) {
|
|
55
|
+
app.destroy();
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}, [app, providedApp]);
|
|
59
|
+
const content = /* @__PURE__ */ jsx2(HAI3Context.Provider, { value: app, children: /* @__PURE__ */ jsx2(ReduxProvider, { store: app.store, children }) });
|
|
60
|
+
if (mfeBridge) {
|
|
61
|
+
return /* @__PURE__ */ jsx2(MfeProvider, { value: mfeBridge, children: content });
|
|
62
|
+
}
|
|
63
|
+
return content;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
// src/hooks/useAppDispatch.ts
|
|
67
|
+
import { useDispatch } from "react-redux";
|
|
68
|
+
function useAppDispatch() {
|
|
69
|
+
return useDispatch();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// src/hooks/useAppSelector.ts
|
|
73
|
+
import { useSelector } from "react-redux";
|
|
74
|
+
var useAppSelector = useSelector;
|
|
75
|
+
|
|
76
|
+
// src/hooks/useTranslation.ts
|
|
77
|
+
import { useMemo as useMemo2, useCallback, useSyncExternalStore } from "react";
|
|
78
|
+
function useTranslation() {
|
|
79
|
+
const app = useHAI3();
|
|
80
|
+
const { i18nRegistry: i18nRegistry2 } = app;
|
|
81
|
+
const version = useSyncExternalStore(
|
|
82
|
+
useCallback(
|
|
83
|
+
(callback) => {
|
|
84
|
+
return i18nRegistry2.subscribe(callback);
|
|
85
|
+
},
|
|
86
|
+
[i18nRegistry2]
|
|
87
|
+
),
|
|
88
|
+
() => i18nRegistry2.getVersion(),
|
|
89
|
+
() => i18nRegistry2.getVersion()
|
|
90
|
+
);
|
|
91
|
+
const language = useMemo2(() => {
|
|
92
|
+
void version;
|
|
93
|
+
return i18nRegistry2.getLanguage();
|
|
94
|
+
}, [i18nRegistry2, version]);
|
|
95
|
+
const t = useCallback(
|
|
96
|
+
(key, params) => {
|
|
97
|
+
return i18nRegistry2.t(key, params);
|
|
98
|
+
},
|
|
99
|
+
[i18nRegistry2]
|
|
100
|
+
);
|
|
101
|
+
const setLanguage = useCallback(
|
|
102
|
+
(lang) => {
|
|
103
|
+
if (app.actions.setLanguage) {
|
|
104
|
+
app.actions.setLanguage({ language: lang });
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
[app.actions]
|
|
108
|
+
);
|
|
109
|
+
const isRTL = useMemo2(() => {
|
|
110
|
+
void language;
|
|
111
|
+
return i18nRegistry2.isRTL();
|
|
112
|
+
}, [i18nRegistry2, language]);
|
|
113
|
+
return {
|
|
114
|
+
t,
|
|
115
|
+
language,
|
|
116
|
+
setLanguage,
|
|
117
|
+
isRTL
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// src/hooks/useScreenTranslations.ts
|
|
122
|
+
import { useState, useEffect as useEffect2, useMemo as useMemo3, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
|
|
123
|
+
function isTranslationLoader(input) {
|
|
124
|
+
return typeof input === "function";
|
|
125
|
+
}
|
|
126
|
+
function useScreenTranslations(screensetId, screenId, translations) {
|
|
127
|
+
const app = useHAI3();
|
|
128
|
+
const { i18nRegistry: i18nRegistry2 } = app;
|
|
129
|
+
const [loadedLanguage, setLoadedLanguage] = useState(null);
|
|
130
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
131
|
+
const [error, setError] = useState(null);
|
|
132
|
+
const version = useSyncExternalStore2(
|
|
133
|
+
useCallback2(
|
|
134
|
+
(callback) => i18nRegistry2.subscribe(callback),
|
|
135
|
+
[i18nRegistry2]
|
|
136
|
+
),
|
|
137
|
+
() => i18nRegistry2.getVersion(),
|
|
138
|
+
() => i18nRegistry2.getVersion()
|
|
139
|
+
);
|
|
140
|
+
const currentLanguage = useMemo3(() => {
|
|
141
|
+
void version;
|
|
142
|
+
return i18nRegistry2.getLanguage();
|
|
143
|
+
}, [i18nRegistry2, version]);
|
|
144
|
+
const loader = useMemo3(() => {
|
|
145
|
+
if (isTranslationLoader(translations)) {
|
|
146
|
+
return translations;
|
|
147
|
+
}
|
|
148
|
+
return async (language) => {
|
|
149
|
+
const importFn = translations[language];
|
|
150
|
+
if (!importFn) {
|
|
151
|
+
return {};
|
|
152
|
+
}
|
|
153
|
+
const module = await importFn();
|
|
154
|
+
return module.default;
|
|
155
|
+
};
|
|
156
|
+
}, [translations]);
|
|
157
|
+
useEffect2(() => {
|
|
158
|
+
if (!currentLanguage || currentLanguage === loadedLanguage) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
let cancelled = false;
|
|
162
|
+
setIsLoading(true);
|
|
163
|
+
const loadTranslations = async () => {
|
|
164
|
+
try {
|
|
165
|
+
const namespace = `screen.${screensetId}.${screenId}`;
|
|
166
|
+
i18nRegistry2.registerLoader(namespace, loader);
|
|
167
|
+
const loadedTranslations = await loader(currentLanguage);
|
|
168
|
+
i18nRegistry2.register(namespace, currentLanguage, loadedTranslations);
|
|
169
|
+
if (!cancelled) {
|
|
170
|
+
setLoadedLanguage(currentLanguage);
|
|
171
|
+
setIsLoading(false);
|
|
172
|
+
setError(null);
|
|
173
|
+
}
|
|
174
|
+
} catch (err) {
|
|
175
|
+
if (!cancelled) {
|
|
176
|
+
setError(err instanceof Error ? err : new Error(String(err)));
|
|
177
|
+
setIsLoading(false);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
loadTranslations();
|
|
182
|
+
return () => {
|
|
183
|
+
cancelled = true;
|
|
184
|
+
};
|
|
185
|
+
}, [screensetId, screenId, loader, i18nRegistry2, currentLanguage, loadedLanguage]);
|
|
186
|
+
const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage && !isLoading;
|
|
187
|
+
return { isLoaded, error };
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// src/hooks/useFormatters.ts
|
|
191
|
+
import { useMemo as useMemo4 } from "react";
|
|
192
|
+
import {
|
|
193
|
+
formatDate as formatDateFn,
|
|
194
|
+
formatTime as formatTimeFn,
|
|
195
|
+
formatDateTime as formatDateTimeFn,
|
|
196
|
+
formatRelative as formatRelativeFn,
|
|
197
|
+
formatNumber as formatNumberFn,
|
|
198
|
+
formatPercent as formatPercentFn,
|
|
199
|
+
formatCompact as formatCompactFn,
|
|
200
|
+
formatCurrency as formatCurrencyFn,
|
|
201
|
+
compareStrings as compareStringsFn,
|
|
202
|
+
createCollator as createCollatorFn
|
|
203
|
+
} from "@gears-frontx/framework";
|
|
204
|
+
function useFormatters() {
|
|
205
|
+
const { language } = useTranslation();
|
|
206
|
+
return useMemo4(
|
|
207
|
+
() => {
|
|
208
|
+
void language;
|
|
209
|
+
return {
|
|
210
|
+
formatDate: formatDateFn,
|
|
211
|
+
formatTime: formatTimeFn,
|
|
212
|
+
formatDateTime: formatDateTimeFn,
|
|
213
|
+
formatRelative: formatRelativeFn,
|
|
214
|
+
formatNumber: formatNumberFn,
|
|
215
|
+
formatPercent: formatPercentFn,
|
|
216
|
+
formatCompact: formatCompactFn,
|
|
217
|
+
formatCurrency: formatCurrencyFn,
|
|
218
|
+
compareStrings: compareStringsFn,
|
|
219
|
+
createCollator: createCollatorFn
|
|
220
|
+
};
|
|
221
|
+
},
|
|
222
|
+
[language]
|
|
223
|
+
);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// src/hooks/useTheme.ts
|
|
227
|
+
import { useCallback as useCallback3, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
|
|
228
|
+
function useTheme() {
|
|
229
|
+
const app = useHAI3();
|
|
230
|
+
const { themeRegistry } = app;
|
|
231
|
+
const version = useSyncExternalStore3(
|
|
232
|
+
useCallback3(
|
|
233
|
+
(callback) => {
|
|
234
|
+
return themeRegistry.subscribe(callback);
|
|
235
|
+
},
|
|
236
|
+
[themeRegistry]
|
|
237
|
+
),
|
|
238
|
+
() => themeRegistry.getVersion(),
|
|
239
|
+
() => themeRegistry.getVersion()
|
|
240
|
+
);
|
|
241
|
+
const currentTheme = useMemo5(() => {
|
|
242
|
+
void version;
|
|
243
|
+
const theme = themeRegistry.getCurrent();
|
|
244
|
+
return theme?.id;
|
|
245
|
+
}, [themeRegistry, version]);
|
|
246
|
+
const themes2 = useMemo5(() => {
|
|
247
|
+
return themeRegistry.getAll().map((theme) => ({
|
|
248
|
+
id: theme.id,
|
|
249
|
+
name: theme.name
|
|
250
|
+
}));
|
|
251
|
+
}, [themeRegistry]);
|
|
252
|
+
const setTheme = useCallback3(
|
|
253
|
+
(themeId) => {
|
|
254
|
+
if (app.actions.changeTheme) {
|
|
255
|
+
app.actions.changeTheme({ themeId });
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
[app.actions]
|
|
259
|
+
);
|
|
260
|
+
return {
|
|
261
|
+
currentTheme,
|
|
262
|
+
themes: themes2,
|
|
263
|
+
setTheme
|
|
264
|
+
};
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
// src/mfe/hooks/useMfeBridge.ts
|
|
268
|
+
function useMfeBridge() {
|
|
269
|
+
const { bridge } = useMfeContext();
|
|
270
|
+
return bridge;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
// src/mfe/hooks/useSharedProperty.ts
|
|
274
|
+
import { useSyncExternalStore as useSyncExternalStore4, useCallback as useCallback4 } from "react";
|
|
275
|
+
function useSharedProperty(propertyTypeId) {
|
|
276
|
+
const { bridge } = useMfeContext();
|
|
277
|
+
const subscribe = useCallback4((callback) => {
|
|
278
|
+
return bridge.subscribeToProperty(propertyTypeId, () => {
|
|
279
|
+
callback();
|
|
280
|
+
});
|
|
281
|
+
}, [bridge, propertyTypeId]);
|
|
282
|
+
const getSnapshot = useCallback4(() => {
|
|
283
|
+
const property = bridge.getProperty(propertyTypeId);
|
|
284
|
+
return property?.value;
|
|
285
|
+
}, [bridge, propertyTypeId]);
|
|
286
|
+
const value = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
|
|
287
|
+
return value;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
// src/mfe/hooks/useHostAction.ts
|
|
291
|
+
import { useCallback as useCallback5 } from "react";
|
|
292
|
+
function useHostAction(actionTypeId) {
|
|
293
|
+
const { bridge } = useMfeContext();
|
|
294
|
+
return useCallback5((payload) => {
|
|
295
|
+
const chain = {
|
|
296
|
+
action: {
|
|
297
|
+
type: actionTypeId,
|
|
298
|
+
target: bridge.domainId,
|
|
299
|
+
payload
|
|
300
|
+
}
|
|
301
|
+
};
|
|
302
|
+
bridge.executeActionsChain(chain).catch((error) => {
|
|
303
|
+
console.error(
|
|
304
|
+
`[useHostAction] Failed to send action '${actionTypeId}':`,
|
|
305
|
+
error
|
|
306
|
+
);
|
|
307
|
+
});
|
|
308
|
+
}, [actionTypeId, bridge]);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// src/mfe/hooks/useDomainExtensions.ts
|
|
312
|
+
import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback6, useRef } from "react";
|
|
313
|
+
function useDomainExtensions(domainId) {
|
|
314
|
+
const app = useHAI3();
|
|
315
|
+
const registry = app.screensetsRegistry;
|
|
316
|
+
if (!registry) {
|
|
317
|
+
throw new Error(
|
|
318
|
+
"useDomainExtensions requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
|
|
319
|
+
);
|
|
320
|
+
}
|
|
321
|
+
const subscribe = useCallback6(
|
|
322
|
+
(onStoreChange) => {
|
|
323
|
+
return app.store.subscribe(onStoreChange);
|
|
324
|
+
},
|
|
325
|
+
[app.store]
|
|
326
|
+
);
|
|
327
|
+
const cacheRef = useRef({ ids: "", extensions: [] });
|
|
328
|
+
const getSnapshot = useCallback6(() => {
|
|
329
|
+
const extensions = registry.getExtensionsForDomain(domainId);
|
|
330
|
+
const ids = extensions.map((e) => e.id).join(",");
|
|
331
|
+
if (ids !== cacheRef.current.ids) {
|
|
332
|
+
cacheRef.current = { ids, extensions };
|
|
333
|
+
}
|
|
334
|
+
return cacheRef.current.extensions;
|
|
335
|
+
}, [registry, domainId]);
|
|
336
|
+
return useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
// src/mfe/hooks/useRegisteredPackages.ts
|
|
340
|
+
import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback7, useRef as useRef2 } from "react";
|
|
341
|
+
function useRegisteredPackages() {
|
|
342
|
+
const app = useHAI3();
|
|
343
|
+
const registry = app.screensetsRegistry;
|
|
344
|
+
if (!registry) {
|
|
345
|
+
throw new Error(
|
|
346
|
+
"useRegisteredPackages requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
|
|
347
|
+
);
|
|
348
|
+
}
|
|
349
|
+
const subscribe = useCallback7(
|
|
350
|
+
(onStoreChange) => {
|
|
351
|
+
return app.store.subscribe(onStoreChange);
|
|
352
|
+
},
|
|
353
|
+
[app.store]
|
|
354
|
+
);
|
|
355
|
+
const cacheRef = useRef2({ packages: "", list: [] });
|
|
356
|
+
const getSnapshot = useCallback7(() => {
|
|
357
|
+
const list = registry.getRegisteredPackages();
|
|
358
|
+
const packages = list.join(",");
|
|
359
|
+
if (packages !== cacheRef.current.packages) {
|
|
360
|
+
cacheRef.current = { packages, list };
|
|
361
|
+
}
|
|
362
|
+
return cacheRef.current.list;
|
|
363
|
+
}, [registry]);
|
|
364
|
+
return useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
// src/mfe/hooks/useActivePackage.ts
|
|
368
|
+
import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback8, useRef as useRef3 } from "react";
|
|
369
|
+
import { extractGtsPackage, FRONTX_SCREEN_DOMAIN } from "@gears-frontx/framework";
|
|
370
|
+
function useActivePackage() {
|
|
371
|
+
const app = useHAI3();
|
|
372
|
+
const registry = app.screensetsRegistry;
|
|
373
|
+
if (!registry) {
|
|
374
|
+
throw new Error(
|
|
375
|
+
"useActivePackage requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
|
|
376
|
+
);
|
|
377
|
+
}
|
|
378
|
+
const subscribe = useCallback8(
|
|
379
|
+
(onStoreChange) => {
|
|
380
|
+
return app.store.subscribe(onStoreChange);
|
|
381
|
+
},
|
|
382
|
+
[app.store]
|
|
383
|
+
);
|
|
384
|
+
const cacheRef = useRef3({ activePackage: void 0 });
|
|
385
|
+
const getSnapshot = useCallback8(() => {
|
|
386
|
+
const mountedExtensionId = registry.getMountedExtension(FRONTX_SCREEN_DOMAIN);
|
|
387
|
+
if (!mountedExtensionId) {
|
|
388
|
+
const result = void 0;
|
|
389
|
+
if (result !== cacheRef.current.activePackage) {
|
|
390
|
+
cacheRef.current = { activePackage: result };
|
|
391
|
+
}
|
|
392
|
+
return cacheRef.current.activePackage;
|
|
393
|
+
}
|
|
394
|
+
const activePackage = extractGtsPackage(mountedExtensionId);
|
|
395
|
+
if (activePackage !== cacheRef.current.activePackage) {
|
|
396
|
+
cacheRef.current = { activePackage };
|
|
397
|
+
}
|
|
398
|
+
return cacheRef.current.activePackage;
|
|
399
|
+
}, [registry]);
|
|
400
|
+
return useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
// src/mfe/components/RefContainerProvider.ts
|
|
404
|
+
import { ContainerProvider } from "@gears-frontx/framework";
|
|
405
|
+
var RefContainerProvider = class extends ContainerProvider {
|
|
406
|
+
constructor(containerRef) {
|
|
407
|
+
super();
|
|
408
|
+
this.containerRef = containerRef;
|
|
409
|
+
}
|
|
410
|
+
getContainer(_extensionId) {
|
|
411
|
+
if (!this.containerRef.current) {
|
|
412
|
+
throw new Error("Container ref is not attached -- component may not be mounted yet");
|
|
413
|
+
}
|
|
414
|
+
return this.containerRef.current;
|
|
415
|
+
}
|
|
416
|
+
releaseContainer(_extensionId) {
|
|
417
|
+
}
|
|
418
|
+
};
|
|
419
|
+
|
|
420
|
+
// src/mfe/components/ExtensionDomainSlot.tsx
|
|
421
|
+
import { useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
|
|
422
|
+
import {
|
|
423
|
+
FRONTX_ACTION_MOUNT_EXT,
|
|
424
|
+
FRONTX_ACTION_UNMOUNT_EXT
|
|
425
|
+
} from "@gears-frontx/framework";
|
|
426
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
427
|
+
function ExtensionDomainSlot(props) {
|
|
428
|
+
const {
|
|
429
|
+
registry,
|
|
430
|
+
domainId,
|
|
431
|
+
extensionId,
|
|
432
|
+
className,
|
|
433
|
+
onMounted,
|
|
434
|
+
onUnmounted,
|
|
435
|
+
onError,
|
|
436
|
+
loadingComponent,
|
|
437
|
+
errorComponent
|
|
438
|
+
} = props;
|
|
439
|
+
const containerRef = useRef4(null);
|
|
440
|
+
const [isLoading, setIsLoading] = useState2(true);
|
|
441
|
+
const [error, setError] = useState2(null);
|
|
442
|
+
const [bridge, setBridge] = useState2(null);
|
|
443
|
+
useEffect3(() => {
|
|
444
|
+
let mounted = true;
|
|
445
|
+
let currentBridge = null;
|
|
446
|
+
async function mountExtension2() {
|
|
447
|
+
if (!containerRef.current) {
|
|
448
|
+
return;
|
|
449
|
+
}
|
|
450
|
+
try {
|
|
451
|
+
setIsLoading(true);
|
|
452
|
+
setError(null);
|
|
453
|
+
await registry.executeActionsChain({
|
|
454
|
+
action: {
|
|
455
|
+
type: FRONTX_ACTION_MOUNT_EXT,
|
|
456
|
+
target: domainId,
|
|
457
|
+
payload: {
|
|
458
|
+
extensionId
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
if (!mounted) {
|
|
463
|
+
await registry.executeActionsChain({
|
|
464
|
+
action: {
|
|
465
|
+
type: FRONTX_ACTION_UNMOUNT_EXT,
|
|
466
|
+
target: domainId,
|
|
467
|
+
payload: {
|
|
468
|
+
extensionId
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
return;
|
|
473
|
+
}
|
|
474
|
+
const newBridge = registry.getParentBridge(extensionId);
|
|
475
|
+
if (!newBridge) {
|
|
476
|
+
throw new Error(`Failed to obtain bridge for extension ${extensionId} after mount`);
|
|
477
|
+
}
|
|
478
|
+
currentBridge = newBridge;
|
|
479
|
+
setBridge(newBridge);
|
|
480
|
+
setIsLoading(false);
|
|
481
|
+
if (onMounted) {
|
|
482
|
+
onMounted(newBridge);
|
|
483
|
+
}
|
|
484
|
+
} catch (err) {
|
|
485
|
+
if (!mounted) {
|
|
486
|
+
return;
|
|
487
|
+
}
|
|
488
|
+
const errorObj = err instanceof Error ? err : new Error(String(err));
|
|
489
|
+
setError(errorObj);
|
|
490
|
+
setIsLoading(false);
|
|
491
|
+
if (onError) {
|
|
492
|
+
onError(errorObj);
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
void mountExtension2();
|
|
497
|
+
return () => {
|
|
498
|
+
mounted = false;
|
|
499
|
+
if (currentBridge) {
|
|
500
|
+
void registry.executeActionsChain({
|
|
501
|
+
action: {
|
|
502
|
+
type: FRONTX_ACTION_UNMOUNT_EXT,
|
|
503
|
+
target: domainId,
|
|
504
|
+
payload: {
|
|
505
|
+
extensionId
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
}).then(() => {
|
|
509
|
+
if (onUnmounted) {
|
|
510
|
+
onUnmounted();
|
|
511
|
+
}
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
};
|
|
515
|
+
}, [registry, domainId, extensionId, onMounted, onUnmounted, onError]);
|
|
516
|
+
if (isLoading) {
|
|
517
|
+
return /* @__PURE__ */ jsx3("div", { className, "data-domain-id": domainId, "data-extension-id": extensionId, children: loadingComponent ?? /* @__PURE__ */ jsx3("div", { children: "Loading extension..." }) });
|
|
518
|
+
}
|
|
519
|
+
if (error) {
|
|
520
|
+
return /* @__PURE__ */ jsx3("div", { className, "data-domain-id": domainId, "data-extension-id": extensionId, children: errorComponent ? errorComponent(error) : /* @__PURE__ */ jsxs("div", { children: [
|
|
521
|
+
/* @__PURE__ */ jsx3("strong", { children: "Error loading extension:" }),
|
|
522
|
+
/* @__PURE__ */ jsx3("pre", { children: error.message })
|
|
523
|
+
] }) });
|
|
524
|
+
}
|
|
525
|
+
return /* @__PURE__ */ jsx3(
|
|
526
|
+
"div",
|
|
527
|
+
{
|
|
528
|
+
ref: containerRef,
|
|
529
|
+
className,
|
|
530
|
+
"data-domain-id": domainId,
|
|
531
|
+
"data-extension-id": extensionId,
|
|
532
|
+
"data-bridge-active": bridge !== null
|
|
533
|
+
}
|
|
534
|
+
);
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
// src/index.ts
|
|
538
|
+
import {
|
|
539
|
+
createHAI3,
|
|
540
|
+
createHAI3App as createHAI3App2,
|
|
541
|
+
presets,
|
|
542
|
+
ACCOUNTS_DOMAIN,
|
|
543
|
+
I18nRegistry,
|
|
544
|
+
screensets,
|
|
545
|
+
themes,
|
|
546
|
+
layout,
|
|
547
|
+
i18n,
|
|
548
|
+
effects,
|
|
549
|
+
createThemeRegistry,
|
|
550
|
+
createStore,
|
|
551
|
+
getStore,
|
|
552
|
+
registerSlice,
|
|
553
|
+
hasSlice,
|
|
554
|
+
createSlice,
|
|
555
|
+
LayoutDomain,
|
|
556
|
+
layoutReducer,
|
|
557
|
+
layoutDomainReducers,
|
|
558
|
+
LAYOUT_SLICE_NAME,
|
|
559
|
+
headerSlice,
|
|
560
|
+
footerSlice,
|
|
561
|
+
menuSlice,
|
|
562
|
+
sidebarSlice,
|
|
563
|
+
screenSlice,
|
|
564
|
+
popupSlice,
|
|
565
|
+
overlaySlice,
|
|
566
|
+
headerActions,
|
|
567
|
+
footerActions,
|
|
568
|
+
menuActions,
|
|
569
|
+
sidebarActions,
|
|
570
|
+
screenActions,
|
|
571
|
+
popupActions,
|
|
572
|
+
overlayActions,
|
|
573
|
+
setUser,
|
|
574
|
+
setHeaderLoading,
|
|
575
|
+
clearUser,
|
|
576
|
+
setFooterVisible,
|
|
577
|
+
setFooterConfig,
|
|
578
|
+
toggleMenu,
|
|
579
|
+
setMenuCollapsed,
|
|
580
|
+
setMenuItems,
|
|
581
|
+
setMenuVisible,
|
|
582
|
+
setMenuConfig,
|
|
583
|
+
toggleSidebar,
|
|
584
|
+
setSidebarCollapsed,
|
|
585
|
+
setSidebarPosition,
|
|
586
|
+
setSidebarTitle,
|
|
587
|
+
setSidebarContent,
|
|
588
|
+
setSidebarVisible,
|
|
589
|
+
setSidebarWidth,
|
|
590
|
+
setSidebarConfig,
|
|
591
|
+
setActiveScreen,
|
|
592
|
+
setScreenLoading,
|
|
593
|
+
navigateTo,
|
|
594
|
+
clearActiveScreen,
|
|
595
|
+
openPopup,
|
|
596
|
+
closePopup,
|
|
597
|
+
closeTopPopup,
|
|
598
|
+
closeAllPopups,
|
|
599
|
+
showOverlay,
|
|
600
|
+
hideOverlay,
|
|
601
|
+
setOverlayVisible,
|
|
602
|
+
TENANT_SLICE_NAME,
|
|
603
|
+
tenantSlice,
|
|
604
|
+
tenantActions,
|
|
605
|
+
tenantReducer,
|
|
606
|
+
setTenant,
|
|
607
|
+
setTenantLoading,
|
|
608
|
+
clearTenant,
|
|
609
|
+
initTenantEffects,
|
|
610
|
+
changeTenant,
|
|
611
|
+
clearTenantAction,
|
|
612
|
+
setTenantLoadingState,
|
|
613
|
+
TenantEvents,
|
|
614
|
+
mockSlice,
|
|
615
|
+
mockActions,
|
|
616
|
+
setMockEnabled,
|
|
617
|
+
initMockEffects,
|
|
618
|
+
toggleMockMode,
|
|
619
|
+
MockEvents,
|
|
620
|
+
apiRegistry,
|
|
621
|
+
BaseApiService,
|
|
622
|
+
RestProtocol,
|
|
623
|
+
SseProtocol,
|
|
624
|
+
RestMockPlugin,
|
|
625
|
+
SseMockPlugin,
|
|
626
|
+
MockEventSource,
|
|
627
|
+
ApiPluginBase,
|
|
628
|
+
ApiPlugin,
|
|
629
|
+
ApiProtocol,
|
|
630
|
+
RestPlugin,
|
|
631
|
+
RestPluginWithConfig,
|
|
632
|
+
SsePlugin,
|
|
633
|
+
SsePluginWithConfig,
|
|
634
|
+
isShortCircuit,
|
|
635
|
+
isRestShortCircuit,
|
|
636
|
+
isSseShortCircuit,
|
|
637
|
+
MOCK_PLUGIN,
|
|
638
|
+
isMockPlugin,
|
|
639
|
+
i18nRegistry,
|
|
640
|
+
I18nRegistryImpl,
|
|
641
|
+
createI18nRegistry,
|
|
642
|
+
SUPPORTED_LANGUAGES,
|
|
643
|
+
getLanguageMetadata
|
|
644
|
+
} from "@gears-frontx/framework";
|
|
645
|
+
import { Language, TextDirection, LanguageDisplayMode } from "@gears-frontx/framework";
|
|
646
|
+
import {
|
|
647
|
+
microfrontends,
|
|
648
|
+
mock
|
|
649
|
+
} from "@gears-frontx/framework";
|
|
650
|
+
import {
|
|
651
|
+
loadExtension,
|
|
652
|
+
mountExtension,
|
|
653
|
+
unmountExtension,
|
|
654
|
+
registerExtension,
|
|
655
|
+
unregisterExtension
|
|
656
|
+
} from "@gears-frontx/framework";
|
|
657
|
+
import {
|
|
658
|
+
selectExtensionState,
|
|
659
|
+
selectRegisteredExtensions,
|
|
660
|
+
selectExtensionError
|
|
661
|
+
} from "@gears-frontx/framework";
|
|
662
|
+
import {
|
|
663
|
+
FRONTX_POPUP_DOMAIN,
|
|
664
|
+
FRONTX_SIDEBAR_DOMAIN,
|
|
665
|
+
FRONTX_SCREEN_DOMAIN as FRONTX_SCREEN_DOMAIN2,
|
|
666
|
+
FRONTX_OVERLAY_DOMAIN,
|
|
667
|
+
screenDomain,
|
|
668
|
+
sidebarDomain,
|
|
669
|
+
popupDomain,
|
|
670
|
+
overlayDomain
|
|
671
|
+
} from "@gears-frontx/framework";
|
|
672
|
+
import {
|
|
673
|
+
FRONTX_SCREEN_EXTENSION_TYPE,
|
|
674
|
+
FRONTX_MFE_ENTRY_MF
|
|
675
|
+
} from "@gears-frontx/framework";
|
|
676
|
+
import {
|
|
677
|
+
FRONTX_ACTION_LOAD_EXT,
|
|
678
|
+
FRONTX_ACTION_MOUNT_EXT as FRONTX_ACTION_MOUNT_EXT2,
|
|
679
|
+
FRONTX_ACTION_UNMOUNT_EXT as FRONTX_ACTION_UNMOUNT_EXT2
|
|
680
|
+
} from "@gears-frontx/framework";
|
|
681
|
+
import {
|
|
682
|
+
FRONTX_SHARED_PROPERTY_THEME,
|
|
683
|
+
FRONTX_SHARED_PROPERTY_LANGUAGE
|
|
684
|
+
} from "@gears-frontx/framework";
|
|
685
|
+
import {
|
|
686
|
+
MfeHandler,
|
|
687
|
+
MfeBridgeFactory,
|
|
688
|
+
ScreensetsRegistry,
|
|
689
|
+
ScreensetsRegistryFactory,
|
|
690
|
+
screensetsRegistryFactory,
|
|
691
|
+
ContainerProvider as ContainerProvider2
|
|
692
|
+
} from "@gears-frontx/framework";
|
|
693
|
+
import { MfeHandlerMF, gtsPlugin } from "@gears-frontx/framework";
|
|
694
|
+
import { themeSchema, languageSchema, extensionScreenSchema } from "@gears-frontx/framework";
|
|
695
|
+
import {
|
|
696
|
+
createShadowRoot,
|
|
697
|
+
injectCssVariables,
|
|
698
|
+
extractGtsPackage as extractGtsPackage2
|
|
699
|
+
} from "@gears-frontx/framework";
|
|
700
|
+
import { eventBus as frameworkEventBus } from "@gears-frontx/framework";
|
|
701
|
+
var eventBus = frameworkEventBus;
|
|
702
|
+
export {
|
|
703
|
+
ACCOUNTS_DOMAIN,
|
|
704
|
+
ApiPlugin,
|
|
705
|
+
ApiPluginBase,
|
|
706
|
+
ApiProtocol,
|
|
707
|
+
BaseApiService,
|
|
708
|
+
ContainerProvider2 as ContainerProvider,
|
|
709
|
+
ExtensionDomainSlot,
|
|
710
|
+
FRONTX_ACTION_LOAD_EXT,
|
|
711
|
+
FRONTX_ACTION_MOUNT_EXT2 as FRONTX_ACTION_MOUNT_EXT,
|
|
712
|
+
FRONTX_ACTION_UNMOUNT_EXT2 as FRONTX_ACTION_UNMOUNT_EXT,
|
|
713
|
+
FRONTX_MFE_ENTRY_MF,
|
|
714
|
+
FRONTX_OVERLAY_DOMAIN,
|
|
715
|
+
FRONTX_POPUP_DOMAIN,
|
|
716
|
+
FRONTX_SCREEN_DOMAIN2 as FRONTX_SCREEN_DOMAIN,
|
|
717
|
+
FRONTX_SCREEN_EXTENSION_TYPE,
|
|
718
|
+
FRONTX_SHARED_PROPERTY_LANGUAGE,
|
|
719
|
+
FRONTX_SHARED_PROPERTY_THEME,
|
|
720
|
+
FRONTX_SIDEBAR_DOMAIN,
|
|
721
|
+
HAI3Context,
|
|
722
|
+
HAI3Provider,
|
|
723
|
+
I18nRegistry,
|
|
724
|
+
I18nRegistryImpl,
|
|
725
|
+
LAYOUT_SLICE_NAME,
|
|
726
|
+
Language,
|
|
727
|
+
LanguageDisplayMode,
|
|
728
|
+
LayoutDomain,
|
|
729
|
+
MOCK_PLUGIN,
|
|
730
|
+
MfeBridgeFactory,
|
|
731
|
+
MfeContext,
|
|
732
|
+
MfeHandler,
|
|
733
|
+
MfeHandlerMF,
|
|
734
|
+
MfeProvider,
|
|
735
|
+
MockEventSource,
|
|
736
|
+
MockEvents,
|
|
737
|
+
RefContainerProvider,
|
|
738
|
+
RestMockPlugin,
|
|
739
|
+
RestPlugin,
|
|
740
|
+
RestPluginWithConfig,
|
|
741
|
+
RestProtocol,
|
|
742
|
+
SUPPORTED_LANGUAGES,
|
|
743
|
+
ScreensetsRegistry,
|
|
744
|
+
ScreensetsRegistryFactory,
|
|
745
|
+
SseMockPlugin,
|
|
746
|
+
SsePlugin,
|
|
747
|
+
SsePluginWithConfig,
|
|
748
|
+
SseProtocol,
|
|
749
|
+
TENANT_SLICE_NAME,
|
|
750
|
+
TenantEvents,
|
|
751
|
+
TextDirection,
|
|
752
|
+
apiRegistry,
|
|
753
|
+
changeTenant,
|
|
754
|
+
clearActiveScreen,
|
|
755
|
+
clearTenant,
|
|
756
|
+
clearTenantAction,
|
|
757
|
+
clearUser,
|
|
758
|
+
closeAllPopups,
|
|
759
|
+
closePopup,
|
|
760
|
+
closeTopPopup,
|
|
761
|
+
createHAI3,
|
|
762
|
+
createHAI3App2 as createHAI3App,
|
|
763
|
+
createI18nRegistry,
|
|
764
|
+
createShadowRoot,
|
|
765
|
+
createSlice,
|
|
766
|
+
createStore,
|
|
767
|
+
createThemeRegistry,
|
|
768
|
+
effects,
|
|
769
|
+
eventBus,
|
|
770
|
+
extensionScreenSchema,
|
|
771
|
+
extractGtsPackage2 as extractGtsPackage,
|
|
772
|
+
footerActions,
|
|
773
|
+
footerSlice,
|
|
774
|
+
getLanguageMetadata,
|
|
775
|
+
getStore,
|
|
776
|
+
gtsPlugin,
|
|
777
|
+
hasSlice,
|
|
778
|
+
headerActions,
|
|
779
|
+
headerSlice,
|
|
780
|
+
hideOverlay,
|
|
781
|
+
i18n,
|
|
782
|
+
i18nRegistry,
|
|
783
|
+
initMockEffects,
|
|
784
|
+
initTenantEffects,
|
|
785
|
+
injectCssVariables,
|
|
786
|
+
isMockPlugin,
|
|
787
|
+
isRestShortCircuit,
|
|
788
|
+
isShortCircuit,
|
|
789
|
+
isSseShortCircuit,
|
|
790
|
+
languageSchema,
|
|
791
|
+
layout,
|
|
792
|
+
layoutDomainReducers,
|
|
793
|
+
layoutReducer,
|
|
794
|
+
loadExtension,
|
|
795
|
+
menuActions,
|
|
796
|
+
menuSlice,
|
|
797
|
+
microfrontends,
|
|
798
|
+
mock,
|
|
799
|
+
mockActions,
|
|
800
|
+
mockSlice,
|
|
801
|
+
mountExtension,
|
|
802
|
+
navigateTo,
|
|
803
|
+
openPopup,
|
|
804
|
+
overlayActions,
|
|
805
|
+
overlayDomain,
|
|
806
|
+
overlaySlice,
|
|
807
|
+
popupActions,
|
|
808
|
+
popupDomain,
|
|
809
|
+
popupSlice,
|
|
810
|
+
presets,
|
|
811
|
+
registerExtension,
|
|
812
|
+
registerSlice,
|
|
813
|
+
screenActions,
|
|
814
|
+
screenDomain,
|
|
815
|
+
screenSlice,
|
|
816
|
+
screensets,
|
|
817
|
+
screensetsRegistryFactory,
|
|
818
|
+
selectExtensionError,
|
|
819
|
+
selectExtensionState,
|
|
820
|
+
selectRegisteredExtensions,
|
|
821
|
+
setActiveScreen,
|
|
822
|
+
setFooterConfig,
|
|
823
|
+
setFooterVisible,
|
|
824
|
+
setHeaderLoading,
|
|
825
|
+
setMenuCollapsed,
|
|
826
|
+
setMenuConfig,
|
|
827
|
+
setMenuItems,
|
|
828
|
+
setMenuVisible,
|
|
829
|
+
setMockEnabled,
|
|
830
|
+
setOverlayVisible,
|
|
831
|
+
setScreenLoading,
|
|
832
|
+
setSidebarCollapsed,
|
|
833
|
+
setSidebarConfig,
|
|
834
|
+
setSidebarContent,
|
|
835
|
+
setSidebarPosition,
|
|
836
|
+
setSidebarTitle,
|
|
837
|
+
setSidebarVisible,
|
|
838
|
+
setSidebarWidth,
|
|
839
|
+
setTenant,
|
|
840
|
+
setTenantLoading,
|
|
841
|
+
setTenantLoadingState,
|
|
842
|
+
setUser,
|
|
843
|
+
showOverlay,
|
|
844
|
+
sidebarActions,
|
|
845
|
+
sidebarDomain,
|
|
846
|
+
sidebarSlice,
|
|
847
|
+
tenantActions,
|
|
848
|
+
tenantReducer,
|
|
849
|
+
tenantSlice,
|
|
850
|
+
themeSchema,
|
|
851
|
+
themes,
|
|
852
|
+
toggleMenu,
|
|
853
|
+
toggleMockMode,
|
|
854
|
+
toggleSidebar,
|
|
855
|
+
unmountExtension,
|
|
856
|
+
unregisterExtension,
|
|
857
|
+
useActivePackage,
|
|
858
|
+
useAppDispatch,
|
|
859
|
+
useAppSelector,
|
|
860
|
+
useDomainExtensions,
|
|
861
|
+
useFormatters,
|
|
862
|
+
useHAI3,
|
|
863
|
+
useHostAction,
|
|
864
|
+
useMfeBridge,
|
|
865
|
+
useMfeContext,
|
|
866
|
+
useRegisteredPackages,
|
|
867
|
+
useScreenTranslations,
|
|
868
|
+
useSharedProperty,
|
|
869
|
+
useTheme,
|
|
870
|
+
useTranslation
|
|
871
|
+
};
|
|
872
|
+
//# sourceMappingURL=index.js.map
|