@developer_tribe/react-builder 1.0.9 → 1.2.0

package/src/store.ts

@@ -16,7 +16,8 @@ import type {
   PaywallBenefits,
   PaywallBenefitValue,
 } from './paywall/types/benefits';
-
+import type { Fonts } from './types/Fonts';
+//TODO: project base store and general store should be separated. We can we use context
 type RenderStore = {
   projectName: string;
   setProjectName: (name: string) => void;
@@ -59,6 +60,22 @@ type RenderStore = {
     },
   ) => void;
   clearLogs: () => void;
+
+  // Fonts (provided by host app)
+  fonts: Fonts;
+  setFonts: (fonts: Fonts) => void;
+  // NOTE: appFont is intentionally non-optional as a prop in `ProjectPage`,
+  // but the value itself can be undefined when the host can't determine it.
+  appFont: string | undefined;
+  setAppFont: (appFont: string | undefined) => void;
+  // Validation/runtime errors surfaced to the host UI
+  errors: string[];
+  setErrors: (errors: string[]) => void;
+  addError: (error: string) => void;
+  clearErrors: () => void;
+  // Cache loaded font families to avoid repeated loads
+  loadedFonts: string[];
+  markFontLoaded: (fontFamily: string) => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
@@ -188,6 +205,34 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
           return { logs: [...state.logs, newEntry] };
         }),
       clearLogs: () => set({ logs: [] }),
+
+      fonts: [],
+      setFonts: (fonts) => set({ fonts: Array.isArray(fonts) ? fonts : [] }),
+      appFont: undefined,
+      setAppFont: (appFont) => set({ appFont }),
+      errors: [],
+      setErrors: (errors) =>
+        set({ errors: Array.isArray(errors) ? errors : [] }),
+      addError: (error) =>
+        set((state) => ({
+          errors: [
+            ...(Array.isArray(state.errors) ? state.errors : []),
+            String(error),
+          ],
+        })),
+      clearErrors: () => set({ errors: [] }),
+      loadedFonts: [],
+      markFontLoaded: (fontFamily) =>
+        set((state) => {
+          const family =
+            typeof fontFamily === 'string' ? fontFamily.trim() : '';
+          if (!family) return state;
+          const prev = Array.isArray(state.loadedFonts)
+            ? state.loadedFonts
+            : [];
+          if (prev.includes(family)) return state;
+          return { loadedFonts: [...prev, family] };
+        }),
     }),
     {
       name: 'render-store',

package/src/types/Fonts.ts

@@ -0,0 +1,16 @@
+/** CSS font-weight key (usually "100".."900"). */
+export type FontWeightKey = string;
+
+/** URL to a font file (ttf/otf/woff/woff2). */
+export type FontFileUrl = string;
+
+/** Map of font-weight -> font file URL. */
+export type FontFamilySources = Record<FontWeightKey, FontFileUrl>;
+
+export type FontDefinition = {
+  name: string;
+  family: FontFamilySources;
+  projects?: string[];
+};
+
+export type Fonts = FontDefinition[];

package/src/utils/analyseNodeByPatterns.ts

@@ -7,6 +7,7 @@ import {
   isPrimitiveType,
   normalizeComponentType,
 } from './patterns';
+import { FONT_WEIGHT_OPTIONS, normalizeFontWeight } from './fontWeight';
 import {
   isEmptyObject,
   isNodeArray,
@@ -233,6 +234,14 @@ function validatePrimitiveValue(
       return typeof value === 'number' || typeof value === 'string'
         ? ok()
         : fail(`Expected size (string or number)`, path);
+    case 'fontWeight': {
+      const normalized = normalizeFontWeight(value);
+      if (normalized) return ok();
+      return fail(
+        `Expected fontWeight (${FONT_WEIGHT_OPTIONS.join(', ')})`,
+        path,
+      );
+    }
     case 'iconType':
       return typeof value === 'string'
         ? ok()

package/src/utils/extractTextStyle.ts

@@ -6,6 +6,68 @@ import type { ProjectColors } from '../types/Project';
 import { fs, parseSize } from '../size-matters';
 import { parseColor } from './parseColor';
 import { extractViewStyle } from './extractViewStyle';
+import { normalizeFontWeight } from './fontWeight';
+import { useRenderStore } from '../store';
+import {
+  findFontDefinition,
+  loadFontFamily,
+  resolveClosestFontWeightKey,
+} from './loadFontFamily';
+import { fontsDebug } from './fontsDebug';
+
+const inFlightFontLoads: Map<string, Promise<void>> = new Map();
+
+function weightToNumericKey(weight: unknown): string | undefined {
+  const normalized = normalizeFontWeight(weight);
+  if (!normalized) return undefined;
+  if (normalized === 'normal') return '400';
+  if (normalized === 'bold') return '700';
+  // already '100'..'900'
+  return normalized;
+}
+
+function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
+  if (typeof document === 'undefined') return;
+  const name = familyName.trim();
+  if (!name) return;
+  const weight = weightKey?.trim() || '400';
+  const cacheKey = `${name}@${weight}`;
+  if (inFlightFontLoads.has(cacheKey)) return;
+
+  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
+    familyName: name,
+    weight,
+  });
+
+  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
+  const promise = loadFontFamily(fonts, name, {
+    preferWeight: weight,
+    forceFetch: true,
+  })
+    .then(() => {
+      fontsDebug.info('extractTextStyle: font weight loaded', {
+        familyName: name,
+        weight,
+      });
+      markFontLoaded(name);
+    })
+    .catch((e) => {
+      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
+        familyName: name,
+        weight,
+      });
+      addError(
+        `Failed to load font "${name}" (weight ${weight}): ${
+          e instanceof Error ? e.message : String(e)
+        }`,
+      );
+    })
+    .finally(() => {
+      inFlightFontLoads.delete(cacheKey);
+    });
+
+  inFlightFontLoads.set(cacheKey, promise);
+}
 
 type ExtractTextStyleOptions = {
   appConfig?: AppConfig;
@@ -48,8 +110,43 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   } else {
     style.fontSize = fs(14);
   }
