feat(on-ramps): Modifying shadowRender to use a provided baseUrl

index.html

@@ -13,14 +13,15 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
     />
     <script type="module">
+      const baseUrl = "http://localhost:63313/dist";
       import {
         onRampsResourceCatalog,
         shadowTarget,
-      } from "http://localhost:52984/xras-ui.js";
+      } from "http://localhost:63313/dist/xras-ui.js";
       onRampsResourceCatalog({
         target: shadowTarget(
           document.getElementById("resource-catalog-react"),
-          { accessStyles: true }
+          { accessStyles: true, baseUrl }
         ),
         onRamps: true,
       });

src/main.jsx

@@ -25,7 +25,7 @@ import catalogSlice from "./resource-catalog/helpers/catalogSlice";
 
 export function shadowTarget(
   host,
-  { bootstrapFonts = true, bootstrapVariables = true, access = false } = {}
+  { bootstrapFonts = true, bootstrapVariables = true, access = false, baseUrl = null } = {}
 ) {
   const shadow = host.attachShadow({ mode: "open" });
   const bsOuter = document.createElement("div");
@@ -35,7 +35,7 @@ export function shadowTarget(
   const bsStyle = document.createElement("link");
   const uiStyle = document.createElement("link");
   const accessStyle = document.createElement("link");
-  const baseUrl = import.meta.url.replace(/\/[^/]+$/, "");
+  baseUrl = baseUrl == null ? import.meta.url.replace(/\/[^/]+$/, "") : baseUrl;
 
   bsStyle.rel = "stylesheet";
   bsStyle.href = `${baseUrl}/bootstrap.css`;