@wf-financing/ui 3.9.2 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.9.2",
+  "version": "3.10.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",

package/src/main.tsx

@@ -5,7 +5,7 @@ import { StyleSheetManager } from 'styled-components';
 import { MotionGlobalConfig } from 'framer-motion';
 import { App } from './App';
 import { PartnerTheme } from './config';
-import { applyFont, createRoots } from './utils';
+import { applyFont, applyStyles, createRoots } from './utils';
 
 let root: ReactDOM.Root | undefined;
 let savedTargetId: string | undefined;
@@ -26,9 +26,10 @@ export const mountToTarget = async (
   const hostEl = document.getElementById(savedTargetId as string);
   if (!hostEl) throw new Error(`Target element with id "${savedTargetId}" not found.`);
 
-  const shadow = hostEl.shadowRoot ?? hostEl.attachShadow({ mode: 'open' });
+  const shadow = hostEl.shadowRoot ?? (hostEl.attachShadow({ mode: 'open' }) as ShadowRoot);
 
   try {
+    applyStyles({ shadow });
     await applyFont(shadow, partnerTheme);
   } catch (error) {
     console.error(error);

package/src/utils/applyStyles.ts

@@ -0,0 +1,41 @@
+import assetsManifest from '@wayflyer/flyui/manifest.json';
+
+const LINK_TAG_ID = 'wf-flyui-styles';
+
+type ApplyFontsType = ({
+  shadow,
+  onStylesLoad,
+  onStylesLoadError,
+}: {
+  shadow: ShadowRoot;
+  onStylesLoad?: () => void;
+  onStylesLoadError?: (error: unknown) => void;
+}) => void;
+
+export const applyStyles: ApplyFontsType = async ({ shadow, onStylesLoad, onStylesLoadError }) => {
+  if (!assetsManifest || !('styles' in assetsManifest)) {
+    return onStylesLoadError?.('Style manifest not found');
+  }
+
+  const stylesUrl = assetsManifest.styles as string;
+
+  const linkTag = document.createElement('link');
+  linkTag.href = stylesUrl;
+  linkTag.rel = 'stylesheet';
+  linkTag.id = LINK_TAG_ID;
+
+  linkTag.onload = () => {
+    onStylesLoad?.();
+  };
+
+  linkTag.onerror = (error) => {
+    onStylesLoadError?.(error);
+  };
+
+  const existingLinkTag = document.getElementById(LINK_TAG_ID);
+  if (existingLinkTag) {
+    existingLinkTag.replaceWith(linkTag);
+  } else {
+    shadow.prepend(linkTag);
+  }
+};

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { applyFont } from './applyFont';
+export { applyStyles } from './applyStyles';
 export { createRoots } from './createRoots';
 export { getPartnerIdFromToken } from './getPartnerIdFromToken';
 export { getPartnerThemeById } from './getPartnerThemeById';