@myelophone/nuxt 0.18.2

package/app/composables/useScriptLoader.ts

@@ -0,0 +1,221 @@
+import type {
+	CookieScriptsConfig,
+	CookieScriptDef,
+	CookieCategory,
+	CookiePreferences,
+} from '~/types/cookie';
+import { useMyelophoneConfig } from '~/utils/myelophoneConfig';
+
+type CookieScriptEntry = {
+	category: CookieCategory;
+	script: CookieScriptDef;
+};
+
+export const useScriptLoader = () => {
+	const config = useMyelophoneConfig();
+	const scriptsConfig = config.cookieScripts as CookieScriptsConfig;
+	const loadedScripts = reactive(new Set<string>());
+	const initializedScripts = reactive(new Set<string>());
+	const executedInitializers = reactive(new Set<string>());
+	const appliedCategorySettings = reactive(new Set<string>());
+
+	const getScriptLoadKey = (script: CookieScriptDef) =>
+		script.loadKey || script.src || `inline:${script.id}`;
+
+	const getScriptSettingsKey = (
+		script: CookieScriptDef,
+		category: CookieCategory,
+	) =>
+		`${script.id}:${category}:${script.src || script.code || script.loadKey || ''}`;
+
+	const getAllScriptEntries = (): CookieScriptEntry[] =>
+		Object.entries(scriptsConfig || {}).flatMap(([category, scripts]) =>
+			(scripts || []).map((script) => ({
+				category: category as CookieCategory,
+				script,
+			})),
+		);
+
+	const getAllowedScriptEntries = (
+		allowedCategories: Set<CookieCategory>,
+	) => {
+		const seen = new Set<string>();
+
+		return getAllScriptEntries().filter(({ category, script }) => {
+			const settingsKey = getScriptSettingsKey(script, category);
+			if (!allowedCategories.has(category) || seen.has(settingsKey)) {
+				return false;
+			}
+
+			seen.add(settingsKey);
+			return true;
+		});
+	};
+
+	const getAllowedCategories = (prefs?: CookiePreferences) => {
+		const allowed = new Set<CookieCategory>(['necessary']);
+
+		if (prefs?.status === 'accepted' || prefs?.status === 'declined') {
+			if (prefs.analytics) allowed.add('analytics');
+			if (prefs.marketing) allowed.add('marketing');
+			if (prefs.functional) allowed.add('functional');
+		}
+
+		return allowed;
+	};
+
+	const createExecutionContext = (
+		script: CookieScriptDef,
+		allowedCategories: Set<CookieCategory>,
+	) => ({
+		script,
+		allowedCategories: Array.from(allowedCategories),
+		categories: {
+			necessary: allowedCategories.has('necessary'),
+			analytics: allowedCategories.has('analytics'),
+			marketing: allowedCategories.has('marketing'),
+			functional: allowedCategories.has('functional'),
+		},
+		isAllowed: (category: CookieCategory) =>
+			allowedCategories.has(category),
+	});
+
+	const runClientCode = (
+		code: string | undefined,
+		script: CookieScriptDef,
+		allowedCategories: Set<CookieCategory>,
+	) => {
+		if (!code || !import.meta.client) return;
+
+		try {
+			Function(
+				'context',
+				code,
+			)(createExecutionContext(script, allowedCategories));
+		} catch (e) {
+			console.error(`Error running cookie script hook ${script.id}:`, e);
+		}
+	};
+
+	const runInitializers = (
+		def: CookieScriptDef,
+		allowedCategories: Set<CookieCategory>,
+		initializers = def.initializers || [],
+	) => {
+		initializers.forEach((initializer) => {
+			if (executedInitializers.has(initializer.key)) return;
+
+			runClientCode(initializer.code, def, allowedCategories);
+			executedInitializers.add(initializer.key);
+		});
+	};
+
+	const applyScriptSettings = (
+		def: CookieScriptDef,
+		category: CookieCategory,
+		allowedCategories: Set<CookieCategory>,
+	) => {
+		runInitializers(def, allowedCategories);
+
+		if (!initializedScripts.has(def.id)) {
+			runClientCode(def.beforeLoad, def, allowedCategories);
+			initializedScripts.add(def.id);
+		}
+
+		const settings = def.categorySettings?.[category];
+		const settingsKey = getScriptSettingsKey(def, category);
+		if (!settings || appliedCategorySettings.has(settingsKey)) {
+			runClientCode(def.onConsentChange, def, allowedCategories);
+			return;
+		}
+
+		runInitializers(def, allowedCategories, settings.initializers);
+		runClientCode(settings.beforeLoad, def, allowedCategories);
+		runClientCode(settings.onConsentChange, def, allowedCategories);
+		appliedCategorySettings.add(settingsKey);
+
+		runClientCode(def.onConsentChange, def, allowedCategories);
+	};
+
+	const loadScriptGroup = (
+		loadKey: string,
+		entries: CookieScriptEntry[],
+		allowedCategories: Set<CookieCategory>,
+	) => {
+		entries.forEach(({ category, script }) => {
+			applyScriptSettings(script, category, allowedCategories);
+		});
+
+		if (loadedScripts.has(loadKey)) return;
+
+		const def = entries.find(
+			({ script }) => script.src || script.code,
+		)?.script;
+		if (!def) return;
+
+		if (import.meta.dev) {
+			console.log(`[DEV-MOCK] Loading script: [${def.id}] ${loadKey}`);
+			loadedScripts.add(loadKey);
+			return;
+		}
+
+		try {
+			if (def.src) {
+				useScript(def.src, {
+					...def.options,
+					scriptAttributes: {
+						'data-cookie-script-key': loadKey,
+						'data-cookie-categories':
+							Array.from(allowedCategories).join(','),
+						...def.options?.scriptAttributes,
+					},
+				});
+			} else if (def.code) {
+				useScript({
+					innerHTML: def.code,
+					...def.options,
+				});
+			}
+			loadedScripts.add(loadKey);
+		} catch (e) {
+			console.error(`Error loading script ${def.id}:`, e);
+		}
+	};
+
+	const loadAllowedScripts = (allowedCategories: Set<CookieCategory>) => {
+		const scriptGroups = new Map<string, CookieScriptEntry[]>();
+
+		getAllowedScriptEntries(allowedCategories).forEach((entry) => {
+			const loadKey = getScriptLoadKey(entry.script);
+			scriptGroups.set(loadKey, [
+				...(scriptGroups.get(loadKey) || []),
+				entry,
+			]);
+		});
+
+		scriptGroups.forEach((entries, loadKey) => {
+			loadScriptGroup(loadKey, entries, allowedCategories);
+		});
+	};
+
+	const initScripts = () => {
+		if (!import.meta.client) return;
+
+		const { cookiePreferences } = useCookieControl();
+
+		onNuxtReady(() => {
+			watch(
+				() => cookiePreferences.value,
+				(prefs) => {
+					loadAllowedScripts(getAllowedCategories(prefs));
+				},
+				{ deep: true, immediate: true },
+			);
+		});
+	};
+
+	return {
+		initScripts,
+		allScriptsConfig: scriptsConfig,
+	};
+};

