feat: support SSR data loader #2820

2heal1 · 2024-08-05T08:07:35Z

Description

Support data fetch with app level provider in Modern.js
Support partial route SSR by setting specific route id , include remote provider

Related Issue

Types of changes

Docs change / refactoring / dependency upgrade
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Checklist

I have added tests to cover my changes.
All new and existing tests passed.
I have updated the documentation.

changeset-bot · 2024-08-05T08:07:39Z

⚠️ No Changeset found

Latest commit: d501a48

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2024-08-05T08:07:51Z

✅ Deploy Preview for module-federation-docs ready!

Name	Link
🔨 Latest commit	`d501a48`
🔍 Latest deploy log	https://app.netlify.com/sites/module-federation-docs/deploys/671245fe58222d00078a7fbe
😎 Deploy Preview	https://deploy-preview-2820--module-federation-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

squadronai

Summary

This pull request introduces a new feature to support server-side rendering (SSR) data loading. The key changes include:

Adds a new console log statement in the packages/runtime/src/index.ts file to log the runtime initialization process, including the name of the federation instance and whether an instance already exists. This provides better visibility into the runtime initialization process.
Integrates the new data loader functionality with the existing codebase, ensuring seamless compatibility and enabling server-side rendering of data.
The new feature is expected to improve the overall performance and user experience of the application by allowing data to be loaded on the server-side, reducing the initial load time for the client.

File Summaries

File	Summary
packages/runtime/src/index.ts	The code changes introduce a new console log statement to log the runtime initialization process, including the name of the federation instance and whether an instance already exists.

squadronai

Incremental Review

Comments posted: 0

Configuration

Squadron Mode: essential

Commits Reviewed

9b6fc42d20d2a775def3419fb1ec0ec908346c95...4b7e155b668cba969b248fcb7cb62070f5d593a5

Files Reviewed

packages/sdk/src/types/plugins/ModuleFederationPlugin.ts

Files Ignored

These files were ignored due to the filter in the squadron.yaml file.

