npm package: @silicon-hawk/data-fetching-component
Description: Framework-agnostic data fetching package with support for sync/async and SSR/CSR operations
Latest version: 1.0.2

## DEMO Function/usage for the component.

```javascript

type UserData = {
    id: number;
    name: string;
};

// Dummy asynchronous fetcher function
async function asyncFetchUserData(): Promise<UserData> {
    // Simulate an async operation (e.g., API call)
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: 1, name: 'John Doe (async)' });
        }, 500);
    });
}

// Dummy synchronous fetcher function
function syncFetchUserData(): UserData {
    // Simulate a synchronous operation
    return { id: 2, name: 'Jane Doe (sync)' };
}

// Configuration for local file system fetching (server mode)
// Ensure that the file exists at the given path or this will throw an error.
const localConfig: FetchConfig = {
    mode: 'server',
    path: path.resolve(__dirname, 'data', 'user.json') // e.g., ./data/user.json
};

// Configuration for remote fetching (client mode)
const remoteConfig: FetchConfig = {
    mode: 'client',
    url: 'https://jsonplaceholder.typicode.com/users/1'
};

// Create asynchronous fetchers using the factory functions
const asyncLargeUserFetcher = CreateAsyncLarge(asyncFetchUserData, localConfig);
const asyncSmallUserFetcher = CreateAsyncSmall(asyncFetchUserData, remoteConfig);

// Create synchronous fetchers using the factory functions
const syncLargeUserFetcher = CreateSyncLarge(syncFetchUserData, localConfig);
const syncSmallUserFetcher = CreateSyncSmall(syncFetchUserData, remoteConfig);

// Register fetchers in the global registry for later retrieval if needed
globalRegistry.register(asyncFetchUserData, 'asyncUserLocal', localConfig);
globalRegistry.register(syncFetchUserData, 'syncUserLocal', localConfig);
globalRegistry.register(asyncFetchUserData, 'asyncUserRemote', remoteConfig);
globalRegistry.register(syncFetchUserData, 'syncUserRemote', remoteConfig);

async function runDemo() { 
    console.log('--- Async Large (Local File) ---');
    try {
        const localAsyncData = await asyncLargeUserFetcher();
        console.log('Async Local Data:', localAsyncData);
    } catch (error) {
        console.error('Error in asyncLarge (local):', error);
    }

    console.log('\n--- Async Small (Remote URL) ---');
    try {
        const remoteAsyncData = await asyncSmallUserFetcher();
        console.log('Async Remote Data:', remoteAsyncData);
    } catch (error) {
        console.error('Error in asyncSmall (remote):', error);
    }

    console.log('\n--- Sync Large (Local File) ---');
    try {
        const localSyncData = syncLargeUserFetcher();
        console.log('Sync Local Data:', localSyncData);
    } catch (error) {
        console.error('Error in syncLarge (local):', error);
    }

    console.log('\n--- Sync Small (Fallback to Fetcher) ---');
    try {
        const remoteSyncData = syncSmallUserFetcher();
        console.log('Sync Remote Data (fallback):', remoteSyncData);
    } catch (error) {
        console.error('Error in syncSmall (fallback):', error);
    }

    console.log('\n--- Fetcher Registry Demo ---');
    const registeredFetcher = globalRegistry.get<UserData>('asyncUserLocal');
    if (registeredFetcher) {
        try {
            const registryData = await registeredFetcher.fetcher();
            console.log('Data from registry (async local):', registryData);
        } catch (error) {
            console.error('Error executing registered fetcher:', error);
        }
    } else {
        console.error('No fetcher found for key "asyncUserLocal"');
    }
}

runDemo();

```