Nwb: Library/multi-component example?

[mklemme]

This issue is a:

• [ ] Bug report
• [ ] Feature request
• [x] Question / support request
• [ ] Other

I wanted to create a react component library and saw that the docs mention this is possible, but only offers react-bootstrap as an example, which doesn't have the nwb.config files.

Is there a simple example of how to get this working with multiple components in the src file? What would I have to do with the nwb.config file to get multiple components built for distribution?

[m-torin]

I made my project multi-component by looking at the Semantic UI style... https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/index.js

[mklemme]

@torinagrippa thanks for the reference. Should help with the bulk export. How did you set up the compiling for multiple components? What do I have to change in the nwb.config file? https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#build-configuration

[hoodsy]

@torinagrippa I'm using Aphrodite for CSS-in-JS and have had difficulties importing font files.

Have you all been able to import custom font files to use in the demo page?

[01taylop]

@mklemme Did you have any luck creating your react component library?

[mklemme]

@01taylop I wasn't able to get this project working but am using https://github.com/FormidableLabs/builder-react-component

[01taylop]

Thanks, might use that for the next project.

I have found the solution in Configuration.md, you need to set the babel stage to 1 in the nwb.config.js file:

if you want to use export extensions in your app, you should set stage to 1

module.exports = {
  babel: {
    stage: 1
  }
}

[insin]

Should really add that to the libraries section of the component guide

[TarikHuber]

Is it possible to create a library my-component where you could do something like

import { Component1 } from 'my-component/part1'
import { Component2 } from 'my-component/part2'
import Component3  from 'my-component/part3/Component3  '
import MainComponent from 'my-component'

Having everything in a single index.js makes that file huge. By slitting everything in own folders would make the usage much more structured. A great example is Material-UI

In they docu they recommend to use "folder" way of import.

In the docu:

Notice that in the above example, we used:

import RaisedButton from 'material-ui/RaisedButton';

instead of

import {RaisedButton} from 'material-ui';

This will make your build process faster and your build output smaller. For a complete mapping of Material-UI components to import, see /src/index.js inside the Material-UI npm package root directory.

[rkouye]

@TarikHuber did you find a way to do this?

So far I am doing
import Component1 from 'my-library/lib/Component1';
But I wish I could do
import Component1 from 'my-library/Component1';

Hi @insin, is this use case supported? Or should we copy from the lib folder after building (and update main in package.json) ?

[TarikHuber]

Hi @semako-kouye ,

Unfortunately no. I'm also still using the lib. It would be great if this would be supported. It is great for code splitting.