descriptions in advanced API (#3503)

* Add dynamic vendor sharing functionality to runtime plugins

Implemented dynamic vendor sharing in runtime plugins using webpack's ModuleFederationPlugin. Created new files for app1 and app2, configuring shared modules and dependencies. Configured exposed components and updated some webpack configurations in build setup.

* Update load sharing method in control-share

Replaced static timeout in "beforeLoadShare" method with dynamic checking. The update waits for instances to be appropriately populated before proceeding, improving the reliability of share loading.

* Refactor ControlPanel component state management

The ControlPanel component's state management was refactored to use useCallback for more efficient renders. Simultaneously, localStorage management for form data was optimized, improving efficiency and performance. Additionally, the component's user interface was enhanced with new styled buttons.

* Add color-coding to React and ReactDOM versions

The color for displaying React and ReactDOM versions is dynamically generated from the version strings, providing visual differentiation between different versions. A helper function 'getColorFromString' has been added to transform each version string into a unique color code. Minor adjustments to the App1 component were made to incorporate these changes.

* Improve runtime plugins and introduce lodash

Added lodash to shared dependencies across runtime plugins that are now configured to handle TypeScript. A new custom plugin for federation runtime has been deployed. Lodash is also disclosed within app-specific content, showcasing its version.

* Reduce padding and margins in ControlPanel component

Adjusted the padding, margin, and styles in different elements of the ControlPanel component. The changes aim to condense the visual layout of the component without affecting its functionality or readability.

* Update header text and reduce font size in App component

The main heading text in App component has been updated from 'Bi-Directional' to 'Share Control Panel' for clearer comprehension. Similarly, the font size of subheadings indicating the usage of React, ReactDOM, and Lodash versions have been reduced from h3 to h4 to maintain hierarchy and improve readability.

* Update README.md

* Update control sharing plugin README

The README has been updated to better describe the purpose and functioning of the control sharing plugin in rspack or `@module-federation/enhanced`. Detailed descriptions of primary components, namely `./app1/control-share.ts` and `./app1/src/ControlPanel.js` are included for better understanding. Irrelevant information about async loading and Google Analytics link have been removed to maintain focus.

* Update Controlled Vendor Sharing README documentation

Revised README on Controlled Vendor Sharing plugin to provide clear and concise details, focusing on its purpose, features, and main components. Enhancements include the management of module sharing rules and application version control. Removed unnecessary content to improve readability.

* Add control share plugin to apps and update webpack configurations

A custom control-share.js plugin has been introduced to app1 and app2. The plugin intercepts module sharing operation across different lifecycle hooks in these applications. Additionally, webpack configurations have been updated to import the ModuleFederationPlugin from '@module-federation/enhanced' and to require the control-share.js plugin. Relevant updates have also been reflected in the end-to-end tests.

* Refactor `control-share.js` file location in runtime-plugins

This refactoring centralizes the `control-share.js` file to a shared location in the `runtime-plugins/control-sharing` directory from its previous individual app directories. All applications now reference this shared file, enhancing code reusability and reducing redundancy. Configuration files for each application are also adjusted to reflect this change.

* descriptions in advanced API

New descriptions have been added in the package.json files of advanced-api, dynamic-remotes, and automatic-vendor-sharing. This helps in better understanding the nature and use of each package/module.

* Add descriptions to microfrontends package.json files

Added descriptions to the package.json files in angular12-microfrontends, angular11-microfrontends-ngxs, and angular11-microfrontends-ngrx folders. These descriptions provide improved clarity on each project's purpose and their specific use of Webpack 5 Module Federation with Angular.

* Add project descriptions to multiple package.json files

Newly added descriptions provide better insights into each project's purpose and their uses of different technologies. This makes understanding the purpose and functionality of each project easier for developers and users. Descriptions were added to projects involving Webpack 5 Module Federation, Angular, and several others across multiple directories.

* Updated package.json files with project descriptions

Descriptions added to different projects provide better comprehension of the specific functions and utilization of various technologies. This enhancement will clarify the purpose of each project for developers, making them more accessible and user-friendly. Changes have been implemented in projects using Webpack 5 Module Federation, Angular and others.

* Add legacy and modern build options for different React versions

This update adds separate build options for legacy and modern versions of React, allowing to switch between them as needed. It also enhances the descriptions for each project to clarify its distinct function and utilized technology. This change will help maintain and support apps and components built on different versions of React more effectively and efficiently.

* Add description to package.json in cra-react-app-rewired

This commit includes a description "CRA with react-app-rewired" added to the package.json file in 'cra-react-app-rewired'. It provides a brief about the project that can help other developers understand the purpose of the project.

* Remove delegate-modules applications and related E2E tests

This commit completely removes the 'delegate-modules' directory, which included applications 'app1' and 'app2' and their related E2E tests. This change is meant to simplify codebase, possibly due to deprecation or merger of these applications into a different part of the project.

* Add or update description in package.json of multiple apps

This commit adds or updates the 'description' field in the package.json files of several applications in the React 18 and React 16 comprehensive demos. This helps to provide more information about the purpose or functionality of these applications and gives a clear understanding of each individual application in the project.

* Add or update description in package.json of multiple apps

This commit adds or updates the 'description' field in the package.json files of several applications in the React 18 and React 16 comprehensive demos. This helps to provide more information about the purpose or functionality of these applications and gives a clear understanding of each individual application in the project.

* Update multiple applications' React versions and rendering

The commit includes updates to several React versions across different applications, as well as enhancing render functions within components. These changes increased the overall compatibility of the applications and improved clarity. Configuration files were also created or updated to properly manage package dependencies.

* Remove entire code base of 'different-react-versions-16-18-typescript' project

All the files related to the 'different-react-versions-16-18-typescript' project have been deleted. This includes components, configurations, scripts, and documentations. This major cleanup suggests a decision to retire or significantly revamp this project.

* Remove entire code base of 'different-react-versions-16-18-typescript' project

All the files related to the 'different-react-versions-16-18-typescript' project have been deleted. This includes components, configurations, scripts, and documentations. This major cleanup suggests a decision to retire or significantly revamp this project.

* Update package.json and README.md to modify start scripts

The start script in the package.json of the complete-react-case component app has been edited and a new legacy:start script has been added. Additionally, installation and start instructions in the README.md have been updated to use pnpm instead of npm. These changes seem to be focused on improving the build process and updating the project's documentation.

* Update apps to use rsPack and add legacy mode

Switched primary build and start scripts in both app1 and app2 to use rsPack instead of webpack-cli. Introduced legacy commands to maintain webpack-cli compatibility. rsPack was introduced for better compatibility with running different React versions in isolated instances. Legacy commands ensure backward compatibility and flexibility.

* Update webpack loaders and add package description

Replaced Babel loader with swc-loader in rspack.config.js to better handle TypeScript and JSX syntax. A description was added to the package.json file for the "dynamic-remotes-node" package to provide a brief explanation of its functionality. The swc-loader was chosen for its speed and efficiency when transforming TypeScript and JSX code, and the package description will offer clearer context for users of the "dynamic-remotes-node" package.

* Migrate webpack projects to rspack and update package.json scripts

Shifted from webpack to rspack for app1 and app2 projects, introduced rspack.config.js files and adjusted scripts in package.json accordingly. These changes facilitate better project configuration and add flexibility in building processes. Also removed lerna.json and updated packages' dependencies to align with rspack usage.

* Commit Message:

Replace webpack with @rspack/core in project configuration

Migrated from webpack to @rspack/core's ModuleFederationPlugin in 'rspack.config.js' of both app1 and app2. This replaced webpack functionalities and simplified configurations. Additionally, deprecated packages were removed and dependencies were realigned to accommodate this change.

* Refactor build process and dynamic loading using rspack

In this commit, the build and serve process of the applications is overhauled to use rspack as the main tool instead of webpack-cli. The relevant scripts in package.json files of the three apps are modified accordingly. Additionally, functionality is added to perform dynamic remote loading of modules, in a manner that avoids redundant loading of modules that have already been pulled in once using module-federation runtime.

* locks

* locks

* Update moment display in dynamic system widgets

The dynamic system widgets in applications app2 and app3 have been updated to show moment versions. In addition, the wordings in these widgets and in App1 have been slightly revised for clarity and accuracy.

* Updated package.json for new dependencies

Added a new dependency to the package.json file of the dynamic system host app1. The new package '@module-federation/runtime' has been added for better runtime support in module federation.

* Add package.json files for NextJs and React components

New package.json files have been added for both NextJs and React components. These ensure that exposed components are consumed accurately in different combinations. This action solidifies functionality and promotes component reusability.

* Implement rspack in various component npm scripts

The commit updates federated components to run and build with the 'rspack' tool in addition to webpack. The dependency '@rspack/core', '@rspack/cli', and '@rspack/dev-server' are added in each component's package.json, and the npm scripts 'start' and 'build' are adjusted to use 'rspack'. This is meant to extend the configuration capabilities beyond what 'webpack' offers. Meanwhile, for backward compatibility, legacy 'webpack' scripts are kept under 'legacy:start' and 'legacy:build'.

* locks

* Disable specific E2E tests and update e2e:ci script

Some E2E tests related to color and background attributes have been temporarily disabled in the checkApplications.cy.ts file. Also, the e2e:ci script in the package.json file has been modified to run without needing the application to be started beforehand. These changes aim to facilitate the debugging process in specific scenarios.

* Modify e2e:ci script to run without app start

The e2e:ci script in the package.json file has been updated to remove the need for the application to be started beforehand. This change makes it easier to run E2E tests quickly in specific scenarios where the app doesn't need to be running.

* Modify e2e:ci script to run without app start

The e2e:ci script in the package.json file has been updated to remove the need for the application to be started beforehand. This change makes it easier to run E2E tests quickly in specific scenarios where the app doesn't need to be running.

* Update ModuleFederationPlugin import source in rspack.config

Changed the import source of the ModuleFederationPlugin in both app1 and app2's rspack.config.js files. The plugin is now imported from '@rspack/core' instead of 'webpack'. This adjustment better aligns with the current project's dependencies and structure.

* Refine package descriptions in multiple projects

Updated the descriptions in the 'package.json' files for multiple projects to be more concise and straight-to-the-point. These edited descriptions still cover the key details such as the tools and techniques used but in a more succinct manner. This should make it easier for users to quickly understand the core purpose of each project.

* Add `description` to federated-library-from-cdn package and refine other packages' descriptions

This commit updates the package descriptions in the federated-library-from-cdn, css-isolation, federated-npm, and bi-directional packages. The aim is to make the descriptions more concise while still conveying the key features and content of each package. This makes it easier for users to quickly understand each package's purpose.

* Update package.json in multiple projects

This commit adds the `ignored` attribute to three packages: loadable-react-16, medusa-delegate-example, and loadable-react-18. In addition, the `description` field is added to the medusa-example package. Such changes contribute to the improvement of information clarity about packages.

* Add 'ignored' attribute to package.json files

The 'ignored' attribute was added to the package.json files of both 'native-federation-react' and 'modernjs-medusa' projects. This attribute helps exclude specific packages when running bulk operations in the workspace.

* Remove nextjs-ssr-delegate-modules related files

All files and directories related to nextjs-ssr-delegate-modules have been deleted from the project. This clean-up was necessary to keep the codebase tidy and focused on the current tasks and functionalities.

* Updated package.json with descriptions

All package.json files across various modules have been updated with appropriate descriptions for better understanding. Also, an "ignored" key has been added to native-federation-tests-typescript-plugins/package.json. These changes will help provide clarity and context about the purpose and functionality of each module.

* Modify e2e:ci script in package.json

Extended the sleep delay in the e2e:ci command in bi-directional/package.json from 30 to 40 seconds. Additionally, the build and serve commands have been appended to the beginning of the e2e:ci script to ensure applications are properly built and served before tests are run. This should provide more consistent and reliable test execution in the CI/CD pipeline.

* Remove unnecessary files and configurations

Deleted a substantial amount of files including app.e2e-spec.ts, app.po.ts, protractor.conf.js, tsconfig.json and a variety of profiles from angular12-microfrontends. This is part of a broader cleanup effort to streamline the project structure, remove redundancies and improve the maintainability of the source code.

* Add "ignored" property to app packages

The "ignored" property has been added to package.json files in several app directories, namely app-01, app-02, app-03, app-04, and app-05. This modification aims to ensure certain applications are omitted during specific operations, contributing to a more efficient project workflow.

* Add "ignored" attribute to various package.json files

The "ignored" attribute has been added to the package.json files of multiple applications to enhance workflow efficiency. This update is intended to exclude certain applications during specified operations, streamlining project management and reducing unnecessary operations.

* Simplify package names in various package.json files

The lengthy package names in multiple package.json files have been simplified for readability and convenience. The description of the main package.json file for the frontend discovery service has also been updated to give a more detailed explanation of the project.

* Update package description in package.json

The description field in the package.json file of "i18next-nextjs-react" has been updated to provide a clear understanding of the project. The new description highlights its capability of using dedicated i18next instances in micro frontends, and its feature of changing languages in one that affects all.

* Add 'ignored' field to package.json

An 'ignored' field has been added to the package.json file of the "medusa-nx-native-federation-example" project. This addition helps to indicate the packages that can be ignored during certain processes, improving the efficiency of package management.

* Add descriptions and 'ignored' field to multiple package.json files

Descriptions have been added to package.json files for better package understanding. An 'ignored' field has also been introduced in some package.json files of the "quasar-cli-vue3-webpack-javascript" project to indicate packages that can be bypassed during certain processes, thereby enhancing package management efficiency.

* Update package.json and remove cypress.env.json file

Made several modifications to package.json files, including the addition of descriptions and an 'ignored' field. These changes improve the readability and package management efficiency. Additionally, the cypress.env.json file has been removed as it's no longer needed.

* Rename 'react-hmr' directory to 'react-livereload'

The primary change in this commit is the renaming of 'react-hmr' directory to 'react-livereload' across all file paths. All corresponding variable names and descriptions have been updated. Also, the cypress.env.json file has been removed. These changes are done to reflect the implementation of the LiveReload functionality in the React app and cleaning up unneeded files.

* Add description to rspack_webpack and remove from app-05 package.json

This commit introduces a detailed description to the rspack_webpack's package.json file, clarifying the purpose and structure of the software. At the same time, it removes the description from the app-05's package.json, as it was deemed irrelevant or redundant. These changes aim to enhance accurate communication about the software's functionality and overall cleanup.

* Update package.json in rspack-webpack-offload

This commit adds a description to the package.json file in the rspack-webpack-offload package. This is being done in order to clearly define the purpose and functionality of the package. It will allow users and developers to better understand how this package is used in the overall project.

* Add description to runtime-plugins package.json files

A description has been added to two package.json files within the runtime-plugins package. The update includes a definition for the "runtime-plugins" and an explanation for "control-sharing" functionality. This enhancement enhances clarity on the purpose and usage of these packages in the overall project.

* xAdd description to rust-wasm and self-healing package.json files

Added descriptions to the rust-wasm and self-healing package.json files. The descriptions provide a brief explanation about the usage and purpose of these packages; the rust-wasm is about module federation of Wasm modules, using the Conway's Game of Life example, while the self-healing demonstrates self-healing capabilities with Module Federation.

* xAdd description to rust-wasm and self-healing package.json files

Added descriptions to the rust-wasm and self-healing package.json files. The descriptions provide a brief explanation about the usage and purpose of these packages; the rust-wasm is about module federation of Wasm modules, using the Conway's Game of Life example, while the self-healing demonstrates self-healing capabilities with Module Federation.

* xAdd description to rust-wasm and self-healing package.json files

Added descriptions to the rust-wasm and self-healing package.json files. The descriptions provide a brief explanation about the usage and purpose of these packages; the rust-wasm is about module federation of Wasm modules, using the Conway's Game of Life example, while the self-healing demonstrates self-healing capabilities with Module Federation.

* Update rust-wasm and self-healing package descriptions

Enhanced the package.json descriptions for the rust-wasm and self-healing examples. The updated descriptions provide improved understanding of module federation concepts; enabling Wasm module sharing in the rust-wasm example, and demonstrating self-healing capabilities in the self-healing example.

* Update rust-wasm and self-healing package descriptions

Enhanced the package.json descriptions for the rust-wasm and self-healing examples. The updated descriptions provide improved understanding of module federation concepts; enabling Wasm module sharing in the rust-wasm example, and demonstrating self-healing capabilities in the self-healing example.

* Update rust-wasm and self-healing package descriptions

Enhanced the package.json descriptions for the rust-wasm and self-healing examples. The updated descriptions provide improved understanding of module federation concepts; enabling Wasm module sharing in the rust-wasm example, and demonstrating self-healing capabilities in the self-healing example.

* Revise formatting in output.md

Adjusted formatting in output.md for better readability. Shifted status indicators to be inline with the example titles rather than on the left. This makes the document clearer and easier to parse visually.

* Revise formatting in output.md

Adjusted formatting in output.md for better readability. Shifted status indicators to be inline with the example titles rather than on the left. This makes the document clearer and easier to parse visually.

* Update formatting for better readability in output.md

The formatting in output.md has been improved for

* better readability. A function to recursively search for 'rspack' or 'webpack' configuration files was added. The 'getDirectoryTree' function now checks for these configuration files and adds the information to the resulting markdown. Consequently, the markdown displays whether 'rspack' or 'webpack' are used in each directory, enhancing clarity.

* locks

---------

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

README.md

@@ -4,6 +4,7 @@
     "./app1",
     "./app2"
   ],
