fix: composable nested layouts (#76)

* Fixing composable nested layouts * Added deployment to Netlify for the new remote * Updated docs * Fix tests * Update packages/core/src/runtime/abstractRuntime.ts Co-authored-by: Alexandre Martel <[email protected]> * Improved tests * Updated docs * Added a favicon to the host sample * Added a mode option to the runtime --------- Co-authored-by: Alexandre Martel <[email protected]>
gsoft-inc · Sep 15, 2023 · 2374ce2 · 2374ce2
1 parent a4d4a37
commit 2374ce2
Show file tree

Hide file tree

Showing 60 changed files with 915 additions and 234 deletions.
diff --git a/docs/getting-started/create-host.md b/docs/getting-started/create-host.md
@@ -1,11 +1,12 @@
 ---
 order: 100
 label: Create an host app
+toc:
+    depth: 2-4
 ---
 
 # Create an host application
 
-
 Let's begin by creating the application that will serve as the entry point for our federated application and host the application modules.
 
 ## 1. Install the packages
@@ -35,7 +36,7 @@ While you can use any package manager to develop an application with `@squide`,
 
 ## 2. Setup the application
 
-### Application structure
+### Create the new files
 
 First, create the following files:
 
@@ -57,7 +58,7 @@ host
 ├── package.json
 ```
 
-### package.json
+### ESM syntax
 
 Then, ensure that you are developing your application using [ESM syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) by specifying `type: module` in your `package.json` file:
 
@@ -134,13 +135,13 @@ Then, [retrieve the routes](/reference/runtime/useRoutes.md) that have been regi
 import { useMemo } from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { useRoutes } from "@squide/react-router";
-import { useAreRemotesReady } from "@squide/webpack-module-federation";
+import { useAreModulesReady } from "@squide/webpack-module-federation";
 import { RootLayout } from "./RootLayout.tsx";
 import { Home } from "./Home.tsx";
 
 export function App() {
     // Re-render the application once the remote modules are registered.
-    const isReady = useAreRemotesReady();
+    const isReady = useAreModulesReady();
 
     // Retrieve the routes registered by the remote modules.
     const routes = useRoutes();
@@ -274,6 +275,8 @@ extends @workleap/browserslist-config
 
 ### Development configuration
 
+#### SWC
+
 To configure webpack for a **development** environment, first open the `swc.dev.js` file and copy/paste the following code:
 
 ```js host/swc.dev.js
@@ -286,6 +289,8 @@ const targets = browserslistToSwc();
 export const swcConfig = defineDevConfig(targets);
 ```
 
+#### defineDevHostConfig
+
 Then, open the `webpack.dev.js` file and use the [defineDevHostConfig](/reference/webpack/defineDevHostConfig.md) function to configure webpack:
 
 ```js !#6 host/webpack.dev.js
@@ -303,6 +308,8 @@ If you are having issues with the wepack configuration that are not related to m
 
 ### Build configuration
 
+#### SWC
+
 To configure webpack for a **build** environment, first open the `swc.build.js` file and copy/paste the following code:
 
 ```js host/swc.build.js
@@ -315,6 +322,8 @@ const targets = browserslistToSwc();
 export const swcConfig = defineBuildConfig(targets);
 ```
 
+#### defineBuildHostConfig
+
 Then, open the `webpack.build.js` file and use the [defineBuildHostConfig](/reference/webpack/defineBuildHostConfig.md) function to configure webpack:
 
 ```js !#6 host/webpack.build.js
@@ -351,7 +360,3 @@ To build the application, add the following script to the application `package.j
 ## 5. Try the application :rocket:
 
 Start the application in a development environment using the `dev` script. You should see the home page. Even if the remote module application is not yet available, the host application will gracefully load.
-
-## 6. Sample application
-
-For a functional sample of an host application, have a look at the `@sample/host` application of the `@squide` sandbox on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/sample/host).
diff --git a/docs/getting-started/create-local-module.md b/docs/getting-started/create-local-module.md
@@ -1,5 +1,7 @@
 ---
 order: 80
+toc:
+    depth: 2-4
 ---
 
 # Create a local module
@@ -45,7 +47,7 @@ While you can use any package manager to develop an application with `@squide`,
 
 ## 2. Setup the application
 
-### Application structure
+### Create the new files
 
 First, create the following files:
 
