Devdocs: Use Webpack Loader to load READMEs

client/components/readme-viewer/index.jsx

@@ -30,11 +30,12 @@ export default class ReadmeViewer extends Component {
 		const { readmeFilePath } = this.props;
 
 		try {
-			const res = await fetch( `/devdocs/service/content?path=${ readmeFilePath }` );
-			if ( res.ok ) {
-				const text = await res.text();
-				this.setState( { readme: htmlToReactParser.parse( text ) } );
-			}
+			const res = await import(
+				/* webpackChunkName: "async-load-readme-[request]" */
+				/* webpackInclude: /README\.md$/ */
+				`../../${ readmeFilePath }`
+			);
+			this.setState( { readme: htmlToReactParser.parse( res.default ) } );
 		} catch ( err ) {
 			// Do nothing.
 		}
@@ -55,7 +56,7 @@ export default class ReadmeViewer extends Component {
 		const editLink = (
 			<a
 				className="readme-viewer__doc-edit-link devdocs__doc-edit-link"
-				href={ `https://github.com/Automattic/wp-calypso/edit/master${ readmeFilePath }` }
+				href={ `https://github.com/Automattic/wp-calypso/edit/master/client${ readmeFilePath }` }
 			>
 				Improve this document on GitHub
 			</a>

client/devdocs/design/blocks.jsx

@@ -120,7 +120,7 @@ export default class AppComponents extends React.Component {
 					</React.Fragment>
 				) : (
 					<div>
-						<ReadmeViewer readmeFilePath="/client/devdocs/blocks/README.md" />
+						<ReadmeViewer readmeFilePath="devdocs/blocks/README.md" />
 						<SearchCard
 							onSearch={ this.onSearch }
 							initialValue={ this.state.filter }

client/devdocs/design/index.jsx

@@ -172,7 +172,7 @@ class DesignAssets extends React.Component {
 					</React.Fragment>
 				) : (
 					<div>
-						<ReadmeViewer readmeFilePath="/client/devdocs/design/README.md" />
+						<ReadmeViewer readmeFilePath="devdocs/design/README.md" />
 						<SearchCard
 							onSearch={ this.onSearch }
 							initialValue={ filter }

client/devdocs/design/search-collection.jsx

@@ -35,21 +35,12 @@ const shouldShowInstance = ( example, filter, component ) => {
 };
 
 const getReadmeFilePath = ( section, example ) => {
-	let path = example.props.readmeFilePath;
-
-	if ( ! path ) {
-		return null;
-	}
-
-	if ( ! path.startsWith( '/' ) ) {
-		path = `/client/${ section === 'design' ? 'components' : section }/${ path }`;
+	switch ( section ) {
+		case 'design':
+			return `components/${ example.props.readmeFilePath }/README.md`;
+		default:
+			return `${ section }/${ example.props.readmeFilePath }/README.md`;
 	}
-
-	if ( ! path.endsWith( 'README.md' ) ) {
-		path = `${ path }/README.md`;
-	}
-
-	return path;
 };
 
 const Collection = ( {

client/devdocs/doc.jsx

@@ -8,7 +8,6 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import DocService from './service';
 import Error from './error';
 import DocumentHead from 'components/data/document-head';
 import highlight from 'lib/highlight';
@@ -52,15 +51,13 @@ export default class extends React.Component {
 			error: null,
 		} );
 		this.delayLoadingMessage();
-		DocService.fetch(
-			this.props.path,
-			function( error, body ) {
-				this.setState( {
-					body,
-					error,
-				} );
-			}.bind( this )
-		);
+		import(
+			/* webpackChunkName: "async-load-doc-[request]" */
+			/* webpackInclude: /\.md$/ */
+			`../../${ this.props.path }`
+		)
+			.then( module => this.setState( { body: module.default, error: null } ) )
+			.catch( error => this.setState( { body: null, error } ) );
 	};
 
 	setBodyScrollPosition = () => {

client/devdocs/docs-selectors/index.jsx

@@ -30,7 +30,7 @@ export default class DocsSelectors extends PureComponent {
 					<DocsSelectorsSingle { ...{ selector, search } } />
 				) : (
 					<div>
-						<ReadmeViewer readmeFilePath="/client/devdocs/docs-selectors/README.md" />
+						<ReadmeViewer readmeFilePath="devdocs/docs-selectors/README.md" />
 						<DocsSelectorsSearch search={ search } />
 					</div>
 				) }

client/devdocs/service.js

@@ -33,8 +33,4 @@ export default {
 	list: function( filenames, callback ) {
 		fetchDocsEndpoint( 'list', { files: filenames.join( ',' ) }, callback );
 	},
-
-	fetch: function( path, callback ) {
-		fetchDocsEndpoint( 'content', { path: path }, callback );
-	},
 };

client/devdocs/wizard-component/index.jsx

@@ -25,7 +25,7 @@ class WizardComponent extends Component {
 					Wizard
 				</HeaderCake>
 				<Wizard stepName={ stepName } />
-				<ReadmeViewer section="design" readmeFilePath="/client/components/wizard/README.md" />
+				<ReadmeViewer section="design" readmeFilePath="components/wizard/README.md" />
 			</Main>
 		);
 	}