create-bluecopa-react-app 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bluecopa-react-app",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "CLI tool to create bluecopa React applications",
   "type": "module",
   "main": "./bin/create-bluecopa-react-app.js",

package/templates/latest/app/single-spa.tsx

@@ -48,10 +48,10 @@ const lifecycles = singleSpaReact({
   },
   renderType: "createRoot",
   domElementGetter: () => {
-    const el = document.getElementById("single-spa-application:pnl-explorer");
+    const el = document.getElementById("single-spa-application:bluecopa-preview");
     if (!el)
       throw new Error(
-        "Mount target #single-spa-application:pnl-explorer not found"
+        "Mount target #single-spa-application:bluecopa-preview not found"
       );
     return el;
   },

package/templates/latest/dist/assets/{__federation_expose_App-DRwKKpS2.js → __federation_expose_App-DsPovvoo.js}

@@ -1,4 +1,4 @@
-System.register(['./__federation_fn_import-CzfA7kmP.js', './client-DgSav55y.js'], (function (exports, module) {
+System.register(['./__federation_fn_import-CzfA7kmP.js', './client-BZh_TW_6.js'], (function (exports, module) {
   'use strict';
   var importShared, jsxRuntimeExports, clientExports, MemoryRouter, BrowserRouter, App;
   return {
@@ -17,10 +17,44 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-DgSav55y.js']
 
       const React = await importShared('react');
       let root = null;
+      const injectStylesIntoShadowDOM = exports("injectStylesIntoShadowDOM", (styles) => {
+        const shadowRoot = window.__microfrontendShadowRoot;
+        if (shadowRoot) {
+          const styleElement = document.createElement("style");
+          const stylesArray = Array.isArray(styles) ? styles : [styles];
+          styleElement.textContent = stylesArray.join("\n");
+          shadowRoot.appendChild(styleElement);
+          console.log("Styles injected into shadow DOM");
+        } else {
+          console.warn("Shadow DOM not available for style injection");
+        }
+      });
+      const loadCSSIntoShadowDOM = exports("loadCSSIntoShadowDOM", async (cssUrls) => {
+        const shadowRoot = window.__microfrontendShadowRoot;
+        if (shadowRoot) {
+          const urlsArray = Array.isArray(cssUrls) ? cssUrls : [cssUrls];
+          for (const cssUrl of urlsArray) {
+            try {
+              console.log(`Loading CSS file: ${cssUrl}`);
+              const linkElement = document.createElement("link");
+              linkElement.rel = "stylesheet";
+              linkElement.href = cssUrl;
+              linkElement.onload = () => console.log(`CSS loaded: ${cssUrl}`);
+              linkElement.onerror = () => console.warn(`Failed to load CSS: ${cssUrl}`);
+              shadowRoot.appendChild(linkElement);
+              await new Promise((resolve) => setTimeout(resolve, 100));
+            } catch (error) {
+              console.warn(`Failed to load CSS: ${cssUrl}`, error);
+            }
+          }
+        } else {
+          console.warn("Shadow DOM not available for CSS loading");
+        }
+      });
       const MicrofrontendRoot = ({ basename = "/", isMicroFrontend = false }) => {
         const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
         const routerProps = isMicroFrontend ? {} : { basename };
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { ...routerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { ...routerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }) });
       };
       const lifecycles = i({
         React,
@@ -32,10 +66,10 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-DgSav55y.js']
         },
         renderType: "createRoot",
         domElementGetter: () => {
-          const el = document.getElementById("single-spa-application:pnl-explorer");
+          const el = document.getElementById("single-spa-application:bluecopa-preview");
           if (!el)
             throw new Error(
-              "Mount target #single-spa-application:pnl-explorer not found"
+              "Mount target #single-spa-application:bluecopa-preview not found"
             );
           return el;
         }
@@ -50,6 +84,28 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-DgSav55y.js']
             root.unmount();
             root = null;
           }
+          injectStylesIntoShadowDOM(`
+      /* Basic reset for microfrontend */
+      * {
+        box-sizing: border-box;
+      }
+      
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #000;
+      }
+      
+      /* Ensure proper display */
+      #microfrontend-container {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+      }
+    `);
           root = clientExports.createRoot(props.domElement);
           root.render(
             /* @__PURE__ */ jsxRuntimeExports.jsx(