@@ -59,7 +61,7 @@ local-modules
 ├── package.json
 ```
 
-### package.json
+### ESM syntax
 
 Then, ensure that you are developing your module using [ESM syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) by specifying `type: module` in your `package.json` file:
 
@@ -175,6 +177,10 @@ root.render(
 
 ## 4. Configure tsup
 
+!!!info
+If you are having issues with the tsup configuration, refer to the [@workleap/tsup-configs documentation](https://gsoft-inc.github.io/wl-web-configs/tsup).
+!!!
+
 ### Development configuration
 
 To configure tsup for a **development** environment, open the `tsup.dev.ts` file and copy/paste the following code:
@@ -216,7 +222,3 @@ To build the module, add the following script to the application `package.json`
 ## 6. Try the application :rocket:
 
 Start the `host`, `remote-module` and `local-module` applications in development mode using the `dev` script. You should now notice an additional link in the navigation menu. Click on the link to navigate to the page of your new **local** module!
-
-## 7. Sample module
-
-For a functional sample of a **local** module application, have a look at the `@sample/local-module` application of the `@squide` sandbox on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/sample/local-module).
diff --git a/docs/getting-started/create-remote-module.md b/docs/getting-started/create-remote-module.md
@@ -1,5 +1,7 @@
 ---
 order: 90
+toc:
+    depth: 2-4
 ---
 
 # Create a remote module
@@ -35,14 +37,12 @@ While you can use any package manager to develop an application with `@squide`,
 
 ## 2. Setup the application
 
-### Application structure
+### Create the new files
 
 First, create the following files:
 
 ```
 remote-module
-├── public
-├──── index.html
 ├── src
 ├──── register.tsx
 ├──── Page.tsx
@@ -54,7 +54,7 @@ remote-module
 ├── package.json
 ```
 
-### package.json
+### ESM syntax
 
 Then, ensure that you are developing your module using [ESM syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) by specifying `type: module` in your `package.json` file:
 
@@ -106,31 +106,10 @@ export function Page() {
 `@squide` webpack configuration is built on top of [@workleap/webpack-configs](https://gsoft-inc.github.io/wl-web-configs/webpack/), [@workleap/browserslist-config](https://gsoft-inc.github.io/wl-web-configs/browserslist/) and [@workleap/swc-configs](https://gsoft-inc.github.io/wl-web-configs/swc/). If you are having issues with the configuration of these tools, refer to the tools documentation websites.
 !!!
 
-### HTML template
-
-First, open the `public/index.html` file created at the beginning of this guide and copy/paste the following [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) template:
-
-```html host/public/index.html
-<!DOCTYPE html>
-<html>
-    <head>
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>
-</html>
-```
-
-### Browserslist
-
-Then, open the `.browserslist` file and copy/paste the following content:
-
-``` host/.browserslistrc
-extends @workleap/browserslist-config
-```
-
 ### Development configuration
 
+#### SWC
+
 To configure webpack for a **development** environment, first open the `swc.dev.js` file and copy/paste the following code:
 
 ```js remote-module/swc.dev.js
@@ -143,6 +122,8 @@ const targets = browserslistToSwc();
 export const swcConfig = defineDevConfig(targets);
 ```
 
+#### defineDevRemoteModuleConfig
+
 Then, open the `webpack.dev.js` file and use the the [defineDevRemoteModuleConfig](/reference/webpack/defineDevRemoteModuleConfig.md) function to configure webpack:
 
 ```js !#6 remote-module/webpack.dev.js
@@ -160,6 +141,8 @@ If you are having issues with the wepack configuration that are not related to m
 
 ### Build configuration
 
+#### SWC
+
 To configure webpack for a **build** environment, first open the `swc.build.js` file and copy/paste the following code:
 
 ```js remote-module/swc.build.js
@@ -172,6 +155,8 @@ const targets = browserslistToSwc();
 export const swcConfig = defineBuildConfig(targets);
 ```
 