apps/modernjs-ssr-data-loader/host/CHANGELOG.md
apps/modernjs-ssr-data-loader/host/modern.config.ts
apps/modernjs-ssr-data-loader/host/module-federation.config.ts
apps/modernjs-ssr-data-loader/host/package.json
apps/modernjs-ssr-data-loader/host/project.json
apps/modernjs-ssr-data-loader/host/src/entry-one/components/Content.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/components/stuff.module.css
apps/modernjs-ssr-data-loader/host/src/entry-one/components/stuff.module.css.d.ts
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/index.css
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/pathname/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/pathname/mf.json
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/federation/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/federation/mf.json
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/modern-app-env.d.ts
apps/modernjs-ssr-data-loader/host/tsconfig.app.json
apps/modernjs-ssr-data-loader/host/tsconfig.json
apps/modernjs-ssr-data-loader/host/tsconfig.spec.json
apps/modernjs-ssr-data-loader/remote/CHANGELOG.md
apps/modernjs-ssr-data-loader/remote/modern.config.ts
apps/modernjs-ssr-data-loader/remote/module-federation.config.ts
apps/modernjs-ssr-data-loader/remote/package.json
apps/modernjs-ssr-data-loader/remote/project.json
apps/modernjs-ssr-data-loader/remote/src/.eslintrc.js
apps/modernjs-ssr-data-loader/remote/src/components/Button.tsx
apps/modernjs-ssr-data-loader/remote/src/components/Image.tsx
apps/modernjs-ssr-data-loader/remote/src/components/stuff.module.css
apps/modernjs-ssr-data-loader/remote/src/components/stuff.module.css.d.ts
apps/modernjs-ssr-data-loader/remote/src/modern-app-env.d.ts
apps/modernjs-ssr-data-loader/remote/src/routes/a/page.data.ts
apps/modernjs-ssr-data-loader/remote/src/routes/a/page.tsx
apps/modernjs-ssr-data-loader/remote/src/routes/index.css
apps/modernjs-ssr-data-loader/remote/src/routes/layout.tsx
apps/modernjs-ssr-data-loader/remote/src/routes/page.data.ts
apps/modernjs-ssr-data-loader/remote/src/routes/page.tsx
apps/modernjs-ssr-data-loader/remote/tsconfig.app.json
apps/modernjs-ssr-data-loader/remote/tsconfig.json
apps/modernjs-ssr-data-loader/remote/tsconfig.spec.json
apps/modernjs-ssr/dynamic-nested-remote/package.json
apps/modernjs-ssr/dynamic-remote-new-version/package.json
apps/modernjs-ssr/dynamic-remote/package.json
apps/modernjs-ssr/host/package.json
apps/modernjs-ssr/nested-remote/package.json
apps/modernjs-ssr/remote-new-version/package.json
apps/modernjs-ssr/remote/package.json
packages/modernjs/package.json
packages/modernjs/src/cli/configPlugin.ts
packages/modernjs/src/cli/dataLoader/ast/constant.ts
packages/modernjs/src/cli/dataLoader/ast/generateRoutes.ts
packages/modernjs/src/cli/dataLoader/ast/index.ts
packages/modernjs/src/cli/dataLoader/generateRouteFile.ts
packages/modernjs/src/cli/dataLoader/patchMFConfig.ts
packages/modernjs/src/cli/dataLoader/plugin.ts
packages/modernjs/src/cli/index.ts
packages/modernjs/src/cli/mfRuntimePlugins/inject-node-fetch.ts
packages/modernjs/src/cli/mfRuntimePlugins/node.ts
packages/modernjs/src/cli/mfRuntimePlugins/resolve-entry-ipv4.ts
packages/modernjs/src/cli/server/dataLoaderPlugin.ts
packages/modernjs/src/cli/server/fetchRemoteFullRoutesMap.ts
packages/modernjs/src/cli/ssrPlugin.ts
packages/modernjs/src/cli/utils.spec.ts
packages/modernjs/src/cli/utils.ts
packages/modernjs/src/constant.ts
packages/modernjs/src/interfaces/route.ts
packages/modernjs/src/runtime/dataLoader/plugin.tsx
packages/modernjs/src/runtime/dataLoader/utils.ts
packages/modernjs/src/runtime/index.ts
packages/modernjs/src/runtime/utils.ts
packages/modernjs/src/runtime/withMFRouteId.ts
packages/modernjs/src/ssr-runtime/plugin.tsx
packages/modernjs/src/types/index.ts
pnpm-lock.yaml
pnpm-workspace.yaml

squadronai

Incremental Review

Comments posted: 1

Configuration

Squadron Mode: essential

Commits Reviewed

3ffd8ff5fbfc0511411dddc69fb3c46a7589957e...0d1b3504147a1c60b3abdcb7098c1c12610fec8b

Files Reviewed

packages/runtime/src/index.ts

Files Ignored

These files were ignored due to the filter in the squadron.yaml file.

