Composable Broccoli

bquery.js

// broccoli is weird in that is a declarative system with an imperative interfaces.
// as a result composition is very counter-intuitive
// But that’s weird because broccoli is all about tree transformations
// I wonder if you could introduce a functional syntax that would shed light:

import $ from 'bquery';

export default $('app')
  .merge($ => {
    return $('src/**/*.js').funnel({
      destDir: '/assets'
    }).babel({
      browserPolyfill: true,
      sourcemap: 'inline'
    });
  })
  .merge($ => {
    return $('style/**/*.scss').compileSass({
      sourceMap: true,
      sourceMapEmbed: true,
      sourceMapContents: true
    });
  })
  .merge($ => {
    return $('index.html').funnel({
      destDir: '/assets'
    });
  });

standard-broccoli.js

// This is what the same code looks like in "standard" broccoli.
// there is no uniform interface for composition

// for example look at the interface to `compileSass`. it has 4 arguments:
// 1. an array of strings containing the root directories maybe?
// 2. a string giving the relative source of the input
// 3. a string giving the relative path of the output
// 4. sass compiler options
// there’s absolutely no continuity between that and the `funnel` call:

import funnel from 'broccoli-funnel';
import babel from 'broccoli-babel';
import compileSass from 'broccoli-sass-sourcemaps';

const appRoot = 'app';
// Copy HTML file from app root to destination
const html = funnel(appRoot, {
  files : ['index.html'],
  destDir : '/'
});
// Copy JS file into assets
let js = funnel(appRoot, {
  files : ['**/*.js'],
  destDir : '/assets'
});
// Transpile JS files to ES5
js = babel(js, {
  browserPolyfill: true,
  sourceMap: 'inline'
});
// Copy CSS file into assets
const css = compileSass(
  [appRoot],
  'styles/app.scss',
  'assets/app.css',
  {
    sourceMap: true,
    sourceMapEmbed: true,
    sourceMapContents: true
  }
);

export default mergeTrees([js, css, html]);