Implement RemoteView

[sgb-io]

Implement the RemoteView package

Extracts the <RemoteView /> component from the Modular Microfrontends demo into a new library @modular-scripts/remote-view.

View the new docs at packages/remote-view/README.md.

What is different vs the existing demo?

• New approach to error handling. More error cases handled vs the demo. See docs for details.
• Loading state can be customised - see docs for details
• Code broken up into smaller pieces
• Unit tests plus puppeteer-based integration tests
• Added docs
• Added a demos package called remote-view-demos, which acts as a showcase and contains useful examples for consumers

What is the contents?

• The new remote-view package
• The new remote-view-demos package - storybook-like showcase of various examples of using <RemoteView />
• New fixtures: 4 example ESM Views
• New fixtures: remote-view-fake-cdn contains the 4 example ESM Views, pre-built, plus react/react-dom as they would be exposed on esm.sh. This allows us to fully test <RemoteView /> without a dependency on esm.sh (or other esm CDN). Unfortunately it's 12k lines tracked in the repo, but it's all contained within __fixtures__.

TODO

• Loading component prop, with a default
• Error handling approach
• Installation bit on docs (mention the package name so that it can be copy/pasted)
• Coverage - iframe fallback, error cases, loading state
• Debug/fix broken ubuntu tests
• Document what's different vs the existing demo in the PR
• Notes on security
• Permanently add RemoteView demo esm-view package
• Clarify / test the seemingly-superfluous setState call
• Handle non-RemoteViewError errors appropriately
• Add changeset
• Consider the benefits / trade-offs from loading views in the provider instead of the component, get consensus from team
• Make changes to shift data fetching into the provider for max efficiency
• Docs: Update docs after new error boundary approach
• Docs: Update contributing docs for remote-view-fake-cdn. Maybe move this into a readme that is local to the fixture. Also, document how to use the component in local dev via another esm-view
• Docs: Add docs for this to the public docs area - under Components?
• Verdaccio e2e test. Ensure that a project consuming the components can be built and served and still work. Test this both with webpack but also esbuild.
• Update docs to make esm-view and React constraints on the host very clear
• Verify the GitHub publishing workflow for the new package

[changeset-bot]

🦋 Changeset detected

Latest commit: dda5fae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@modular-scripts/modular-types	Minor
@modular-scripts/remote-view	Minor

Not sure what this means? Click here to learn what changesets are.

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

[sgb-io]

Regarding this, we've added a security note to the docs, plus the code.

does need to be used responsibly, and developers should ensure they only load ESM Views from trusted sources

[cristiano-belloni]

@sgb-io I moved the base to feature/v4.1

[cristiano-belloni]

I think you need to build RemoteView in the root package.json too.