+#### defineBuildRemoteModuleConfig
+
 Then, open the `webpack.build.js` file and use the the [defineBuildRemoteModuleConfig](/reference/webpack/defineBuildRemoteModuleConfig.md) function to configure webpack:
 
 ```js !#6 remote-module/webpack.build.js
@@ -209,7 +194,3 @@ To build the module, add the following script to the application `package.json`
 
 Start the `host` and the `remote-module` applications in development mode using the `dev` script. You should notice an additional link in the navigation menu. Click on the link to navigate to the page of your new **remote** module!
 
-## 6. Sample module
-
-For a functional sample of a **remote** module application, have a look at the `@sample/remote-module` application of the `@squide` sandbox on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/sample/remote-module).
-
diff --git a/docs/getting-started/default.md b/docs/getting-started/default.md
@@ -58,7 +58,7 @@ The most distinctive aspect of this shell is the conventions it enforces for loa
 
 2. During registration, a module receives [the shared services](/reference/runtime/runtime-class.md) of the federation application and use them to dynamically register its [routes](/reference/runtime/runtime-class.md#register-routes) and [navigation items](/reference/runtime/runtime-class.md#register-navigation-items).
 
-3. Once [all the remote modules are registered](/reference/registration/useAreRemotesReady.md), the host application will create a React Router [instance](https://reactrouter.com/en/main/routers/create-browser-router) with the registered routes and [renders a navigation menu](/reference/routing/useRenderedNavigationItems.md) with the registered navigation items.
+3. Once [all the modules are registered](/reference/registration/useAreModulesReady.md), the host application will create a React Router [instance](https://reactrouter.com/en/main/routers/create-browser-router) with the registered routes and [renders a navigation menu](/reference/routing/useRenderedNavigationItems.md) with the registered navigation items.
 
 That's a nutshell overview. Of course, there is more to it, but these are the main ideas.
 

diff --git a/docs/getting-started/deploy.md b/docs/getting-started/deploy.md
@@ -15,3 +15,42 @@ To enable support for direct page hits, add the following redirect rule to your
 ```
 /* /index.html 200
 ```
+
+## Remote URL
+
+Updates the application remote module production URL:
+
+```ts
+import { RemoteDefinition } from "@squide/webpack-module-federation";
+
+const Remotes: RemoteDefinition[] = [
+    {
+        name: "remote1",
+        url: process.env.isNetlify ? "https://squide-remote-module.netlify.app" : "http://localhost:8081"
+    }
+];
+```
+
+## Runtime mode
+
+Don't forget to change the Runtime [mode](../reference/runtime/runtime-class.md#change-the-runtime-mode) to `"production"`:
+
+```ts
+import { Runtime } from "@squide/react-router";
+
+const runtime = new Runtime({
+    mode: process.env.isNetlify ? "production" : "development"
+});
+```
+
+## Console logger
+
+We suggest to remove [ConsoleLogger](../reference/logging/ConsoleLogger.md) for the production build:
+
+```ts
+import { ConsoleLogger, Runtime } from "@squide/react-router";
+
+const runtime = new Runtime({
+    loggers: process.env.isNetlify ? [] : [new ConsoleLogger()]
+});
+```
diff --git a/docs/getting-started/learn-the-api.md b/docs/getting-started/learn-the-api.md
@@ -10,6 +10,20 @@ Now that we've created a host application, loaded a few modules and registered r
 For a comprehensive list of the `@squide` API, refer to the [References](/reference#api) section.
 !!!
 
+## Runtime mode
+
+In an effort to optimize the development experience, `@squide` can be bootstrapped in `development` or `production` mode:
+
+```ts host/src/bootstrap.tsx
+import { Runtime, ConsoleLogger, type LogLevel } from "@squide/react-router";
+
+const runtime = new Runtime({
+    mode: "production"
+});
+```
+
+By default, the Runtime [mode](../reference/runtime/runtime-class.md#change-the-runtime-mode) is `development`.
+
 ## Logging
 
 `@squide` includes a built-in logging feature that integrates with the [Runtime](/reference/runtime/runtime-class.md) class and the [useLogger](/reference/runtime/useLogger.md) hook.

diff --git a/docs/guides/add-authentication.md b/docs/guides/add-authentication.md
@@ -240,7 +240,7 @@ Assemble everything with React Router [nested routes](https://reactrouter.com/en
 import { lazy, useMemo } from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { useRoutes } from "@squide/react-router";
-import { useAreRemotesReady } from "@squide/webpack-module-federation";
+import { useAreModulesReady } from "@squide/webpack-module-federation";
 import { AuthenticationBoundary } from "./AuthenticationBoundary.tsx";
 import { RootErrorBoundary } from "./RootErrorBoundary.tsx";
 import { RootLayout } from "./RootLayout.tsx";
@@ -251,7 +251,7 @@ import { Login } from "./Login.tsx";
 import { Logout } from "./Logout.tsx";
 
 export function App() {
-    const isReady = useAreRemotesReady();
+    const isReady = useAreModulesReady();
 
     const routes = useRoutes();
 
@@ -318,10 +318,6 @@ export function App() {
 
 Start the application and attempt navigating to the root page (`/`). You will be redirected to the `/login` page. Login with `"temp"` / `"temp"`, you will be redirected to the root page.
 
-## Sample
-
-For a functional sample of an application shell with authentication, have a look at the `/shell` folder of the `@sample/shared` package of the `@squide` sandbox on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/sample/shared/src/shell).
-