fix(build): Support building Gatsby app under Windows (patternfly#1248)

* fix(build): Support building Gatsby app under Windows * Resolve linter errors in Gatsby build scripts * Escape file paths during react-icons build
redallen · Jan 29, 2019 · 89bc7f8 · 89bc7f8
1 parent cb3bf52
commit 89bc7f8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -2,6 +2,9 @@ const path = require(`path`);
 const fs = require('fs-extra'); //eslint-disable-line
 const packageDirs = ['react-core', 'react-charts', 'react-styled-system', 'react-table'];
 
+// Escape single quotes and backslashes in a file path
+const escapeFilePath = filePath => filePath.replace(/[\\']/g, '\\$&');
+
 exports.onCreateWebpackConfig = ({ stage, loaders, actions, plugins, getConfig }) => {
   // Enable hot reloading on source code changes
   const pfStylesTest = /patternfly-next.*(components|layouts|utilities).*\.css$/;
@@ -116,13 +119,20 @@ exports.createPages = async ({ graphql, actions }) => {
 
     const rawExamples = [];
     const packageDir = packageDirs.find(pkg => doc.absolutePath.indexOf(pkg) !== -1);
+
+    // In Windows environments, paths use backslashes to separate directories;
+    // Ensure that forward slashes are used to make it comparable
+    const docIdentifier = doc.relativeDirectory.replace(/\\/g, '/');
+
     examples.edges.forEach(({ node: example }) => {
-      if (
-        example.relativeDirectory
-          .split('/')
-          .slice(0, 2)
-          .join('/') === doc.relativeDirectory
-      ) {
+      // Replace backslashes with forward slashes as for `docIdentifier` above,
+      // and remove `/example` postfix
+      const exampleIdentifier = example.relativeDirectory
+        .split(/[/\\]/)
+        .slice(0, 2)
+        .join('/');
+
+      if (exampleIdentifier === docIdentifier) {
         const examplePath = `../../${packageDir}/src/${example.relativePath}`;
         rawExamples.push(
           `{name: '${example.name}', path: '${examplePath}', file: require('!!raw-loader!${examplePath}')}`
@@ -159,7 +169,7 @@ exports.createPages = async ({ graphql, actions }) => {
     const content = `
     import React from 'react';
     import docs from '${doc.absolutePath}';
-    import ComponentDocs from '${docsComponentPath}';
+    import ComponentDocs from '${escapeFilePath(docsComponentPath)}';
     
     const rawExamples = [${rawExamples}];
     const images = [${allImages}];

diff --git a/packages/react-icons/build/generatorConfig.js b/packages/react-icons/build/generatorConfig.js
@@ -4,6 +4,8 @@ const templatesDir = path.resolve(__dirname, './templates');
 const srcDir = path.resolve(__dirname, '../src');
 const iconsDir = path.join(srcDir, './icons');
 
+const escapeFilePath = filePath => filePath.replace(/\\/g, '\\$&');
+
 module.exports = plop => {
   plop.setGenerator('icons', {
     prompts: [],
@@ -14,30 +16,30 @@ module.exports = plop => {
           type: 'add',
           force: true,
           data: icon,
-          path: path.join(iconsDir, './{{id}}.js'),
+          path: escapeFilePath(path.join(iconsDir, './{{id}}.js')),
           templateFile: path.join(templatesDir, 'iconFile.hbs')
         });
 
         actions.push({
           type: 'add',
           force: true,
           data: icon,
-          path: path.join(iconsDir, './{{id}}.d.ts'),
+          path: escapeFilePath(path.join(iconsDir, './{{id}}.d.ts')),
           templateFile: path.join(templatesDir, 'iconFileTS.hbs')
         });
       });
 
       actions.push({
         type: 'add',
         force: true,
-        path: path.join(srcDir, './index.js'),
+        path: escapeFilePath(path.join(srcDir, './index.js')),
         templateFile: path.join(templatesDir, 'mainBarrelFile.hbs')
       });
 
       actions.push({
         type: 'add',
         force: true,
-        path: path.join(srcDir, './index.d.ts'),
+        path: escapeFilePath(path.join(srcDir, './index.d.ts')),
         templateFile: path.join(templatesDir, 'mainBarrelFileTS.hbs')
       });