+  "description": "This example demos automatic-vendor-sharing, each host/remote will share all vendors possible",
   "private": true,
   "version": "0.0.0",
   "scripts": {

advanced-api/automatic-vendor-sharing/package.json

@@ -6,6 +6,7 @@
     "./app3"
   ],
   "private": true,
+  "description": "Basic demo of a host app loading remote components and dynamically sharing vendor code with unknown remotes, or without a Federation Plugin",
   "version": "0.0.0",
   "scripts": {
     "start": "pnpm --filter dynamic-remotes_app* --parallel start",

advanced-api/dynamic-remotes/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "advanced-apis",
+  "description": "More Examples using advanced apis or concepts"
+}

advanced-api/package.json

@@ -1,5 +1,6 @@
 {
   "name": "angular-universal-ssr",
+  "description": "Angular Universal SSR with Module Federation",
   "private": true,
   "workspaces": [
     "./client-app",

angular-universal-ssr/package.json

@@ -1,5 +1,6 @@
 {
   "name": "angular11-microfrontends-ngrx",
+  "description": "Module Federation with Angular 11, featuring shared modules and NgRx",
   "workspaces": [
     "./projects/*"
   ],

angular11-microfrontends-ngrx/package.json

@@ -1,5 +1,6 @@
 {
   "name": "angular11-microfrontends-ngxs",
+  "description": "Module Federation with Angular 11, featuring shared modules and NGXS.",
   "workspaces": [
     "./projects/*"
   ],