Fix: Regression: component patterns return nothing on Windows (#1133)

Author: elevatebart

loaders/utils/__tests__/getComponentFiles.spec.js

@@ -3,7 +3,8 @@ import deabsDeep from 'deabsdeep';
 import getComponentFiles from '../getComponentFiles';
 
 const configDir = path.resolve(__dirname, '../../../test');
-const components = ['one.js', 'two.js'];
+const components = ['components/Annotation/Annotation.js', 'components/Button/Button.js'];
+const processedComponents = components.map(c => `~/${c}`);
 const glob = 'components/**/[A-Z]*.js';
 const globArray = ['components/Annotation/[A-Z]*.js', 'components/Button/[A-Z]*.js'];
 
@@ -16,13 +17,13 @@ it('getComponentFiles() should return an empty array if components is null', ()
 
 it('getComponentFiles() should accept components as a function that returns file names', () => {
 	const result = getComponentFiles(() => components, configDir);
-	expect(deabs(result)).toEqual(['~/one.js', '~/two.js']);
+	expect(deabs(result)).toEqual(processedComponents);
 });
 
 it('getComponentFiles() should accept components as a function that returns absolute paths', () => {
 	const absolutize = files => files.map(file => path.join(configDir, file));
 	const result = getComponentFiles(() => absolutize(components), configDir);
-	expect(deabs(result)).toEqual(['~/one.js', '~/two.js']);
+	expect(deabs(result)).toEqual(processedComponents);
 });
 
 it('getComponentFiles() should accept components as a function that returns globs', () => {
@@ -35,13 +36,13 @@ it('getComponentFiles() should accept components as a function that returns glob
 
 it('getComponentFiles() should accept components as an array of file names', () => {
 	const result = getComponentFiles(components, configDir);
-	expect(deabs(result)).toEqual(['~/one.js', '~/two.js']);
+	expect(deabs(result)).toEqual(processedComponents);
 });
 
 it('getComponentFiles() should accept components as an array of absolute paths', () => {
 	const absolutize = files => files.map(file => path.join(configDir, file));
 	const result = getComponentFiles(absolutize(components), configDir);
-	expect(deabs(result)).toEqual(['~/one.js', '~/two.js']);
+	expect(deabs(result)).toEqual(processedComponents);
 });
 
 it('getComponentFiles() should accept components as an array of globs', () => {

loaders/utils/getComponentFiles.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const glob = require('glob');
 const isFunction = require('lodash/isFunction');
 const isString = require('lodash/isString');
@@ -16,24 +15,18 @@ const getComponentGlobs = components => {
 	);
 };
 
-const getFilesMatchingGlobs = (components, rootDir, ignore) =>
-	components
-		.map(listItem => {
-			// Check if the string looks like a glob pattern by using hasMagic
-			if (glob.hasMagic(listItem)) {
-				return glob.sync(listItem, {
-					cwd: rootDir,
-					ignore,
-					// in order to avoid detecting each component twice on windows
-					// when matching 2 cases of the same word, like {Src,src}
-					// we remove case-sensitivity on windows
-					nocase: process.platform === 'win32',
-				});
-			}
-			// Wrap path in an array so reduce always gets an array of arrays
-			return [listItem];
-		})
+const getFilesMatchingGlobs = (components, rootDir, ignore) => {
+	ignore = ignore || [];
+	return components
+		.map(listItem =>
+			glob.sync(listItem, {
+				cwd: rootDir,
+				ignore,
+				absolute: true,
+			})
+		)
 		.reduce((accumulator, current) => accumulator.concat(current), []);
+};
 
 /**
  * Return absolute paths of components that should be rendered in the style guide.
@@ -54,8 +47,5 @@ module.exports = function getComponentFiles(components, rootDir, ignore) {
 	// Resolve list of components from globs
 	const componentFiles = getFilesMatchingGlobs(componentGlobs, rootDir, ignore);
 
-	// Make paths absolute
-	const componentFilesAbsolute = componentFiles.map(file => path.resolve(rootDir, file));
-
-	return componentFilesAbsolute;
+	return componentFiles;
 };

scripts/schemas/config.js

@@ -2,7 +2,13 @@
 // in loaders/styleguide-loader.js
 
 const EXTENSIONS = 'js,jsx,ts,tsx';
-const DEFAULT_COMPONENTS_PATTERN = `src/@(components|Components)/**/*.{${EXTENSIONS}}`;
+const DEFAULT_COMPONENTS_PATTERN =
+	// HACK: on windows, the case insensitivity makes each component appear twice
+	// to avoid this issue, the case management is removed on win32
+	// it virtually changes nothing
+	process.platform === 'win32'
+		? /* istanbul ignore next: no windows on our test plan */ `src/components/**/*.{${EXTENSIONS}}`
+		: `src/@(components|Components)/**/*.{${EXTENSIONS}}`;
 
 const path = require('path');
 const startCase = require('lodash/startCase');