Investigate: Strong typing across microfrontends

[mykeels]

Background

One of the disadvantages of using Microfrontends is developers lose type information because components are loaded at runtime, rather than at compile time.

E.g.
A team running Microfrontend A relies on a component in Microfrontend B which takes { a: number } as props. If for some reason, the props become { a: string } this can have consequences on the operation of Microfrontend A, if this change is not properly handled in B's instantiation logic.

What Ifs?

• What if Microfrontend A's developers could get access to the typing information for Microfrontend B's props at development time with typescript?
• What would such development experience look like?
  • Can it be optimized for low effort, high impact?
• How can these types be aggregated, as each microfrontend is potentially developed and deployed by separate teams with separate infrastructure?
  • Which version of a microfrontend's deployments would be considered for type information? E.g. listening to types from a non-trunk branch deployment is potentially redundant until it is merged, right?
    • And if we only consider trunk branch deployments, then which versions of it, considering that the microfrontend could be rolled back to any of the last N versions?
• How can this all be done consistently?

How this PR helps?

In this PR:

• Every microfrontend-manifest.json file:
  • is now generated, instead of being managed by hand
  • now includes type information for slot component props, using JSON schema
  • contained JSON schema for typed events that are emitted by the microfrontend.
• The microfrontends library:
  • exposes a jsonSchemaOf function that returns JSON schema of a zod type
  • uses generic types in the register function to provide strict typing of exposed modules
  • can have its register function run in a non-browser environment, so return metadata of exposed modules.
• Every mf-*/package.json can have an equivalent git-ignored package.json.d.ts file that provides intellisense, so we can use the package's name as the scope of the microfrontend with strict typing.
• The type information persisted in each microfrontend-manifest.json file is used to provide type checks in the IDE.