Handling multiple JSX compile targets that source from any location in the project

[eriklharper]

I have a situation like this where I want to set up specific destination targets for different types of React Component files in my application:

react: {

  // Components
  components: {
    expand: true,
    cwd: './',
    ext: '.js',
    src: [
      'app/modules/components/**/*.js',
      'app/modules/components/**/*.jsx',
      'bower_components/widget-library/src/components/**/*.js',
      'bower_components/widget-library/src/components/**/*.jsx',
      '!app/modules/components/**/*-test.js',
      '!bower_components/widget-library/src/components/**/*-test.js'
    ],
    dest: 'serve/modules/components'
  },

  // Widgets
  widgets: {
    expand: true,
    cwd: './',
    ext: '.js',
    src: [
      'app/modules/widgets/**/*.js',
      'app/modules/widgets/**/*.jsx',
      'bower_components/widget-library/src/widgets/**/*.js',
      'bower_components/widget-library/src/widgets/**/*.jsx',
      '!app/modules/widgets/**/*-test.js',
      '!bower_components/widget-library/src/widgets/**/*-test.js'
    ],
    dest: 'serve/modules/widgets'
  }
}

What ends up happening, however is the relative pathing for all of these src targets specified are preserved in the dest location's output:

Is there any way to force grunt-react to flatten these out so that no matter where src files are specified (they could be a bower component, npm module or just a commited source file in the project) they are placed in the directory specified by the dest property without their relative pathing (e.g. 'bower_components/etc/etc')?

[jackwanders]

If you read through the grunt docs for configuring tasks:

http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

You'll see a flatten option that should remove all the generated path parts from dest.

This is a grunt issue more than it is a grunt-react issue, but I'll leave this open so you can report back on whether flatten does what you want.

[eriklharper]

Excellent, thanks for the response. While the flatten option could prove useful for certain cases, I realized that in order to do what I need, all I simply have to do is strip out the beginning parts of the path bower_components/widget-library/src and keep the rest of the pathing intact, since my app relies upon that portion of the directory structure. I think I'll try that and see if I can make something work.

[ericclemmons]

This thread went quiet, so I'm using grunt's cwd or flatten options resolved it? Otherwise I'm at a loss =/

[eriklharper]

I've worked around needing to address this issue. Instead of trying to compile JSX from inside bower_components I simply setup a grunt copy task that copies the files from bower into the correct relative path so that it functions as before, and then I simply add an entry to .gitignore to ignore the copied directory (since they are copies of dependencies).