[NO_TICKET] Allow feature flags to be used in the doc site (#965)

* Allow additional example.js entry point to be included in react example pages * Fix ignoreRootPath arg not working
CMSgov · Mar 10, 2021 · 2f633ea · 2f633ea
1 parent 7398b1f
commit 2f633ea
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 12 deletions.
diff --git a/packages/design-system-scripts/cli.js b/packages/design-system-scripts/cli.js
@@ -73,15 +73,16 @@ yargs
       process.env.NODE_ENV = 'production';
 
       // Allow cli args to override or ignore default rootPath defined in cmsds.config.js
-      config.rootPath = argv.rootPath;
+      const options = { ...config, ...argv };
       if (argv.ignoreRootPath) {
-        config.rootPath = '';
+        options.rootPath = '';
       }
+
       await logIntroduction(config.sourceDir);
       if (!argv.skipBuild) {
-        await buildSrc(config.sourceDir, { ...config, ...argv });
+        await buildSrc(config.sourceDir, options);
       }
-      await buildDocs(config.sourceDir, config.docsDir, { ...config, ...argv });
+      await buildDocs(config.sourceDir, config.docsDir, options);
     },
   })
   .command({

diff --git a/packages/design-system-scripts/gulp/docs/generatePages/generateExamplePage.js b/packages/design-system-scripts/gulp/docs/generatePages/generateExamplePage.js
@@ -1,15 +1,15 @@
 const generateHtmlExample = require('./generateHtmlExample');
 const generateReactExample = require('./generateReactExample');
 
-async function generateExamplePage(page, docsPath, sourceDir, options) {
+async function generateExamplePage(page, docsPath, sourceDir, docsDir, options) {
   const htmlResult = await generateHtmlExample(page, null, docsPath, options);
   const modifierResults = page.modifiers
     ? await Promise.all(
         page.modifiers.map((modifier) => generateHtmlExample(page, modifier, docsPath, options))
       )
     : [];
   const reactResult = page.reactExampleSource
-    ? await generateReactExample(page, docsPath, sourceDir, options)
+    ? await generateReactExample(page, docsPath, sourceDir, docsDir, options)
     : [];
 
   return [htmlResult].concat(modifierResults).concat(reactResult);

diff --git a/packages/design-system-scripts/gulp/docs/generatePages/generatePages.js b/packages/design-system-scripts/gulp/docs/generatePages/generatePages.js
@@ -168,7 +168,14 @@ async function generateDocPages(pages, docsPath, options, changedPath) {
  * @param {Array} pageSection
  * @return {Promise<Array>}
  */
-async function generateExamplePages(pageSection, docsPath, sourceDir, options, changedPath) {
+async function generateExamplePages(
+  pageSection,
+  docsPath,
+  sourceDir,
+  docsDir,
+  options,
+  changedPath
+) {
   // This function accepts the unnested pages, which can contain page sections that have been removed by nestSections
   // TODO: Avoid generating example pages for removed page sections
   const examplePages = pageSection.filter(
@@ -178,7 +185,7 @@ async function generateExamplePages(pageSection, docsPath, sourceDir, options, c
   const generatedPages = await Promise.all(
     examplePages
       .filter((page) => changedFilter(page, changedPath))
-      .map((page) => generateExamplePage(page, docsPath, sourceDir, options))
+      .map((page) => generateExamplePage(page, docsPath, sourceDir, docsDir, options))
   );
 
   return generatedPagesCount(generatedPages);
@@ -233,6 +240,7 @@ module.exports = async function generatePages(sourceDir, docsDir, options, chang
     uniquePageSections,
     docsPath,
     sourceDir,
+    docsDir,
     options,
     changedPath
   );

diff --git a/packages/design-system-scripts/gulp/docs/generatePages/generateReactExample.js b/packages/design-system-scripts/gulp/docs/generatePages/generateReactExample.js
@@ -14,9 +14,15 @@ const { log } = require('../../common/logUtil');
  * @param {String} rootPath - Root docs site path
  * @return {Promise}
  */
-function generateReactExample(page, docsPath, sourceDir, { typescript, rootPath }) {
+async function generateReactExample(page, docsPath, sourceDir, docsDir, { typescript, rootPath }) {
+  const config = await createReactExampleWebpackConfig(
+    sourceDir,
+    docsDir,
+    page.reactExampleEntry,
+    typescript
+  );
+
   return new Promise((resolve, reject) => {
-    const config = createReactExampleWebpackConfig(sourceDir, page.reactExampleEntry, typescript);
     const compiler = webpack(config);
 
     // Compile file to memory

diff --git a/packages/design-system-scripts/gulp/docs/webpack/createReactExampleWebpackConfig.js b/packages/design-system-scripts/gulp/docs/webpack/createReactExampleWebpackConfig.js
@@ -1,17 +1,32 @@
 const webpack = require('webpack');
 const path = require('path');
+const fs = require('mz/fs');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { getDocsDirs } = require('../../common/getDirsToProcess');
 
 /**
  * Create an instance of the Webpack compiler to be used for
  * bundling and compiling the Example file.
  * @param {String} entry - Path to entry file
  * @return {*} Webpack compiler instance
  */
-module.exports = (sourceDir, reactExampleEntry, typescript) => {
+module.exports = async function createReactExampleWebpackConfig(
+  sourceDir,
+  docsDir,
+  reactExampleEntry,
+  typescript
+) {
+  const docs = await getDocsDirs(docsDir);
+  const exampleEntryFile = path.resolve(docsDir, 'src', 'example.js');
+  const additionalEntry = docs.length > 1 && fs.existsSync(exampleEntryFile);
+
+  const entry = [...(additionalEntry ? [exampleEntryFile] : []), path.resolve(reactExampleEntry)];
+
+  console.log(entry);
+
   const config = {
     mode: process.env.NODE_ENV,
-    entry: path.resolve(reactExampleEntry),
+    entry,
     output: { filename: 'bundle.js', path: '/build' },
     externals: {
       react: 'React',