@webitel/ui-sdk 26.6.18 → 26.6.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.6.18",
+	"version": "26.6.19",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -91,6 +91,7 @@
 		"lodash-es": "^4.17.21",
 		"mitt": "^3.0.1",
 		"path-browserify": "^1.0.1",
+		"tiny-jsonc": "^1.0.2",
 		"vidstack": "^1.12.13",
 		"vue-i18n": "^11.1.2",
 		"vue-router": "^4.5.0",
@@ -320,6 +321,10 @@
 			"types": "./types/modules*",
 			"import": "./src/modules*"
 		},
+		"./modules/AppConfig": {
+			"types": "./types/modules/AppConfig/index.d.ts",
+			"import": "./src/modules/AppConfig/index.ts"
+		},
 		"./modules/Flow": {
 			"types": "./types/modules/Flow/index.d.ts",
 			"import": "./src/modules/Flow/index.ts"

package/src/modules/AppConfig/index.ts

@@ -0,0 +1,63 @@
+import deepmerge from 'deepmerge';
+import type { PartialDeep } from 'type-fest';
+
+import { fetchConfig } from './scripts/fetchConfig';
+
+// Config values overwrite, they don't accumulate — let the source array win.
+const overwriteArrays = (_destination: unknown[], source: unknown[]) => source;
+
+export interface AppConfigModule<T> {
+	/**
+	 * Returns the resolved config, initializing it on first access.
+	 */
+	getConfig: () => Promise<T>;
+	/**
+	 * Fetches and resolves the config, replacing any previously cached value.
+	 */
+	initializeConfig: () => Promise<T>;
+}
+
+/**
+ * Creates a reusable app config module.
+ *
+ * Each application provides its own config type `T` and a `defaultConfig` used
+ * as the base. The fetched runtime config (see {@link fetchConfig}) is deep-merged
+ * over the defaults.
+ *
+ * @example
+ * ```ts
+ * import { createAppConfig } from '@webitel/ui-sdk/modules/AppConfig';
+ * import { defaultConfig } from './defaults/defaultConfig';
+ * import type { AppConfig } from './types/AppConfig';
+ *
+ * export const { getConfig, initializeConfig } = createAppConfig<AppConfig>(defaultConfig);
+ * ```
+ */
+export function createAppConfig<T>(
+	defaultConfig: PartialDeep<T>,
+): AppConfigModule<T> {
+	let config: T;
+
+	async function initializeConfig(): Promise<T> {
+		const fetchedConfig = await fetchConfig<T>();
+		config = deepmerge<Partial<T>>(defaultConfig as Partial<T>, fetchedConfig, {
+			arrayMerge: overwriteArrays,
+		}) as T;
+		return config;
+	}
+
+	async function getConfig(): Promise<T> {
+		if (!config) {
+			config = await initializeConfig();
+		}
+		return config;
+	}
+
+	return {
+		getConfig,
+		initializeConfig,
+	};
+}
+
+export { fetchConfig };
+export type { PartialDeep };

package/src/modules/AppConfig/scripts/fetchConfig.ts

@@ -0,0 +1,43 @@
+import deepmerge from 'deepmerge';
+import jsoncParser from 'tiny-jsonc';
+
+// Config values overwrite, they don't accumulate — let the source array win.
+const overwriteArrays = (_destination: unknown[], source: unknown[]) => source;
+
+/**
+ * Fetches the application runtime config from static files served next to the app.
+ *
+ * Looks up `config.{json,jsonc}` and an optional `config.local.{json,jsonc}` overlay,
+ * with the local file taking priority. The shape of the returned object is
+ * application-specific, so the concrete type is provided by the caller.
+ */
+export async function fetchConfig<T>(): Promise<Partial<T>> {
+	return await fetchWithLocalConfigPriority<T>();
+}
+
+async function fetchWithLocalConfigPriority<T>(): Promise<Partial<T>> {
+	const localConfig = await fetchSupportedExtConfig('config.local');
+	const config = await fetchSupportedExtConfig('config');
+
+	return deepmerge(config ?? {}, localConfig ?? {}, {
+		arrayMerge: overwriteArrays,
+	}) as Partial<T>;
+}
+
+async function fetchSupportedExtConfig(fileName = 'config') {
+	const supportedExtensions = [
+		'.json',
+		'.jsonc',
+	];
+
+	for (const extension of supportedExtensions) {
+		try {
+			const response = await fetch(`./${fileName}${extension}`);
+			if (response.ok) {
+				const configText = await response.text();
+				return jsoncParser.parse(configText);
+			}
+		} catch {}
+	}
+	return null;
+}

package/types/modules/AppConfig/index.d.ts

@@ -0,0 +1,31 @@
+import type { PartialDeep } from 'type-fest';
+import { fetchConfig } from './scripts/fetchConfig';
+export interface AppConfigModule<T> {
+    /**
+     * Returns the resolved config, initializing it on first access.
+     */
+    getConfig: () => Promise<T>;
+    /**
+     * Fetches and resolves the config, replacing any previously cached value.
+     */
+    initializeConfig: () => Promise<T>;
+}
+/**
+ * Creates a reusable app config module.
+ *
+ * Each application provides its own config type `T` and a `defaultConfig` used
+ * as the base. The fetched runtime config (see {@link fetchConfig}) is deep-merged
+ * over the defaults.
+ *
+ * @example
+ * ```ts
+ * import { createAppConfig } from '@webitel/ui-sdk/modules/AppConfig';
+ * import { defaultConfig } from './defaults/defaultConfig';
+ * import type { AppConfig } from './types/AppConfig';
+ *
+ * export const { getConfig, initializeConfig } = createAppConfig<AppConfig>(defaultConfig);
+ * ```
+ */
+export declare function createAppConfig<T>(defaultConfig: PartialDeep<T>): AppConfigModule<T>;
+export { fetchConfig };
+export type { PartialDeep };

package/types/modules/AppConfig/scripts/fetchConfig.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Fetches the application runtime config from static files served next to the app.
+ *
+ * Looks up `config.{json,jsonc}` and an optional `config.local.{json,jsonc}` overlay,
+ * with the local file taking priority. The shape of the returned object is
+ * application-specific, so the concrete type is provided by the caller.
+ */
+export declare function fetchConfig<T>(): Promise<Partial<T>>;