@datlv-trustshop/shopify-inapp-components 0.1.9

package/dist/core/engine.js

@@ -0,0 +1,176 @@
+import { adaptDashboardData } from "./adapter";
+import { fetchDashboard } from "./fetcher";
+export class DashboardEngine {
+    constructor(config) {
+        this.data = null;
+        this.initPromise = null;
+        this.lastFetchTime = 0;
+        this.listeners = new Set();
+        this.fetchInProgress = false;
+        this.config = {
+            cacheTime: 5 * 60 * 1000,
+            retryAttempts: 3,
+            retryDelay: 1000,
+            locale: "en",
+            ...config,
+        };
+        this.currentLocale = this.config.locale || "en";
+    }
+    static getInstance(config) {
+        if (!DashboardEngine.instance) {
+            if (!config) {
+                throw new Error("DashboardEngine requires config on first initialization");
+            }
+            DashboardEngine.instance = new DashboardEngine(config);
+        }
+        return DashboardEngine.instance;
+    }
+    static resetInstance() {
+        DashboardEngine.instance = null;
+    }
+    async init(forceRefresh = false) {
+        const now = Date.now();
+        const cacheExpired = now - this.lastFetchTime > (this.config.cacheTime || 0);
+        if (!forceRefresh && !cacheExpired && this.data) {
+            return Promise.resolve();
+        }
+        if (this.fetchInProgress && this.initPromise) {
+            return this.initPromise;
+        }
+        if (!this.initPromise || forceRefresh || cacheExpired) {
+            this.fetchInProgress = true;
+            this.initPromise = this.loadData().finally(() => {
+                this.fetchInProgress = false;
+            });
+        }
+        return this.initPromise;
+    }
+    async loadData() {
+        try {
+            const rawData = await fetchDashboard(this.config);
+            this.data = adaptDashboardData(rawData);
+            this.lastFetchTime = Date.now();
+            this.notifyListeners();
+        }
+        catch (error) {
+            console.error("Failed to load dashboard data:", error);
+            throw error;
+        }
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        listener(this.data);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notifyListeners() {
+        this.listeners.forEach((listener) => listener(this.data));
+    }
+    getData() {
+        return this.data;
+    }
+    getBanners(type) {
+        if (!this.data?.banners)
+            return [];
+        if (type) {
+            return this.data.banners.filter((banner) => banner.type === type);
+        }
+        return this.data.banners;
+    }
+    getActiveBanners(type) {
+        return this.getBanners(type).filter((banner) => banner.isActive !== false);
+    }
+    getApps(group) {
+        if (!this.data?.apps)
+            return [];
+        if (group) {
+            return this.data.apps[group] || [];
+        }
+        return Object.values(this.data.apps).flat();
+    }
+    getAppGroups() {
+        if (!this.data?.apps)
+            return [];
+        return Object.keys(this.data.apps);
+    }
+    getArticles(limit) {
+        if (!this.data?.articles)
+            return [];
+        if (limit && limit > 0) {
+            return this.data.articles.slice(0, limit);
+        }
+        return this.data.articles;
+    }
+    getWhatsNew(limit) {
+        if (!this.data?.whatsNew)
+            return [];
+        if (limit && limit > 0) {
+            return this.data.whatsNew.slice(0, limit);
+        }
+        return this.data.whatsNew;
+    }
+    async refresh() {
+        return this.init(true);
+    }
+    isInitialized() {
+        return this.data !== null;
+    }
+    getCacheAge() {
+        if (!this.lastFetchTime)
+            return Infinity;
+        return Date.now() - this.lastFetchTime;
+    }
+    isCacheValid() {
+        return this.getCacheAge() < (this.config.cacheTime || 0);
+    }
+    updateLocale(locale) {
+        if (this.currentLocale !== locale) {
+            this.currentLocale = locale;
+            this.config = { ...this.config, locale };
+            this.data = null;
+            this.lastFetchTime = 0;
+            this.initPromise = null;
+            return true; // Locale was changed
+        }
+        return false; // Locale was not changed
+    }
+    async setLocale(locale) {
+        if (this.currentLocale !== locale) {
+            const wasInitialized = this.isInitialized();
+            this.currentLocale = locale;
+            this.config = { ...this.config, locale };
+            // Clear data to force refresh with new locale
+            this.data = null;
+            this.lastFetchTime = 0;
+            this.initPromise = null;
+            // If engine was initialized, automatically refresh with new locale
+            if (wasInitialized) {
+                await this.init();
+            }
+            // Notify listeners about the change
+            this.notifyListeners();
+        }
+    }
+    updateConfig(newConfig) {
+        const oldConfig = this.config;
+        this.config = { ...this.config, ...newConfig };
+        // If locale changed, update current locale and clear cache
+        if (newConfig.locale && newConfig.locale !== this.currentLocale) {
+            this.currentLocale = newConfig.locale;
+            this.data = null;
+            this.lastFetchTime = 0;
+            this.initPromise = null;
+        }
+        // If API URL changed, clear cache
+        if (newConfig.apiUrl && newConfig.apiUrl !== oldConfig.apiUrl) {
+            this.data = null;
+            this.lastFetchTime = 0;
+            this.initPromise = null;
+        }
+    }
+    getCurrentLocale() {
+        return this.currentLocale;
+    }
+}
+DashboardEngine.instance = null;

package/dist/core/fetcher.d.ts

@@ -0,0 +1,4 @@
+import { DashboardConfig } from "../types";
+export declare function fetchDashboard(config: DashboardConfig): Promise<any>;
+export declare function clearCache(url?: string): void;
+export declare function getCacheSize(): number;

package/dist/core/fetcher.js

@@ -0,0 +1,72 @@
+const cache = new Map();
+export async function fetchDashboard(config) {
+    // Build URL with locale query param
+    // Handle both absolute and relative URLs
+    let url;
+    try {
+        // Try as absolute URL first
+        url = new URL(config.apiUrl);
+    }
+    catch {
+        // If it fails, treat as relative URL
+        const baseUrl = typeof window !== 'undefined'
+            ? window.location.origin
+            : 'http://localhost:3000';
+        url = new URL(config.apiUrl, baseUrl);
+    }
+    const locale = config.locale || 'en';
+    url.searchParams.set('locale', locale);
+    // Use URL with locale as cache key
+    const cacheKey = url.toString();
+    const now = Date.now();
+    if (config.cacheTime && config.cacheTime > 0) {
+        const cached = cache.get(cacheKey);
+        if (cached && now - cached.timestamp < config.cacheTime) {
+            return Promise.resolve(cached.data);
+        }
+    }
+    const attemptFetch = async (attempt = 1) => {
+        try {
+            const response = await fetch(url.toString(), {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Accept-Language": locale, // Also send locale in header
+                    ...config.headers,
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (config.cacheTime && config.cacheTime > 0) {
+                cache.set(cacheKey, {
+                    data,
+                    timestamp: now,
+                });
+            }
+            return data;
+        }
+        catch (error) {
+            const maxAttempts = config.retryAttempts || 3;
+            if (attempt < maxAttempts) {
+                const delay = (config.retryDelay || 1000) * attempt;
+                await new Promise((resolve) => setTimeout(resolve, delay));
+                return attemptFetch(attempt + 1);
+            }
+            throw error;
+        }
+    };
+    return attemptFetch();
+}
+export function clearCache(url) {
+    if (url) {
+        cache.delete(url);
+    }
+    else {
+        cache.clear();
+    }
+}
+export function getCacheSize() {
+    return cache.size;
+}

package/dist/core/global-manager.d.ts

@@ -0,0 +1,99 @@
+import { DashboardEngine } from "./engine";
+import { DashboardConfig, DashboardState } from "../types";
+/**
+ * GlobalDashboardManager - Singleton manager for shared SDK state
+ *
+ * This manager ensures all DashboardProvider instances share:
+ * - The same engine instance
+ * - The same data/cache
+ * - The same locale state
+ * - Deduplicated API calls
+ *
+ * Multiple providers can mount/unmount independently while maintaining
+ * a stable, shared runtime.
+ */
+export declare class GlobalDashboardManager {
+    private static instance;
+    private engine;
+    private providers;
+    private stateListeners;
+    private globalState;
+    private initPromise;
+    private autoInitTimer;
+    private lastConfig;
+    private isInitializing;
+    private constructor();
+    static getInstance(): GlobalDashboardManager;
+    /**
+     * Register a provider instance
+     */
+    registerProvider(id: string, config?: DashboardConfig): void;
+    /**
+     * Unregister a provider instance
+     */
+    unregisterProvider(id: string): void;
+    /**
+     * Get or create the shared engine instance
+     */
+    private getOrCreateEngine;
+    /**
+     * Update the global configuration
+     */
+    private updateGlobalConfig;
+    /**
+     * Check if two configs are equal
+     */
+    private configEquals;
+    /**
+     * Schedule auto-initialization
+     */
+    private scheduleAutoInit;
+    /**
+     * Auto-initialize the engine
+     */
+    private autoInit;
+    /**
+     * Initialize the shared engine
+     */
+    init(config?: DashboardConfig): Promise<void>;
+    /**
+     * Refresh the dashboard data
+     */
+    refresh(): Promise<void>;
+    /**
+     * Update locale globally
+     */
+    setLocale(locale: string): Promise<void>;
+    /**
+     * Get the current locale
+     */
+    getCurrentLocale(): string;
+    /**
+     * Subscribe to global state changes
+     */
+    subscribe(id: string, callback: (state: DashboardState) => void): () => void;
+    /**
+     * Update and broadcast global state
+     */
+    private updateGlobalState;
+    /**
+     * Get the current global state
+     */
+    getState(): DashboardState;
+    /**
+     * Get the shared engine instance (if created)
+     */
+    getEngine(): DashboardEngine | null;
+    /**
+     * Check if manager is initialized
+     */
+    isInitialized(): boolean;
+    /**
+     * Get provider count
+     */
+    getProviderCount(): number;
+    /**
+     * Reset the global manager (for testing)
+     */
+    static reset(): void;
+}

package/dist/core/global-manager.js

@@ -0,0 +1,315 @@
+import { DashboardEngine } from "./engine";
+/**
+ * GlobalDashboardManager - Singleton manager for shared SDK state
+ *
+ * This manager ensures all DashboardProvider instances share:
+ * - The same engine instance
+ * - The same data/cache
+ * - The same locale state
+ * - Deduplicated API calls
+ *
+ * Multiple providers can mount/unmount independently while maintaining
+ * a stable, shared runtime.
+ */
+export class GlobalDashboardManager {
+    constructor() {
+        this.engine = null;
+        this.providers = new Map();
+        this.stateListeners = new Set();
+        this.globalState = {
+            data: null,
+            loading: false,
+            error: null,
+            lastFetch: null,
+        };
+        this.initPromise = null;
+        this.autoInitTimer = null;
+        this.lastConfig = null;
+        this.isInitializing = false;
+        // Private constructor for singleton
+    }
+    static getInstance() {
+        if (!GlobalDashboardManager.instance) {
+            GlobalDashboardManager.instance = new GlobalDashboardManager();
+        }
+        return GlobalDashboardManager.instance;
+    }
+    /**
+     * Register a provider instance
+     */
+    registerProvider(id, config) {
+        this.providers.set(id, {
+            id,
+            mounted: true,
+            config
+        });
+        // Update config if provided and different
+        if (config && !this.configEquals(this.lastConfig, config)) {
+            this.updateGlobalConfig(config);
+        }
+        // Auto-initialize if this is the first provider
+        if (this.providers.size === 1 && config) {
+            this.scheduleAutoInit();
+        }
+    }
+    /**
+     * Unregister a provider instance
+     */
+    unregisterProvider(id) {
+        this.providers.delete(id);
+        // Remove associated listeners
+        this.stateListeners = new Set(Array.from(this.stateListeners).filter(l => !l.id.startsWith(id)));
+        // Don't destroy engine even if no providers - maintain stable runtime
+    }
+    /**
+     * Get or create the shared engine instance
+     */
+    getOrCreateEngine(config) {
+        if (!this.engine) {
+            if (!config && !this.lastConfig) {
+                throw new Error("GlobalDashboardManager requires config on first use");
+            }
+            const finalConfig = config || this.lastConfig;
+            this.engine = DashboardEngine.getInstance(finalConfig);
+            this.lastConfig = finalConfig;
+            // Subscribe to engine changes
+            this.engine.subscribe((data) => {
+                this.updateGlobalState({
+                    data,
+                    loading: false,
+                    error: null,
+                    lastFetch: data ? new Date() : this.globalState.lastFetch,
+                });
+            });
+        }
+        return this.engine;
+    }
+    /**
+     * Update the global configuration
+     */
+    updateGlobalConfig(config) {
+        this.lastConfig = config;
+        if (this.engine) {
+            // Update existing engine config
+            this.engine.updateConfig(config);
+            // If locale changed and engine is initialized, refresh
+            if (config.locale && config.locale !== this.engine.getCurrentLocale()) {
+                const wasInitialized = this.engine.isInitialized();
+                if (wasInitialized) {
+                    this.engine.setLocale(config.locale).catch(console.error);
+                }
+                else {
+                    this.engine.updateLocale(config.locale);
+                }
+            }
+        }
+    }
+    /**
+     * Check if two configs are equal
+     */
+    configEquals(a, b) {
+        if (!a || !b)
+            return a === b;
+        return (a.apiUrl === b.apiUrl &&
+            a.locale === b.locale &&
+            a.cacheTime === b.cacheTime &&
+            a.retryAttempts === b.retryAttempts &&
+            a.retryDelay === b.retryDelay);
+    }
+    /**
+     * Schedule auto-initialization
+     */
+    scheduleAutoInit() {
+        if (this.autoInitTimer) {
+            clearTimeout(this.autoInitTimer);
+        }
+        // Delay slightly to allow all providers to mount
+        this.autoInitTimer = setTimeout(() => {
+            this.autoInit().catch(console.error);
+        }, 10);
+    }
+    /**
+     * Auto-initialize the engine
+     */
+    async autoInit() {
+        if (!this.lastConfig || this.isInitializing)
+            return;
+        const engine = this.getOrCreateEngine();
+        // Only init if not already initialized
+        if (!engine.isInitialized() && !this.initPromise) {
+            await this.init();
+        }
+    }
+    /**
+     * Initialize the shared engine
+     */
+    async init(config) {
+        if (this.initPromise && !config) {
+            return this.initPromise;
+        }
+        if (config) {
+            this.updateGlobalConfig(config);
+        }
+        this.isInitializing = true;
+        this.updateGlobalState({ ...this.globalState, loading: true, error: null });
+        this.initPromise = (async () => {
+            try {
+                const engine = this.getOrCreateEngine(config);
+                await engine.init();
+                const data = engine.getData();
+                this.updateGlobalState({
+                    data,
+                    loading: false,
+                    error: null,
+                    lastFetch: new Date(),
+                });
+            }
+            catch (error) {
+                const err = error instanceof Error
+                    ? error
+                    : new Error("Failed to initialize dashboard");
+                this.updateGlobalState({
+                    ...this.globalState,
+                    loading: false,
+                    error: err,
+                });
+                throw err;
+            }
+            finally {
+                this.isInitializing = false;
+            }
+        })();
+        return this.initPromise;
+    }
+    /**
+     * Refresh the dashboard data
+     */
+    async refresh() {
+        if (!this.engine) {
+            return this.init();
+        }
+        this.updateGlobalState({ ...this.globalState, loading: true, error: null });
+        try {
+            await this.engine.refresh();
+            const data = this.engine.getData();
+            this.updateGlobalState({
+                data,
+                loading: false,
+                error: null,
+                lastFetch: new Date(),
+            });
+        }
+        catch (error) {
+            const err = error instanceof Error
+                ? error
+                : new Error("Failed to refresh dashboard");
+            this.updateGlobalState({
+                ...this.globalState,
+                loading: false,
+                error: err,
+            });
+            throw err;
+        }
+    }
+    /**
+     * Update locale globally
+     */
+    async setLocale(locale) {
+        if (!this.engine) {
+            // Update config for future initialization
+            if (this.lastConfig) {
+                this.lastConfig = { ...this.lastConfig, locale };
+            }
+            return;
+        }
+        await this.engine.setLocale(locale);
+    }
+    /**
+     * Get the current locale
+     */
+    getCurrentLocale() {
+        if (this.engine) {
+            return this.engine.getCurrentLocale();
+        }
+        return this.lastConfig?.locale || "en";
+    }
+    /**
+     * Subscribe to global state changes
+     */
+    subscribe(id, callback) {
+        const listener = { id, callback };
+        this.stateListeners.add(listener);
+        // Immediately call with current state
+        callback(this.globalState);
+        // Return unsubscribe function
+        return () => {
+            this.stateListeners.delete(listener);
+        };
+    }
+    /**
+     * Update and broadcast global state
+     */
+    updateGlobalState(state) {
+        this.globalState = state;
+        // Notify all listeners
+        this.stateListeners.forEach(listener => {
+            try {
+                listener.callback(state);
+            }
+            catch (error) {
+                console.error(`Error in state listener ${listener.id}:`, error);
+            }
+        });
+    }
+    /**
+     * Get the current global state
+     */
+    getState() {
+        return this.globalState;
+    }
+    /**
+     * Get the shared engine instance (if created)
+     */
+    getEngine() {
+        return this.engine;
+    }
+    /**
+     * Check if manager is initialized
+     */
+    isInitialized() {
+        return this.engine?.isInitialized() || false;
+    }
+    /**
+     * Get provider count
+     */
+    getProviderCount() {
+        return this.providers.size;
+    }
+    /**
+     * Reset the global manager (for testing)
+     */
+    static reset() {
+        if (GlobalDashboardManager.instance) {
+            const manager = GlobalDashboardManager.instance;
+            // Clear timers
+            if (manager.autoInitTimer) {
+                clearTimeout(manager.autoInitTimer);
+            }
+            // Clear listeners
+            manager.stateListeners.clear();
+            manager.providers.clear();
+            // Reset state
+            manager.globalState = {
+                data: null,
+                loading: false,
+                error: null,
+                lastFetch: null,
+            };
+            manager.initPromise = null;
+            manager.lastConfig = null;
+            manager.engine = null;
+        }
+        GlobalDashboardManager.instance = null;
+    }
+}
+GlobalDashboardManager.instance = null;

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useDashboard";
+export * from "./useBanner";
+export * from "./useApps";
+export * from "./useArticles";
+export * from "./useWhatsNew";
+export * from "./useGrowApps";

package/dist/hooks/index.js

@@ -0,0 +1,6 @@
+export * from "./useDashboard";
+export * from "./useBanner";
+export * from "./useApps";
+export * from "./useArticles";
+export * from "./useWhatsNew";
+export * from "./useGrowApps";

package/dist/hooks/useApps.d.ts

@@ -0,0 +1,3 @@
+import { AppItem, AppGroup } from "../types";
+export declare function useApps(group?: AppGroup): AppItem[];
+export declare function useAppGroups(): AppGroup[];

package/dist/hooks/useApps.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { useDashboardContext } from "../provider/DashboardProvider";
+export function useApps(group) {
+    const { engine, state } = useDashboardContext();
+    return useMemo(() => {
+        if (!engine || !state.data)
+            return [];
+        return engine.getApps(group);
+    }, [engine, group, state.data]);
+}
+export function useAppGroups() {
+    const { engine, state } = useDashboardContext();
+    return useMemo(() => {
+        if (!engine || !state.data)
+            return [];
+        return engine.getAppGroups();
+    }, [engine, state.data]);
+}