From 58fb58c2eaad958dc70b63b00023fa477a0e2cc8 Mon Sep 17 00:00:00 2001 From: Zachary Shilton <4624598+zchsh@users.noreply.github.com> Date: Fri, 2 Apr 2021 11:29:31 -0400 Subject: [PATCH] website: fix issue with bloated static props (#10860) * website: fix issue with bloated static props * website: remove script to check static props size --- .../components/remote-plugin-docs/server.js | 11 +++--- .../utils/resolve-nav-data.js | 35 ++++++++++++++----- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/website/components/remote-plugin-docs/server.js b/website/components/remote-plugin-docs/server.js index 8f871e3f0..6c1534a7c 100644 --- a/website/components/remote-plugin-docs/server.js +++ b/website/components/remote-plugin-docs/server.js @@ -28,11 +28,16 @@ async function generateStaticProps({ product, remotePluginsFile, }) { + // Build the currentPath from page parameters + const currentPath = params.page ? params.page.join('/') : '' + // Resolve navData, including the possibility that this + // page is a remote plugin docs, in which case we'll provide + // the MDX fileString in the resolved navData const navData = await resolveNavData(navDataFile, localContentDir, { remotePluginsFile, + currentPath, }) - const pathToMatch = params.page ? params.page.join('/') : '' - const navNode = getNodeFromPath(pathToMatch, navData, localContentDir) + const navNode = getNodeFromPath(currentPath, navData, localContentDir) const { filePath, remoteFile, pluginTier } = navNode // Fetch the MDX file content const mdxString = remoteFile @@ -59,8 +64,6 @@ async function generateStaticProps({ productName: product.name, mdxContentHook, }) - // Build the currentPath from page parameters - const currentPath = !params.page ? '' : params.page.join('/') return { currentPath, diff --git a/website/components/remote-plugin-docs/utils/resolve-nav-data.js b/website/components/remote-plugin-docs/utils/resolve-nav-data.js index 7bcd2b8fb..b3dd7502d 100644 --- a/website/components/remote-plugin-docs/utils/resolve-nav-data.js +++ b/website/components/remote-plugin-docs/utils/resolve-nav-data.js @@ -16,7 +16,7 @@ const validateRouteStructure = require('@hashicorp/react-docs-sidenav/utils/vali * @returns {array} the resolved navData. This includes NavBranch nodes pulled from remote plugin repositories, as well as filePath properties on all local NavLeaf nodes, and remoteFile properties on all NavLeafRemote nodes. */ async function resolveNavData(navDataFile, localContentDir, options = {}) { - const { remotePluginsFile } = options + const { remotePluginsFile, currentPath } = options // Read in files const navDataPath = path.join(process.cwd(), navDataFile) const navData = JSON.parse(fs.readFileSync(navDataPath, 'utf8')) @@ -24,7 +24,11 @@ async function resolveNavData(navDataFile, localContentDir, options = {}) { let withPlugins = navData if (remotePluginsFile) { // Resolve plugins, this yields branches with NavLeafRemote nodes - withPlugins = await mergeRemotePlugins(remotePluginsFile, navData) + withPlugins = await mergeRemotePlugins( + remotePluginsFile, + navData, + currentPath + ) } // Resolve local filePaths for NavLeaf nodes const withFilePaths = await validateFilePaths(withPlugins, localContentDir) @@ -40,14 +44,16 @@ async function resolveNavData(navDataFile, localContentDir, options = {}) { // fetch and parse all remote plugin docs, merge them into the // broader tree of docs navData, and return the docs navData // with the merged plugin docs -async function mergeRemotePlugins(remotePluginsFile, navData) { +async function mergeRemotePlugins(remotePluginsFile, navData, currentPath) { // Read in and parse the plugin configuration JSON const remotePluginsPath = path.join(process.cwd(), remotePluginsFile) const pluginEntries = JSON.parse(fs.readFileSync(remotePluginsPath, 'utf-8')) // Add navData for each plugin's component. // Note that leaf nodes include a remoteFile property object with the full MDX fileString const pluginEntriesWithDocs = await Promise.all( - pluginEntries.map(resolvePluginEntryDocs) + pluginEntries.map( + async (entry) => await resolvePluginEntryDocs(entry, currentPath) + ) ) // group navData by component type, to prepare to merge plugin docs // into the broader tree of navData. @@ -113,7 +119,7 @@ async function mergeRemotePlugins(remotePluginsFile, navData) { return { ...n, routes: routesWithPlugins } }) // return the merged navData, which now includes special NavLeaf nodes - // for plugin docs with { filePath, fileString } remoteFile properties + // for plugin docs with remoteFile properties return navDataWithPlugins } @@ -125,7 +131,7 @@ async function mergeRemotePlugins(remotePluginsFile, navData) { // Note that navData leaf nodes have a special remoteFile property, // which contains { filePath, fileString } data for the remote // plugin doc .mdx file -async function resolvePluginEntryDocs(pluginConfigEntry) { +async function resolvePluginEntryDocs(pluginConfigEntry, currentPath) { const { title, path: slug, repo, version } = pluginConfigEntry const docsMdxFiles = await fetchPluginDocs({ repo, tag: version }) // We construct a special kind of "NavLeaf" node, with a remoteFile property, @@ -192,8 +198,21 @@ async function resolvePluginEntryDocs(pluginConfigEntry) { const prefixedPath = path.join(pathPrefix, n.path) return { ...n, path: prefixedPath } }) - // - return { type, navData: withPrefixedPaths } + // If currentPath is provided, then remove the remoteFile + // from all nodes except the currentPath. This ensures we deliver + // only a single fileString in our getStaticProps JSON. + // Without this optimization, we would send all fileStrings + // for all NavLeafRemote nodes + const withOptimizedFileStrings = visitNavLeaves(withPrefixedPaths, (n) => { + if (!n.remoteFile) return n + const noCurrentPath = typeof currentPath === 'undefined' + const isPathMatch = currentPath === n.path + if (noCurrentPath || isPathMatch) return n + const { filePath } = n.remoteFile + return { ...n, remoteFile: { filePath } } + }) + // Return the component, with processed navData + return { type, navData: withOptimizedFileStrings } }) const componentsObj = components.reduce((acc, component) => { if (!component) return acc