apps/modernjs-ssr-data-loader/host/CHANGELOG.md
apps/modernjs-ssr-data-loader/host/modern.config.ts
apps/modernjs-ssr-data-loader/host/module-federation.config.ts
apps/modernjs-ssr-data-loader/host/package.json
apps/modernjs-ssr-data-loader/host/project.json
apps/modernjs-ssr-data-loader/host/src/entry-one/components/Content.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/components/stuff.module.css
apps/modernjs-ssr-data-loader/host/src/entry-one/components/stuff.module.css.d.ts
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/index.css
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/pathname/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/pathname/mf.json
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/federation/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/federation/mf.json
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/modern-app-env.d.ts
apps/modernjs-ssr-data-loader/host/tsconfig.app.json
apps/modernjs-ssr-data-loader/host/tsconfig.json
apps/modernjs-ssr-data-loader/host/tsconfig.spec.json
apps/modernjs-ssr-data-loader/remote/CHANGELOG.md
apps/modernjs-ssr-data-loader/remote/modern.config.ts
apps/modernjs-ssr-data-loader/remote/module-federation.config.ts
apps/modernjs-ssr-data-loader/remote/package.json
apps/modernjs-ssr-data-loader/remote/project.json
apps/modernjs-ssr-data-loader/remote/src/.eslintrc.js
apps/modernjs-ssr-data-loader/remote/src/components/Button.tsx
apps/modernjs-ssr-data-loader/remote/src/components/Image.tsx
apps/modernjs-ssr-data-loader/remote/src/components/stuff.module.css
apps/modernjs-ssr-data-loader/remote/src/components/stuff.module.css.d.ts
apps/modernjs-ssr-data-loader/remote/src/modern-app-env.d.ts
apps/modernjs-ssr-data-loader/remote/src/routes/a/page.data.ts
apps/modernjs-ssr-data-loader/remote/src/routes/a/page.tsx
apps/modernjs-ssr-data-loader/remote/src/routes/index.css
apps/modernjs-ssr-data-loader/remote/src/routes/layout.tsx
apps/modernjs-ssr-data-loader/remote/src/routes/page.data.ts
apps/modernjs-ssr-data-loader/remote/src/routes/page.tsx
apps/modernjs-ssr-data-loader/remote/tsconfig.app.json
apps/modernjs-ssr-data-loader/remote/tsconfig.json
apps/modernjs-ssr-data-loader/remote/tsconfig.spec.json
apps/modernjs-ssr/dynamic-nested-remote/package.json
apps/modernjs-ssr/dynamic-remote-new-version/package.json
apps/modernjs-ssr/dynamic-remote/package.json
apps/modernjs-ssr/host/package.json
apps/modernjs-ssr/nested-remote/package.json
apps/modernjs-ssr/remote-new-version/package.json
apps/modernjs-ssr/remote/package.json
packages/modernjs/package.json
packages/modernjs/src/cli/configPlugin.ts
packages/modernjs/src/cli/dataLoader/ast/constant.ts
packages/modernjs/src/cli/dataLoader/ast/generateRoutes.ts
packages/modernjs/src/cli/dataLoader/ast/index.ts
packages/modernjs/src/cli/dataLoader/clearMFCache.ts
packages/modernjs/src/cli/dataLoader/generateRouteFile.ts
packages/modernjs/src/cli/dataLoader/patchMFConfig.ts
packages/modernjs/src/cli/dataLoader/plugin.ts
packages/modernjs/src/cli/index.ts
packages/modernjs/src/cli/mfRuntimePlugins/node-fetch.ts
packages/modernjs/src/cli/mfRuntimePlugins/node.ts
packages/modernjs/src/cli/mfRuntimePlugins/resolve-entry-ipv4.ts
packages/modernjs/src/cli/server/dataLoaderPlugin.ts
packages/modernjs/src/cli/server/fetchRemoteFullRoutesMap.ts
packages/modernjs/src/cli/ssrPlugin.ts
packages/modernjs/src/cli/utils.spec.ts
packages/modernjs/src/cli/utils.ts
packages/modernjs/src/constant.ts
packages/modernjs/src/global.d.ts
packages/modernjs/src/interfaces/route.ts
packages/modernjs/src/runtime/dataLoader/plugin-inject-assets.tsx
packages/modernjs/src/runtime/dataLoader/plugin.tsx
packages/modernjs/src/runtime/dataLoader/utils.ts
packages/modernjs/src/runtime/index.ts
packages/modernjs/src/runtime/withMFRouteId.ts
packages/modernjs/src/ssr-runtime/plugin.tsx
packages/modernjs/src/types/index.ts
pnpm-lock.yaml
pnpm-workspace.yaml
webpack/types.d.ts

squadronai

Incremental Review

Comments posted: 0

Configuration

Squadron Mode: essential

Commits Reviewed

13975e1793d1e1eda4b3aed0ed919fddcff02aaf...25e106b347f8adb299a4dbd0f090fe3789c589ce

Files Reviewed

packages/runtime/src/index.ts

Files Ignored

These files were ignored due to the filter in the squadron.yaml file.

