Adds a Module Federation innerloop experience (#16771)

* Module federation innerloop experience

* Change files

change/@fluentui-react-2021-02-02-11-33-13-feat-mf.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Module federation innerloop experience",
+  "packageName": "@fluentui/react",
+  "email": "kchau@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-02T19:33:13.901Z"
+}

packages/react/just.config.ts

@@ -1,3 +1,10 @@
-import { preset } from '@fluentui/scripts';
+import { task, webpackDevServerTask, preset } from '@fluentui/scripts';
 
 preset();
+
+task(
+  'mf',
+  webpackDevServerTask({
+    config: 'webpack.mf.config.js',
+  }),
+);

packages/react/package.json

@@ -25,7 +25,8 @@
     "start:legacy": "yarn workspace @fluentui/public-docsite-resources start",
     "start-test": "just-scripts jest-watch",
     "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "update-snapshots": "just-scripts jest -u",
+    "mf": "just-scripts mf"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.0.0-beta.1",

packages/react/webpack.mf.config.js

@@ -0,0 +1,57 @@
+const path = require('path');
+const fs = require('fs');
+const webpack = require('webpack');
+const getResolveAlias = require('@fluentui/scripts/webpack/getResolveAlias');
+const { createServeConfig } = require('@fluentui/scripts/webpack/webpack-resources');
+const { webpackMerge } = require('just-scripts');
+
+const shared = {
+  react: { singleton: true },
+  'react-dom': { singleton: true },
+};
+
+const rootComponents = fs
+  .readdirSync(path.join(__dirname, 'src'))
+  .filter(filename => filename[0].toUpperCase() === filename[0])
+  .map(filename => filename.replace(/\.tsx?/, ''));
+const rootComponentsExposes = {};
+for (const component of rootComponents) {
+  rootComponentsExposes[`./lib/${component}`] = `@fluentui/react/src/${component}`;
+}
+
+const myConfig = {
+  output: {},
+  entry: {},
+  mode: 'development',
+  devtool: 'cheap-module-source-map',
+  optimization: {
+    concatenateModules: false,
+  },
+  module: {
+    rules: [],
+  },
+  plugins: [
+    new webpack.container.ModuleFederationPlugin({
+      name: 'fluentuiReact',
+      filename: 'remoteEntry.js',
+      exposes: {
+        ...rootComponentsExposes,
+        './lib/compat/Button': '@fluentui/react/src/compat/Button',
+        '.': '@fluentui/react/src/index',
+        './lib/index': '@fluentui/react/src/index',
+      },
+      shared,
+    }),
+  ],
+  resolve: {
+    alias: getResolveAlias(),
+  },
+  devServer: {
+    port: 2345,
+    contentBase: 'dist',
+  },
+};
+
+const metaConfig = webpackMerge.merge(createServeConfig(), myConfig);
+
+module.exports = metaConfig;