hauler 0.1.0 → 0.2.0

data/src/defaults/project_config_factory.js

@@ -0,0 +1,109 @@
+// @flow
+
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import * as webpack from 'webpack';
+
+import devServerConfigFactory from './dev_server_config_factory';
+import compilerConfigFactory from './compiler_config_factory';
+
+function getPlugins(env: string) {
+  let plugins = [
+    new webpack.ProvidePlugin({ fetch: 'exports?self.fetch!whatwg-fetch' }),
+    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(env) } }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      children: true,
+      minChunks: 2,
+      async: true,
+    }),
+  ];
+
+  if (env === 'development') {
+    plugins = plugins.concat([
+      new webpack.NoErrorsPlugin(),
+    ]);
+  }
+
+  if (env === 'production') {
+    plugins = plugins.concat([
+      new webpack.optimize.OccurrenceOrderPlugin(true),
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
+      new ExtractTextPlugin('[name].[contenthash].css'),
+    ]);
+  }
+
+  return plugins;
+}
+
+function configFactory(env: string) {
+  const entries = {};
+
+  // individual loaders so that they can be replaced separately
+  const javascriptLoader = {
+    test: /\.jsx?$/,
+    loader: 'babel',
+    exclude: /node_modules/,
+    query: {
+      presets: ['es2015', 'react', 'stage-2'],
+      plugins: ['transform-class-properties'],
+    },
+  };
+
+  const sassLoader = {
+    test: /\.scss$/,
+    loader: 'style!css!sass',
+  };
+
+  const fontLoader = {
+    test: /\.(eot|svg|ttf|woff|woff2)$/,
+    loader: 'file',
+  };
+
+  const imageLoader = {
+    test: /\.(jpg|png|gif)$/,
+    loaders: [
+      'file',
+      'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
+    ],
+  };
+
+  if (env === 'production') {
+    javascriptLoader.query.plugins = javascriptLoader.query.plugins.concat([
+      'transform-react-remove-prop-types',
+      'transform-react-constant-elements',
+      'transform-react-inline-elements',
+    ]);
+
+    sassLoader.loader = ExtractTextPlugin.extract(
+      'style',
+      sassLoader.loader.replace('style!', '')
+    );
+  }
+
+  const appendPlugins = [];
+  const plugins = getPlugins(env);
+  const prependPlugins = [];
+
+  const publicPath = '/assets';
+
+  const devServer = devServerConfigFactory(env);
+
+  const compiler = compilerConfigFactory(env);
+
+  return {
+    entries,
+    javascriptLoader,
+    sassLoader,
+    fontLoader,
+    imageLoader,
+    prependPlugins,
+    plugins,
+    appendPlugins,
+    publicPath,
+    devServer,
+    compiler,
+  };
+}
+
+export default configFactory;

data/src/index.js

@@ -1,122 +1,43 @@
 // @flow
-// NOTE: This code is executed in a Gem, which makes any npm package unavailable
 
-const compilerDefaultsFactory = require('./defaults/compiler_config_factory');
-const devServerDefaultsFactory = require('./defaults/dev_server_config_factory');
-const utils = require('./utils');
+import * as utils from './utils';
 
