Skip to content

Commit

Permalink
cix: update app and e2e
Browse files Browse the repository at this point in the history
  • Loading branch information
ScriptedAlchemy committed Dec 4, 2024
1 parent d0799cc commit 13d83d3
Showing 1 changed file with 45 additions and 16 deletions.
61 changes: 45 additions & 16 deletions runtime-plugins/control-sharing/README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,64 @@
# Controlled Vendor Sharing

Dynamic Vendor Sharing is an application that implements a control panel in the runtime plugin for module federation 1.5 in rspack or `@module-federation/enhanced`. The control panel allows you to deterministically manage and modify the rules for shared modules, as well as upgrade or downgrade applications based on the inputs from the React form.
This example demonstrates a runtime plugin implementation for Module Federation that provides dynamic control over shared module versions. It allows you to deterministically manage and modify shared module versions across federated applications using a control panel interface and localStorage persistence.

## Features

- Runtime plugin that implements rules for module sharing.
- React form for modifying the rules.
- Ability to upgrade or downgrade applications.
- `app1` and `app2` exposing different button components.
- Runtime plugin for dynamic version control of shared modules
- Control panel UI for managing shared module versions
- Persistent version settings using localStorage (`formDataVMSC` key)
- Support for upgrading/downgrading shared module versions
- E2E tests to verify version control functionality

## Main Components

### `./app1/control-share.ts`
### `control-share.ts`

This is the runtime plugin that implements the rules for module federation.
A runtime plugin that implements version control for Module Federation. Key features:
- Implements the `FederationRuntimePlugin` interface
- Uses localStorage to persist version preferences
- Handles version resolution and module sharing between applications
- Manages share scope mapping and instance tracking

### `./app1/src/ControlPanel.js`
### E2E Tests (`checkAutomaticVendorApps.cy.ts`)

This is a React form that allows for the modification of rules implemented in `control-share.ts`.
Comprehensive E2E tests that verify:
- Initial shared module versions
- Version override functionality through localStorage
- UI updates reflecting version changes
- Button component rendering with correct version information

# Running Demo
## Running Demo

Run `pnpm run start`. This will build and serve both `app1` and `app2` on ports 3001 and 3002 respectively.

- [localhost:3001](http://localhost:3001/)
- [localhost:3002](http://localhost:3002/)
- [localhost:3001](http://localhost:3001/) - Host application with control panel
- [localhost:3002](http://localhost:3002/) - Remote application

# Running Cypress E2E Tests
## Running Cypress E2E Tests

To run tests in interactive mode, run `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
To run tests in interactive mode:
```bash
npm run cypress:debug
```

To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
To run tests in headless mode:
```bash
yarn e2e:ci
```

["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
For failed tests, screenshots and videos will be saved in the `cypress` directory.

## Implementation Details

The control panel allows you to:
- View current versions of shared modules (react, react-dom, lodash)
- Override versions for specific applications
- Save settings to localStorage
- Clear settings and reload to default versions

The runtime plugin (`control-share.ts`) handles:
- Version resolution based on localStorage settings
- Share scope management
- Instance tracking and updates
- Cross-application module sharing rules

0 comments on commit 13d83d3

Please sign in to comment.