Fractal: Ignore node_modules folders

[yhuard]

For the context: I want to use a combination of lerna and fractal, each fractal component being a npm package handled by lerna. This means that each component can have dependencies to other components or external libraries and can have a node_modules folder.

On the other hand, I don't want those node_modules folders to appear in my style guide, that's why I'd need fractal to ignore them.

Digging in the source, I found out that it can be done quite easily by changing src/core/fs.js (line 118) by:

    if (recursive && statCache.isDirectory() && Path.basename(filePath) != 'node_modules') {

That's all it takes to ignore node_modules folders.

[yhuard]

It could also be done by reimplementing _getTree in src/api/components/source.js with something like:

    _getTree() {
        return frfs.globDescribe(this.fullPath, this.relPath, this.config().match || ['**']);
    }

And then in your fractal.js:

fractal.components.set('match', [
  '**',
  '!**/whatever_you_want_to_exlcude/**',
]);

It gives us more flexibility.

[dkhuntrods]

Thanks @yhuard, something along these lines looks like a good idea. We'll take a look!

[sbaechler]

@yhuard There is an undocumented ignore property in the builder.

It compares a given string or array to the file path. This is what I use to avoid copying all source files to the server:

fractal.web.set('builder.static.ignored', [/jspm_packages\/npm/, /jspm_packages\/github/]);

I guess you could just ignore node_modules:

fractal.web.set('builder.static.ignored', /node_modules/);.

[yhuard]

@sbaechler thanks for your suggestion but the problem I'm trying to solve is a bit different than yours. My goal is to be able to ignore nested components.

Let's say I have 2 components named component-a and component-b and the following folder structure:

| components
|-- component-a
|-- component-b

Now let's say that component-b depends on component-a. In component-b's package.json, I will have something like:

"dependencies": {
  "component-a": "1.0.0"
}

Since I use lerna to manage my monorepo, when I run lerna bootstrap I'll get:

| components
|-- component-a
|-- component-b
|     |-- node_modules
|           |-- component-a

And fractal will display the nested component-a. This is what I want to avoid.

[spentacular]

@yhuard and I are in the same boat. In my case as well, I have something like this:

| components
|-- defaults
|-- labels
|     |-- node_modules
|           |-- defaults

Defaults being a shared variables dependency so all components share a common dependency, but the defaults folder doesn't actually render any styles/html, it's just a sass file of variables.

I'd be more than happy to help fix something because lerna + fractal would be

[lawlesscreation]

I also have a similar problem with nested components. Being able to ignore and/or pass Fractal an array of paths to components would be very useful - then you could be quite specific about what to include. e.g.:

fractal.components.set('path', [
  './components/compA/src',
  './components/compB/src'
]));

[thecreation]

Hi,
Any process on this?

[yhuard]

Small update on this: now we use Lerna with Yarn workspaces and thanks to hoisting, we don't have _node_modules_ folders in our components anymore.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mihkeleidast]

This has been implemented in #572