package/app/composables/useSiteSearch.ts

@@ -0,0 +1,32 @@
+import { UI_SITE_SEARCH_OPEN_EVENT } from '~/constants/ui-events';
+
+export function openSiteSearch(preset = '', immediate = true) {
+	if (typeof window !== 'undefined') {
+		window.dispatchEvent(
+			new CustomEvent(UI_SITE_SEARCH_OPEN_EVENT, {
+				detail: { preset, immediate },
+			}),
+		);
+	}
+}
+
+export function closeSiteSearch() {
+	if (typeof window !== 'undefined') {
+		window.dispatchEvent(new CustomEvent('myelophone:site-search-close'));
+	}
+}
+
+export function useSiteSearch() {
+	const open = (preset = '', immediate = true) => {
+		openSiteSearch(preset, immediate);
+	};
+
+	const close = () => {
+		closeSiteSearch();
+	};
+
+	return {
+		open,
+		close,
+	};
+}

package/app/composables/useSnapScroll.ts

@@ -0,0 +1,24 @@
+const resetRegistry = new Set<() => void>();
+
+export const useSnapScroll = () => {
+	const registerContainer = (resetFn: () => void) => {
+		onMounted(() => {
+			resetRegistry.add(resetFn);
+		});
+		onUnmounted(() => {
+			resetRegistry.delete(resetFn);
+		});
+	};
+
+	const scrollToTop = () => {
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+
+		resetRegistry.forEach((reset) => {
+			try {
+				reset();
+			} catch (e) {}
+		});
+	};
+
+	return { registerContainer, scrollToTop };
+};

