# Learn the API

Now that we've created a host application, loaded a few modules and registered routes and navigation items, let's delve into the APIs provided by this shell.

In an effort to optimize the development experience, Squide can be bootstrapped in development or production mode:

import { FireflyRuntime, ConsoleLogger, type LogLevel } from "@squide/firefly";

const runtime = new FireflyRuntime({
    mode: "production"
});

By default, the Runtime mode is development.

Squide includes a built-in logging feature that integrates with the FireflyRuntime class and the useLogger hook.

First, register your own custom logger by implementing the Logger interface or register Squide built-in ConsoleLogger:

import { FireflyRuntime, ConsoleLogger, type LogLevel } from "@squide/firefly";

const runtime = new FireflyRuntime({
    loggers: [x => new ConsoleLogger(x, LogLevel.debug)]
});

Then, log entries from any parts of your modular application with the useLogger hook:

import { useLogger } from "@squide/firefly";

const logger = useLogger();

logger.debug("Hello", { world: "!" });

Or the useLoggers hook to target specific logger instances:

import { useLoggers, ConsoleLogger } from "@squide/firefly";

const logger = useLoggers([ConsoleLogger.name]);

logger.debug("Hello", { world: "!" });

The logger is also available from the FireflyRuntime instance.

It's crucial that the parts of a modular application remains loosely coupled. To help with that, Squide offers a built-in Event Bus.

First, listen to an event with the useEventBusListener hook:

import { useCallback } from "react";
import { useEventBusListener } from "@squide/firefly";

const handleFoo = useCallback((data, context) => {
    // do something...
}, []);

useEventBusListener("foo", handleFoo);

Then, dispatch an event from anywhere with the useEventBusDispatcher hook:

import { useEventDispatcher } from "@squide/firefly";

const dispatch = useEventBusDispatcher();

dispatch("foo", "bar");

You can use the event bus to enable various communication scenarios, such as notifying components of state changes, broadcasting messages across modules, or triggering actions based on specific events.

The event bus is also available from the FireflyRuntime instance.

To keep Squide lightweight, not all functionalities should be integrated as a core functionality. However, to accommodate a broad range of technologies, a plugin system has been implemented to fill the gap.

Plugins can be registered at bootstrapping with the FireflyRuntime instance:

import { FireflyRuntime } from "@squide/firefly";
import { MyPlugin } from "@sample/my-plugin";

const runtime = new FireflyRuntime({
    plugins: [x => new MyPlugin(x)]
});

And can be accessed from any parts of the application with the usePlugin hook:

import { usePlugin } from "@squide/firefly";
import { MyPlugin } from "@sample/my-plugin";

const myPlugin = usePlugin(MyPlugin.name) as MyPlugin;

A plugin can also be retrieved from the FireflyRuntime instance.

By default, the FireflyRuntime registers Squide's MSW plugin. An optional i18next plugin is available.

Hooks are available to retrieve global application data using TanStack Query. To fetch public data, use the usePublicDataQueries hook:

import { usePublicDataQueries } from "@squide/firefly";

const [featureFlags] = usePublicDataQueries([
{
    queryKey: ["/api/feature-flags"],
    queryFn: async () => {
        const response = await fetch("/api/feature-flags");

        return response.json();
    }
}
]);

To retrieve protected data, use the useProtectedDataQueries hook instead:

import { useProtectedDataQueries } from "@squide/firefly";
import { ApiError } from "@sample/shared";

const [session, subscription] = useProtectedDataQueries([
    {
        queryKey: ["/api/session"],
        queryFn: async () => {
            const response = await fetch("/api/session");

            return response.json();
        }
    },
    {
        queryKey: ["/api/subscription"],
        queryFn: async () => {
            const response = await fetch("/api/subscription");

            await response.json();
        }
    }
], error => isApiError(error) && error.status === 401);

If an unmanaged error occur while retrieving the data, a GlobalDataQueriesError is thrown.

Take a look at the fake implementations. These implementations are designed to facilitate the set up of a module isolated environment.

Explore the guides section to learn about Squide advanced features.

Be sure to read, at a minimum, the following guides:

• Setup Mock Service Worker
• Fetch global data
• Fetch page data
• Manage shared state
• Isolate module failures
• Add authentication
• Add a shared dependency

For a comprehensive list of the Squide API, refer to the reference section.

Finally, have a look at the sample applications to see the Squide API in action.