CodeSplitter to MDEE package

Author: WonSong

generators/microsoft-employee-experience-generator/examples/package-lock.json

@@ -26,9 +26,9 @@
     "@fluentui/style-utilities": "^8.6.5",
     "@fluentui/react": "^8.64.2",
     "@m365-admin/customizations": "^7.3.2",
-    "@micro-frontend-react/employee-experience": "../../../extensions/microsoft-employee-experience",
+    "@micro-frontend-react/employee-experience": "1.0.11",
     "@microsoft/myhub_webauth_sdk": "^0.0.1-Preview",
-    "@ms-ofb/officebrowserfeedback": "^1.8.9",
+    "@ms-ofb/officebrowserfeedback": "2.1.0",
     "@uifabric/charting": "^4.20.12",
     "@redux-devtools/extension": "^3.2.2",
     "axios": "^0.26.1",

generators/microsoft-employee-experience-generator/examples/package.json

@@ -20,6 +20,13 @@ export function Routes(): React.ReactElement {
           name: 'DynamicSubRoutes',
         }}
       />
+      <RouteComponentProvider
+        path="/codesplitting"
+        config={{
+          script: '/bundles/code-splitting.js',
+          name: 'CodeSplitting',
+        }}
+      />
     </Switch>
   );
 }

generators/microsoft-employee-experience-generator/examples/src/Routes.tsx

@@ -0,0 +1,63 @@
+import { Context, withContext } from '@micro-frontend-react/employee-experience/lib/Context';
+import { IEmployeeExperienceContext } from '@micro-frontend-react/employee-experience/lib/IEmployeeExperienceContext';
+import { getFeature, getPageLoadFeature } from '@micro-frontend-react/employee-experience/lib/UsageTelemetryHelper';
+import { useDynamicReducer } from '@micro-frontend-react/employee-experience/lib/useDynamicReducer';
+import { usePageTitle } from '@micro-frontend-react/employee-experience/lib/usePageTitle';
+import { usePageTracking } from '@micro-frontend-react/employee-experience/lib/usePageTracking';
+import * as React from 'react';
+import { CodeSplitter } from '@micro-frontend-react/employee-experience/lib/CodeSplitter';
+import * as Styled from '../Shared/Layout';
+import { requestMyProfile } from '../Shared/SharedExample.actions';
+import {
+  sharedExampleInitialState,
+  sharedExampleReducer,
+  sharedExampleReducerName,
+} from '../Shared/SharedExample.reducer';
+import { sharedExampleSagas } from '../Shared/SharedExample.sagas';
+import { IExampleAppState } from '../Shared/SharedExample.types';
+
+function CodeSplitting(): React.ReactElement {
+  const feature = getFeature(__APP_NAME__, 'CodeSplitting');
+  usePageTracking(getPageLoadFeature(feature));
+  usePageTitle(`CodeSplitting - ${__APP_NAME__}`);
+
+  useDynamicReducer(sharedExampleReducerName, sharedExampleReducer, [sharedExampleSagas]);
+
+  const { useSelector, dispatch } = React.useContext(Context as React.Context<IEmployeeExperienceContext>);
+  const { profile, isLoading, hasError, errorMessage } = useSelector(
+    (state: IExampleAppState) => state.dynamic?.[sharedExampleReducerName] || sharedExampleInitialState
+  );
+
+  React.useEffect(() => {
+    dispatch(requestMyProfile());
+  }, [dispatch]);
+
+  return (
+    <Styled.Container>
+      <Styled.PageHeading>Micro-Frontend Code Splitting</Styled.PageHeading>
+      <Styled.PageDescription>
+        Example of further splitting Micro-Frontend code into smaller chunks
+      </Styled.PageDescription>
+
+      <Styled.SectionTitle>My Profile</Styled.SectionTitle>
+
+      {!profile && isLoading && 'Loading...'}
+      {hasError && errorMessage}
+      {!isLoading && !hasError && profile && (
+        <CodeSplitter
+          name="MyProfile"
+          import={async () =>
+            import(
+              // webpackChunkName: 'my-profile'
+              './MyProfile'
+            )
+          }
+          props={{ profile }}
+        />
+      )}
+    </Styled.Container>
+  );
+}
+
+const connected = withContext(CodeSplitting);
+export { connected as CodeSplitting };

generators/microsoft-employee-experience-generator/examples/src/Samples/CodeSplitting/CodeSplitting.tsx

@@ -0,0 +1,15 @@
+import { Persona, PersonaSize } from '@micro-frontend-react/employee-experience/lib/Persona';
+import * as React from 'react';
+import { IProfile } from '../Shared/SharedExample.types';
+
+export function MyProfile(props: { profile: IProfile }): React.ReactElement {
+  const { profile } = props;
+
+  return (
+    <div>
+      <Persona size={PersonaSize.size100} />
+      <div>Name: {profile.displayName}</div>
+      <div>title: {profile.jobTitle}</div>
+    </div>
+  );
+}

generators/microsoft-employee-experience-generator/examples/src/Samples/CodeSplitting/MyProfile.tsx

@@ -9,11 +9,17 @@ export const navConfig = [
         icon: 'Home',
       },
       {
-        key: 4,
+        key: 2,
         name: 'Dynamic + Sub Routes',
         href: '/dynamic-sub-routes',
         icon: 'Thunderstorms',
       },
+      {
+        key: 3,
+        name: 'CodeSplitting',
+        href: '/codesplitting',
+        icon: 'Thunderstorms',
+      },
     ],
   },
 ];

generators/microsoft-employee-experience-generator/examples/src/navConfig.ts

@@ -33,6 +33,7 @@ const microFrontendEntries = {
 
   'dynamic-redux-hooks': './src/Samples/DynamicReduxHooks/DynamicReduxHooks.tsx',
   'dynamic-sub-routes': './src/Samples/DynamicSubRoutes/DynamicSubRoutes.tsx',
+  'code-splitting': './src/Samples/CodeSplitting/CodeSplitting.tsx',
   'dynamic-route-param-consumer': './src/Samples/DynamicSubRoutes/DynamicRouteParamConsumer.tsx',
 };