+  const fontFamily = get('fontFamily') as any;
   const fontWeight = get('fontWeight') as any;
-  if (fontWeight) style.fontWeight = fontWeight;
+  const requestedWeight = weightToNumericKey(fontWeight);
+  const normalizedFontFamily =
+    typeof fontFamily === 'string' && fontFamily.trim().length > 0
+      ? fontFamily.trim()
+      : undefined;
+  if (normalizedFontFamily) {
+    // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
+    const { fonts } = useRenderStore.getState();
+    const def = findFontDefinition(fonts, normalizedFontFamily);
+    const resolvedWeightKey =
+      def?.family && typeof def.family === 'object'
+        ? resolveClosestFontWeightKey(
+            def.family as Record<string, string>,
+            requestedWeight,
+          )
+        : requestedWeight;
+
+    fontsDebug.info('extractTextStyle: resolved font family/weight', {
+      fontFamily: normalizedFontFamily,
+      requestedWeight,
+      resolvedWeightKey,
+    });
+
+    style.fontFamily = `"${normalizedFontFamily}"`;
+    // Ensure the correct weight file is available (lazy-load per weight).
+    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
+    // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
+    if (resolvedWeightKey) {
+      style.fontWeight = resolvedWeightKey;
+    }
+  }
+  const normalizedFontWeight = normalizeFontWeight(fontWeight);
+  // If no fontFamily is set, keep previous behavior.
+  if (!normalizedFontFamily && normalizedFontWeight)
+    style.fontWeight = normalizedFontWeight;
   const resolvedTextColor = parseColor(get('color') as any, {
     projectColors: options.projectColors,
     appConfig: resolvedAppConfig,

package/src/utils/fontWeight.ts

@@ -0,0 +1,29 @@
+export const FONT_WEIGHT_OPTIONS = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+] as const;
+
+export type FontWeightOption = (typeof FONT_WEIGHT_OPTIONS)[number];
+
+export function normalizeFontWeight(
+  value: unknown,
+): FontWeightOption | undefined {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    const asString = String(value) as FontWeightOption;
+    return FONT_WEIGHT_OPTIONS.includes(asString) ? asString : undefined;
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim() as FontWeightOption;
+    return FONT_WEIGHT_OPTIONS.includes(trimmed) ? trimmed : undefined;
+  }
+  return undefined;
+}

