Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support ES6 exports #820

Closed
seivan opened this issue Feb 13, 2018 · 7 comments
Closed

Support ES6 exports #820

seivan opened this issue Feb 13, 2018 · 7 comments

Comments

@seivan
Copy link

seivan commented Feb 13, 2018

I see this issue was closed without any comments and also locked #633

Is there a reason only default exports are allowed and not named exports?
We're in a position to rely on ES6 exports to allow tree shaking and would rather not use default exports.

I was wondering if there is any wiggle room here or if you stand strong on this?

@marcdavi-es
Copy link
Contributor

marcdavi-es commented Feb 14, 2018

Yeah I thought the response to #633 was a little flat.

A lot of developers use only named exports for a bunch of reasons. eslint-plugin-import is in the process of adding a rule to prohibit the use of default exports.

Without this I need to hack styleguidist to make it usable.

@seivan
Copy link
Author

seivan commented Feb 14, 2018

@marcdavi-es Well if you're in a hurry, you can get around it with

const Button = require('./dist/Components/Button').Button;

But it's very error prone.

@marcdavi-es
Copy link
Contributor

marcdavi-es commented Feb 14, 2018

@seivan thanks :). I had a dig around to try a more robust solution. I'm a bit puzzled by what I found.

Given this set up...

// styleguide.config.js
module.exports = {
  components: 'path/to/component.js',
};

// path/to/component.js
import React from 'react';

export const SomeComponent = () => <div>Hello, I'm SomeComponent</div>;

// path/to/Readme.md
```js
console.log(SomeComponent);
```

...I see in the console { SomeComponent: ..., __esModule: true}.

That suggests that the exports of /component.js are exposed as SomeComponent. That's kind of weird because SomeComponent is the name of one of the named exports, not the exports as a whole.

In this case, the following 'works'...

// path/to/Readme.md
```js
<SomeComponent.SomeComponent />
```

...which seems odd. Perhaps I'm missing something obvious here.

If a contributor is looking at this, I'm super happy to work on a potential fix. I could do with some help pointing to where the modules are exposed though. So far I've had a dig around Preview, evalInContext, examples-loader and associated files but I haven't had any joy.


UPDATE

I've just realised that it's probably styleguide-loader which deals with exposing the components. example-loader just sets up the examples, which consume components exposed by styleguide-loader.

Looking into styleguide-loader now.


UPDATE

Opened PR #825 adding limited support for named exports 🤞

@seivan
Copy link
Author

seivan commented Feb 18, 2018

@marcdavi-es I just tested your idea, and as you said, it worked.

@kopax
Copy link
Collaborator

kopax commented Feb 19, 2018

any update on this?

@seivan
Copy link
Author

seivan commented Feb 19, 2018

@kopax There's an attached PR #825

sapegin pushed a commit that referenced this issue Mar 22, 2018
👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋

## New features

### Page per section 🚧

This is a huge improvement for large style guides: now you can show only one component at a page instead of all components.

![](https://d3vv6lp55qjaqc.cloudfront.net/items/0W2q2K2s3n2k311O1J0y/Screen%20Recording%202018-03-22%20at%2010.06%20AM.gif)

To enable:

```js
module.exports = {
  pagePerSection: true
};
```

This is an experimental feature and we need your feedback to make it better and really useful. For example, right now there’s no isolated mode. So feel free to share your ideas [in issues](https://github.com/styleguidist/react-styleguidist/issues).

(#835 by @bitionaire and @stepancar, closes #494 and #768)

### “Fork me” ribbon

One more step to make Styleguidist usable for documenting open source projects:

![](https://d3vv6lp55qjaqc.cloudfront.net/items/1t331n2a3v0F2i290K0Z/Image%202018-03-22%20at%209.13.11%20AM.png)

New config option to enable the ribbon, define the URL and change the label:

```js
module.exports = {
  ribbon: {
    url: 'http://example.com/',
    text: 'Fork me on GitHub'
  }
};
```

And two new [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/styles/theme.js) to change colors: `color.ribbonBackground` and `color.ribbonText`.

(#861 by @glebez and @wkwiatek, part of #195, closes #647)

### Options to change CLI output on server start and build

Two new options, `printServerInstructions` and `printBuildInstructions`:

```js
module.exports = {
  printBuildInstructions(config) {
    console.log(
      `Style guide published to ${
        config.styleguideDir
      }. Something else interesting.`
    );
  }
};
```

(#878 by @roblevintennis, closes #876)

### Option to modify props

A new option, `updateDocs` to modify props before rendering. For example, you can load a component version number from a JSON file:

```js
module.exports = {
  updateDocs(docs) {
    if (docs.doclets.version) {
      const versionFilePath = path.resolve(
        path.dirname(file),
        docs.doclets.version
      );
      const version = require(versionFilePath).version;

      docs.doclets.version = version;
      docs.tags.version[0].description = version;
    }

    return docs;
  }
};
```

(#868 by @ryanoglesby08)

### Limited support for named exports

Styleguidist used to require default exports for components. Now you can use named exports too, though Styleguidist still supports only one component per file. I hope this change will make some users happier, see more details [in the docs](https://react-styleguidist.js.org/docs/components.html#loading-and-exposing-components).

(#825 by @marcdavi-es, closes #820 and #633)

### Allow arrays of component paths in sections

More flexibility in structuring your style guide:

```js
module.exports = {
  sections: [
    {
      name: 'Forms',
      components: [
        'lib/components/ui/Button.js',
        'lib/components/ui/Input.js'
      ]
    }
  ]
};
```

(#794 by @glebez, closes #774)

### Sort properties by `required` and `name` attributes

This change should make props tables more predictable for the users. Instead of relying on developers to sort props in a meaningful way, Styleguidist will show required props first, and sort props in each group alphabetically.

To disable sorting, use the identity function:

```javascript
module.exports = {
  sortProps: props => props
};
```

(#784 by @dotcs)

## Bug fixes

* Allow `Immutable` state in examples (#870 by @nicoffee, closes #864)
* Change template container ID to prevent clashes (#859 by @glebez, closes #753)
* Better props definitions with Flow types (#781 by @nanot1m)
@sapegin
Copy link
Member

sapegin commented Mar 22, 2018

🎉 This issue has been resolved in version 6.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants