DynamicComponentX is passed to _ContentWrapper as content
Created
June 7, 2019 19:00
-
-
Save mjhenkes/04ccf0568d12af5dd96add526672ef27 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import DynamicImportWrapper from './_DynamicImportWrapper'; | |
| const propTypes = { | |
| /** | |
| * The content to be placed within the main content area of the container. | |
| */ | |
| content: PropTypes.func, | |
| /** | |
| * The props to be applied to the content. | |
| */ | |
| // eslint-disable-next-line react/forbid-prop-types | |
| props: PropTypes.object, | |
| }; | |
| const defaultProps = { | |
| content: undefined, | |
| props: undefined, | |
| }; | |
| const ContentWrapper = ({ content, props }) => ( | |
| <DynamicImportWrapper | |
| content={content} | |
| render={Content => <Content {...props} />} | |
| /> | |
| ); | |
| ContentWrapper.propTypes = propTypes; | |
| ContentWrapper.defaultProps = defaultProps; | |
| export default ContentWrapper; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState, useEffect } from 'react'; | |
| import classNames from 'classnames/bind'; | |
| import PropTypes from 'prop-types'; | |
| import styles from './ContentWrapper.module.scss'; | |
| const cx = classNames.bind(styles); | |
| const propTypes = { | |
| /** | |
| * The content to be loaded dynamically. | |
| */ | |
| content: PropTypes.func.isRequired, | |
| /** | |
| * The render prop to handle the loaded import. | |
| */ | |
| render: PropTypes.func.isRequired, | |
| }; | |
| const DynamicImportWrapper = ({ content, render }) => { | |
| const [state, setState] = useState({ | |
| Content: undefined, | |
| isErrored: false, | |
| }); | |
| const { Content, isErrored } = state; | |
| // Dynamically import Javascript chunk | |
| useEffect(() => { | |
| let isActive = true; | |
| if (!Content && !isErrored) { | |
| content().then(({ default: ContentFile }) => { | |
| if (isActive) { | |
| setState({ | |
| Content: ContentFile, | |
| isErrored: false, | |
| }); | |
| } | |
| }).catch(() => { | |
| if (isActive) { | |
| setState({ | |
| Content: undefined, | |
| isErrored: true, | |
| }); | |
| } | |
| }); | |
| } | |
| return () => { isActive = false; }; | |
| }); | |
| if (Content) { | |
| return ( | |
| <div | |
| data-terra-dev-site-content | |
| className={cx('dev-site-content')} | |
| > | |
| { render(Content) } | |
| </div> | |
| ); | |
| } | |
| if (isErrored) { | |
| return ( | |
| <div | |
| data-terra-dev-site-content | |
| className={cx('dev-site-content')} | |
| > | |
| The page failed to load. Refresh the page to try again. | |
| </div> | |
| ); | |
| } | |
| return null; | |
| }; | |
| DynamicImportWrapper.propTypes = propTypes; | |
| export default DynamicImportWrapper; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import placeholderSrc from '/opt/terra-dev-site/terra.png'; | |
| import MarkdownWrapper from 'terra-dev-site/lib/wrappers/_MarkdownWrapper'; | |
| import ContentWrapper from 'terra-dev-site/lib/wrappers/_ContentWrapper'; | |
| const DynamicComponent1 = () => import('/opt/terra-dev-site/README.md'); | |
| const DynamicComponent2 = () => import('../../src/terra-dev-site/doc/gettingStarted.a.doc.md'); | |
| const DynamicComponent3 = () => import('../../src/terra-dev-site/doc/Configuration.b/site.config.a.doc'); | |
| const DynamicComponent4 = () => import('../../src/terra-dev-site/doc/Configuration.b/navigation.config.b.doc'); | |
| const DynamicComponent5 = () => import('../../src/terra-dev-site/doc/Configuration.b/page.config.c.doc.md'); | |
| const DynamicComponent6 = () => import('../../src/terra-dev-site/doc/Configuration.b/derp.config.doc.mdx'); | |
| const DynamicComponent7 = () => import('../../src/terra-dev-site/doc/Configuration.b/derp.navigation.config.doc.mdx'); | |
| const DynamicComponent8 = () => import('../../src/terra-dev-site/doc/Configuration.b/wdio.conf.d.doc.md'); | |
| const DynamicComponent9 = () => import('../../src/terra-dev-site/doc/Configuration.b/webpack.config.e.doc.md'); | |
| const DynamicComponent10 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v4.0.0.v.doc.md'); | |
| const DynamicComponent11 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v3.0.0.w.doc.md'); | |
| const DynamicComponent12 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v2.0.0.x.doc.md'); | |
| const DynamicComponent13 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v5.0.0.x.doc.md'); | |
| const DynamicComponent14 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v6.0.0.x.doc.md'); | |
| const DynamicComponent15 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v1.0.0.y.doc.md'); | |
| const DynamicComponent16 = () => import('../../src/terra-dev-site/doc/UpgradeGuides.c/v0.5.z.doc.md'); | |
| const DynamicComponent17 = () => import('../../src/terra-dev-site/doc/newRelicIntegration.d.doc.md'); | |
| const DynamicComponent18 = () => import('../../src/terra-dev-site/bonus/navigation.config.bonus'); | |
| export default { | |
| 'content': { | |
| '/home': { | |
| '/home': { | |
| 'text': 'Home', | |
| 'path': '/home', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent1, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started': { | |
| '/getting-started/terra-dev-site/getting-started': { | |
| 'text': 'Getting Started', | |
| 'path': '/getting-started/terra-dev-site/getting-started', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent2, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/site-config': { | |
| 'text': 'site.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/site-config', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': ContentWrapper, | |
| 'props': { | |
| 'content': DynamicComponent3, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/navigation-config': { | |
| 'text': 'navigation.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/navigation-config', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': ContentWrapper, | |
| 'props': { | |
| 'content': DynamicComponent4, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/page-config': { | |
| 'text': 'page.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/page-config', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent5, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/derp': { | |
| 'text': 'Derp', | |
| 'path': '/getting-started/terra-dev-site/configuration/derp', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': ContentWrapper, | |
| 'props': { | |
| 'content': DynamicComponent6, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/derp-navigation': { | |
| 'text': 'derp.navigation', | |
| 'path': '/getting-started/terra-dev-site/configuration/derp-navigation', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': ContentWrapper, | |
| 'props': { | |
| 'content': DynamicComponent7, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/wdio-conf': { | |
| 'text': 'wdio.conf', | |
| 'path': '/getting-started/terra-dev-site/configuration/wdio-conf', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent8, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/configuration/webpack-config': { | |
| 'text': 'webpack.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/webpack-config', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent9, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-4-0-0': { | |
| 'text': 'v4.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-4-0-0', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent10, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-3-0-0': { | |
| 'text': 'v3.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-3-0-0', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent11, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-2-0-0': { | |
| 'text': 'v2.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-2-0-0', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent12, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-5-0-0': { | |
| 'text': 'v5.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-5-0-0', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent13, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-6-0-0': { | |
| 'text': 'v6.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-6-0-0', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent14, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-1-0-0': { | |
| 'text': 'v1.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-1-0-0', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent15, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/upgrade-guides/v-0-5': { | |
| 'text': 'v0.5', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-0-5', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent16, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| }, | |
| '/getting-started/terra-dev-site/new-relic-integration': { | |
| 'text': 'New Relic Integration', | |
| 'path': '/getting-started/terra-dev-site/new-relic-integration', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': MarkdownWrapper, | |
| 'props': { | |
| 'content': DynamicComponent17, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| '/bonus': { | |
| '/bonus': { | |
| 'text': 'Bonus', | |
| 'path': '/bonus', | |
| 'component': { | |
| 'default': { | |
| 'componentClass': ContentWrapper, | |
| 'props': { | |
| 'content': DynamicComponent18, | |
| 'props': void 0 | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| 'menuItems': { | |
| '/home': [{ | |
| 'text': 'Home', | |
| 'path': '/home', | |
| 'childItems': void 0 | |
| }], | |
| '/getting-started': [{ | |
| 'text': 'Getting Started', | |
| 'path': '/getting-started', | |
| 'childItems': [ | |
| { | |
| 'text': 'Getting Started', | |
| 'path': '/getting-started/terra-dev-site/getting-started', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'Configuration', | |
| 'path': '/getting-started/terra-dev-site/configuration', | |
| 'childItems': [ | |
| { | |
| 'text': 'site.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/site-config', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'navigation.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/navigation-config', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'page.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/page-config', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'Derp', | |
| 'path': '/getting-started/terra-dev-site/configuration/derp', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'derp.navigation', | |
| 'path': '/getting-started/terra-dev-site/configuration/derp-navigation', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'wdio.conf', | |
| 'path': '/getting-started/terra-dev-site/configuration/wdio-conf', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'webpack.config', | |
| 'path': '/getting-started/terra-dev-site/configuration/webpack-config', | |
| 'childItems': void 0 | |
| } | |
| ], | |
| 'hasSubMenu': true | |
| }, | |
| { | |
| 'text': 'Upgrade Guides', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides', | |
| 'childItems': [ | |
| { | |
| 'text': 'v4.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-4-0-0', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'v3.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-3-0-0', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'v2.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-2-0-0', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'v5.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-5-0-0', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'v6.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-6-0-0', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'v1.0.0', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-1-0-0', | |
| 'childItems': void 0 | |
| }, | |
| { | |
| 'text': 'v0.5', | |
| 'path': '/getting-started/terra-dev-site/upgrade-guides/v-0-5', | |
| 'childItems': void 0 | |
| } | |
| ], | |
| 'hasSubMenu': true | |
| }, | |
| { | |
| 'text': 'New Relic Integration', | |
| 'path': '/getting-started/terra-dev-site/new-relic-integration', | |
| 'childItems': void 0 | |
| } | |
| ], | |
| 'hasSubMenu': true | |
| }], | |
| '/bonus': [{ | |
| 'text': 'Bonus', | |
| 'path': '/bonus', | |
| 'childItems': void 0 | |
| }] | |
| }, | |
| 'placeholderSrc': placeholderSrc | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment