bsign-customization-full 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsign-customization-full",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/index.css

@@ -4,7 +4,7 @@
 @font-face {
   font-family: 'Bebasneue';
   src:
-    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
+    url('/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -13,7 +13,7 @@
 @font-face {
   font-family: 'GOTHICB';
   src:
-    url('./fonts/GOTHICB.TTF') format('truetype');
+    url('/fonts/GOTHICB.TTF') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -22,11 +22,11 @@
 @font-face {
   font-family: 'Braille';
   src:
-    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/Braille-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
+    url('/fonts/Braille-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
 @custom-variant dark (&:is(.dark *));
 

package/src/index.tsx

@@ -3,6 +3,7 @@ import SignCustomizer, { type SignCustomizerProps } from "./AppDemo2"
 import resizableStyles from "react-resizable/css/styles.css?inline"
 import widgetStyles from "./index.css?inline"
 import { WidgetPortalContainerContext } from "./lib/widget-context"
+import { resolveAssetUrl } from "./lib/asset-url"
 
 export type WidgetTarget = string | HTMLElement
 
@@ -10,7 +11,24 @@ export interface MountConstructorWidgetProps extends SignCustomizerProps {
   widgetCss?: string | string[]
 }
 
-const BASE_WIDGET_CSS = `${resizableStyles}\n${widgetStyles}`
+const FONT_ASSET_PATHS = [
+  "/fonts/BEBASNEUE-REGULAR.TTF",
+  "/fonts/GOTHICB.TTF",
+  "/fonts/Braille-Regular.ttf",
+] as const
+
+function resolveFontUrlsInCss(styles: string): string {
+  return FONT_ASSET_PATHS.reduce((nextStyles, fontPath) => {
+    const resolvedFontPath = resolveAssetUrl(fontPath)
+
+    return nextStyles
+      .replaceAll(`url('${fontPath}')`, `url('${resolvedFontPath}')`)
+      .replaceAll(`url("${fontPath}")`, `url("${resolvedFontPath}")`)
+      .replaceAll(`url(${fontPath})`, `url(${resolvedFontPath})`)
+  }, styles)
+}
+
+const BASE_WIDGET_CSS = `${resizableStyles}\n${resolveFontUrlsInCss(widgetStyles)}`
 const rootsByHost = new WeakMap<HTMLElement, Root>()
 
 function resolveTarget(target: WidgetTarget): HTMLElement {

package/src/lib/asset-url.ts

@@ -1,6 +1,18 @@
 const ABSOLUTE_URL_PATTERN = /^(?:[a-z][a-z\d+\-.]*:)?\/\//i
 const SPECIAL_PROTOCOL_PATTERN = /^(?:data|blob):/i
 
+/**
+ * Default CDN source for static widget assets (templates/colors/fonts/logo/etc).
+ * Can be overridden globally before widget init:
+ *   window.BSIGN_WIDGET_ASSET_BASE_URL = "https://your-cdn/path/to/dist/"
+ */
+const DEFAULT_CDN_ASSET_BASE_URL =
+  "https://cdn.jsdelivr.net/npm/bsign-customization-full@latest/dist/"
+
+type WindowWithWidgetAssetBase = Window & {
+  BSIGN_WIDGET_ASSET_BASE_URL?: string
+}
+
 function toBaseUrl(url: string): string | undefined {
   try {
     return new URL(".", url).toString()
@@ -9,36 +21,100 @@ function toBaseUrl(url: string): string | undefined {
   }
 }
 
-function resolveDefaultAssetBaseUrl(): string {
-  const importMetaBase = toBaseUrl(import.meta.url)
-  if (importMetaBase) {
-    return importMetaBase
+function isLocalhostHost(hostname: string): boolean {
+  const normalizedHost = hostname.toLowerCase()
+  return (
+    normalizedHost === "localhost" ||
+    normalizedHost === "127.0.0.1" ||
+    normalizedHost === "[::1]" ||
+    normalizedHost.endsWith(".localhost")
+  )
+}
+
+function shouldUseRelativeUrls(): boolean {
+  if (typeof window === "undefined") {
+    return false
   }
 
-  if (typeof document !== "undefined") {
-    const currentScript = document.currentScript
-    if (currentScript instanceof HTMLScriptElement && currentScript.src) {
-      const scriptBase = toBaseUrl(currentScript.src)
-      if (scriptBase) {
-        return scriptBase
-      }
-    }
+  return isLocalhostHost(window.location.hostname)
+}
 
-    const scripts = document.getElementsByTagName("script")
-    const lastScript = scripts.item(scripts.length - 1)
-    if (lastScript instanceof HTMLScriptElement && lastScript.src) {
-      const scriptBase = toBaseUrl(lastScript.src)
-      if (scriptBase) {
-        return scriptBase
+function resolveGlobalAssetBaseUrl(): string | undefined {
+  if (typeof window === "undefined") {
+    return undefined
+  }
+
+  const candidate = (window as WindowWithWidgetAssetBase).BSIGN_WIDGET_ASSET_BASE_URL
+  if (typeof candidate !== "string") {
+    return undefined
+  }
+
+  const trimmed = candidate.trim()
+  if (!trimmed) {
+    return undefined
+  }
+
+  return toBaseUrl(trimmed) ?? trimmed
+}
+
+function resolveScriptTagAssetBaseUrl(): string | undefined {
+  if (typeof document === "undefined") {
+    return undefined
+  }
+
+  const currentScript = document.currentScript
+  if (
+    currentScript instanceof HTMLScriptElement &&
+    typeof currentScript.src === "string" &&
+    currentScript.src.includes("sign-constructor")
+  ) {
+    return toBaseUrl(currentScript.src)
+  }
+
+  const scripts = document.getElementsByTagName("script")
+  for (let index = scripts.length - 1; index >= 0; index -= 1) {
+    const script = scripts.item(index)
+    if (
+      script instanceof HTMLScriptElement &&
+      typeof script.src === "string" &&
+      script.src.includes("sign-constructor")
+    ) {
+      const base = toBaseUrl(script.src)
+      if (base) {
+        return base
       }
     }
   }
 
-  if (typeof window !== "undefined") {
-    return toBaseUrl(window.location.href) ?? "/"
+  return undefined
+}
+
+function resolveImportMetaAssetBaseUrl(): string | undefined {
+  const moduleUrl = import.meta.url
+  if (!moduleUrl || !moduleUrl.includes("sign-constructor")) {
+    return undefined
+  }
+
+  return toBaseUrl(moduleUrl)
+}
+
+function resolveDefaultAssetBaseUrl(): string {
+  const globalBase = resolveGlobalAssetBaseUrl()
+  if (globalBase) {
+    return globalBase
+  }
+
+  const scriptBase = resolveScriptTagAssetBaseUrl()
+  if (scriptBase) {
+    return scriptBase
   }
 
-  return "/"
+  const importMetaBase = resolveImportMetaAssetBaseUrl()
+  if (importMetaBase) {
+    return importMetaBase
+  }
+
+  return DEFAULT_CDN_ASSET_BASE_URL
 }
 
 let assetBaseUrl = resolveDefaultAssetBaseUrl()
@@ -65,6 +141,15 @@ export function resolveAssetUrl(path: string): string {
     return path
   }
 
+  if (shouldUseRelativeUrls()) {
+    if (path.startsWith("./") || path.startsWith("../")) {
+      return path
+    }
+
+    const normalizedPath = path.replace(/^\/+/, "")
+    return `./${normalizedPath}`
+  }
+
   const normalizedPath = path.startsWith("/") ? path.slice(1) : path
   return new URL(normalizedPath, getAssetBaseUrl()).toString()
 }