@bluealba/pae-ui-react-core 4.6.0-integration-css.403 → 4.6.0-integration-css.408

package/dist/src/styles/moduleStyleLifecycle.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Suspend/restore a micro-frontend module's global styles across single-spa
+ * mount/unmount.
+ *
+ * style-loader injects a module's CSS into document.head when the bundle is
+ * LOADED, and single-spa unmount never removes it (SystemJS keeps the module
+ * cached). A module that imports a global stylesheet (a CSS framework reset,
+ * preflight, etc.) therefore permanently contaminates every app visited
+ * afterwards in the same session.
+ *
+ * The UI SDK tags every <style> it emits with data-pae-module="<name>"
+ * (see pae-ui-react-sdk getBaseConfig). initializeMicroFrontend calls
+ * suspendModuleStyles on unmount — detaching those elements from the
+ * document while keeping them in memory — and restoreModuleStyles on mount,
+ * so re-entering the app is instant (no re-parse, CSSOM preserved).
+ *
+ * NOTE: this only covers CSS that goes through style-loader. Runtime
+ * CSS-in-JS (e.g. Emotion/MUI) injects its own tags and is not affected.
+ *
+ * pae-ui-react-core is a shared singleton (one instance via the import map),
+ * so this module-scoped store is global across all micro-frontends.
+ */
+/**
+ * Detach the module's style elements from the document, keeping them in
+ * memory for a later restoreModuleStyles call. Safe to call when the module
+ * has no tagged styles (no-op).
+ */
+export declare const suspendModuleStyles: (moduleName: string) => void;
+/**
+ * Re-attach any previously suspended style elements for the module. Safe to
+ * call when nothing was suspended (no-op — e.g. the very first mount, where
+ * style-loader already injected the styles at load time).
+ */
+export declare const restoreModuleStyles: (moduleName: string) => void;

package/dist/src/utils/initializeMicroFrontend.d.ts

@@ -12,6 +12,11 @@ export interface MicroFrontendOptions<T extends RootComponentProps> extends Sing
  *
  * All PAE micro-frontends are wrapped in PAE components that provides react context later used
  * by the provided hooks.
+ *
+ * On top of the single-spa lifecycles, the module's global styles (tagged
+ * with data-pae-module by the UI SDK) are suspended on unmount and restored
+ * on mount, so CSS frameworks imported by one module don't leak into other
+ * modules across navigation (see styles/moduleStyleLifecycle).
  */
 declare const initializeMicroFrontend: <T extends RootComponentProps>({ rootComponent, ...opts }: MicroFrontendOptions<T>) => ReactAppOrParcel<T>;
 export default initializeMicroFrontend;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluealba/pae-ui-react-core",
-  "version": "4.6.0-integration-css.403",
+  "version": "4.6.0-integration-css.408",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",