Wmf

[mbeckert]

WMF

host-app

webpack/base.js

ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
[...]
new ModuleFederationPlugin({
  name: 'host',
  remotes: {},
  shared: Object.keys(packageJson.dependencies),
}),

src/routes/Home.tsx <SwidgetLoader url="http://127.0.0.1:7070/swidgetEntry.js" scope="swidget" module="app" />

swidget-app

webpack/base.js

ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
[...]
new ModuleFederationPlugin({
  name: 'swidget',
  filename: "swidgetEntry.js",
  exposes: {
    'app': './src/App',
  },
  shared: Object.keys(packageJson.dependencies),
}),

router

• integrated universal-router
• see https://github.com/kriasoft/universal-router/blob/main/docs/api.md
• implemented 3 URL-serialization-strategies (path, hash, query)

route-declaration

NEW

container.bind<RouteConfigType>(serviceIds.routes).toConstantValue([
    {
      name: 'home',
      path: '',
      action: () => {
        return () => <h1>Hello World</h1>
      },
    }
  ]);

OLD

  container.bind<IRouteConfig[]>(serviceIds.routes).toConstantValue([
    {
      component: () => <h1>Hello World</h1>,
      name: 'home',
      pattern: '/',
    },
  ]);

service

• added navigateTo()
• marked linkToHome() and navigateToHome() as deprecated since there is no fix home-route

  route-serializers

  Path (default)

• http://127.0.0.1:8080/demoContent

  container.bind(serviceIds.routerSerializeRouteInUrlStrategy).toConstantValue(
  new Path()
  );

  QueryString (default as swidget)

• http://127.0.0.1:8080/?example=%2FdemoContent

  container.bind(serviceIds.routerSerializeRouteInUrlStrategy).toConstantValue(
  new QueryString('example')
  );

  Hashbang

• http://127.0.0.1:8080/#!%2FdemoContent

  container.bind(serviceIds.routerSerializeRouteInUrlStrategy).toConstantValue(
  new Hashbang()
  );

  Link-Component

• renders anchor-element

  <Link name="demoContent" query={{ gordon: 'shumway' }} parameter={{ le: 'go' }}>
  link
  </Link>

[mbeckert]

successfully tested the new core with the following test-scenarios considering old (classic hotloader) and new boilerplate (webpack5 wmf) - in DEV and PROD env.

test-scenario	DEV classic hotloading	PROD classic hotloading	DEV webpack module federation	PROD webpack module federation
nested routing	√	√	√	√
swidget has further dependency (unknown to host)	√	√	√	√
swidget consumes DI Binding from host	√	√	√	√
swidget re-binds DI Binding from host	√	√	√	√
interconnection between host and swidget	√	√	√	√

[BlackDark]

@mbeckert rebase please to resolve conflicts

[prode81]

First findings:

• When adding a swidget, we get following error in console on route-changes: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in RouterProvider (created by swidget)
• Swidget crashes after a few route-changes.
• Router replaces / to %2F, when using query or hashbang strategy (not an error, but if possible, this could be optimized)