apps/modernjs-ssr-data-loader/host/CHANGELOG.md
apps/modernjs-ssr-data-loader/host/modern.config.ts
apps/modernjs-ssr-data-loader/host/module-federation.config.ts
apps/modernjs-ssr-data-loader/host/package.json
apps/modernjs-ssr-data-loader/host/project.json
apps/modernjs-ssr-data-loader/host/src/entry-one/components/Content.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/components/stuff.module.css
apps/modernjs-ssr-data-loader/host/src/entry-one/components/stuff.module.css.d.ts
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/index.css
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/pathname/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/nested-routes/pathname/mf.json
apps/modernjs-ssr-data-loader/host/src/entry-one/routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/federation/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/federation/mf.json
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/layout.tsx
apps/modernjs-ssr-data-loader/host/src/entry-two/routes/page.tsx
apps/modernjs-ssr-data-loader/host/src/modern-app-env.d.ts
apps/modernjs-ssr-data-loader/host/tsconfig.app.json
apps/modernjs-ssr-data-loader/host/tsconfig.json
apps/modernjs-ssr-data-loader/host/tsconfig.spec.json
apps/modernjs-ssr-data-loader/remote/CHANGELOG.md
apps/modernjs-ssr-data-loader/remote/modern.config.ts
apps/modernjs-ssr-data-loader/remote/module-federation.config.ts
apps/modernjs-ssr-data-loader/remote/package.json
apps/modernjs-ssr-data-loader/remote/project.json
apps/modernjs-ssr-data-loader/remote/src/.eslintrc.js
apps/modernjs-ssr-data-loader/remote/src/components/Button.tsx
apps/modernjs-ssr-data-loader/remote/src/components/Image.tsx
apps/modernjs-ssr-data-loader/remote/src/components/stuff.module.css
apps/modernjs-ssr-data-loader/remote/src/components/stuff.module.css.d.ts
apps/modernjs-ssr-data-loader/remote/src/modern-app-env.d.ts
apps/modernjs-ssr-data-loader/remote/src/routes/a/page.data.ts
apps/modernjs-ssr-data-loader/remote/src/routes/a/page.tsx
apps/modernjs-ssr-data-loader/remote/src/routes/index.css
apps/modernjs-ssr-data-loader/remote/src/routes/layout.tsx
apps/modernjs-ssr-data-loader/remote/src/routes/page.data.ts
apps/modernjs-ssr-data-loader/remote/src/routes/page.tsx
apps/modernjs-ssr-data-loader/remote/tsconfig.app.json
apps/modernjs-ssr-data-loader/remote/tsconfig.json
apps/modernjs-ssr-data-loader/remote/tsconfig.spec.json
apps/modernjs-ssr/dynamic-nested-remote/package.json
apps/modernjs-ssr/dynamic-remote-new-version/package.json
apps/modernjs-ssr/dynamic-remote/package.json
apps/modernjs-ssr/host/package.json
apps/modernjs-ssr/nested-remote/package.json
apps/modernjs-ssr/remote-new-version/package.json
apps/modernjs-ssr/remote/package.json
packages/modernjs/package.json
packages/modernjs/src/cli/configPlugin.ts
packages/modernjs/src/cli/dataLoader/ast/constant.ts
packages/modernjs/src/cli/dataLoader/ast/generateRoutes.ts
packages/modernjs/src/cli/dataLoader/ast/index.ts
packages/modernjs/src/cli/dataLoader/clearMFCache.ts
packages/modernjs/src/cli/dataLoader/generateRouteFile.ts
packages/modernjs/src/cli/dataLoader/patchMFConfig.ts
packages/modernjs/src/cli/dataLoader/plugin.ts
packages/modernjs/src/cli/index.ts
packages/modernjs/src/cli/mfRuntimePlugins/node-fetch.ts
packages/modernjs/src/cli/mfRuntimePlugins/node.ts
packages/modernjs/src/cli/mfRuntimePlugins/resolve-entry-ipv4.ts
packages/modernjs/src/cli/server/dataLoaderPlugin.ts
packages/modernjs/src/cli/server/fetchRemoteFullRoutesMap.ts
packages/modernjs/src/cli/ssrPlugin.ts
packages/modernjs/src/cli/utils.spec.ts
packages/modernjs/src/cli/utils.ts
packages/modernjs/src/constant.ts
packages/modernjs/src/global.d.ts
packages/modernjs/src/interfaces/route.ts
packages/modernjs/src/runtime/dataLoader/plugin-inject-assets.tsx
packages/modernjs/src/runtime/dataLoader/plugin.tsx
packages/modernjs/src/runtime/dataLoader/utils.ts
packages/modernjs/src/runtime/index.ts
packages/modernjs/src/runtime/withMFRouteId.ts
packages/modernjs/src/ssr-runtime/plugin.tsx
packages/modernjs/src/types/index.ts
pnpm-lock.yaml
pnpm-workspace.yaml
webpack/types.d.ts

