Skip to main content
Glama
useLoadDynamic.ts1.41 kB
import { reactive } from 'vue'; /** * A "synchronous" loader for a dynamically‐imported JSON (or anything). * * - Immediately returns a reactive object so that Vue can properly track changes. * - When the Promise resolves, it replaces the object's properties with the real data. */ export const useLoadDynamic = <T extends Record<string, any>>( key: string, promise: Promise<T> ): T => { // A module‐level cache of Promises, so we only import once per key. const cache: Map<string, Promise<T>> = (useLoadDynamic as any)._cache ?? // biome-ignore lint/suspicious/noAssignInExpressions: <To fix the error> ((useLoadDynamic as any)._cache = new Map()); // Hold the "current" value as a reactive object // This starts as an empty object but Vue can track changes to it const container = reactive({} as T); if (!cache.has(key)) { // Kick off the dynamic import & cache it const p = promise.then((real) => { // As soon as the import resolves, populate the container with the real data Object.assign(container, real); return real; }); cache.set(key, p); } else { // If it's already in flight (or done), hook into it so that the container still updates cache.get(key)?.then((real) => { Object.assign(container, real); }); } // Return the reactive container directly - Vue can track all changes to it return container as T; };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/aymericzip/intlayer'

If you have feedback or need assistance with the MCP directory API, please join our Discord server