feature: Add support for MSW and Global data fetching

[patricklafrance]

This is a huge PR, sorry about that. The goal of this PR is to improve Squide to better support MSW fake API endpoints, the fetching of the initial global data (Session, Subscription etc..), while offering a great UX for the user by preventing showing multiple flickering loading screens.

This has been achieved by rewriting the hoisting feature, adding a new useIsRouteMatchProtected hook, adding support for plugins, introducing a new package/plugin to support MSW called @squide/msw and reworking the shell package of the samples.

To demonstrate how it's done a new sample as been introduced: /samples/endpoint. An hosted version is available here.

What changed

@squide/core

Addition

• Added support for plugins to Squide runtime.
• Added a parentName option to registerRoute.

Updated

• The layoutPath option of registerRoute has been renamed to parentPath.
• registerNavigationItems has been renamed to registerNavigationItem and now only accepts a single item by call.
• A navigation item label, additionalProps and priority fields has been renamed to $label, $additionalProps and $priority. This is part of an effort to ensure no future release of React Router introduced new properties with names that are conflicting with Squide.
• Local modules register function can now be async. This is useful if you want for example to conditionally to a dynamic import to load a dependency such as msw.

Removed

• Removed the Service features at it was confusing and not that helpful. We recommend using React context instead to share services with the modules.

@squide/react-router

Addition

• Added the $visibility field to the Route type. This new field indicates that the route doesn't depend on the initial global data (authenticated data) and can be rendered before that data is loaded. The accepted values are public and protected. By default, every route is protected.
• Added the $name field to the Route type. This new field allow a nested route to be named so other routes can be configured to be nested under this route with the parentName option.
• Added a ManagedRoutes placeholder, allowing the application to indicates where managed routes should be rendered. A managed route is a route that is neither hoisted or nested with a parentPath or parentName option.
• Added the useRouteMatch and useIsRouteMatchProtected hooks.

Updated

• registerRoutes has been renamed to registerRoute and now only accepts a single route by call.
• Moved the hoist option from the route definition to an option of registerRoute.

Before:

registerRoute({
        hoist: true,
	path: "/foo",
	element: <div>Foo</div>
});

After:

registerRoute({
	path: "/foo",
	element: <div>Foo</div>
}, {
	hoist: true,
});

• Route indexes are now created for nested routes registered in a single block. Given the following registration block:

runtime.registerRoutes([
    {
        path: "/root",
        element: <div>Hello</div>,
        children: [
            {
                path: "/root/another-level",
                element: <div>You!</div>,
                children: [
                    {
                        path: "/root/another-level/deeply-nested-route",
                        element: <div>Hello from nested!</div>
                    }
                ]
            }
        ]
    }
]);

Before the changes, only an index for the "/root" route would have been created. This means that consumers could add nested routes under "/root" route with the parentPath option but couldn't nest routes under the "/root/another-level" and "/root/another-level/deeply-nested-route" with the parentPath option because there was no indexes for these routes.

Now the following is possible:

runtime.registerRoutes(
    [
        {
            path: "/foo",
            element: <div>Hello</div>
        }
    ],
    { parentPath: "/root/another-level" }
);

runtime.registerRoutes(
    [
        {
            path: "/foo",
            element: <div>Hello</div>
        }
    ],
    { parentPath: "/root/another-level/deeply-nested-route" }
);

Removed

• The RootRoute has been removed, there's now only a single Route type.
• The useHoistedRoutes has been removed. Hoisting is now supported by default with the hoist option of the registerRoute function and the ManagedRoutes placeholder.

@squide/webpack-module-federation

• The devserver error overlay is now disabled by default for the remote modules to prevent them from stacking on top of the host application error overlay.
• Remote modules register functions can now be async.

@squide/msw

That's a new package to help with MSW in a federated application.

It helps to register their request handlers:

In module:

const mswPlugin = getMswPlugin(runtime);
mswPlugin.registerRequestHandlers(requestHandlers);

In the host app:

import("../mocks/browser.ts").then(({ startMsw }) => {
     startMsw(mswPlugin.requestHandlers);
     
     setMswAsStarted();
});

And offer an utility to wait for MSW to be started before rendering the app:

const isMswStarted = useIsMswStarted(process.env.USE_MSW);

What's next?

• Guides will be added to further explain how to use MSW, fetch Global Data and use ReactQuery with Squide.
• Better support for feature flags will be added.