bsign-customization-full 0.0.4 → 0.0.5

package/package.json

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

package/src/index.tsx

@@ -1,14 +1,16 @@
 import { createRoot, type Root } from "react-dom/client"
-import SignCustomizer, { type SignCustomizerProps } from "./AppDemo2"
+import type { ComponentType } from "react"
+import 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"
+import { resolveAssetUrl, setAssetBaseUrl } from "./lib/asset-url"
 
 export type WidgetTarget = string | HTMLElement
 
 export interface MountConstructorWidgetProps extends SignCustomizerProps {
   widgetCss?: string | string[]
+  assetBaseUrl: string
 }
 
 const FONT_ASSET_PATHS = [
@@ -28,7 +30,20 @@ function resolveFontUrlsInCss(styles: string): string {
   }, styles)
 }
 
-const BASE_WIDGET_CSS = `${resizableStyles}\n${resolveFontUrlsInCss(widgetStyles)}`
+function getBaseWidgetCss() {
+  return `${resizableStyles}\n${resolveFontUrlsInCss(widgetStyles)}`
+}
+
+let signCustomizerLoader: Promise<ComponentType<SignCustomizerProps>> | null = null
+
+function loadSignCustomizer() {
+  if (!signCustomizerLoader) {
+    signCustomizerLoader = import("./AppDemo2").then((module) => module.default)
+  }
+
+  return signCustomizerLoader
+}
+
 const rootsByHost = new WeakMap<HTMLElement, Root>()
 
 function resolveTarget(target: WidgetTarget): HTMLElement {
@@ -83,16 +98,18 @@ function ensurePortalNode(shadowRoot: ShadowRoot): HTMLElement {
 }
 
 function ensureBaseStyles(shadowRoot: ShadowRoot) {
+  const baseWidgetCss = getBaseWidgetCss()
   const existingStyles = shadowRoot.querySelector<HTMLStyleElement>(
     "style[data-bsign-widget-base-style]"
   )
   if (existingStyles) {
+    existingStyles.textContent = baseWidgetCss
     return
   }
 
   const styleTag = document.createElement("style")
   styleTag.setAttribute("data-bsign-widget-base-style", "")
-  styleTag.textContent = BASE_WIDGET_CSS
+  styleTag.textContent = baseWidgetCss
   shadowRoot.prepend(styleTag)
 }
 
@@ -134,9 +151,17 @@ function syncCustomStyles(shadowRoot: ShadowRoot, widgetCss?: string | string[])
 
 export function mountConstructorWidget(
   target: WidgetTarget,
-  props: MountConstructorWidgetProps = {}
+  props: MountConstructorWidgetProps
 ) {
-  const { widgetCss, ...widgetProps } = props
+  const { widgetCss, assetBaseUrl, ...widgetProps } = props
+  if (!assetBaseUrl || typeof assetBaseUrl !== "string") {
+    throw new Error(
+      "mountConstructorWidget: `assetBaseUrl` prop is required, for example `https://cdn.example.com/widget/dist/`"
+    )
+  }
+
+  setAssetBaseUrl(assetBaseUrl)
+
   const host = resolveTarget(target)
   const shadowRoot = ensureShadowRoot(host)
   const mountNode = ensureMountNode(shadowRoot)
@@ -151,9 +176,15 @@ export function mountConstructorWidget(
     rootsByHost.set(host, root)
   }
 
-  root.render(
-    <WidgetPortalContainerContext.Provider value={portalNode}>
-      <SignCustomizer {...widgetProps} />
-    </WidgetPortalContainerContext.Provider>
-  )
+  const widgetRoot = root
+
+  void loadSignCustomizer().then((SignCustomizer) => {
+    widgetRoot.render(
+      <WidgetPortalContainerContext.Provider value={portalNode}>
+        <SignCustomizer {...widgetProps} />
+      </WidgetPortalContainerContext.Provider>
+    )
+  }).catch((error) => {
+    console.error("mountConstructorWidget: failed to load widget module", error)
+  })
 }

package/src/lib/asset-url.ts

@@ -2,130 +2,37 @@ 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/"
+ * Static assets base URL (templates/colors/fonts/logo/etc).
+ * Must be set explicitly from widget mount props:
+ *   mountConstructorWidget(..., { assetBaseUrl: "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
-}
+const DEFAULT_ASSET_BASE_URL = "/"
 
 function toBaseUrl(url: string): string | undefined {
   try {
-    return new URL(".", url).toString()
-  } catch {
-    return undefined
-  }
-}
-
-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
-  }
-
-  return isLocalhostHost(window.location.hostname)
-}
-
-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 new URL(".", new URL(url, window.location.href)).toString()
     }
-  }
-
-  return undefined
-}
 
-function resolveImportMetaAssetBaseUrl(): string | undefined {
-  const moduleUrl = import.meta.url
-  if (!moduleUrl || !moduleUrl.includes("sign-constructor")) {
+    return new URL(".", url).toString()
+  } catch {
     return undefined
   }
-
-  return toBaseUrl(moduleUrl)
 }
 
-function resolveDefaultAssetBaseUrl(): string {
-  const globalBase = resolveGlobalAssetBaseUrl()
-  if (globalBase) {
-    return globalBase
-  }
+let assetBaseUrl = DEFAULT_ASSET_BASE_URL
 
-  const scriptBase = resolveScriptTagAssetBaseUrl()
-  if (scriptBase) {
-    return scriptBase
+export function setAssetBaseUrl(baseUrl: string) {
+  if (typeof baseUrl !== "string" || baseUrl.trim() === "") {
+    throw new Error("setAssetBaseUrl: base URL is required")
   }
 
-  const importMetaBase = resolveImportMetaAssetBaseUrl()
-  if (importMetaBase) {
-    return importMetaBase
+  const resolvedBaseUrl = toBaseUrl(baseUrl)
+  if (!resolvedBaseUrl) {
+    throw new Error(`setAssetBaseUrl: invalid base URL "${baseUrl}"`)
   }
 
-  return DEFAULT_CDN_ASSET_BASE_URL
-}
-
-let assetBaseUrl = resolveDefaultAssetBaseUrl()
-
-export function setAssetBaseUrl(baseUrl?: string) {
-  if (!baseUrl) {
-    assetBaseUrl = resolveDefaultAssetBaseUrl()
-    return
-  }
-
-  assetBaseUrl = toBaseUrl(baseUrl) ?? assetBaseUrl
+  assetBaseUrl = resolvedBaseUrl
 }
 
 export function getAssetBaseUrl() {
@@ -141,15 +48,6 @@ 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
+  const normalizedPath = path.replace(/^\/+/, "")
   return new URL(normalizedPath, getAssetBaseUrl()).toString()
 }

package/test/preview.html

@@ -11,10 +11,11 @@
 
     <div id="root"></div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bsign-customization@latest/dist/sign-constructor.iife.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bsign-customization-full@latest/dist/sign-constructor.iife.js"></script>
 
     <script>
         AppDemo2.mountConstructorWidget('#root', {
+            assetBaseUrl: "https://cdn.jsdelivr.net/npm/bsign-customization-full@latest/dist/",
             openButton: {
                 label: "Open constructor",
                 className: "open-constructor-button",