feat: support react-native #2812

jbroma · 2024-07-30T14:23:00Z

Description

- added separate loadScript and createScript methods for React Native
- added checks for node and RN environment
- unified CreateScriptHook typing

in node env we check for process.versions.node (source)
in RN we check for global.navigator which is set during initialisation of React Native core (source)

right now the whole loading process is handled internally through Re.Pack

Related Issue

#2811

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-07-30T14:23:04Z

⚠️ No Changeset found

Latest commit: 00bd6ea

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-07-30T14:23:16Z

✅ Deploy Preview for module-federation-docs ready!

Name	Link
🔨 Latest commit	`00bd6ea`
🔍 Latest deploy log	https://app.netlify.com/sites/module-federation-docs/deploys/66bdb5dcbb48be0008d1c2e8
😎 Deploy Preview	https://deploy-preview-2812--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.

zackarychapple · 2024-07-31T21:23:10Z

packages/runtime/src/module/index.ts

@@ -32,7 +32,7 @@ class Module {
 const remoteEntryExports = await getRemoteEntry({
 remoteInfo: this.remoteInfo,
 remoteEntryExports: this.remoteEntryExports,
- createScriptHook: (url: string, attrs: any) => {
+ createScriptHook: (url, attrs) => {


was this because we have a implicit dependency ts lint rule? if not why were the typings dropped?

typing comes from getRemoteEntry type which was modified now, so these typings became redundant

2heal1 · 2024-08-01T03:40:59Z

The runtime and sdk unit test failed and need to be fixed.
You can execute the follow scripts to reproduce:

nx test runtime
nx test sdk

…port

jbroma · 2024-08-01T10:43:55Z

@2heal1 tests fixed 🎉

I've added a more strict check for node env to account for that.

2heal1 · 2024-08-05T08:38:11Z

The content is no problem , but i think we should put the loadEntry into hook in case of the runtime code size become bigger with the more target supports .

For my thought , we can add a loaderHook named like loadEntry . And split getRemoteEntry into different runtime plugins which will call loadEntry hook .

Can you help to implement this ? If not, I will implement it next week and then merge this pr .

jbroma · 2024-08-05T09:36:02Z

The content is no problem , but i think we should put the loadEntry into hook in case of the runtime code size become bigger with the more target supports .

For my thought , we can add a loaderHook named like loadEntry . And split getRemoteEntry into different runtime plugins which will call loadEntry hook .

Can you help to implement this ? If not, I will implement it next week and then merge this pr .

Sure thing! What's the correct place for these runtime plugins to exist in the repo? Do we keep them in SDK?

2heal1 · 2024-08-05T09:41:17Z

The content is no problem , but i think we should put the loadEntry into hook in case of the runtime code size become bigger with the more target supports .
For my thought , we can add a loaderHook named like loadEntry . And split getRemoteEntry into different runtime plugins which will call loadEntry hook .
Can you help to implement this ? If not, I will implement it next week and then merge this pr .

Sure thing! What's the correct place for these runtime plugins to exist in the repo? Do we keep them in SDK?

Much appreciate ! The plugin can be placed in runtime/plugins and re-export as subpath

…federation-core into feat/react-native-support

2heal1 · 2024-08-16T02:38:59Z

packages/runtime/src/utils/load.ts

@@ -194,6 +196,60 @@ async function loadEntryNode({
 });
 }

+async function loadEntryReactNative({


since you have added loadEntry hook , you can add react-native support by providing runtime plugin .

Like adding a plugin named react-native-plugin here , and then add exports in package.json .

Users can use the runtimePlugin on demand.

jbroma added 3 commits July 30, 2024 11:41

feat: add node and react native env checks

8af455e

feat: initial support for react native

6a761ae

fix: typing for CreateScriptHook

a08e85b

github-actions bot added the change: feat label Jul 30, 2024

jbroma added 3 commits July 30, 2024 17:09

fix: use loadReactNative in runtime

ff4f3ab

fix: remove async from loadScriptReactNative to match other signatures

db8237d

fix: node env check

ee81c18

jbroma mentioned this pull request Jul 30, 2024

[WIP] feat: ModuleFederation 2.0 support callstack/repack#674

Draft

jbroma marked this pull request as ready for review July 30, 2024 17:45

zackarychapple reviewed Jul 31, 2024

View reviewed changes

jbroma added 3 commits August 1, 2024 11:25

fix: sdk tests

f58c46d

fix: make node env check more strict

8a06249

Merge remote-tracking branch 'origin/main' into feat/react-native-sup…

ca48c4f

…port

jbroma mentioned this pull request Aug 5, 2024

feat(runtime): add loadEntry hook #2826

Merged

6 tasks

ScriptedAlchemy requested review from ScriptedAlchemy, zhoushaw and 2heal1 August 9, 2024 01:06

ScriptedAlchemy and others added 4 commits August 8, 2024 18:07

Merge branch 'main' into feat/react-native-support

a3be0ba

Merge branch 'main' into feat/react-native-support

bc9a660

fix: issues after merge

5e66936

Merge branch 'feat/react-native-support' of github.com:jbroma/module-…

00bd6ea

…federation-core into feat/react-native-support

2heal1 reviewed Aug 16, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support react-native #2812

feat: support react-native #2812

jbroma commented Jul 30, 2024 •

edited

Loading

changeset-bot bot commented Jul 30, 2024 •

edited

Loading

netlify bot commented Jul 30, 2024 •

edited

Loading

zackarychapple Jul 31, 2024

jbroma Jul 31, 2024 •

edited

Loading

2heal1 commented Aug 1, 2024

jbroma commented Aug 1, 2024

2heal1 commented Aug 5, 2024

jbroma commented Aug 5, 2024

2heal1 commented Aug 5, 2024

2heal1 Aug 16, 2024 •

edited

Loading

feat: support react-native #2812

Are you sure you want to change the base?

feat: support react-native #2812

Conversation

jbroma commented Jul 30, 2024 • edited Loading

Description

Related Issue

Types of changes

Checklist

changeset-bot bot commented Jul 30, 2024 • edited Loading

⚠️ No Changeset found

netlify bot commented Jul 30, 2024 • edited Loading

✅ Deploy Preview for module-federation-docs ready!

zackarychapple Jul 31, 2024

Choose a reason for hiding this comment

jbroma Jul 31, 2024 • edited Loading

Choose a reason for hiding this comment

2heal1 commented Aug 1, 2024

jbroma commented Aug 1, 2024

2heal1 commented Aug 5, 2024

jbroma commented Aug 5, 2024

2heal1 commented Aug 5, 2024

2heal1 Aug 16, 2024 • edited Loading

Choose a reason for hiding this comment

jbroma commented Jul 30, 2024 •

edited

Loading

changeset-bot bot commented Jul 30, 2024 •

edited

Loading

netlify bot commented Jul 30, 2024 •

edited

Loading

jbroma Jul 31, 2024 •

edited

Loading

2heal1 Aug 16, 2024 •

edited

Loading