Skip to content

Commit

Permalink
docs: Minor improvements to the documentation (#186)
Browse files Browse the repository at this point in the history
  • Loading branch information
patricklafrance committed Sep 7, 2024
1 parent cc84650 commit 2de7ea3
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 11 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started/create-host.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ npx degit https://github.com/gsoft-inc/wl-squide/templates/getting-started
```
!!!

Let's begin by creating the application that will serve as the entry point for our federated application and host the application modules.
Let's begin by creating the application that will serve as the entry point for our modular application and host the application modules.

## Install the packages

Expand Down
4 changes: 2 additions & 2 deletions docs/getting-started/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Welcome to Squide (yes :squid: with an **"e"**), a shell for [Workleap](https://

<!-- !!!warning Foundry CLI
The prefered way for creating a new federated application for the Workleap's platform is with the [foundry-cli](https://github.com/gsoft-inc/wl-foundry-cli).
The prefered way for creating a new modular application for the Workleap's platform is with the [foundry-cli](https://github.com/gsoft-inc/wl-foundry-cli).
+++ pnpm
```bash
pnpm create @workleap/project@latest <output-directory>
Expand Down Expand Up @@ -72,7 +72,7 @@ The most distinctive aspect of this shell is the conventions it enforces for loa

1. During bootstrap, the host application attempts to [load predefined modules](/reference/registration/registerLocalModules.md) and calls a registration function with a specific name and signature for each successfully loaded module.

2. During registration, a module receives the [runtime](/reference/runtime/runtime-class.md) of the federated application and use the instance to dynamically register its [routes](/reference/runtime/runtime-class.md#register-routes) and [navigation items](/reference/runtime/runtime-class.md#register-navigation-items).
2. During registration, a module receives the [runtime](/reference/runtime/runtime-class.md) of the application and use the instance 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 modules are registered, 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.

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/fetch-page-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const register: ModuleRegisterFunction<FireflyRuntime> = runtime => {

To faciliate development, TanStack Query provides [devtools](https://tanstack.com/query/latest/docs/react/devtools) to help visualize all of the inner workings of TanStack Query.

However, the TanStack Query devtools has not been developed to handle a federated application with multiple `QueryClient` instances. To use the devtools, you must define a `ReactQueryDevtools` component for each `QueryClient` instance:
However, the TanStack Query devtools has not been developed to handle a modular application with multiple `QueryClient` instances. To use the devtools, you must define a `ReactQueryDevtools` component for each `QueryClient` instance:

```tsx !#14 remote/src/register.tsx
import type { ModuleRegisterFunction, FireflyRuntime } from "@squide/firefly";
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/migrate-to-firefly-v9.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ label: Migrate to firefly v9

This major version of `@squide/firefly` introduces [TanStack Query](https://tanstack.com/query/latest) as the official library for fetching the global data of a Squide's application and features a complete rewrite of the [AppRouter](../reference/routing/appRouter.md) component, which now uses a state machine to manage the application's bootstrapping flow.

Prior to `v9`, Squide applications couldn't use TanStack Query to fetch global data, making it **challenging** for Workleap's applications to **keep** their **global data** in **sync** with the **server state**. With `v9`, applications can now leverage [custom wrappers](./fetch-global-data.md) of the [useQueries](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries) hook to fetch and keep their global data up-to-date with the server state. Additionally, the new [deferred registrations](../reference/registration/useDeferredRegistrations.md#register-or-update-deferred-registrations) update feature allows applications to even **keep** their conditional **navigation items in sync** with the **server state**.
Prior to `v9`, Squide applications couldn't use TanStack Query to fetch global data, making it **challenging** for Workleap's applications to **keep** their **global data** in **sync** with the **server state**. With `v9`, applications can now leverage [custom wrappers](./fetch-global-data.md) of the TanStack Query's [useQueries](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries) hook to fetch and keep their global data up-to-date with the server state. Additionally, the new [deferred registrations update](../reference/registration/useDeferredRegistrations.md#register-or-update-deferred-registrations) feature allows applications to even **keep** their conditional **navigation items in sync** with the **server state**.

Finally, with `v9`, Squide's philosophy has evolved. We used to describe Squide as a shell for **federated** applications. Now, we refer to Squide as a shell for **modular** applications. After playing with Squide's [local module](../reference/registration/registerLocalModules.md) feature for a while, we discovered that Squide offers [significant value](../getting-started/default.md#why-squide) even for **non-federated applications**, which triggered this shift in philosophy.

Expand Down
38 changes: 34 additions & 4 deletions docs/guides/override-a-react-context.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ In the previous code samples, the host application provides a value for the `Bac

## Override the context for the remote module

Now, suppose the requirements change, and one remote module pages need to have a `red` background. The context can be overriden for the remote module by declaring a new provider directly in the routes registration:
Now, suppose the requirements change, and a page of the remote module must have a `red` background. The context can be overriden for that page by declaring a new provider directly in the routes registration:

```tsx !#9 remote-module/src/register.tsx
import type { ModuleRegisterFunction, FireflyRuntime } from "@squide/firefly";
Expand Down Expand Up @@ -114,7 +114,7 @@ export const register: ModuleRegisterFunction<FireflyRuntime> = runtime => {
## Update a singleton dependency version

!!!warning
This section applies only to applications with [remote modules](../reference/registration/registerRemoteModules.md).
This section applies only to federated applications (applications having [remote modules](../reference/registration/registerRemoteModules.md)).
!!!

Let's consider a more specific use case where the host application declares a `ThemeContext` from Workleap's new design system, [Hopper](https://hopper.workleap.design/):
Expand Down Expand Up @@ -155,7 +155,22 @@ In this scenario, Hopper's components are used throughout the entire application
import { defineDevHostConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";

export default defineDevHostConfig(swcConfig, 8080, [], {
export default defineDevHostConfig(swcConfig, 8080, [...], {
sharedDependencies: {
"@hopper/components": {
singleton: true
}
}
});
```

```js !#8-10 remote-module/webpack.dev.js
// @ts-check

import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";

export default defineDevRemoteModuleConfig(swcConfig, "remote-module", 8080, {
sharedDependencies: {
"@hopper/components": {
singleton: true
Expand All @@ -166,7 +181,22 @@ export default defineDevHostConfig(swcConfig, 8080, [], {

Now, consider a situation where Hopper releases a new version of the package that includes breaking changes, without a "compatibility" package to ensure backward compatility with the previous version.

To update the host application without breaking the modules, we recommend to temporary "break" the singleton shared dependency by loading two versions of the `@hopper/components` dependency in parallel (one for the host application and one for the modules that have not been updated yet).
To update the host application without breaking the modules, we recommend to temporary "break" the singleton shared dependency by loading two versions of the `@hopper/components` dependency in parallel (one for the host application and one for the modules that have not been updated yet):

```js !#8-10 remote-module/webpack.dev.js
// @ts-check

import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";

export default defineDevRemoteModuleConfig(swcConfig, "remote-module", 8080, {
sharedDependencies: {
"@hopper/components": {
singleton: false
}
}
});
```

As `@hopper/components` expose the `ThemeContext`, the context must be re-declared in each module until every part of the federated application has been updated to the latest version of `@hopper/components`:

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/setup-i18next.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ order: 820

# Setup i18next

Most Workleap's platform application are either already bilingual or will be in the future. To help feature teams deal with localized resources, Squide provides a native [plugin](../reference/i18next/i18nextPlugin.md) designed to adapt the [i18next](https://www.i18next.com/) library for federated applications.
Most Workleap's platform application are either already bilingual or will be in the future. To help feature teams deal with localized resources, Squide provides a native [plugin](../reference/i18next/i18nextPlugin.md) designed to adapt the [i18next](https://www.i18next.com/) library for modular applications.

!!!warning
The examples in this guide load all the resources from single localized resources files. For a real Workleap application, you probably want to spread the resources into multiple files and load the files with a i18next [backend plugin](https://www.i18next.com/overview/plugins-and-utils#backends).
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "wl-squide",
"author": "Workleap",
"description": "A federated web application shell.",
"description": "A modular web application shell.",
"private": true,
"type": "module",
"license": "Apache-2.0",
Expand Down

0 comments on commit 2de7ea3

Please sign in to comment.