feat: Add support for MSW and Global data fetching (#92)

* Added a plugin for MSW * Updated the sample to use React Router lazy * Too many things * Too many changes * Fixed the tests * Added back authentication * Fixing disconnect button * Route visibility can now also be applied to nested routes * Refactored the host app App.tsx file * Improved console logs * Minor fixes * Renamed useActiveRoute for useMatchingRoute * Remote routes were not working anymore * Replaced router loader by react query * Added a subscription service * Prefixed route and nav items custom props with $ * Updated sample dev & build script to include MSW * Added a telemetry service example * Updated the docs to use the new $ props * Updated the docs * Updated docs * Split the samples into 2 distinct applications * Added tests for useAreModulesReady * Fixed local dev environment for the samples * Fixing MSW for the production build * Renamed "dev-local" to "dev-isolated" * Improved the sample pages * Improve the sample apps * Renamed the hostname for basic sample * Configuring the endpoint sample for Netlify * Updated the docs with the new hosted samples urls * Some new docs * Updated dependencies * More docs * More docs * Updated the getting started host guide * Adapted a few guides * Adapted a few other guides * Fixed broken URLs * Docs fixes * Fixed failing tests * Fix CI script * Fixed LocalModuleRegistrationError name * Code review fixes * Renamed named chunkIds transformer * Few improvements * Update docs/getting-started/learn-the-api.md Co-authored-by: Alexandre Asselin <[email protected]> * Fixing runtime messages * Replaced useAppRouter by AppRouter * FIxing build * Rename useMatchingRoute to useRouteMatch --------- Co-authored-by: Alexandre Asselin <[email protected]>
gsoft-inc · Oct 19, 2023 · 86d0885 · 86d0885
1 parent 8b4243c
commit 86d0885
Show file tree

Hide file tree

Showing 320 changed files with 10,727 additions and 4,635 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -53,8 +53,8 @@ jobs:
       - name: Build packages
         run: pnpm build
 
-      - name: Build sample
-        run: pnpm build-sample
+      - name: Build samples
+        run: pnpm build-basic && pnpm build-endpoints
 
       - name: Lint packages & sample
         run: pnpm lint

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -7,7 +7,7 @@ The following documentation is only for the maintainers of this repository.
 - [Installation](#installation)
 - [Develop the shell packages](#develop-the-shell-packages)
 - [Release the packages](#release-the-packages)
-- [Deploy the sample application](#deploy-the-sample-application)
+- [Deploy the sample applications](#deploy-the-sample-applications)
 - [Available commands](#commands)
 - [CI](#ci)
 - [Add a new package to the monorepo](#add-a-new-package-to-the-monorepo)
@@ -22,7 +22,7 @@ The main difference to account for is that the `devDependencies` must now be ins
 
 ## Project overview
 
-This project is split into two major sections, [packages/](packages/) and [sample/](sample/).
+This project is split into two major sections, [packages/](packages/) and [samples/](samples/).
 
 ### Packages
 
@@ -32,33 +32,40 @@ Under [packages/](packages/) are the actual packages composing the federated app
 
 [@squide/react-router](packages/react-router/) is a [React Router](https://reactrouter.com/en/main) implementation of the shell routing capabilities. This implementation is offered as a standalone package because the shell could eventually support alternative routing libraries like [TanStack router](https://tanstack.com/router/v1).
 
-[@squide/webpack-module-federation](packages/webpack-module-federation/) is module federation implementation for [webpack](https://webpack.js.org/concepts/module-federation/). This implementation is offered as a standalone package because not all application configurations will require module federation and the shell could eventually support alternative module federation application like [Rspack](https://www.rspack.dev/).
+[@squide/webpack-module-federation](packages/webpack-module-federation/) is a module federation implementation for [webpack](https://webpack.js.org/concepts/module-federation/). This implementation is offered as a standalone package because not all application will require module federation and the shell could eventually support alternative module federation application like [Rspack](https://www.rspack.dev/).
+
+[@squide/msw](packages/msw/) is a package including helpers to configure [Mock Service Worker](https://mswjs.io/) for a federated application.
 
 [@squide/fakes](packages/fakes/) is a collection of fake implementations to facilitate the development of federated modules in isolation.
 
-### Sample
+### Samples
 
-Under [sample/](sample/) is a sample application to test the federation application shell functionalities while developing.
+Under [samples/](samples/) are applications to test the Squide functionalities while developing.
 
-In this sample application would find:
+You'll find two samples:
 
-- [An host application](sample/host/): http://locahost:8080
-- [A static module](sample/static-module/)
-- [A remote module](sample/remote-module/): http://localhost:8081
+- `basic`: A sample application showcasing the basic features or Squide.
+- `endpoints`: A more complexe sample application showcasing the different usecases related to data fetching and management.
 
 ## Installation
 
-This project uses PNPM, therefore, you must [install PNPM](https://pnpm.io/installation):
+This project uses PNPM, therefore, you must [install PNPM](https://pnpm.io/installation) first:
 
-To install the project, open a terminal at the root of the workspace and execute the following command:
+```bash
+npm install -g pnpm
+```
+
+To install the Squide project, open a terminal at the root of the workspace and execute the following command:
 
 ```bash
 pnpm install
 ```
 
 ### Setup Retype
 
-[Retype](https://retype.com/) is the documentation platform that `workleap/web-configs` is using for the documentation. As this project is leveraging a few [Pro features](https://retype.com/pro/) of Retype, you must first setup your [Retype wallet](https://retype.com/guides/cli/#retype-wallet).
+[Retype](https://retype.com/) is the documentation platform that Squide is using for its documentation. As this project is leveraging a few [Pro features](https://retype.com/pro/) of Retype.
+
+Everything should work fine as-is but there are a few limitations to use Retype Pro features without a wallet with a licence. If you want to circumvent these limitations, you can optionally, setup your [Retype wallet](https://retype.com/guides/cli/#retype-wallet).
 
 To do so, first make sure that you retrieve the Retype license from your Vault (or ask IT).
 
@@ -68,29 +75,37 @@ Then, open a terminal at the root of the workspace and execute the following com
 npx retype wallet --add <your-license-key-here>
 ```
 
-## Develop the shell packages
+## Develop the packages
 
-We recommend opening two [VSCode terminals](https://code.visualstudio.com/docs/terminal/basics#_managing-multiple-terminals) to develop the shell packages.
+We recommend opening two [VSCode terminals](https://code.visualstudio.com/docs/terminal/basics#_managing-multiple-terminals) to develop the packages.
 
 With the first terminal, execute the following script:
 
 ```bash
 pnpm dev
 ```
 
-With the second terminal, execute the following script:
+With the second terminal, start one of the sample application with either the following script:
+
+```bash
+pnpm dev-basic
+```
+
+or
 
 ```bash
-pnpm dev-sample
+pnpm dev-endpoints
 ```
 
-You can then open your favorite browser and navigate to `http://localhost:8080/` to get a live preview of your code. To test that the remote module is working correctly, navigate to `http://localhost:8081/remoteEntry.js`
+You can then open your favorite browser and navigate to `http://localhost:8080/` to get a live preview of your code.
+
+> To test that a remote module is working correctly, navigate to the remote module entry file. For a remote module hosted on the port `8081`, the URL should be `http://localhost:8081/remoteEntry.js`.
 
 ## Release the packages
 
 When you are ready to release the packages, you must follow the following steps:
 1. Run `pnpm changeset` and follow the prompt. For versioning, always follow the [SemVer standard](https://semver.org/).
-2. Commit the newly generated file in your branch and submit a new Pull Request(PR). Changesets will automatically detect the changes and post a message in your pull request telling you that once the PR closes, the versions will be released.
+2. Commit the newly generated file in your branch and submit a new Pull Request (PR). Changesets will automatically detect the changes and post a message in your pull request telling you that once the PR closes, the versions will be released.
 3. Find someone to review your PR.
 4. Merge the Pull request into `main`. A GitHub action will automatically trigger and update the version of the packages and publish them to [npm](https://www.npmjs.com/). A tag will also be created on GitHub tagging your PR merge commit.
 
@@ -100,7 +115,7 @@ When you are ready to release the packages, you must follow the following steps:
 
 Make sure you're Git is clean (No pending changes).
 
-#### npm
+#### NPM
 
 Make sure GitHub Action has **write access** to the selected npm packages.
 
@@ -118,21 +133,42 @@ By default, packages compilation output will be in their respective *dist* direc
 
 If you got linting error, most of the time, they can be fixed automatically using `eslint . --fix`, if not, follow the report provided by `pnpm lint`.
 
-## Deploy the sample application
+## Deploy the sample applications
+
+### The "basic" sample application
+
+The sites for this sample application are hosted on [Netlify](https://www.netlify.com/):
+
+- [host](https://squide-basic-host.netlify.app/)
+- [remote-module](https://squide-basic-remote-module.netlify.app)
+- [another-remote-module](https://squide-basic-another-remote-module.netlify.app)
+
+To deploy the sample application, open a terminal at the root of the repository and execute the following script:
+
+```bash
+deploy-basic
+```
+
+A prompt with a few questions will appear and then the sits will automatically be deployed to production.
+
+### The sample application with "endpoints"
+
+The sites for this sample application are hosted on [Netlify](https://www.netlify.com/):
 
-The sample application is hosted on [Netlify](https://www.netlify.com/). 2 sites are available, one for the host application (https://squide-host.netlify.app/) and one for the remote module application (https://squide-remote-module.netlify.app).
+- [host](https://squide-endpoints-host.netlify.app/)
+- [remote-module](https://squide-endpoints-remote-module.netlify.app)
 
-To deploy both websites, open a terminal at the root of the repository and execute the following script:
+To deploy the sample application, open a terminal at the root of the repository and execute the following script:
 
 ```bash
-deploy-sample
+deploy-endpoints
 ```
 
-It will automatically deploy both sites to production.
+A prompt with a few questions will appear and then the sites will automatically be deployed to production.
 
 ## Commands
 
-From the project root, you have access to many commands the main ones are:
+From the project root, you have access to many commands. The most important ones are:
 
 ### dev
 
@@ -142,17 +178,25 @@ Build the shell packages for development and start the watch processes.
 pnpm dev
 ```
 
-### dev-sample
+### dev-basic
 
-Build the sample application for development and start the dev servers.
+Build the sample "basic" application for development and start the dev servers.
 
 ```bash
-pnpm dev-sample
+pnpm dev-basic
+```
+
+### dev-endpoints
+
+Build the sample "application with "endpoints" for development and start the dev servers.
+
+```bash
+pnpm dev-endpoints
 ```
 
 ### dev-docs
 
-Build the docs application for development and start the dev servers.
+Build the [Retype](https://retype.com/) documentation for development and start the Retype dev server. If you are experiencing issue with the license, refer to the [setup Retype section](#setup-retype).
 
 ```bash
 pnpm dev-docs
@@ -166,28 +210,36 @@ Build the packages for release.
 pnpm build
 ```
 
-### build-sample
+### build-basic
 
-Build the sample application for release.
+Build the sample "basic" application for release.
 
 ```bash
-pnpm build-sample
+pnpm build-basic
 ```
 
-### serve-sample
+### build-endpoints
 
-Build the sample application for deployment and start a local web server to serve the application.
+Build the sample application with "endpoints" for release.
 
 ```bash
-pnpm serve-sample
+pnpm build-endpoints
 ```
 
-### dev-docs
+### serve-basic
 
-Build the [Retype](https://retype.com/) documentation for development and start the Retype dev server. If you are experiencing issue with the license, refer to the [setup Retype section](#setup-retype).
+Build the sample "basic" application for deployment and start a local web server to serve the application.
 
 ```bash
-pnpm dev-docs
+pnpm serve-basic
+```
+
+### serve-endpoints
+
+Build the sample application with "endpoints" for deployment and start a local web server to serve the application.
+
+```bash
+pnpm serve-endpoints
 ```
 
 ### test

diff --git a/README.md b/README.md
@@ -20,9 +20,10 @@ To ask a question or propose an idea, feel free to start a new [discussion](http
 
 View the [user's documentation](https://gsoft-inc.github.io/wl-squide/).
 
-## Live sample
+## Live samples
 
-A sample application is hosted at https://squide-host.netlify.app.
+- A [basic sample application](https://squide-basic-host.netlify.app) hosted on Netlify.
+- A [sample application with endpoints](https://squide-endpoints-host.netlify.app) hosted on Netlify.
 
 ## 🤝 Contributing