@pure-ds/core 0.7.30 → 0.7.33

package/src/js/common/font-loader.js

@@ -0,0 +1,202 @@
+/**
+ * Font Loading Utility
+ * Automatically loads fonts from Google Fonts when they're not available in the browser
+ */
+
+import { PDS } from "../pds-singleton.js";
+
+/**
+ * Checks if a font is available in the browser
+ * @param {string} fontName - The name of the font to check
+ * @returns {boolean} True if the font is available
+ */
+function isFontAvailable(fontName) {
+  // Clean up font name (remove quotes and extra spacing)
+  const cleanName = fontName.replace(/['"]/g, '').trim();
+  
+  // System fonts that are always available
+  const systemFonts = [
+    'system-ui',
+    '-apple-system',
+    'sans-serif',
+    'serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'ui-sans-serif',
+    'ui-serif',
+    'ui-monospace',
+    'ui-rounded'
+  ];
+  
+  if (systemFonts.includes(cleanName.toLowerCase())) {
+    return true;
+  }
+  
+  // Use canvas-based detection
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  
+  if (!context) return false;
+  
+  const testString = 'mmmmmmmmmmlli'; // Characters with varying widths
+  const testSize = '72px';
+  const baselineFont = 'monospace';
+  
+  // Measure with baseline font
+  context.font = `${testSize} ${baselineFont}`;
+  const baselineWidth = context.measureText(testString).width;
+  
+  // Measure with test font
+  context.font = `${testSize} "${cleanName}", ${baselineFont}`;
+  const testWidth = context.measureText(testString).width;
+  
+  return baselineWidth !== testWidth;
+}
+
+/**
+ * Extracts the primary font name from a font-family string
+ * @param {string} fontFamily - Font family string (e.g., "Roboto, sans-serif")
+ * @returns {string} The primary font name
+ */
+function extractPrimaryFont(fontFamily) {
+  if (!fontFamily) return null;
+  
+  // Split by comma and get first font
+  const fonts = fontFamily.split(',').map(f => f.trim());
+  const primaryFont = fonts[0];
+  
+  // Remove quotes
+  return primaryFont.replace(/['"]/g, '').trim();
+}
+
+/**
+ * Loads a Google Font dynamically
+ * @param {string} fontFamily - The font family to load (can be comma-separated list)
+ * @param {Object} options - Loading options
+ * @param {number[]} options.weights - Font weights to load (default: [400, 500, 600, 700])
+ * @param {boolean} options.italic - Whether to include italic variants (default: false)
+ * @returns {Promise<void>}
+ */
+export async function loadGoogleFont(fontFamily, options = {}) {
+  if (!fontFamily) {
+    return Promise.resolve();
+  }
+  
+  const {
+    weights = [400, 500, 600, 700],
+    italic = false
+  } = options;
+  
+  const primaryFont = extractPrimaryFont(fontFamily);
+  
+  if (!primaryFont) {
+    return Promise.resolve();
+  }
+  
+  // Check if font is already available
+  if (isFontAvailable(primaryFont)) {
+    return Promise.resolve();
+  }
+  
+  // Check if font link already exists
+  const encodedFont = encodeURIComponent(primaryFont);
+  const existingLink = document.querySelector(
+    `link[href*="fonts.googleapis.com"][href*="${encodedFont}"]`
+  );
+  
+  if (existingLink) {
+    PDS.log("log", `Font "${primaryFont}" is already loading or loaded`);
+    return Promise.resolve();
+  }
+  
+  PDS.log("log", `Loading font "${primaryFont}" from Google Fonts...`);
+  
+  return new Promise((resolve, reject) => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    
+    // Build Google Fonts URL with specified weights
+    const weightsParam = italic 
+      ? `ital,wght@0,${weights.join(';0,')};1,${weights.join(';1,')}`
+      : `wght@${weights.join(';')}`;
+    
+    link.href = `https://fonts.googleapis.com/css2?family=${encodedFont}:${weightsParam}&display=swap`;
+    
+    // Add a data attribute for easy identification
+    link.setAttribute('data-font-loader', primaryFont);
+    
+    link.onload = () => {
+      PDS.log("log", `Successfully loaded font "${primaryFont}"`);
+      resolve();
+    };
+    
+    link.onerror = () => {
+      PDS.log("warn", `Failed to load font "${primaryFont}" from Google Fonts`);
+      reject(new Error(`Failed to load font: ${primaryFont}`));
+    };
+    
+    document.head.appendChild(link);
+    
+    // Set a timeout to prevent hanging indefinitely
+    setTimeout(() => {
+      if (!isFontAvailable(primaryFont)) {
+        PDS.log("warn", `Font "${primaryFont}" did not load within timeout`);
+      }
+      resolve(); // Resolve anyway to not block the application
+    }, 5000);
+  });
+}
+
+/**
+ * Loads fonts for all font families in a typography config
+ * @param {Object} typographyConfig - Typography configuration object
+ * @returns {Promise<void>}
+ */
+export async function loadTypographyFonts(typographyConfig) {
+  if (!typographyConfig) {
+    return Promise.resolve();
+  }
+  
+  const fontFamilies = new Set();
+  
+  // Collect all font families from the config
+  if (typographyConfig.fontFamilyHeadings) {
+    fontFamilies.add(typographyConfig.fontFamilyHeadings);
+  }
+  if (typographyConfig.fontFamilyBody) {
+    fontFamilies.add(typographyConfig.fontFamilyBody);
+  }
+  if (typographyConfig.fontFamilyMono) {
+    fontFamilies.add(typographyConfig.fontFamilyMono);
+  }
+  
+  // Load all fonts in parallel
+  const loadPromises = Array.from(fontFamilies).map(fontFamily => 
+    loadGoogleFont(fontFamily).catch(err => {
+      PDS.log("warn", `Could not load font: ${fontFamily}`, err);
+      // Don't fail the whole operation if one font fails
+    })
+  );
+  
+  await Promise.all(loadPromises);
+}
+
+/**
+ * Removes previously loaded Google Fonts
+ * @param {string} fontName - Optional font name to remove. If not specified, removes all.
+ */
+export function unloadGoogleFont(fontName = null) {
+  const selector = fontName 
+    ? `link[data-font-loader="${fontName}"]`
+    : 'link[data-font-loader]';
+  
+  const links = document.querySelectorAll(selector);
+  links.forEach(link => link.remove());
+  
+  if (fontName) {
+    PDS.log("log", `Unloaded font "${fontName}"`);
+  } else {
+    PDS.log("log", `Unloaded ${links.length} font(s)`);
+  }
+}

package/src/js/common/localization-resource-provider.js

@@ -0,0 +1,274 @@
+function normalizeLocaleTag(locale) {
+  return String(locale || "").trim().toLowerCase();
+}
+
+function toBaseLocale(locale) {
+  return normalizeLocaleTag(locale).split("-")[0] || "";
+}
+
+function toLocaleList(locales, fallbackLocale) {
+  const output = [];
+  const seen = new Set();
+
+  const add = (locale) => {
+    const normalized = normalizeLocaleTag(locale);
+    if (!normalized || seen.has(normalized)) {
+      return;
+    }
+
+    seen.add(normalized);
+    output.push(normalized);
+  };
+
+  if (Array.isArray(locales)) {
+    locales.forEach(add);
+  }
+
+  add(fallbackLocale);
+  return output;
+}
+
+function normalizeAliasMap(aliases = {}) {
+  const normalized = {};
+
+  if (!aliases || typeof aliases !== "object") {
+    return normalized;
+  }
+
+  Object.entries(aliases).forEach(([key, values]) => {
+    const normalizedKey = normalizeLocaleTag(key);
+    if (!normalizedKey) {
+      return;
+    }
+
+    const list = [];
+    const seen = new Set();
+
+    if (Array.isArray(values)) {
+      values.forEach((value) => {
+        if (typeof value !== "string") {
+          return;
+        }
+
+        const trimmed = value.trim();
+        if (!trimmed) {
+          return;
+        }
+
+        const dedupeKey = trimmed.toLowerCase();
+        if (seen.has(dedupeKey)) {
+          return;
+        }
+
+        seen.add(dedupeKey);
+        list.push(trimmed);
+      });
+    }
+
+    normalized[normalizedKey] = list;
+  });
+
+  return normalized;
+}
+
+function normalizeBundleShape(bundle) {
+  if (!bundle || typeof bundle !== "object" || Array.isArray(bundle)) {
+    return {};
+  }
+
+  return bundle;
+}
+
+function normalizeBasePath(basePath) {
+  const raw = typeof basePath === "string" ? basePath.trim() : "";
+  if (!raw) {
+    return "/assets/locales";
+  }
+
+  if (raw === "/") {
+    return "";
+  }
+
+  return raw.replace(/\/+$/, "");
+}
+
+function buildCandidateLocales({ locale, effectiveLocale, defaultLocale, aliases }) {
+  const candidates = [];
+  const seen = new Set();
+
+  const add = (candidate) => {
+    if (typeof candidate !== "string") {
+      return;
+    }
+
+    const trimmed = candidate.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    const dedupeKey = trimmed.toLowerCase();
+    if (seen.has(dedupeKey)) {
+      return;
+    }
+
+    seen.add(dedupeKey);
+    candidates.push(trimmed);
+  };
+
+  const addAliases = (aliasKey) => {
+    const values = Array.isArray(aliases?.[aliasKey]) ? aliases[aliasKey] : [];
+    if (!values.length) {
+      return;
+    }
+
+    const prioritized = [...values].sort((a, b) => {
+      const aSpecific = String(a || "").includes("-");
+      const bSpecific = String(b || "").includes("-");
+      if (aSpecific === bSpecific) return 0;
+      return aSpecific ? -1 : 1;
+    });
+
+    prioritized.forEach(add);
+  };
+
+  const normalizedRequested = normalizeLocaleTag(locale);
+  const requestedBase = toBaseLocale(normalizedRequested);
+  const effectiveBase = toBaseLocale(effectiveLocale);
+
+  addAliases(normalizedRequested);
+  addAliases(requestedBase);
+  addAliases(effectiveLocale);
+  addAliases(effectiveBase);
+
+  add(locale);
+  add(normalizedRequested);
+  add(requestedBase);
+  add(effectiveLocale);
+  add(effectiveBase);
+
+  if (effectiveLocale !== defaultLocale) {
+    addAliases(defaultLocale);
+    add(defaultLocale);
+  }
+
+  return candidates;
+}
+
+/**
+ * Create a localization config that lazy-loads locale JSON resources.
+ *
+ * JSON files are expected at:
+ * - `${basePath}/{locale}.json`
+ *
+ * Bundle format can be either:
+ * - `{ "Key": "Translated" }`
+ * - `{ "Key": { "content": "Translated" } }`
+ *
+ * @param {{
+ *   locale?: string,
+ *   locales?: string[],
+ *   basePath?: string,
+ *   aliases?: Record<string, string[]>,
+ *   requestInit?: RequestInit,
+ *   cache?: Map<string, Record<string, string | { content?: string }>>,
+ * }} [options]
+ * @returns {{
+ *   locale: string,
+ *   locales: string[],
+ *   provider: {
+ *     locales: string[],
+ *     loadLocale: (context: { locale: string }) => Promise<Record<string, string | { content?: string }>>,
+ *   },
+ * }}
+ */
+export function createJSONLocalization(options = {}) {
+  const defaultLocale = normalizeLocaleTag(options?.locale || "en") || "en";
+  const locales = toLocaleList(options?.locales, defaultLocale);
+  const localeSet = new Set(locales);
+  const aliases = normalizeAliasMap(options?.aliases || {});
+  const cache = options?.cache instanceof Map ? options.cache : new Map();
+  const basePath = normalizeBasePath(options?.basePath);
+  const requestInit =
+    options?.requestInit && typeof options.requestInit === "object"
+      ? options.requestInit
+      : {};
+
+  const resolveEffectiveLocale = (locale) => {
+    const normalized = normalizeLocaleTag(locale);
+    if (!normalized) {
+      return defaultLocale;
+    }
+
+    if (localeSet.has(normalized)) {
+      return normalized;
+    }
+
+    const base = toBaseLocale(normalized);
+    if (localeSet.has(base)) {
+      return base;
+    }
+
+    return defaultLocale;
+  };
+
+  const loadLocale = async ({ locale }) => {
+    const effectiveLocale = resolveEffectiveLocale(locale);
+    if (cache.has(effectiveLocale)) {
+      return cache.get(effectiveLocale) || {};
+    }
+
+    if (effectiveLocale === defaultLocale) {
+      const defaultBundle = {};
+      cache.set(effectiveLocale, defaultBundle);
+      return defaultBundle;
+    }
+
+    if (typeof fetch !== "function") {
+      const emptyBundle = {};
+      cache.set(effectiveLocale, emptyBundle);
+      return emptyBundle;
+    }
+
+    const candidates = buildCandidateLocales({
+      locale,
+      effectiveLocale,
+      defaultLocale,
+      aliases,
+    });
+
+    for (const candidate of candidates) {
+      try {
+        const resourcePath = basePath
+          ? `${basePath}/${candidate}.json`
+          : `/${candidate}.json`;
+        const response = await fetch(resourcePath, {
+          headers: {
+            Accept: "application/json",
+          },
+          ...requestInit,
+        });
+
+        if (!response.ok) {
+          continue;
+        }
+
+        const bundle = normalizeBundleShape(await response.json());
+        cache.set(effectiveLocale, bundle);
+        return bundle;
+      } catch (error) {}
+    }
+
+    const emptyBundle = {};
+    cache.set(effectiveLocale, emptyBundle);
+    return emptyBundle;
+  };
+
+  return {
+    locale: defaultLocale,
+    locales: [...locales],
+    provider: {
+      locales: [...locales],
+      loadLocale,
+    },
+  };
+}