Modification - Make getThemeConfig utility work with individual theme files #267

Author: graphieros

src/getThemeConfig.js

@@ -1,5 +1,55 @@
-import themes from "./themes.json";
+const _globLoaders = import.meta.glob('./themes/*.json', { import: 'default' });
 
-export default function getThemeConfig(type) {
-    return themes[type]
-}
+const THEME_LOADERS = Object.fromEntries(
+    Object.entries(_globLoaders).map(([path, load]) => {
+        const m = path.match(/\/themes\/(.+)\.json$/);
+        const type = m ? m[1] : path;
+        return [type, load];
+    })
+);
+
+const _cache = new Map();
+
+let _loader = async (type) => {
+    const load = THEME_LOADERS[type];
+    if (!load) {
+        const err = new Error('ENOENT');
+        err.code = 'ENOENT';
+        throw err;
+    }
+    return await load();
+};
+
+async function getThemeConfig(type) {
+    if (!type) return null;
+    if (_cache.has(type)) return _cache.get(type);
+    try {
+        const theme = await _loader(type);
+        _cache.set(type, theme);
+        return theme;
+    } catch (e) {
+        console.warn(`[getThemeConfig] Missing theme file: ${type}.json`, e);
+        return null;
+    }
+}
+
+export default getThemeConfig;
+export { getThemeConfig };
+
+export function getThemeConfigSync(type) {
+    if (!type) return null;
+    return _cache.get(type) ?? null;
+}
+
+export async function preloadTheme(type) {
+    return await getThemeConfig(type);
+}
+export async function preloadThemes(types = []) {
+    return Promise.all(types.map(getThemeConfig));
+}
+
+export const __testing = {
+    clearCache: () => _cache.clear(),
+    cacheSize: () => _cache.size,
+    setLoader: (fn) => { _loader = fn; },
+};

tests/getThemeConfig.test.js

@@ -1,62 +1,60 @@
-import { expect, test, describe } from "vitest";
-import sut from '../src/themes.json'
-import getThemeConfig from "../src/getThemeConfig";
-
-const components = [
-    '3d_bar',
-    'age_pyramid',
-    'candlestick',
-    'chestnut',
-    'donut',
-    'donut_evolution',
-    'dumbbell',
-    'galaxy',
-    'gauge',
-    'heatmap',
-    'molecule',
-    'mood_radar',
-    'nested_donuts',
-    'onion',
-    'parallel_coordinate_plot',
-    'quadrant',
-    'quick_chart',
-    'radar',
-    'relation_circle',
-    'rings',
-    'scatter',
-    'spark_trend',
-    'sparkbar',
-    'sparkgauge',
-    'sparkhistogram',
-    'sparkline',
-    'sparkstackbar',
-    'strip_plot',
-    'table_heatmap',
-    'table_sparkline',
-    'thermometer',
-    'tiremarks',
-    'treemap',
-    'vertical_bar',
-    'waffle',
-    'wheel',
-    'xy',
-    'xy_canvas'
-]
-
-const themes = [
-    "default",
-    "zen",
-    "hack",
-    "concrete"
-]
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { preloadTheme, getThemeConfigSync, __testing } from '../src/getThemeConfig';
 
 describe('getThemeConfig', () => {
-    components.forEach(component => {
-        themes.forEach(theme => {
-            test(`returns vue_ui_${component} ${theme} theme`, () => {
-                expect(getThemeConfig(`vue_ui_${component}`)[theme]).not.toBeUndefined()
-                expect(getThemeConfig(`vue_ui_${component}`)[theme]).toStrictEqual(sut[`vue_ui_${component}`][theme])
-            })
-        })
-    })
-})
+    let calls;
+    let loader;
+
+    beforeEach(() => {
+        __testing.clearCache();
+        calls = 0;
+
+        // Fake loader so tests don't touch the real filesystem
+        loader = vi.fn(async (type) => {
+            calls += 1;
+            if (type === 'vue_ui_chord') {
+                return { debug: true };
+            }
+            const err = new Error('ENOENT');
+            err.code = 'ENOENT';
+            throw err;
+        });
+
+        __testing.setLoader(loader);
+    });
+
+    test('returns theme object when JSON file exists (after preload)', async () => {
+        await preloadTheme('vue_ui_chord');                 // loads once
+        const theme = getThemeConfigSync('vue_ui_chord');   // sync read
+        expect(theme).toEqual({ debug: true });
+        expect(calls).toBe(1);
+    });
+
+    test('returns null when theme file does not exist', async () => {
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+        const res = await preloadTheme('non_existing_theme');
+        expect(res).toBeNull();
+        expect(warnSpy).toHaveBeenCalled();
+        expect(calls).toBe(1);
+        const theme = getThemeConfigSync('non_existing_theme');
+        expect(theme).toBeNull();
+        warnSpy.mockRestore();
+    });
+
+    test('uses cached theme on second call (module loaded once)', async () => {
+        await preloadTheme('vue_ui_chord');                   // first (and only) load
+        const first = getThemeConfigSync('vue_ui_chord');    // from cache
+        const second = getThemeConfigSync('vue_ui_chord');    // from cache
+        expect(second).toBe(first);                           // same ref
+        expect(calls).toBe(1);                                // loader once
+        expect(__testing.cacheSize()).toBe(1);
+    });
+
+    test('returns null when called with undefined or empty type', () => {
+        const a = getThemeConfigSync();
+        const b = getThemeConfigSync('');
+        expect(a).toBeNull();
+        expect(b).toBeNull();
+        expect(calls).toBe(0);
+    });
+});