# Migrate to firefly v12.0

This major version introduces a new initializeFirefly function, replacing the bootstrap function. This new initializeFirefly function is similar the previous bootstrap function with the addition that it takes care of creating and returning a Runtime instance.

This major version introduces a new initializeFirefly function that replaces the legacy bootstrap function. In addition to providing similar functionality, initializeFirefly creates and returns a Runtime instance.

# Breaking changes

# Removed

  • The bootstrap function has been removed, use the initializeFirefly function instead.
  • The waitForMsw property has been removed from the AppRouter component.

# Replaced bootstrap by initializeFirefly

The bootstrap function has been replaced by the initializeFirefly function. This new function behaves similarly to the former `bootstrap function, accepting all its previous arguments, but additionally creates and returns a Runtime instance.

Before:

bootstrap.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, FireflyProvider, FireflyRuntime, bootstrap, type RemoteDefinition } from "@squide/firefly";
import { App } from "./App.tsx";

// Define the remote modules.
const Remotes: RemoteDefinition[] = [
    { name: "remote1" }
];

// Create the shell runtime.
const runtime = new FireflyRuntime({
    loggers: [x => new ConsoleLogger(x)]
});

// Register the remote module.
bootstrap(runtime, {
    remotes: Remotes
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

Now:

bootstrap.tsx
import { createRoot } from "react-dom/client";
import { ConsoleLogger, FireflyProvider, initializeFirefly, type RemoteDefinition } from "@squide/firefly";
import { App } from "./App.tsx";

// Define the remote modules.
const Remotes: RemoteDefinition[] = [
    { name: "remote1" }
];

const runtime = initializeFirefly(runtime, {
    remotes: Remotes,
    loggers: [x => new ConsoleLogger(x)]
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

# Remove the waitForMsw property of AppRouter

Because the initializeFirefly function accepts the useMsw option, the Squide Firefly state machine automatically detects when the application is using Mock Service Worker, eliminating the need to specify the value again.

Before:

AppRouter.tsx
import { AppRouter } from "@squide/firefly";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";

export function App() {
    return (
        <AppRouter waitForMsw>
            {({ rootRoute, registeredRoutes, routerProviderProps }) => {
                return (
                    <RouterProvider
                        router={createBrowserRouter([
                            {
                                element: rootRoute,
                                children: registeredRoutes
                            }
                        ])}
                        {...routerProviderProps}
                    />
                );
            }}
        </AppRouter>
    );
}

Now:

bootstrap.tsx
import { initializeFirefly } from "@squide/firefly";

const runtime = initializeFirefly({
    useMsw: true
});
AppRouter.tsx
import { AppRouter } from "@squide/firefly";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";

export function App() {
    return (
        <AppRouter>
            {({ rootRoute, registeredRoutes, routerProviderProps }) => {
                return (
                    <RouterProvider
                        router={createBrowserRouter([
                            {
                                element: rootRoute,
                                children: registeredRoutes
                            }
                        ])}
                        {...routerProviderProps}
                    />
                );
            }}
        </AppRouter>
    );
}