refactor: Firefly v9 (#181)

* Added a reducer for the AppRouter * Rename fireflyRuntime file * Rename firefly runtime file * More changes * More updates * More stuff * Fix typings of the method so it properly returns the data of the queries * More stuff * fix ubild * fix public as well * More stuff * Fixed a bug * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * Updated packages * Fixing TS * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * More stuff * Fixed tests * Fixed linting * More stuff * FIxing lockfile * Updated docs --------- Co-authored-by: Alexandre Asselin <[email protected]>
gsoft-inc · Aug 23, 2024 · f3d7907 · f3d7907
1 parent f64e158
commit f3d7907
Show file tree

Hide file tree

Showing 269 changed files with 15,387 additions and 10,319 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ dist
 .pnpm-debug.log*
 .netlify
 .turbo
+.retype
 
 # Mac
 .DS_Store

diff --git a/docs/getting-started/create-host.md b/docs/getting-started/create-host.md
@@ -23,17 +23,17 @@ Create a new application (we'll refer to ours as `host`), then open a terminal a
 +++ pnpm
 ```bash
 pnpm add -D @workleap/swc-configs @workleap/browserslist-config @squide/firefly-webpack-configs webpack webpack-dev-server webpack-cli @swc/core @swc/helpers browserslist postcss typescript @types/react @types/react-dom
-pnpm add @squide/firefly react react-dom react-router-dom react-error-boundary
+pnpm add @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++ yarn
 ```bash
 yarn add -D @workleap/swc-configs @workleap/browserslist-config @squide/firefly-webpack-configs webpack webpack-dev-server webpack-cli @swc/core @swc/helpers browserslist postcss typescript @types/react @types/react-dom
-yarn add @squide/firefly react react-dom react-router-dom react-error-boundary
+yarn add @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++ npm
 ```bash
 npm install -D @workleap/swc-configs @workleap/browserslist-config @squide/firefly-webpack-configs webpack webpack-dev-server webpack-cli @swc/core @swc/helpers browserslist postcss typescript @types/react @types/react-dom
-npm install @squide/firefly react react-dom react-router-dom react-error-boundary
+npm install @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++
 
@@ -53,7 +53,6 @@ host
 ├──── App.tsx
 ├──── RootLayout.tsx
 ├──── HomePage.tsx
-├──── NotFoundPage.tsx
 ├──── bootstrap.tsx
 ├──── index.ts
 ├──── register.tsx
@@ -126,14 +125,20 @@ import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 export function App() {
  return (
- <AppRouter
- fallbackElement={<div>Loading...</div>}
- errorElement={<div>An error occured!</div>}
- waitForMsw={false}
- >
- {(routes, providerProps) => (
- <RouterProvider router={createBrowserRouter(routes)} {...providerProps} />
- )}
+ <AppRouter waitForMsw={false}>
+ {({ rootRoute, registeredRoutes, routerProviderProps }) => {
+ return (
+ <RouterProvider
+ router={createBrowserRouter([
+ {
+ element: rootRoute,
+ children: registeredRoutes
+ }
+ ])}
+ {...routerProviderProps}
+ />
+ );
+ }}
  </AppRouter>
  );
 }
@@ -154,7 +159,7 @@ import {
  type RenderSectionFunction
 } from "@squide/firefly";
 
-const renderItem: RenderItemFunction = (item, index, level) => {
+const renderItem: RenderItemFunction = (item, key) => {
  // To keep thing simple, this sample doesn't support nested navigation items.
  // For an example including support for nested navigation items, have a look at
  // https://gsoft-inc.github.io/wl-squide/reference/routing/userenderednavigationitems/
@@ -165,17 +170,17 @@ const renderItem: RenderItemFunction = (item, index, level) => {
  const { label, linkProps, additionalProps } = item;
 
  return (
- <li key={`${level}-${index}`}>
+ <li key={key}>
  <Link {...linkProps} {...additionalProps}>
  {label}
  </Link>
  </li>
  );
 };
 
-const renderSection: RenderSectionFunction = (elements, index, level) => {
+const renderSection: RenderSectionFunction = (elements, key) => {
  return (
- <ul key={`${level}-${index}`}>
+ <ul key={key}>
  {elements}
  </ul>
  );
@@ -227,7 +232,7 @@ export const registerHost: ModuleRegisterFunction<FireflyRuntime> = runtime => {
 };
 ```
 
-And an [hoisted route](../reference/runtime/runtime-class.md#register-an-hoisted-route) to render the `RootLayout` and the [ManagedRoutes](../reference/routing/ManagedRoutes.md) placeholder:
+And an [hoisted route](../reference/runtime/runtime-class.md#register-an-hoisted-route) to render the `RootLayout` and the [ManagedRoutes](../reference/routing/managedRoutes.md) placeholder:
 
 ```tsx !#8,12,15 host/src/register.tsx
 import { ManagedRoutes, type ModuleRegisterFunction, type FireflyRuntime } from "@squide/firefly";
@@ -255,7 +260,7 @@ export const registerHost: ModuleRegisterFunction<FireflyRuntime> = runtime => {
 ```
 
 !!!info
-The [ManagedRoutes](../reference/routing/ManagedRoutes.md) placeholder indicates where routes that are neither hoisted or nested with a [parentPath](../reference/runtime/runtime-class.md#register-nested-navigation-items) or [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option will be rendered. In this example, the homepage route is considered as a managed route and will be rendered under the `ManagedRoutes` placeholder.
+The [ManagedRoutes](../reference/routing/managedRoutes.md) placeholder indicates where routes that are neither hoisted or nested with a [parentPath](../reference/runtime/runtime-class.md#register-nested-navigation-items) or [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option will be rendered. In this example, the homepage route is considered as a managed route and will be rendered under the `ManagedRoutes` placeholder.
 !!!
 
 Finally, update the bootstrapping code to [register](../reference/registration/registerLocalModules.md) the newly created local module:
@@ -305,15 +310,15 @@ export function NotFoundPage() {
 
 Then, register the newly created component as the `*` route:
 
-```tsx !#19-24 host/src/register.tsx
+```tsx !#8,19-24 host/src/register.tsx
 import { ManagedRoutes, type ModuleRegisterFunction, type FireflyRuntime } from "@squide/firefly";
 import { HomePage } from "./HomePage.tsx";
 import { NotFoundPage } from "./NotFoundPage.tsx";
 import { RootLayout } from "./RootLayout.tsx";
 
 export const registerHost: ModuleRegisterFunction<FireflyRuntime> = runtime => {
  runtime.registerRoute({
- // Pathless route to declare a root layout.
+ $name: "root-layout",
  element: <RootLayout />,
  children: [
  // Placeholder to indicate where managed routes (routes that are not hoisted or nested)
@@ -328,7 +333,7 @@ export const registerHost: ModuleRegisterFunction<FireflyRuntime> = runtime => {
  path: "*",
  element: <NotFoundPage />
  }, {
- hoist: true
+ parentName: "root-layout"
  });
 
  runtime.registerRoute({
@@ -462,8 +467,9 @@ If you are experiencing issues with this guide:
  - `[squide] 1/4 Registering local module.`
  - `[squide] 1/4 Local module registration completed.`
  - `[squide] Found 1 remote module to register.`
- - `[squide] 1/1 Loading module "./register" from container "remote1" of remote "http://localhost:8081/remoteEntry.js".`
- - `[squide] 1/1 Container "remote1" of remote "http://localhost:8081/remoteEntry.js" registration completed.`
+ - `[squide] 1/1 Loading module "register" of "remote1".`
+ - `[squide] 1/1 Registering module "register" of remote "remote1".`
+ - `[squide] 1/1 The registration of the remote "remote1" is completed.`
 - Refer to a working example on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/samples/basic/host).
 - Refer to the [troubleshooting](../troubleshooting.md) page.
 
diff --git a/docs/getting-started/create-local-module.md b/docs/getting-started/create-local-module.md
@@ -15,7 +15,7 @@ npx degit https://github.com/gsoft-inc/wl-squide/templates/getting-started
 
 Local modules are regular modules that are part of the **host application build**. They are independent modules that expose a `registration` function to the host application's bootstrapping code. A local module can be a standalone package, a sibling project (in a monorepo setup), or even a local folder within the host application.
 
-Local modules have many uses but are especially useful when **migrating** from a **monolithic application** to a distributed application or when **launching** a **new product** with an unrefined business domain.
+Local modules have many uses but are especially useful when **launching** a **new product** with an unrefined business domain or **migrating** from a **monolithic application** to a distributed application.
 
 Let's add a local module to demonstrate how it's done!
 
@@ -26,17 +26,17 @@ Create a new application (we'll refer to ours as `local-module`), then open a te
 +++ pnpm
 ```bash
 pnpm add -D @workleap/tsup-configs tsup typescript @types/react @types/react-dom
-pnpm add @squide/firefly react react-dom react-router-dom react-error-boundary
+pnpm add @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++ yarn
 ```bash
 yarn add -D @workleap/tsup-configs tsup typescript @types/react @types/react-dom
-yarn add @squide/firefly react @squide/firefly react-dom react-router-dom react-error-boundary
+yarn add @squide/firefly react @squide/firefly react-dom react-router-dom @tanstack/react-query
 ```
 +++ npm
 ```bash
 npm add -D @workleap/tsup-configs tsup typescript @types/react @types/react-dom
-npm install @squide/firefly react react-dom react-router-dom react-error-boundary
+npm install @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++
 
@@ -86,7 +86,7 @@ Finally, configure the package to be shareable by adding the `name`, `version`,
 
 Next, register the local module routes and navigation items with [registerRoute](/reference/runtime/runtime-class.md#register-routes) and [registerNavigationItem](/reference/runtime/runtime-class.md#register-navigation-items) functions:
 
-```tsx !#5-8,10-13 local-module/src/register.tsx
+```tsx !#5-8,10-14 local-module/src/register.tsx
 import type { ModuleRegisterFunction, FireflyRuntime } from "@squide/firefly";
 import { Page } from "./Page.tsx";
 
@@ -97,6 +97,7 @@ export const register: ModuleRegisterFunction<FireflyRuntime> = runtime => {
  });
 
  runtime.registerNavigationItem({
+ $key: "local-page",
  $label: "Local/Page",
  to: "/local/page"
  });
@@ -125,6 +126,10 @@ Go back to the `host` application and add a dependency to the `@getting-started/
 }
 ```
 
+!!!info
+If your project is set up as a monorepo, use `workspace:*` for the version instead of `0.0.1`.
+!!!
+
 Then, register the local module with the [registerLocalModules](/reference/registration/registerLocalModules.md) function:
 
 ```tsx !#3,21 host/src/bootstrap.tsx
@@ -212,7 +217,7 @@ Start the `host`, `remote-module` and `local-module` applications in development
 If you are experiencing issues with this guide:
 
 - Open the [DevTools](https://developer.chrome.com/docs/devtools/) console. You'll find a log entry for each registration that occurs and error messages if something went wrong:
- - `[squide] The following route has been registered. Newly registered item: ...`
- - `[squide] The following navigation item has been registered to the "root" menu for a total of 2 items. Newly registered item: ...`
+ - `[squide] The following route has been registered.`
+ - `[squide] The following static navigation item has been registered to the "root" menu for a total of 2 static items.`
 - Refer to a working example on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/samples/basic/local-module).
 - Refer to the [troubleshooting](../troubleshooting.md) page.
diff --git a/docs/getting-started/create-remote-module.md b/docs/getting-started/create-remote-module.md
@@ -24,17 +24,17 @@ Create a new application (we'll refer to ours as `remote-module`), then open a t
 +++ pnpm
 ```bash
 pnpm add -D @workleap/swc-configs @workleap/browserslist-config @squide/firefly-webpack-configs webpack webpack-dev-server webpack-cli @swc/core @swc/helpers browserslist postcss @types/react @types/react-dom
-pnpm add @squide/firefly react react-dom react-router-dom react-error-boundary
+pnpm add @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++ yarn
 ```bash
 yarn add -D @workleap/swc-configs @workleap/browserslist-config @squide/firefly-webpack-configs webpack webpack-dev-server webpack-cli @swc/core @swc/helpers browserslist postcss @types/react @types/react-dom
-yarn add @squide/firefly react react-dom react-router-dom react-error-boundary
+yarn add @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++ npm
 ```bash
 npm install -D @workleap/swc-configs @workleap/browserslist-config @squide/firefly-webpack-configs webpack webpack-dev-server webpack-cli @swc/core @swc/helpers browserslist postcss @types/react @types/react-dom
-npm install @squide/firefly react react-dom react-router-dom react-error-boundary
+npm install @squide/firefly react react-dom react-router-dom @tanstack/react-query
 ```
 +++
 
@@ -71,7 +71,7 @@ Then, ensure that you are developing your module using [ESM syntax](https://deve
 
 Next, register the remote module routes and navigation items with the [registerRoute](/reference/runtime/runtime-class.md#register-routes) and [registerNavigationItem](/reference/runtime/runtime-class.md#register-navigation-items) functions:
 
-```tsx !#5-8,10-13 remote-module/src/register.tsx
+```tsx !#5-8,10-14 remote-module/src/register.tsx
 import type { ModuleRegisterFunction, FireflyRuntime } from "@squide/firefly";
 import { Page } from "./Page.tsx";
 
@@ -82,6 +82,7 @@ export const register: ModuleRegisterFunction<FireflyRuntime> = runtime => {
  });
 
  runtime.registerNavigationItem({
+ $key: "remote-page",
  $label: "Remote/Page",
  to: "/remote/page"
  });
@@ -185,8 +186,8 @@ Start the `host` and the `remote-module` applications in development mode using
 If you are experiencing issues with this guide:
 
 - Open the [DevTools](https://developer.chrome.com/docs/devtools/) console. You'll find a log entry for each registration that occurs and error messages if something went wrong:
- - `[squide] The following route has been registered. Newly registered item: ...`
- - `[squide] The following navigation item has been registered to the "root" menu for a total of 2 items. Newly registered item: ...`
+ - `[squide] The following route has been registered.`
+ - `[squide] The following static navigation item has been registered to the "root" menu for a total of 2 static items.`
 - Refer to a working example on [GitHub](https://github.com/gsoft-inc/wl-squide/tree/main/samples/basic/remote-module).
 - Refer to the [troubleshooting](../troubleshooting.md) page.