chore: improve lazy loading in v0 docs (microsoft#13777)

* chore: improve lazy loading in v0 docs * fix chunk comment * fix merge issues, remove default exports * restore change
miroslavstastny · Jul 14, 2020 · b53685f · b53685f
1 parent 3cc14fd
commit b53685f
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 139 deletions.
diff --git a/package.json b/package.json
@@ -62,11 +62,11 @@
   },
   "devDependencies": {
     "beachball": "^1.31.2",
-    "lerna": "^3.15.0",
-    "lint-staged": "^10.2.9",
     "cross-env": "^5.1.4",
     "danger": "^6.0.5",
     "gulp": "^4.0.2",
+    "lerna": "^3.15.0",
+    "lint-staged": "^10.2.9",
     "sass-loader": "^6.0.6",
     "satisfied": "^1.1.1",
     "syncpack": "^4.5.4",

diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
+    "@charlietango/use-script": "^2.1.1",
     "@fluentui/ability-attributes": "^0.50.0",
     "@fluentui/accessibility": "^0.50.0",
     "@fluentui/code-sandbox": "^0.50.0",
@@ -15,8 +16,8 @@
     "@fluentui/react-component-ref": "^0.50.0",
     "@fluentui/react-icons-northstar": "^0.50.0",
     "@fluentui/react-northstar": "^0.50.0",
-    "@fluentui/react-northstar-fela-renderer": "^0.50.0",
     "@fluentui/react-northstar-emotion-renderer": "^0.50.0",
+    "@fluentui/react-northstar-fela-renderer": "^0.50.0",
     "@fluentui/react-northstar-styles-renderer": "^0.50.0",
     "@fluentui/react-telemetry": "^0.50.0",
     "@fluentui/styles": "^0.50.0",

diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentDoc.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentDoc.tsx
@@ -11,11 +11,14 @@ import ComponentProps from './ComponentProps';
 import { ComponentDocAccessibility } from './ComponentDocAccessibility';
 import { ThemeContext } from '../../context/ThemeContext';
 import ExampleContext from '../../context/ExampleContext';
-import ComponentPlayground from '../ComponentPlayground/ComponentPlayground';
 import { ComponentInfo } from '../../types';
 import ComponentBestPractices from './ComponentBestPractices';
 import * as _ from 'lodash';
 
+const ComponentPlayground = React.lazy(() =>
+  import(/* webpackChunkName: "playground" */ '../ComponentPlayground/ComponentPlayground'),
+);
+
 const exampleEndStyle: React.CSSProperties = {
   textAlign: 'center',
   opacity: 0.5,

diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -23,11 +23,11 @@ import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import * as copyToClipboard from 'copy-to-clipboard';
 import qs from 'qs';
-import SourceRender from 'react-source-render';
 
 import { examplePathToHash, getFormattedHash, scrollToAnchor } from '../../../utils';
 import { babelConfig, importResolver } from '../../Playground/renderConfig';
 import ExampleContext, { ExampleContextValue } from '../../../context/ExampleContext';
+import { SourceRender } from '../SourceRender';
 import ComponentControls from '../ComponentControls';
 import ComponentExampleTitle from './ComponentExampleTitle';
 import ComponentSourceManager, { ComponentSourceManagerRenderProps } from '../ComponentSourceManager';

diff --git a/...s/fluentui/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfExample.tsx b/...s/fluentui/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfExample.tsx
@@ -2,10 +2,16 @@ import * as React from 'react';
 import * as _ from 'lodash';
 
 import ComponentExampleTitle from '../ComponentExample/ComponentExampleTitle';
-import { Accordion, Flex, Segment, Menu } from '@fluentui/react-northstar';
+import { Accordion, Flex, Segment, Menu, Loader } from '@fluentui/react-northstar';
 import ComponentExample from '../ComponentExample';
-import { ComponentPerfChart } from './ComponentPerfChart';
-import { ComponentResourcesChart } from './ComponentResourcesChart';
+
+const ComponentPerfChart = React.lazy(async () => ({
+  default: (await import(/* webpackChunkName: "component-chart" */ './ComponentPerfChart')).ComponentPerfChart,
+}));
+const ComponentResourcesChart = React.lazy(async () => ({
+  default: (await import(/* webpackChunkName: "component-chart" */ './ComponentResourcesChart'))
+    .ComponentResourcesChart,
+}));
 
 export interface ComponentPerfExampleProps {
   title: React.ReactNode;
@@ -45,11 +51,13 @@ const ComponentPerfExample: React.FC<ComponentPerfExampleProps> = props => {
               ]}
             />
           </Flex>
-          {currentChart === 'perf' ? (
-            <ComponentPerfChart perfTestName={perfTestName} />
-          ) : (
-            <ComponentResourcesChart perfTestName={perfTestName} />
-          )}
+          <React.Suspense fallback={<Loader />}>
+            {currentChart === 'perf' ? (
+              <ComponentPerfChart perfTestName={perfTestName} />
+            ) : (
+              <ComponentResourcesChart perfTestName={perfTestName} />
+            )}
+          </React.Suspense>
         </Segment>
         <Accordion
           panels={

diff --git a/packages/fluentui/docs/src/components/ComponentDoc/SourceRender.tsx b/packages/fluentui/docs/src/components/ComponentDoc/SourceRender.tsx
@@ -0,0 +1,27 @@
+import useScript from '@charlietango/use-script';
+import { Loader } from '@fluentui/react-northstar';
+import * as React from 'react';
+
+const _SourceRender = React.lazy(() => import('react-source-render'));
+
+type SourceRenderProps = {
+  babelConfig?: Record<string, any>;
+  hot?: boolean;
+  resolver?: (importPath: string, context?: Object) => void;
+  resolverContext?: Object;
+  source: string;
+  onRender?: (error: Error | null) => void;
+};
+
+export const SourceRender: React.FC<SourceRenderProps> = props => {
+  const url = `https://cdn.jsdelivr.net/npm/@babel/standalone@${window['versions'].babelStandalone}/babel.min.js`;
+  const [ready] = useScript(url);
+
+  return ready ? (
+    <React.Suspense fallback={<Loader />}>
+      <_SourceRender {...props} />
+    </React.Suspense>
+  ) : (
+    <Loader />
+  );
+};
diff --git a/packages/fluentui/docs/src/components/ExternalExampleLayout.tsx b/packages/fluentui/docs/src/components/ExternalExampleLayout.tsx
@@ -2,12 +2,12 @@ import { Provider, teamsTheme, teamsHighContrastTheme, teamsDarkTheme } from '@f
 import * as _ from 'lodash';
 import * as React from 'react';
 import { match } from 'react-router-dom';
-import SourceRender from 'react-source-render';
 import { KnobProvider } from '@fluentui/docs-components';
 
 import { ExampleSource } from '../types';
 import { exampleSourcesContext, exampleKebabNameToSourceFilename, parseExamplePath } from '../utils';
 import PageNotFound from '../views/PageNotFound';
+import { SourceRender } from './ComponentDoc/SourceRender';
 import { babelConfig, importResolver } from './Playground/renderConfig';
 
 const examplePaths = exampleSourcesContext.keys();

diff --git a/packages/fluentui/docs/src/index.ejs b/packages/fluentui/docs/src/index.ejs
@@ -21,6 +21,10 @@
         history.replaceState(null, null, redirect)
       }
     })()
+
+    var versions = {
+      babelStandalone: "<%= htmlWebpackPlugin.options.versions.babelStandalone %>",
+    };
   </script>
   <style>
     html {
@@ -47,8 +51,6 @@
     <%}%>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom-server.browser<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@<%= htmlWebpackPlugin.options.versions.babelStandalone %>/babel.min.js"></script>
-
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.16.0/themes/prism-tomorrow.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-vis@<%= htmlWebpackPlugin.options.versions.reactVis %>/dist/style.min.css" />