package/src/utils/fontsDebug.ts

@@ -0,0 +1,16 @@
+type Payload = unknown;
+
+/**
+ * Intentionally silent logger for font pipeline.
+ * (We keep the interface so call sites don't need to change.)
+ */
+export const fontsDebug = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  info(_message: string, _payload?: Payload) {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  warn(_message: string, _payload?: Payload) {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  error(_message: string, _payload?: Payload) {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  compactError(_message: string, _error: unknown, _payload?: Payload) {},
+};

package/src/utils/loadFontFamily.ts

@@ -0,0 +1,318 @@
+import type { Fonts, FontDefinition } from '../types/Fonts';
+import { fontsDebug } from './fontsDebug';
+
+function normalizeFamilyName(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+export function findFontDefinition(
+  fonts: Fonts,
+  familyName: string,
+): FontDefinition | undefined {
+  const name = normalizeFamilyName(familyName);
+  if (!name) return undefined;
+  if (!Array.isArray(fonts)) return undefined;
+  return fonts.find((f) => f?.name === name);
+}
+
+function parseWeightKey(value: unknown): number | null {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const n = Number(trimmed);
+  return Number.isFinite(n) ? n : null;
+}
+
+/**
+ * Given a family sources map (weightKey -> url) and a requested weight,
+ * returns the closest available weight key (or a sensible fallback).
+ */
+export function resolveClosestFontWeightKey(
+  family: Record<string, string>,
+  requestedWeight?: string,
+): string | undefined {
+  const entries = Object.entries(family ?? {}).filter(
+    ([k, v]) =>
+      typeof k === 'string' &&
+      k.trim().length > 0 &&
+      typeof v === 'string' &&
+      v.trim().length > 0,
+  );
+  if (entries.length === 0) return undefined;
+
+  const reqKey = normalizeFamilyName(requestedWeight);
+  if (reqKey && entries.some(([k]) => k === reqKey)) return reqKey;
+
+  // Prefer 400 if nothing exact matches.
+  if (entries.some(([k]) => k === '400')) return '400';
+
+  const reqNum = parseWeightKey(reqKey);
+  const numeric = entries
+    .map(([k]) => ({ k, n: parseWeightKey(k) }))
+    .filter((x): x is { k: string; n: number } => typeof x.n === 'number');
+  if (numeric.length === 0) return entries[0][0];
+
+  if (typeof reqNum !== 'number') {
+    // No requested weight: pick the smallest numeric weight as a stable default.
+    numeric.sort((a, b) => a.n - b.n);
+    return numeric[0].k;
+  }
+
+  // Pick closest numeric weight.
+  let best = numeric[0];
+  let bestDiff = Math.abs(best.n - reqNum);
+  for (const cand of numeric) {
+    const diff = Math.abs(cand.n - reqNum);
+    if (diff < bestDiff) {
+      best = cand;
+      bestDiff = diff;
+    }
+  }
+  return best.k;
+}
+
+export function resolveFontSourceForWeight(
+  family: Record<string, string>,
+  requestedWeight?: string,
+): { weight: string; url: string } | undefined {
+  const weight = resolveClosestFontWeightKey(family, requestedWeight);
+  if (!weight) return undefined;
+  const url = family?.[weight];
+  if (typeof url !== 'string' || !url.trim()) return undefined;
+  return { weight, url: url.trim() };
+}
+
+type LoadFontFamilyOptions = {
+  preferWeight?: string;
+  /**
+   * If true (default), fetch the font file via `fetch()` first so:
+   * - the request is visible in DevTools Network (Fetch/XHR)
+   * - we can log response status and surface CORS/404 clearly
+   *
+   * If false, falls back to `new FontFace(name, 'url(...)')`.
+   */
+  forceFetch?: boolean;
+};
+
+/**
+ * Web-only font loader.
+ * - Uses the `FontFace` API when available.
+ * - Loads a single preferred weight (default: 400) to keep it "lazy".
+ * - Caller is responsible for caching (e.g. via `loadedFonts` in the store).
+ */
+export async function loadFontFamily(
+  fonts: Fonts,
+  familyName: string,
+  options: LoadFontFamilyOptions = {},
+): Promise<void> {
+  const name = normalizeFamilyName(familyName);
+  if (!name) throw new Error('fontFamily is empty');
+
+  fontsDebug.info('loadFontFamily: start', {
+    familyName: name,
+    preferWeight: options.preferWeight,
+  });
+
+  const def = findFontDefinition(fonts, name);
+  if (!def) throw new Error(`fontFamily "${name}" not found in fonts`);
+
+  const family = def.family;
+  if (!family || typeof family !== 'object') {
+    throw new Error(`fontFamily "${name}" has no "family" sources`);
+  }
+
+  // Not a browser environment (SSR / RN): do nothing.
+  if (typeof document === 'undefined') return;
+
+  const fontsApi = (document as any).fonts as FontFaceSet | undefined;
+  if (!fontsApi || typeof (globalThis as any).FontFace !== 'function') {
+    throw new Error('Font loading is not supported in this environment');
+  }
+  const safeFontsApi = fontsApi as FontFaceSet;
+
+  function hasLoadedFace(familyName: string, weight: string): boolean {
+    try {
+      const set = safeFontsApi as unknown as Iterable<FontFace>;
+      for (const face of set) {
+        const f = face as unknown as {
+          family?: string;
+          weight?: string;
+          status?: string;
+        };
+        const fam =
+          typeof f.family === 'string' ? f.family.replace(/['"]/g, '') : '';
+        const w = typeof f.weight === 'string' ? f.weight.trim() : '';
+        if (fam === familyName && w === weight && f.status === 'loaded') {
+          return true;
+        }
+      }
+    } catch {
+      // ignore
+    }
+    return false;
+  }
+
+  const resolved = resolveFontSourceForWeight(
+    family as Record<string, string>,
+    normalizeFamilyName(options.preferWeight),
+  );
+  if (!resolved)
+    throw new Error(`fontFamily "${name}" has no usable source URLs`);
+  const { weight: preferWeight, url } = resolved;
+
+  fontsDebug.info('loadFontFamily: resolved source', {
+    familyName: name,
+    weight: preferWeight,
+    url,
+  });
+
+  // If the browser already has it (e.g. via global CSS), skip work.
+  try {
+    // Use a weight-aware check so we can lazily load additional weights on demand.
+    const checkQuery = `${preferWeight} 16px "${name}"`;
+    const already = fontsApi.check(checkQuery);
+    fontsDebug.info('loadFontFamily: document.fonts.check', {
+      familyName: name,
+      query: checkQuery,
+      result: already,
+    });
+    const loadedFace = hasLoadedFace(name, preferWeight);
+    fontsDebug.info('loadFontFamily: hasLoadedFace', {
+      familyName: name,
+      weight: preferWeight,
+      result: loadedFace,
+    });
+    // Only skip when the face is actually loaded.
+    if (loadedFace) {
+      fontsDebug.info(
+        'loadFontFamily: already available (document.fonts.check)',
+        {
+          familyName: name,
+          weight: preferWeight,
+        },
+      );
+      return;
+    }
+  } catch {
+    // ignore check failures; we'll try to load.
+  }
+
+  const forceFetch = options.forceFetch !== false;
+  let source: string | ArrayBuffer = `url(${url})`;
+  const urlSource = `url(${url})`;
+
+  if (forceFetch && typeof fetch === 'function') {
+    try {
+      fontsDebug.info('loadFontFamily: fetching font file', {
+        url,
+        familyName: name,
+        weight: preferWeight,
+      });
+      const res = await fetch(url, {
+        mode: 'cors',
+        cache: 'no-store',
+        credentials: 'omit',
+      });
+      fontsDebug.info('loadFontFamily: font fetch response', {
+        url,
+        ok: res.ok,
+        status: res.status,
+        statusText: res.statusText,
+      });
+      if (!res.ok) {
+        throw new Error(`Font fetch failed: ${res.status} ${res.statusText}`);
+      }
+      source = await res.arrayBuffer();
+      fontsDebug.info('loadFontFamily: font file downloaded', {
+        url,
+        bytes: (source as ArrayBuffer).byteLength,
+        familyName: name,
+        weight: preferWeight,
+      });
+    } catch (e) {
+      // Fallback to native font loading. This can still succeed in some environments where fetch is blocked.
+      fontsDebug.compactError(
+        'loadFontFamily: fetch failed; falling back to url()',
+        e,
+        {
+          url,
+          familyName: name,
+          weight: preferWeight,
+        },
+      );
+      source = urlSource;
+    }
+  } else {
+    fontsDebug.info('loadFontFamily: using url() source (no fetch)', {
+      url,
+      familyName: name,
+      weight: preferWeight,
+    });
+  }
+
+  async function loadAndAdd(src: string | ArrayBuffer, label: string) {
+    const face = new (globalThis as any).FontFace(name, src as any, {
+      weight: preferWeight,
+      display: 'swap',
+    }) as FontFace;
+    fontsDebug.info('loadFontFamily: FontFace.load() begin', {
+      familyName: name,
+      weight: preferWeight,
+      source: label,
+    });
+    const loaded = await face.load();
+    safeFontsApi.add(loaded);
+    fontsDebug.info('loadFontFamily: loaded + added to document.fonts', {
+      familyName: name,
+      weight: preferWeight,
+      source: label,
+    });
+  }
+
+  try {
+    // Preferred path (buffer if we fetched, else url()).
+    await loadAndAdd(
+      source,
+      typeof source === 'string' ? 'url()' : 'arrayBuffer',
+    );
+  } catch (e) {
+    // Some browsers can be picky about ArrayBuffer sources. Retry using url() as a last resort.
+    fontsDebug.compactError('loadFontFamily: FontFace.load failed', e, {
+      familyName: name,
+      weight: preferWeight,
+      tried: typeof source === 'string' ? 'url()' : 'arrayBuffer',
+    });
+    if (typeof source !== 'string') {
+      fontsDebug.info('loadFontFamily: retrying with url() source', {
+        familyName: name,
+        weight: preferWeight,
+        url,
+      });
+      await loadAndAdd(urlSource, 'url() retry');
+    } else {
+      throw e;
+    }
+  }
+
+  try {
+    const afterQuery = `${preferWeight} 16px "${name}"`;
+    const after = safeFontsApi.check(afterQuery);
+    fontsDebug.info('loadFontFamily: document.fonts.check after add', {
+      familyName: name,
+      weight: preferWeight,
+      result: after,
+    });
+    // Force the browser to "activate" the face for this query (and reveal errors if any).
+    if (typeof (safeFontsApi as any).load === 'function') {
+      fontsDebug.info('loadFontFamily: document.fonts.load begin', {
+        query: afterQuery,
+      });
+      await (safeFontsApi as any).load(afterQuery);
+      fontsDebug.info('loadFontFamily: document.fonts.load done', {
+        query: afterQuery,
+      });
+    }
+  } catch {
+    // ignore
+  }
+}

package/src/utils/patterns.ts

@@ -161,6 +161,8 @@ export function isPrimitiveType(typeName: string): boolean {
     typeName === 'boolean' ||
     typeName === 'color' ||
     typeName === 'size' ||
+    typeName === 'fontFamily' ||
+    typeName === 'fontWeight' ||
     typeName === 'iconType'
   );
 }