package/app/composables/useStatic.ts

@@ -0,0 +1,5 @@
+export const useStatic = () => {
+	return computed(() => {
+		return process.env.NUXT_STATIC === 'true';
+	});
+};

package/app/composables/useStorage.ts

@@ -0,0 +1,252 @@
+type StorageKind = 'local' | 'session' | 'cookie';
+
+interface Serializer<T> {
+	read: (value: string) => T;
+	write: (value: T) => string;
+}
+
+interface StorageOptions<T> {
+	storage?: StorageKind;
+	fallbackStorage?: Exclude<StorageKind, 'cookie'>;
+	expires?: number;
+	path?: string;
+	deep?: boolean;
+	syncTabs?: boolean;
+	writeDefault?: boolean;
+	serializer?: Serializer<T>;
+	canUseCookie?: () => boolean;
+	shouldPersist?: (value: T) => boolean;
+}
+
+const jsonSerializer = <T>(): Serializer<T> => ({
+	read: (value) => JSON.parse(value) as T,
+	write: (value) => JSON.stringify(toRaw(value)),
+});
+
+const cloneValue = <T>(value: T): T => {
+	if (typeof structuredClone === 'function') return structuredClone(value);
+	return JSON.parse(JSON.stringify(value)) as T;
+};
+
+const isStorageAvailable = (kind: Exclude<StorageKind, 'cookie'>) => {
+	if (!import.meta.client) return false;
+
+	try {
+		const storage = kind === 'session' ? sessionStorage : localStorage;
+		const key = '__storage_test__';
+		storage.setItem(key, key);
+		storage.removeItem(key);
+		return true;
+	} catch {
+		return false;
+	}
+};
+
+export function useStorage<T>(
+	key: string,
+	defaultValue: T,
+	options: StorageOptions<T> = {},
+): { value: Ref<T>; remove: () => void; refresh: () => void } {
+	const {
+		storage: preferred = 'local',
+		fallbackStorage = 'local',
+		expires = 365,
+		path = '/',
+		deep = true,
+		syncTabs = true,
+		writeDefault = true,
+		serializer = jsonSerializer<T>(),
+		canUseCookie = () => true,
+		shouldPersist = () => true,
+	} = options;
+
+	const getDefaultValue = () => cloneValue(defaultValue);
+	const state = ref<T>(getDefaultValue()) as Ref<T>;
+	let broadcast: BroadcastChannel | null = null;
+	let isApplyingExternalUpdate = false;
+	let isRemoving = false;
+
+	const canUsePreferredCookie = () =>
+		preferred === 'cookie' && canUseCookie();
+
+	const getEffectiveStorage = (): StorageKind => {
+		if (preferred !== 'cookie') return preferred;
+		return canUsePreferredCookie() ? 'cookie' : fallbackStorage;
+	};
+
+	const getWebStorage = (kind = getEffectiveStorage()) => {
+		if (kind === 'cookie' || !isStorageAvailable(kind)) return null;
+		return kind === 'session' ? sessionStorage : localStorage;
+	};
+
+	const read = (): T => {
+		const storageKind = getEffectiveStorage();
+
+		if (storageKind === 'cookie') {
+			const cookie = useCookie<T | null>(key, {
+				path,
+				maxAge: expires * 86400,
+			});
+			return cookie.value ?? getDefaultValue();
+		}
+
+		const storage = getWebStorage();
+		if (!storage) return getDefaultValue();
+
+		try {
+			const raw = storage.getItem(key);
+			return raw === null ? getDefaultValue() : serializer.read(raw);
+		} catch (error) {
+			console.warn(`[useStorage:${key}] failed to read`, error);
+			return getDefaultValue();
+		}
+	};
+
+	const write = (value: T) => {
+		if (!shouldPersist(value)) {
+			clearStoredValue();
+			return;
+		}
+
+		const storageKind = getEffectiveStorage();
+
+		if (storageKind === 'cookie') {
+			const cookie = useCookie<T>(key, {
+				path,
+				maxAge: expires * 86400,
+			});
+			cookie.value = value;
+			return;
+		}
+
+		if (preferred === 'cookie') {
+			const cookie = useCookie<T | null>(key, { path });
+			cookie.value = null;
+		}
+
+		const storage = getWebStorage();
+		if (!storage) return;
+
+		try {
+			storage.setItem(key, serializer.write(value));
+		} catch (error) {
+			console.warn(`[useStorage:${key}] failed to write`, error);
+		}
+	};
+
+	const clearStoredValue = () => {
+		if (preferred === 'cookie') {
+			const cookie = useCookie<T | null>(key, { path });
+			cookie.value = null;
+		}
+
+		const storage = getWebStorage(
+			preferred === 'cookie' ? fallbackStorage : preferred,
+		);
+		storage?.removeItem(key);
+	};
+
+	const remove = () => {
+		try {
+			isRemoving = true;
+			state.value = getDefaultValue();
+		} finally {
+			isRemoving = false;
+		}
+
+		clearStoredValue();
+		broadcast?.postMessage({ type: 'remove' });
+	};
+
+	const refresh = () => {
+		state.value = read();
+	};
+
+	const shouldDeferClientRead =
+		import.meta.client && getEffectiveStorage() !== 'cookie';
+
+	if (!shouldDeferClientRead) {
+		state.value = read();
+		if (writeDefault) write(state.value);
+	}
+
+	if (import.meta.client && syncTabs && 'BroadcastChannel' in window) {
+		broadcast = new BroadcastChannel(`useStorage:${key}`);
+		broadcast.onmessage = (event) => {
+			if (!['update', 'remove'].includes(event.data?.type)) return;
+
+			try {
+				isApplyingExternalUpdate = true;
+				state.value =
+					event.data.type === 'remove'
+						? getDefaultValue()
+						: (event.data.value as T);
+				if (event.data.type === 'remove') clearStoredValue();
+			} finally {
+				isApplyingExternalUpdate = false;
+			}
+		};
+	}
+
+	const stop = watch(
+		state,
+		(value) => {
+			write(value);
+
+			if (!isApplyingExternalUpdate && !isRemoving) {
+				broadcast?.postMessage({
+					type: 'update',
+					value: cloneValue(toRaw(value) as T),
+				});
+			}
+		},
+		{ deep, flush: 'sync' },
+	);
+
+	const handleStorage = (event: StorageEvent) => {
+		if (event.key !== key) return;
+
+		try {
+			isApplyingExternalUpdate = true;
+			state.value =
+				event.newValue === null
+					? getDefaultValue()
+					: serializer.read(event.newValue);
+		} catch (error) {
+			console.warn(
+				`[useStorage:${key}] failed to sync storage event`,
+				error,
+			);
+		} finally {
+			isApplyingExternalUpdate = false;
+		}
+	};
+
+	if (import.meta.client && syncTabs && getEffectiveStorage() === 'local') {
+		window.addEventListener('storage', handleStorage);
+	}
+
+	if (shouldDeferClientRead) {
+		window.setTimeout(() => {
+			state.value = read();
+			if (writeDefault) write(state.value);
+		}, 0);
+	}
+
+	const cleanup = () => {
+		stop();
+		broadcast?.close();
+
+		if (
+			import.meta.client &&
+			syncTabs &&
+			getEffectiveStorage() === 'local'
+		) {
+			window.removeEventListener('storage', handleStorage);
+		}
+	};
+
+	if (getCurrentScope()) onScopeDispose(cleanup);
+
+	return { value: state, remove, refresh };
+}

