@gears-frontx/react 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/index.cjs

@@ -62,7 +62,6 @@ __export(src_exports, {
   LAYOUT_SLICE_NAME: () => import_framework5.LAYOUT_SLICE_NAME,
   Language: () => import_framework6.Language,
   LanguageDisplayMode: () => import_framework6.LanguageDisplayMode,
-  LayoutDomain: () => import_framework5.LayoutDomain,
   MOCK_PLUGIN: () => import_framework5.MOCK_PLUGIN,
   MfeBridgeFactory: () => import_framework14.MfeBridgeFactory,
   MfeContext: () => MfeContext,
@@ -71,18 +70,15 @@ __export(src_exports, {
   MfeProvider: () => MfeProvider,
   MfeRegistry: () => import_framework14.MfeRegistry,
   MfeRegistryFactory: () => import_framework14.MfeRegistryFactory,
-  MockEventSource: () => import_framework5.MockEventSource,
   MockEvents: () => import_framework5.MockEvents,
   MountStrategy: () => import_framework14.MountStrategy,
   OptionalMountStrategy: () => import_framework14.OptionalMountStrategy,
   ParentMfeBridge: () => import_framework14.ParentMfeBridge,
   RestEndpointProtocol: () => import_framework5.RestEndpointProtocol,
-  RestMockPlugin: () => import_framework5.RestMockPlugin,
   RestPlugin: () => import_framework5.RestPlugin,
   RestPluginWithConfig: () => import_framework5.RestPluginWithConfig,
   RestProtocol: () => import_framework5.RestProtocol,
   SUPPORTED_LANGUAGES: () => import_framework5.SUPPORTED_LANGUAGES,
-  SseMockPlugin: () => import_framework5.SseMockPlugin,
   SsePlugin: () => import_framework5.SsePlugin,
   SsePluginWithConfig: () => import_framework5.SsePluginWithConfig,
   SseProtocol: () => import_framework5.SseProtocol,
@@ -103,14 +99,13 @@ __export(src_exports, {
   createFrontX: () => import_framework5.createFrontX,
   createFrontXApp: () => import_framework5.createFrontXApp,
   createI18nRegistry: () => import_framework5.createI18nRegistry,
-  createShadowRoot: () => import_framework17.createShadowRoot,
+  createShadowRoot: () => import_framework16.createShadowRoot,
   createSlice: () => import_framework5.createSlice,
   createStore: () => import_framework5.createStore,
   createThemeRegistry: () => import_framework5.createThemeRegistry,
   effects: () => import_framework5.effects,
   eventBus: () => eventBus2,
-  extensionScreenSchema: () => import_framework16.extensionScreenSchema,
-  extractGtsPackage: () => import_framework17.extractGtsPackage,
+  extractGtsPackage: () => import_framework16.extractGtsPackage,
   footerActions: () => import_framework5.footerActions,
   footerSlice: () => import_framework5.footerSlice,
   frontxApiTransport: () => import_framework5.frontxApiTransport,
@@ -125,13 +120,12 @@ __export(src_exports, {
   i18nRegistry: () => import_framework5.i18nRegistry,
   initMockEffects: () => import_framework5.initMockEffects,
   initTenantEffects: () => import_framework5.initTenantEffects,
-  injectCssVariables: () => import_framework17.injectCssVariables,
+  injectCssVariables: () => import_framework16.injectCssVariables,
   invalidateQueryCacheForApp: () => invalidateQueryCacheForApp,
   isMockPlugin: () => import_framework5.isMockPlugin,
   isRestShortCircuit: () => import_framework5.isRestShortCircuit,
   isShortCircuit: () => import_framework5.isShortCircuit,
   isSseShortCircuit: () => import_framework5.isSseShortCircuit,
-  languageSchema: () => import_framework16.languageSchema,
   layout: () => import_framework5.layout,
   layoutDomainReducers: () => import_framework5.layoutDomainReducers,
   layoutReducer: () => import_framework5.layoutReducer,
@@ -189,7 +183,6 @@ __export(src_exports, {
   tenantActions: () => import_framework5.tenantActions,
   tenantReducer: () => import_framework5.tenantReducer,
   tenantSlice: () => import_framework5.tenantSlice,
-  themeSchema: () => import_framework16.themeSchema,
   themes: () => import_framework5.themes,
   toggleMenu: () => import_framework5.toggleMenu,
   toggleMockMode: () => import_framework5.toggleMockMode,
@@ -1282,6 +1275,9 @@ function useRegisteredPackages() {
 // src/mfe/ThemeAwareReactLifecycle.tsx
 var import_client = require("react-dom/client");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var ADOPTED_HOST_STYLE_ATTR = "data-frontx-adopted-host-style";
+var BASE_RESETS_STYLE_ID = "__frontx-base-resets__";
+var SHELL_OWNED_SHADOW_STYLE_IDS = ["__frontx-shadow-isolation__", "__frontx-css-variables__"];
 function resolveProviderMountOptions(app, bridge, mountContext) {
   const extensionId = mountContext?.extensionId;
   const domainId = mountContext?.domainId;
@@ -1336,27 +1332,108 @@ var ThemeAwareReactLifecycle = class {
   /**
    * Copy all inline <style> and <link rel="stylesheet"> from the host document
    * into the shadow root so that Tailwind and component styles apply inside the MFE.
+   *
+   * The clones are inserted ahead of everything already in the shadow root, never
+   * appended, because adopted host styles are context rather than authority: where
+   * they and the MFE's own CSS declare the same property at equal specificity, the
+   * MFE has to win. Appending inverted that. `MfeHandlerMF` injects the MFE's
+   * compiled stylesheet into the shadow root before it calls mount, so an appended
+   * clone of the shell's Tailwind preflight - whose
+   * `button, [type='button'], [type='reset'], [type='submit']` rule sets
+   * `background-color: transparent` at specificity (0,1,0) - tied with
+   * `@gears-frontx/ui-kit`'s single-class button rule and won on document order,
+   * leaving every kit Button transparent until it was hovered.
+   *
+   * Inserting at the front rather than pushing MFE styles to the back is what makes
+   * the invariant hold for stylesheets that appear after mount too - a lazily
+   * imported component's CSS module, or whatever initializeStyles() adds - since
+   * those land behind the adopted block by construction.
+   *
+   * A cascade layer around the adopted CSS was the alternative and is rejected:
+   * layered rules lose to unlayered ones at *any* specificity, so a host utility
+   * class would stop overriding an MFE element selector. Document order keeps
+   * specificity in charge and only settles the ties.
+   *
+   * The block replaces its predecessor instead of stacking on it, the same
+   * upsert shape `injectStylesheet` and `injectCssVariables` use in
+   * `@gears-frontx/mfes`' shadow utilities, widened from one id-keyed node to a
+   * marked block. Replacement is required rather than tidy: `createShadowRoot`
+   * hands back an existing `element.shadowRoot` instead of attaching a new one,
+   * so remounting the same container runs this method again on a shadow root
+   * that already holds a full adopted block, and appending would grow it once
+   * per mount with no bound. It does not save re-resolving the cloned `<link>`s -
+   * every mount clones them afresh and the browser resolves each clone; what
+   * replacement buys is that the count stays at one block instead of one per
+   * mount.
+   *
+   * The block is rebuilt from the host head rather than left in place, because
+   * the head is not fixed: a lazily imported chunk adds stylesheets to it after
+   * the first mount, and the second mount has to pick those up.
+   *
+   * The fresh block goes in before the previous one comes out. Removing first
+   * leaves the shadow root with no host CSS at all, and everything between that
+   * removal and the insertion is synchronous work in this same task - so the gap
+   * never reaches a paint, but any code that reads computed styles from the tree
+   * in between sees an unstyled one. Inserting first costs one moment with two
+   * blocks present, which changes nothing: the old block is a clone of the same
+   * host head and loses every tie to the new one on document order anyway.
    */
   adoptHostStylesIntoShadowRoot(shadowRoot) {
-    const styleElements = document.head.querySelectorAll("style");
-    styleElements.forEach((el) => {
-      const clone = document.createElement("style");
-      clone.textContent = el.textContent ?? "";
-      shadowRoot.appendChild(clone);
-    });
-    const linkElements = document.head.querySelectorAll('link[rel="stylesheet"]');
-    linkElements.forEach((el) => {
-      const clone = el.cloneNode(true);
-      shadowRoot.appendChild(clone);
+    const supersededStyles = Array.from(shadowRoot.querySelectorAll(`[${ADOPTED_HOST_STYLE_ATTR}]`));
+    const adoptedStyles = document.createDocumentFragment();
+    const hostStyleNodes = document.head.querySelectorAll('style, link[rel="stylesheet"]');
+    hostStyleNodes.forEach((el) => {
+      if (el instanceof HTMLStyleElement) {
+        const clone = document.createElement("style");
+        clone.textContent = el.textContent ?? "";
+        clone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+        adoptedStyles.appendChild(clone);
+        return;
+      }
+      const linkClone = el.cloneNode(true);
+      linkClone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+      adoptedStyles.appendChild(linkClone);
     });
+    shadowRoot.insertBefore(adoptedStyles, shadowRoot.firstChild);
+    supersededStyles.forEach((el) => el.remove());
   }
   /**
    * Box-model resets and :host defaults needed inside every shadow root.
    * These aren't part of Tailwind's compiled output but are required for
    * consistent rendering across browsers.
+   *
+   * Reuses the node a previous mount left behind, exactly as `injectStylesheet`
+   * does in `@gears-frontx/mfes`' shadow utilities: a remount runs against a
+   * shadow root that `createShadowRoot` handed back intact, and appending a
+   * second copy would add one node per mount forever.
+   *
+   * Reuse alone is not enough, which is why the node is also positioned on every
+   * mount rather than left where the previous one sat. These resets are context
+   * like the adopted block is - `border-color: currentColor` on `*` is a 0-0-0
+   * declaration that beats an MFE preflight's own 0-0-0 reset purely on document
+   * order - so they have to stay ahead of the MFE's CSS, and where they land is
+   * not stable on its own. `MfeHandlerMF.wrapLifecycleWithStylesheets` removes the
+   * MFE's stylesheet on unmount and appends a fresh one before the next mount, so
+   * a node merely left in place ends up ahead of that stylesheet on a remount and
+   * behind it on the first mount: two different cascades for one component.
+   * Anchoring it to the end of the shell-owned head gives every mount the same
+   * order - adopted block, isolation, resets, MFE - which is also the order the
+   * adoption method's invariant is written against.
+   *
+   * With no shell-owned node to anchor to, the resets go to the front. That is the
+   * plain-`Element` container: no adopted block, no isolation style, and the MFE
+   * stylesheet already appended by the handler, so the front is again the only
+   * position that leaves the MFE winning ties.
+   *
+   * Looked up by attribute-selector form rather than `getElementById`, which
+   * `ShadowRoot` has but `Element` does not, and this hook takes either.
    */
   injectBaseResets(container) {
-    const style = document.createElement("style");
+    const existing = container.querySelector(
+      `style[id="${BASE_RESETS_STYLE_ID}"]`
+    );
+    const style = existing ?? document.createElement("style");
+    style.id = BASE_RESETS_STYLE_ID;
     style.textContent = `
       *, *::before, *::after {
         box-sizing: border-box;
@@ -1374,7 +1451,17 @@ var ThemeAwareReactLifecycle = class {
         background-color: hsl(var(--background));
       }
     `;
-    container.appendChild(style);
+    const shellOwnedHead = container.querySelectorAll(
+      [
+        `[${ADOPTED_HOST_STYLE_ATTR}]`,
+        ...SHELL_OWNED_SHADOW_STYLE_IDS.map((id) => `[id="${id}"]`)
+      ].join(", ")
+    );
+    const lastShellOwnedNode = shellOwnedHead[shellOwnedHead.length - 1];
+    container.insertBefore(
+      style,
+      lastShellOwnedNode ? lastShellOwnedNode.nextSibling : container.firstChild
+    );
   }
   /**
    * Hook for subclasses to inject additional CSS not covered by the adopted host
@@ -1446,8 +1533,7 @@ var import_framework14 = require("@gears-frontx/framework");
 var import_framework15 = require("@gears-frontx/framework");
 var import_framework16 = require("@gears-frontx/framework");
 var import_framework17 = require("@gears-frontx/framework");
-var import_framework18 = require("@gears-frontx/framework");
-var eventBus2 = import_framework18.eventBus;
+var eventBus2 = import_framework17.eventBus;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACCOUNTS_DOMAIN,
@@ -1482,7 +1568,6 @@ var eventBus2 = import_framework18.eventBus;
   LAYOUT_SLICE_NAME,
   Language,
   LanguageDisplayMode,
-  LayoutDomain,
   MOCK_PLUGIN,
   MfeBridgeFactory,
   MfeContext,
@@ -1491,18 +1576,15 @@ var eventBus2 = import_framework18.eventBus;
   MfeProvider,
   MfeRegistry,
   MfeRegistryFactory,
-  MockEventSource,
   MockEvents,
   MountStrategy,
   OptionalMountStrategy,
   ParentMfeBridge,
   RestEndpointProtocol,
-  RestMockPlugin,
   RestPlugin,
   RestPluginWithConfig,
   RestProtocol,
   SUPPORTED_LANGUAGES,
-  SseMockPlugin,
   SsePlugin,
   SsePluginWithConfig,
   SseProtocol,
@@ -1529,7 +1611,6 @@ var eventBus2 = import_framework18.eventBus;
   createThemeRegistry,
   effects,
   eventBus,
-  extensionScreenSchema,
   extractGtsPackage,
   footerActions,
   footerSlice,
@@ -1551,7 +1632,6 @@ var eventBus2 = import_framework18.eventBus;
   isRestShortCircuit,
   isShortCircuit,
   isSseShortCircuit,
-  languageSchema,
   layout,
   layoutDomainReducers,
   layoutReducer,
@@ -1609,7 +1689,6 @@ var eventBus2 = import_framework18.eventBus;
   tenantActions,
   tenantReducer,
   tenantSlice,
-  themeSchema,
   themes,
   toggleMenu,
   toggleMockMode,