3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-03 20:27:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): plugin lifecycle - add generateRoutes() API

Browse source
This commit is contained in:
Yangshun Tay 2019-03-03 18:46:09 -08:00
parent 70d185d862
commit 74d26d4f3d
3 changed files with 221 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
v2/lib/load/index.js
View file

@ -79,36 +79,69 @@ module.exports = async function load(siteDir) {
`export default ${JSON.stringify(pagesMetadatas, null, 2)};`, `export default ${JSON.stringify(pagesMetadatas, null, 2)};`,
); );
const contentsStore = {};
// Process plugins. // Process plugins.
if (siteConfig.plugins) { const pluginConfigs = siteConfig.plugins || [];
const context = {env, siteDir, siteConfig}; const context = {env, siteDir, siteConfig};
// Currently runs all plugins in parallel and not order-dependent. We could change
// this in future if there's a need. // Initialize plugins.
await Promise.all( const plugins = pluginConfigs.map(({name, options: opts}) => {
siteConfig.plugins.map(async ({name, options: opts}) => { // TODO: Resolve using node_modules as well.
// TODO: Resolve using node_modules as well. // eslint-disable-next-line
// eslint-disable-next-line const Plugin = require(path.resolve(__dirname, '../../plugins', name));
const Plugin = require(path.resolve(__dirname, '../../plugins', name)); const plugin = new Plugin(opts, context);
const plugin = new Plugin(opts, context); return {
const {options} = plugin; name,
const contents = await plugin.load(); plugin,
const pluginContents = { };
options, });
contents,
}; // Plugin lifecycle - loadContents().
contentsStore[options.contentKey] = pluginContents; const contentsStore = {};
const pluginCacheDir = path.join(generatedFilesDir, name); // Currently plugins run lifecycle in parallel and are not order-dependent. We could change
fs.ensureDirSync(pluginCacheDir); // this in future if there are plugins which need to run in certain order or depend on
await generate( // others for data.
pluginCacheDir, const pluginsLoadedContents = await Promise.all(
options.cacheFileName, plugins.map(async ({plugin, name}) => {
JSON.stringify(contents, null, 2), if (!plugin.loadContents) {
); return null;
}), }
);
} const {options} = plugin;
const contents = await plugin.loadContents();
const pluginContents = {
options,
contents,
};
contentsStore[options.contentKey] = pluginContents;
const pluginCacheDir = path.join(generatedFilesDir, name);
fs.ensureDirSync(pluginCacheDir);
await generate(
pluginCacheDir,
options.cacheFileName,
JSON.stringify(contents, null, 2),
);
return contents;
}),
);
// Plugin lifecycle - generateRoutes().
const pluginRouteConfigs = [];
const actions = {
addRoute: config => pluginRouteConfigs.push(config),
};
await Promise.all(
plugins.map(async ({plugin}, index) => {
if (!plugin.generateRoutes) {
return;
}
const contents = pluginsLoadedContents[index];
await plugin.generateRoutes({
contents,
actions,
});
}),
);
// Resolve outDir. // Resolve outDir.
const outDir = path.resolve(siteDir, 'build'); const outDir = path.resolve(siteDir, 'build');
@ -140,9 +173,10 @@ module.exports = async function load(siteDir) {
}; };
// Generate React Router Config. // Generate React Router Config.
const routesConfig = await genRoutesConfig(props); const routesConfig = await genRoutesConfig({
await generate(generatedFilesDir, 'routes.js', routesConfig); ...props,
pluginRouteConfigs,
});
await generate(generatedFilesDir, 'routes.js', routesConfig); await generate(generatedFilesDir, 'routes.js', routesConfig);
return props; return props;

247
v2/lib/load/routes.js
View file

