Repository: styleguidist/react-styleguidist
Pull request #1504 (2019-12-26 23:48:30)

Honor default exports over named exports
When you have a component like 

```tsx
import React from 'react';
import styled from 'styled-components';

export const C: React.FC = () => {
  ...
}

const StyledC = styled(C)``;

export default StyledC;
```
so that you can use non-styled (name-exported) components for testing, styleguidist picks up the named export instead of the default export and breaks the styling in examples. 

If I understand [this part of the doc](https://react-styleguidist.js.org/docs/components.html#default-vs-named-exports) correctly, isn't this supposed to be the case? As in it will try to find
1. default exports 
2. if not found => single named export
3. if not found => named export with the same name

I'm aware there are a few workarounds to get my example above working, but just in case the current behavior isn't intended. 

sapegin: Thanks for the pull request!

I guess you're right, this looks more reasonable. You need to fix the CI though ;-)
elevatebart: @sapegin this could be a breaking change and we have 11 around the corner, do you think it should be part of this new major version?
sapegin: @elevatebart Yeah, make sense! If it's going to be ready soon.
codecov[bot]: # [Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1504?src=pr&el=h1) Report
> Merging [#1504](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1504?src=pr&el=desc) into [master](https://codecov.io/gh/styleguidist/react-styleguidist/commit/1f25b506b2729e9fafacac5a0c40e38c2683cb99?src=pr&el=desc) will **decrease** coverage by `<.01%`.
> The diff coverage is `n/a`.

| [Impacted Files](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1504?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/loaders/examples-loader.ts](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1504/diff?src=pr&el=tree#diff-c3JjL2xvYWRlcnMvZXhhbXBsZXMtbG9hZGVyLnRz) | `100% <ø> (ø)` | :arrow_up: |
| [src/scripts/make-webpack-config.ts](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1504/diff?src=pr&el=tree#diff-c3JjL3NjcmlwdHMvbWFrZS13ZWJwYWNrLWNvbmZpZy50cw==) | `100% <0%> (ø)` | :arrow_up: |


Patch:
diff --git a/src/loaders/examples-loader.ts b/src/loaders/examples-loader.ts
index 38930e66..b594ad87 100644
--- a/src/loaders/examples-loader.ts
+++ b/src/loaders/examples-loader.ts
@@ -81,16 +81,16 @@ export default function examplesLoader(this: Rsg.StyleguidistLoaderContext, sour
 				b.variableDeclaration('const', [
 					b.variableDeclarator(b.identifier(`${name}$0`), requireIt(requireRequest).toAST() as any),
 				]),
-				// const name = name$0[name] || name$0.default || name$0;
+				// const name = name$0.default || name$0[name] || name$0;
 				b.variableDeclaration('const', [
 					b.variableDeclarator(
 						b.identifier(name),
 						b.logicalExpression(
 							'||',
-							b.identifier(`${name}$0['${name}']`),
+							b.identifier(`${name}$0.default`),
 							b.logicalExpression(
 								'||',
-								b.identifier(`${name}$0.default`),
+								b.identifier(`${name}$0['${name}']`),
 								b.identifier(`${name}$0`)
 							)
 						)


Test patch:
diff --git a/src/loaders/__tests__/examples-loader.spec.ts b/src/loaders/__tests__/examples-loader.spec.ts
index 8515ca47..4ad67013 100644
--- a/src/loaders/__tests__/examples-loader.spec.ts
+++ b/src/loaders/__tests__/examples-loader.spec.ts
@@ -180,7 +180,7 @@ it('should prepend example code with React require()', () => {
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
 	expect(result).toMatch(
-		`const React$0 = require('react');\\nconst React = React$0['React'] || (React$0.default || React$0);`
+		`const React$0 = require('react');\\nconst React = React$0.default || (React$0['React'] || React$0);`
 	);
 });
 
@@ -197,7 +197,7 @@ it('should prepend example code with component require()', () => {
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
 	expect(result).toMatch(
-		`const FooComponent$0 = require('../foo.js');\\nconst FooComponent = FooComponent$0['FooComponent'] || (FooComponent$0.default || FooComponent$0);`
+		`const FooComponent$0 = require('../foo.js');\\nconst FooComponent = FooComponent$0.default || (FooComponent$0['FooComponent'] || FooComponent$0);`
 	);
 });
 
@@ -217,10 +217,10 @@ it('should allow explicit import of React and component module', () => {
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
 	expect(result).toMatch(
-		`const React$0 = require('react');\\nconst React = React$0['React'] || (React$0.default || React$0);`
+		`const React$0 = require('react');\\nconst React = React$0.default || (React$0['React'] || React$0);`
 	);
 	expect(result).toMatch(
-		`const FooComponent$0 = require('../foo.js');\\nconst FooComponent = FooComponent$0['FooComponent'] || (FooComponent$0.default || FooComponent$0);`
+		`const FooComponent$0 = require('../foo.js');\\nconst FooComponent = FooComponent$0.default || (FooComponent$0['FooComponent'] || FooComponent$0);`
 	);
 });
 
@@ -240,7 +240,7 @@ it('should works for any Markdown file, without a current component', () => {
 	expect(result).toBeTruthy();
 	expect(() => new Function(result)).not.toThrowError(SyntaxError);
 	expect(result).toMatch(
-		`const React$0 = require('react');\\nconst React = React$0['React'] || (React$0.default || React$0);`
+		`const React$0 = require('react');\\nconst React = React$0.default || (React$0['React'] || React$0);`
 	);
 	expect(result).not.toMatch('undefined');
 });