package/app/composables/useStoreBroadcast.ts

@@ -0,0 +1,146 @@
+type StoreBroadcastValue =
+	| string
+	| number
+	| boolean
+	| null
+	| StoreBroadcastValue[]
+	| { [key: string]: StoreBroadcastValue };
+
+type StoreBroadcastPayload = Record<string, StoreBroadcastValue>;
+
+interface BroadcastableStore {
+	$id?: string;
+	$patch: (value: Record<string, unknown>) => void;
+	[key: string]: unknown;
+}
+
+interface StoreBroadcastOptions<TStore extends BroadcastableStore> {
+	keys: readonly (Extract<keyof TStore, string> | string)[];
+	channel?: string;
+}
+
+interface StoreBroadcastMessage {
+	source: string;
+	store: string;
+	payload: StoreBroadcastPayload;
+	createdAt: number;
+}
+
+const sourceId =
+	typeof crypto !== 'undefined' && 'randomUUID' in crypto
+		? crypto.randomUUID()
+		: `${Date.now()}:${Math.random()}`;
+
+const toBroadcastValue = (value: unknown): StoreBroadcastValue => {
+	const seen = new WeakSet<object>();
+
+	const normalize = (input: unknown): StoreBroadcastValue => {
+		if (
+			input === null ||
+			typeof input === 'string' ||
+			typeof input === 'number' ||
+			typeof input === 'boolean'
+		) {
+			return input;
+		}
+
+		if (input instanceof Date) return input.toISOString();
+		if (typeof input !== 'object') return null;
+		if (seen.has(input)) return null;
+
+		seen.add(input);
+
+		if (Array.isArray(input)) {
+			return input.map((item) => normalize(item));
+		}
+
+		return Object.fromEntries(
+			Object.entries(input).map(([key, item]) => [key, normalize(item)]),
+		);
+	};
+
+	return normalize(value);
+};
+
+export function useStoreBroadcast<TStore extends BroadcastableStore>(
+	store: TStore,
+	options: StoreBroadcastOptions<TStore>,
+) {
+	if (!import.meta.client || !options.keys.length) {
+		return () => {};
+	}
+
+	const storeId = store.$id || 'store';
+	const channelName = options.channel || `pinia:${storeId}`;
+	const keys = [...options.keys].map(String);
+	const channel =
+		'BroadcastChannel' in window ? new BroadcastChannel(channelName) : null;
+
+	let isApplyingRemote = false;
+	let lastSerialized = '';
+
+	const snapshot = () =>
+		Object.fromEntries(
+			keys.map((key) => [key, toBroadcastValue(store[key])]),
+		) as StoreBroadcastPayload;
+
+	const post = (payload: StoreBroadcastPayload) => {
+		const message: StoreBroadcastMessage = {
+			source: sourceId,
+			store: storeId,
+			payload,
+			createdAt: Date.now(),
+		};
+
+		channel?.postMessage(message);
+	};
+
+	const apply = (message: StoreBroadcastMessage) => {
+		if (
+			message.source === sourceId ||
+			message.store !== storeId ||
+			!message.payload
+		) {
+			return;
+		}
+
+		isApplyingRemote = true;
+		try {
+			store.$patch(message.payload);
+			lastSerialized = JSON.stringify(snapshot());
+		} finally {
+			isApplyingRemote = false;
+		}
+	};
+
+	channel?.addEventListener('message', (event: MessageEvent) => {
+		apply(event.data as StoreBroadcastMessage);
+	});
+
+	const stopWatch = watch(
+		snapshot,
+		(payload) => {
+			if (isApplyingRemote) return;
+
+			const serialized = JSON.stringify(payload);
+			if (serialized === lastSerialized) return;
+
+			lastSerialized = serialized;
+			post(payload);
+		},
+		{ deep: true, flush: 'post' },
+	);
+
+	lastSerialized = JSON.stringify(snapshot());
+
+	const stop = () => {
+		stopWatch();
+		channel?.close();
+	};
+
+	if (getCurrentInstance()) {
+		onScopeDispose(stop);
+	}
+
+	return stop;
+}