2heal1 force-pushed the feat/data-loader branch from c23b291 to 1ce8b6a Compare August 12, 2024 11:40

2heal1 force-pushed the feat/data-loader branch 2 times, most recently from 1d849e7 to 494f102 Compare August 27, 2024 06:37

2heal1 force-pushed the feat/data-loader branch 2 times, most recently from 86cee8a to 120fa83 Compare September 6, 2024 06:30

squadronai bot reviewed Sep 9, 2024

View reviewed changes

2heal1 force-pushed the feat/data-loader branch from 0648582 to 7128243 Compare September 12, 2024 02:33

squadronai bot reviewed Sep 12, 2024

View reviewed changes

2heal1 force-pushed the feat/data-loader branch from 154e8df to 25e106b Compare September 18, 2024 02:38

squadronai bot reviewed Sep 18, 2024

View reviewed changes

2heal1 force-pushed the feat/data-loader branch 2 times, most recently from b09a7f5 to b319a4e Compare September 19, 2024 06:56

2heal1 force-pushed the feat/data-loader branch 2 times, most recently from 9d56403 to d445dfc Compare September 30, 2024 08:27

module-federation deleted a comment from squadronai bot Oct 8, 2024

2heal1 force-pushed the feat/data-loader branch from 50171aa to e923da0 Compare October 11, 2024 06:10

2heal1 changed the title ~~WIP: feat: support SSR data loader~~ feat: support SSR data loader Oct 11, 2024

github-actions bot added the change: feat label Oct 11, 2024

2heal1 force-pushed the feat/data-loader branch from d9fdd66 to d7436ec Compare October 14, 2024 09:07

2heal1 added 8 commits October 16, 2024 15:54

feat: support data loader

6af42ce

chore: add e2e test

42d4d73

fix: component and element can only one

06ee5ef

fix: add react-router-dom as shared instead of @modern-js/runtime/router

df3a261

chore: format

347c73c

fix: add miss deps

36041e9

chore: fix ci

6acd9f6

chore: add test & docs

aed4556

2heal1 force-pushed the feat/data-loader branch from d9242ab to aed4556 Compare October 16, 2024 07:56

2heal1 added 8 commits October 16, 2024 16:00

chore: fix lockfile

d4904e3

fix(modern-js-plugin): unit test

00ae8f1

chore: add private:true to demo

7ac5dac

chore: split routes plugin

08c09ab

docs: add docs

c9eaef3

fix: pass options

1cd6319

chore: add log

be5b4ab

docs: update docs

d501a48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support SSR data loader #2820

feat: support SSR data loader #2820

2heal1 commented Aug 5, 2024 •

edited

Loading

changeset-bot bot commented Aug 5, 2024 •

edited

Loading

netlify bot commented Aug 5, 2024 •

edited

Loading

squadronai bot left a comment •

edited

Loading

squadronai bot left a comment

squadronai bot left a comment

squadronai bot left a comment

feat: support SSR data loader #2820

Are you sure you want to change the base?

feat: support SSR data loader #2820

Conversation

2heal1 commented Aug 5, 2024 • edited Loading

Description

Related Issue

Types of changes

Checklist

changeset-bot bot commented Aug 5, 2024 • edited Loading

⚠️ No Changeset found

netlify bot commented Aug 5, 2024 • edited Loading

✅ Deploy Preview for module-federation-docs ready!

squadronai bot left a comment • edited Loading

Choose a reason for hiding this comment

Summary

squadronai bot left a comment

Choose a reason for hiding this comment

Incremental Review

squadronai bot left a comment

Choose a reason for hiding this comment

Incremental Review

squadronai bot left a comment

Choose a reason for hiding this comment

Incremental Review

2heal1 commented Aug 5, 2024 •

edited

Loading

changeset-bot bot commented Aug 5, 2024 •

edited

Loading

netlify bot commented Aug 5, 2024 •

edited

Loading

squadronai bot left a comment •

edited

Loading