-function extractLoaders(config: ProjectConfig): Array<WebpackLoader> {
-  return utils.compact([
-    config.javascriptLoader,
-    config.sassLoader,
-    config.fontLoader,
-    config.imageLoader,
-  ]);
+function getProjectConfig(env: string): ProjectConfig {
+  const projectConfigFactory = require(utils.railsPath('~config/hauler.js'));
+  return projectConfigFactory(env);
 }
 
-function extractResolve(config: ProjectConfig): WebpackResolveConfig {
-  const resolve = config.compiler && config.compiler.resolve;
-  const modules = resolve && resolve.modules || ['node_modules'];
-  return utils.deepMerge(resolve, { modules: utils.railsPath(modules) });
+function getProjectDefaults(env: string): ProjectConfig {
+  const projectDefaultsFactory = require('./defaults/project_config_factory');
+  return projectDefaultsFactory.default(env);
 }
 
-function extractPlugins(config: ProjectConfig): Array<WebpackPlugin> {
-  const prepend = config.prependPlugins || [];
-  const plugins = config.plugins || [];
-  const appendPlugins = config.appendPlugins || [];
-  return prepend.concat(plugins).concat(appendPlugins);
-}
-
-function extractModule(config: ProjectConfig): WebpackModuleConfig {
-  const module = config.compiler && config.compiler.module;
-  return utils.deepMerge(module, {
-    loaders: extractLoaders(config),
-  });
-}
-
-function extractOutput(config: ProjectConfig): WebpackOutputConfig {
-  const output = config.compiler && config.compiler.output || {};
-  const path = output.path || '';
-  return utils.deepMerge(output, {
-    path: utils.railsPath(path),
-  });
-}
-
-function parseToCompilerConfig(config: ProjectConfig): WebpackConfig {
-  return {
-    entry: utils.railsPath(config.entries),
-    output: extractOutput(config),
-    module: extractModule(config),
-    plugins: extractPlugins(config),
-    resolve: extractResolve(config),
+function getConfigFactory(): ProjectConfigFactory {
+  return (env: string) => {
+    const projectDefaults = getProjectDefaults(env);
+    const projectConfig = getProjectConfig(env);
+    const config = utils.mergeProjectConfig(projectDefaults, projectConfig);
+    return config;
   };
 }
 
-function extractPublicPath(config: WebpackDevServerConfig): string {
-  const publicPath = config.publicPath;
-  if (publicPath == null) {
-    return '';
+export function getConfig(env: string, railsRoot?: string) {
+  if (railsRoot != null) {
+    utils.setRailsRoot(railsRoot);
   }
 
-  if (publicPath.indexOf('http') !== -1) {
-    return publicPath;
-  }
-
-  const host = config.host || 'localhost';
-  const port = config.port || 30001;
-  return `http://${host}:${port}/${publicPath.replace(/^\//, '')}`;
-}
-
-function prepareDevServerConfig(config: WebpackDevServerConfig): WebpackDevServerConfig {
-  const output = Object.assign({}, config, {
-    publicPath: extractPublicPath(config),
-  });
-
-  return output;
+  const configFactory = getConfigFactory();
+  return configFactory(env);
 }
 
-const projectConfig: ProjectConfig = require(utils.railsPath('~config/hauler.js'));
-
-/**
- * Returns a factory for getting the project webpack dev server configuration using the
- * value of the `devServer` property in the result of `{Rails.root}/config/hauler.js`
- */
-function webpackDevServerConfigFactory(defaultsFactory: DevServerConfigFactory) {
-  return (env: string): WebpackDevServerConfig => {
-    const defaultDevServerConfig = defaultsFactory(env);
-    const projectDevServerConfig = projectConfig.devServer;
-    const devServerConfig = utils.deepMerge(defaultDevServerConfig, projectDevServerConfig);
-    return prepareDevServerConfig(devServerConfig);
-  };
+export function getDevServerConfig(env: string, railsRoot?: string): WebpackDevServerConfig {
+  const config = getConfig(env, railsRoot);
+  return utils.extractDevServerConfig(config);
 }
 
-function webpackCompilerConfigFactory(defaultsFactory: ProjectConfigFactory) {
-  return (env: string) => {
-    const defaultProjectConfig = defaultsFactory(env);
-    const haulerProjectConfig = utils.deepMerge(defaultProjectConfig, projectConfig);
-    const webpackConfig = parseToCompilerConfig(haulerProjectConfig);
-    return utils.deepMerge(webpackConfig, projectConfig.compiler || {});
-  };
+export function getCompilerConfig(env: string, railsRoot?: string): WebpackConfig {
+  const config = getConfig(env, railsRoot);
+  return utils.extractCompilerConfig(config);
 }
 
-const Hauler = {
-  getCompilerConfigFactory() {
-    return webpackCompilerConfigFactory(compilerDefaultsFactory);
-  },
-
-  getCompilerConfig(env: string) {
-    const configFactory = Hauler.getCompilerConfigFactory();
-    return configFactory(env);
-  },
-
-  getDevServerConfig(env: string) {
-    const configFactory = Hauler.getDevServerConfigFactory();
-    return configFactory(env);
-  },
-
-  getDevServerConfigFactory() {
-    return webpackDevServerConfigFactory(devServerDefaultsFactory);
-  },
-};
-
-module.exports = Hauler;
+export { getEnvName } from './utils';

data/src/utils/__tests__/extract_config-test.js

@@ -0,0 +1,132 @@
+jest.disableAutomock();
+
+const utils = require('../extract_config');
+const pathUtils = require('../path');
+
+describe('extractDevServerConfig', () => {
+  let projectConfigFactory;
+  let projectConfig;
+
+  beforeEach(() => {
+    projectConfigFactory = require('../../defaults/project_config_factory').default;
+    projectConfig = projectConfigFactory('development');
+  });
+
+  describe('contentBase', () => {
+    it('resolves to railsRoot', () => {
+      pathUtils.setRailsRoot('/var/www/hauler');
+      projectConfig.devServer.contentBase = '~lib/assets';
+      const config = utils.extractDevServerConfig(projectConfig);
+      expect(config.contentBase).toBe('/var/www/hauler/lib/assets');
+    });
+  });
+
+  describe('publicPath', () => {
+    it('defaults to http://localhost:3001/assets', () => {
+      const config = utils.extractDevServerConfig({});
+      expect(config.publicPath).toBe('http://localhost:3001/assets');
+    });
+
+    it('leaves a full URL intact', () => {
+      Object.assign(projectConfig.devServer, { host: 'hauler.test', port: 8080 });
+      projectConfig.publicPath = 'https://my.hauler.test:4005/my-assets';
+      const config = utils.extractDevServerConfig(projectConfig);
+      expect(config.publicPath).toBe('https://my.hauler.test:4005/my-assets');
+    });
+
+    it('updates to a full URL', () => {
+      Object.assign(projectConfig.devServer, { host: 'hauler.test', port: 8080 });
+      projectConfig.publicPath = '/my-assets';
+      const config = utils.extractDevServerConfig(projectConfig);
+      expect(config.publicPath).toBe('http://hauler.test:8080/my-assets');
+    });
+
+    it('sets the protocol according to the port', () => {
+      Object.assign(projectConfig.devServer, { port: 80 });
+      let config = utils.extractDevServerConfig(projectConfig);
+      expect(config.publicPath).toMatch('^http://localhost/');
+
+      Object.assign(projectConfig.devServer, { port: 443 });
+      config = utils.extractDevServerConfig(projectConfig);
+      expect(config.publicPath).toMatch('^https://localhost/');
+    });
+  });
+});
+
+describe('extractCompilerConfig', () => {
+  let projectConfigFactory;
+  let projectConfig;
+
+  beforeEach(() => {
+    pathUtils.setRailsRoot('/var/www/hauler');
+    projectConfigFactory = require('../../defaults/project_config_factory').default;
+    projectConfig = projectConfigFactory('development');
+  });
+
+  it('resolves #context to railsRoot', () => {
+    projectConfig.compiler.context = '~';
+    const config = utils.extractCompilerConfig(projectConfig);
+    expect(config.context).toBe('/var/www/hauler/');
+  });
+
+  it('assigns projectConfig#entries to #entry', () => {
+    projectConfig.entries = { main: 'main.js' };
+    const config = utils.extractCompilerConfig(projectConfig);
+    expect(config.entry).toEqual({ main: 'main.js' });
+  });
+
+  it('resolves #entry to railsRoot', () => {
+    projectConfig.entries = { main: '~lib/assets/hauler/main.js', counter: './counter' };
+    const config = utils.extractCompilerConfig(projectConfig);
+    expect(config.entry).toEqual({
+      main: '/var/www/hauler/lib/assets/hauler/main.js',
+      counter: './counter',
+    });
+  });
+
+  it('resolves #output.path to railsRoot', () => {
+    projectConfig.compiler.output.path = '~public/assets';
+    const config = utils.extractCompilerConfig(projectConfig);
+    expect(config.output.path).toBe('/var/www/hauler/public/assets');
+  });
+
+  it('resolves #output.publicPath to a full Url using the devServer', () => {
+    projectConfig.publicPath = '/test-assets';
+    Object.assign(projectConfig.devServer, { host: 'asset-host', port: 4005 });
+    const config = utils.extractCompilerConfig(projectConfig);
+    expect(config.output.publicPath).toBe('http://asset-host:4005/test-assets');
+  });
+
+  describe('#module.loaders', () => {
+    it('extracts the loaders from the project config', () => {
+      Object.assign(projectConfig, {
+        javascriptLoader: 'js',
+        sassLoader: 'sass',
+        fontLoader: 'font',
+        imageLoader: 'image',
+      });
+      const config = utils.extractCompilerConfig(projectConfig);
+      expect(config.module.loaders).toEqual(['js', 'sass', 'font', 'image']);
+    });
+
+    it('removes blank loaders', () => {
+      Object.assign(projectConfig, {
+        javascriptLoader: 'js',
+        sassLoader: null,
+        fontLoader: null,
+        imageLoader: 'image',
+      });
+      const config = utils.extractCompilerConfig(projectConfig);
+      expect(config.module.loaders).toEqual(['js', 'image']);
+    });
+
+    it('appends loaders in #compiler.module.loaders', () => {
+      Object.assign(projectConfig, {
+        javascriptLoader: 'js', sassLoader: null, fontLoader: null, imageLoader: null,
+      });
+      projectConfig.module = { loaders: ['other'] };
+      const config = utils.extractCompilerConfig(projectConfig);
+      expect(config.module.loaders).toEqual(['js', 'other']);
+    });
+  });
+});

data/src/utils/__tests__/merge_config-test.js

@@ -0,0 +1,75 @@
+jest.unmock('../merge_config');
+
+const defaults = {
+  entries: { main: 'my-main-entry.js' },
+  javascriptLoader: { test: 'jsLoader' },
+  sassLoader: { test: 'sassLoader' },
+  fontLoader: { test: 'fontLoader' },
+  imageLoader: { test: 'imageLoader' },
+  prependPlugins: ['prepend'],
+  plugins: ['plugins'],
+  appendPlugins: ['append'],
+  publicPath: '/my-assets',
+  devServer: {
+    stats: { colors: true },
+  },
+  compiler: {
+    output: { filename: '[name]-[hash].js' },
+    module: { loaders: [{ test: /\.js$/ }] },
+    resolve: { alias: { xyz: '/absolute/path/to/file.js' } },
+  },
+};
+
+describe('mergeProjectConfig', () => {
+  let misc;
+  let utils;
+
+  beforeEach(() => {
+    misc = require('../misc');
+    misc.merge.mockReturnValue({});
+
+    utils = require('../merge_config');
+  });
+
+  it('merges the source into the defaults', () => {
+    const source = { entries: { main: 'application.js' } };
+    utils.mergeProjectConfig(defaults, source);
+    expect(misc.merge).toBeCalledWith(defaults, source);
+  });
+
+  it('merges the source.devServer into the defaults.devServer', () => {
+    const devServer = { contentBase: '/', quiet: true };
+    utils.mergeProjectConfig(defaults, { devServer });
+    expect(misc.merge).toBeCalledWith(defaults.devServer, devServer);
+  });
+
+  it('merges the source.devServer.stats into the defaults.devServer.stats', () => {
+    const stats = { hash: true };
+    utils.mergeProjectConfig(defaults, { devServer: { stats } });
+    expect(misc.merge).toBeCalledWith(defaults.devServer.stats, stats);
+  });
+
+  it('merges the source.compiler into the defaults.compiler', () => {
+    const compiler = { context: '/', cache: false };
+    utils.mergeProjectConfig(defaults, { compiler });
+    expect(misc.merge).toBeCalledWith(defaults.compiler, compiler);
+  });
+
+  it('merges the source.compiler.output into the defaults.compiler.output', () => {
+    const output = { filename: '[name].js', chunkFilename: '[name].chunk.js' };
+    utils.mergeProjectConfig(defaults, { compiler: { output } });
+    expect(misc.merge).toBeCalledWith(defaults.compiler.output, output);
+  });
+
+  it('merges the source.compiler.module into the defaults.compiler.module', () => {
+    const module = { loaders: [{ test: /\.css$/ }]  };
+    utils.mergeProjectConfig(defaults, { compiler: { module } });
+    expect(misc.merge).toBeCalledWith(defaults.compiler.module, module);
+  });
+
+  it('merges the source.compiler.resolve into the defaults.compiler.resolve', () => {
+    const resolve = { alias: { xyz: './dir' } };
+    utils.mergeProjectConfig(defaults, { compiler: { resolve } });
+    expect(misc.merge).toBeCalledWith(defaults.compiler.resolve, resolve);
+  });
+});

data/src/utils/__tests__/path-test.js

@@ -0,0 +1,26 @@
+jest.unmock('../path');
+
+const utils = require('../path');
+
+describe('pathJoin', () => {
+  it('leaves the leading slash on the first piece', () => {
+    expect(utils.pathJoin('/hello', 'world')).toBe('/hello/world');
+    expect(utils.pathJoin('hello', 'world')).toBe('hello/world');
+  });
+
+  it('cleans any lagging slash', () => {
+    expect(utils.pathJoin('hello', 'world/')).toBe('hello/world');
+  });
+
+  it('removes any leading or lagging spaces', () => {
+    expect(utils.pathJoin('   hello  ', '   world  ')).toBe('hello/world');
+  });
+
+  it('removes duplicate slashes', () => {
+    expect(utils.pathJoin('hello///', '///world///')).toBe('hello/world');
+  });
+
+  it('ignores null pieces', () => {
+    expect(utils.pathJoin(null, 'hello', null, 'world', null)).toBe('hello/world');
+  });
+});

data/src/utils/extract_config.js

@@ -0,0 +1,103 @@
+// @flow
+
+import url from 'url';
+import { railsPath } from './path';
+import { compact } from './misc';
+
+function resolveValuesRailsPath(entries: Object = {}): Object {
+  const keys = Object.keys(entries);
+  const reducer = (output, key) => Object.assign(output, { [key]: railsPath(entries[key]) });
+  return keys.reduce(reducer, {});
+}
+
+function extractLoaders(config: ProjectConfig): Array<WebpackLoader> {
+  const baseLoaders = compact([
+    config.javascriptLoader,
+    config.sassLoader,
+    config.fontLoader,
+    config.imageLoader,
+  ]);
+
+  const customLoaders = config.module && config.module.loaders || [];
+  return baseLoaders.concat(customLoaders);
+}
+
+function extractResolve(config: ProjectConfig): WebpackResolveConfig {
+  const resolveConfig = config.compiler && config.compiler.resolve || {};
+  return Object.assign(resolveConfig, {
+    alias: resolveValuesRailsPath(resolveConfig.alias),
+    root: railsPath(resolveConfig.root),
+  });
+}
+
+function extractPlugins(config: ProjectConfig): Array<WebpackPlugin> {
+  const prepend = config.prependPlugins || [];
+  const plugins = config.plugins || [];
+  const appendPlugins = config.appendPlugins || [];
+  return prepend.concat(plugins).concat(appendPlugins);
+}
+
+function extractModule(config: ProjectConfig): WebpackModuleConfig {
+  const moduleConfig = config.compiler && config.compiler.module || {};
+  return Object.assign(moduleConfig, {
+    loaders: extractLoaders(config),
+  });
+}
+
+function formatUrl(urlObject: Object) {
+  return url.format(urlObject);
+}
+
+function extractPublicPath(config: ProjectConfig): string {
+  const pathUrl = url.parse(config.publicPath || '/assets');
+  const port = String(config.devServer && config.devServer.port || '3001');
+
+  if (!pathUrl.protocol) {
+    pathUrl.protocol = port === '443' ? 'https' : 'http';
+  }
+
+  if (!pathUrl.hostname) {
+    pathUrl.hostname = config.devServer && config.devServer.host || 'localhost';
+  }
+
+  if (!pathUrl.port && port !== '80' && port !== '443') {
+    pathUrl.port = port;
+  }
+
+  return formatUrl(pathUrl);
+}
+
+function extractOutput(config: ProjectConfig): WebpackOutputConfig {
+  const outputConfig = config.compiler && config.compiler.output || {};
+  return Object.assign(outputConfig, {
+    path: railsPath(outputConfig.path),
+    publicPath: extractPublicPath(config),
+  });
+}
+
+function resolveContentBase(contentBase?: string): ?string {
+  if (!contentBase) {
+    return undefined;
+  }
+
+  return railsPath(contentBase);
+}
+
+export function extractCompilerConfig(config: ProjectConfig): WebpackConfig {
+  const compilerConfig = Object.assign({}, config.compiler);
+  return Object.assign({}, compilerConfig, {
+    context: railsPath(compilerConfig.context),
+    entry: resolveValuesRailsPath(config.entries),
+    output: extractOutput(config),
+    module: extractModule(config),
+    resolve: extractResolve(config),
+    plugins: extractPlugins(config),
+  });
+}
+
+export function extractDevServerConfig(config: ProjectConfig): WebpackDevServerConfig {
+  return Object.assign({}, config.devServer, {
+    contentBase: resolveContentBase(config.devServer && config.devServer.contentBase),
+    publicPath: extractPublicPath(config),
+  });
+}

data/src/utils/index.js

@@ -0,0 +1,6 @@
+// @flow
+
+export * from './extract_config';
+export * from './merge_config';
+export * from './misc';
+export * from './path';

data/src/utils/merge_config.js

@@ -0,0 +1,34 @@
+// @flow
+
+import * as misc from './misc';
+
+function mergeCompilerConfig(
+  target: WebpackConfig = {},
+  source: WebpackConfig = {}
+): WebpackConfig {
+  const output = misc.merge(target, source);
+  return Object.assign(output, {
+    output: misc.merge(target.output, source.output),
+    module: misc.merge(target.module, source.module),
+    resolve: misc.merge(target.resolve, source.resolve),
+  });
+}
+
+function mergeDevServerConfig(
+  target: WebpackDevServerConfig = {},
+  source: WebpackDevServerConfig = {}
+): WebpackDevServerConfig {
+  const output = misc.merge(target, source);
+  return Object.assign(output, {
+    stats: misc.merge(target.stats, source.stats),
+  });
+}
+
+export function mergeProjectConfig(target: ProjectConfig, source: ProjectConfig): ProjectConfig {
+  const output = misc.merge(target, source);
+  return Object.assign(output, {
+    entries: source.entries || target.entries || {},
+    devServer: mergeDevServerConfig(target.devServer, source.devServer),
+    compiler: mergeCompilerConfig(target.compiler, source.compiler),
+  });
+}