@ -12,143 +12,162 @@ async function genRoutesConfig({
docsMetadatas = {}, docsMetadatas = {},
pagesMetadatas = [], pagesMetadatas = [],
contentsStore = {}, contentsStore = {},
pluginRouteConfigs = [],
}) { }) {
const modules = [
`import React from 'react';`,
`import Loadable from 'react-loadable';`,
`import Loading from '@theme/Loading';`,
`import Doc from '@theme/Doc';`,
`import DocBody from '@theme/DocBody';`,
`import BlogPage from '@theme/BlogPage';`,
`import Pages from '@theme/Pages';`,
`import NotFound from '@theme/NotFound';`,
];
// Docs. // Docs.
const {docsUrl, baseUrl} = siteConfig; const {docsUrl, baseUrl} = siteConfig;
function genDocsRoute(metadata) { function genDocsRoute(metadata) {
const {permalink, source} = metadata; const {permalink, source} = metadata;
return ` return `
{ {
path: '${permalink}', path: '${permalink}',
exact: true, exact: true,
component: Loadable({ component: Loadable({
loader: () => import(/* webpackPrefetch: true */ '${source}'), loader: () => import(/* webpackPrefetch: true */ '${source}'),
loading: Loading, loading: Loading,
render(loaded, props) { render(loaded, props) {
let Content = loaded.default; let Content = loaded.default;
return ( return (
<DocBody {...props} metadata={${JSON.stringify(metadata)}}> <DocBody {...props} metadata={${JSON.stringify(metadata)}}>
<Content /> <Content />
</DocBody> </DocBody>
); );
} }
}) })
}`; }`;
} }
const rootDocsUrl = normalizeUrl([baseUrl, docsUrl]); const rootDocsUrl = normalizeUrl([baseUrl, docsUrl]);
const docsRoutes = ` const docsRoutes = `
{ {
path: '${rootDocsUrl}', path: '${rootDocsUrl}',
component: Doc, component: Doc,
routes: [${Object.values(docsMetadatas) routes: [${Object.values(docsMetadatas)
.map(genDocsRoute) .map(genDocsRoute)
.join(',')}], .join(',')}],
}`; }`;
// Pages. // Pages.
function genPagesRoute(metadata) { function genPagesRoute(metadata) {
const {permalink, source} = metadata; const {permalink, source} = metadata;
return ` return `
{ {
path: '${permalink}', path: '${permalink}',
exact: true, exact: true,
component: Loadable({ component: Loadable({
loader: () => import(/* webpackPrefetch: true */ '${source}'), loader: () => import(/* webpackPrefetch: true */ '${source}'),
loading: Loading, loading: Loading,
render(loaded, props) { render(loaded, props) {
let Content = loaded.default; let Content = loaded.default;
return ( return (
<Pages {...props} metadata={${JSON.stringify(metadata)}}> <Pages {...props} metadata={${JSON.stringify(metadata)}}>
<Content {...props} metadata={${JSON.stringify(metadata)}} /> <Content {...props} metadata={${JSON.stringify(metadata)}} />
</Pages> </Pages>
); );
} }
}) })
}`; }`;
} }
// Blog. // Blog.
function genBlogRoute(metadata) { function genBlogPageRoute(metadata) {
const {permalink, source} = metadata; const {permalink} = metadata;
if (metadata.isBlogPage) { const {posts} = metadata;
const {posts} = metadata;
return `
{
path: '${permalink}',
exact: true,
component: Loadable.Map({
loader: {
${posts
.map(
(p, i) =>
`post${i}: () => import(/* webpackPrefetch: true */ '${
p.source
}')`,
)
.join(',\n\t\t\t\t')}
},
loading: Loading,
render(loaded, props) {
${posts
.map((p, i) => `const Post${i} = loaded.post${i}.default;`)
.join('\n\t\t\t\t')}
return (
<BlogPage {...props} metadata={${JSON.stringify(metadata)}} >
${posts.map((p, i) => `<Post${i} />`).join(' ')}
</BlogPage>
)
}
})
}`;
}
return ` return `
{ {
path: '${permalink}', path: '${permalink}',
exact: true, exact: true,
component: Loadable({ component: Loadable.Map({
loader: () => import(/* webpackPrefetch: true */ '${source}'), loader: {
loading: Loading, ${posts
render(loaded, props) { .map(
let MarkdownContent = loaded.default; (post, index) =>
return ( `post${index}: () => import(/* webpackPrefetch: true */ '${
<BlogPost {...props} metadata={${JSON.stringify(metadata)}}> post.source
<MarkdownContent /> }')`,
</BlogPost> )
); .join(',\n\t\t\t\t')}
} },
}) loading: Loading,
}`; render(loaded, props) {
${posts
.map((p, i) => `const Post${i} = loaded.post${i}.default;`)
.join('\n\t\t\t\t')}
return (
<BlogPage {...props} metadata={${JSON.stringify(metadata)}} >
${posts.map((p, i) => `<Post${i} />`).join(' ')}
</BlogPage>
)
}
})
}`;
} }
const notFoundRoute = ` const notFoundRoute = `
{ {
path: '*', path: '*',
component: NotFound, component: NotFound,
}`; }`;
return ( const routes = pluginRouteConfigs.map(pluginRouteConfig => {
`import React from 'react';\n` + const {path, component, metadata, content} = pluginRouteConfig;
`import Loadable from 'react-loadable';\n` + return `
`import Loading from '@theme/Loading';\n` + {
`import Doc from '@theme/Doc';\n` + path: '${path}',
`import DocBody from '@theme/DocBody';\n` + exact: true,
`import BlogPost from '@theme/BlogPost';\n` + component: Loadable.Map({
`import BlogPage from '@theme/BlogPage';\n` + loader: {
`import Pages from '@theme/Pages';\n` + Content: () => import('${content}'),
`import NotFound from '@theme/NotFound';\n` + Component: () => import('${component}'),
`const routes = [ },
${pagesMetadatas.map(genPagesRoute).join(',')}, loading: Loading,
${docsRoutes}, render(loaded, props) {
${ const Content = loaded.Content.default;
contentsStore.blog const Component = loaded.Component.default;
? contentsStore.blog.contents.map(genBlogRoute).join(',') return (
: '' <Component {...props} metadata={${JSON.stringify(metadata)}}>
}, <Content />
${notFoundRoute}\n];\n` + </Component>
`export default routes;\n` )
); }
})
}`;
});
return `
${modules.join('\n')}
const routes = [
// Docs.${pagesMetadatas.map(genPagesRoute).join(',')},
// Pages.${docsRoutes},
// Blog.${
contentsStore.blog
? contentsStore.blog.contents
.filter(metadata => metadata.isBlogPage)
.map(genBlogPageRoute)
.join(',')
: ''
},
// Plugins.${routes.join(',')},
// Not Found.${notFoundRoute},
];
export default routes;\n`;
} }
module.exports = genRoutesConfig; module.exports = genRoutesConfig;

23
v2/plugins/docusaurus-content-blog.js
View file

@ -26,6 +26,8 @@ const DEFAULT_OPTIONS = {
include: ['*.md'], // Extensions to include. include: ['*.md'], // Extensions to include.
pageCount: 10, // How many entries per page. pageCount: 10, // How many entries per page.
cacheFileName: 'blogMetadata.json', cacheFileName: 'blogMetadata.json',
blogPageComponent: '@theme/BlogPage',
blogPostComponent: '@theme/BlogPost',
}; };
class DocusaurusContentBlogPlugin { class DocusaurusContentBlogPlugin {
@ -34,7 +36,7 @@ class DocusaurusContentBlogPlugin {
this.context = context; this.context = context;
} }
async load() { async loadContents() {
const {pageCount, path: filePath, include, routeBasePath} = this.options; const {pageCount, path: filePath, include, routeBasePath} = this.options;
const {env, siteConfig, siteDir} = this.context; const {env, siteConfig, siteDir} = this.context;
const blogDir = path.resolve(siteDir, filePath); const blogDir = path.resolve(siteDir, filePath);
@ -101,6 +103,25 @@ class DocusaurusContentBlogPlugin {
return blogMetadata; return blogMetadata;
} }
async generateRoutes({contents, actions}) {
const {blogPostComponent} = this.options;
const {addRoute} = actions;
contents.forEach(metadata => {
const {permalink, source} = metadata;
if (metadata.isBlogPage) {
// TODO: Handle blog page.
return;
}
addRoute({
path: permalink,
component: blogPostComponent,
metadata,
content: source,
});
});
}
} }
module.exports = DocusaurusContentBlogPlugin; module.exports = DocusaurusContentBlogPlugin;