webpack & elm

app-assets-javascripts-elm-HelloWorld.js

const Elm = require("../../elm/HelloWorld.elm")

window.registerApp({ HelloWorld: Elm.HelloWorld })

app-assets-javascripts-elm.js

(function(window) {
  let apps = {}

  window.registerApp = newApps => {
    apps = {
      ...apps,
      ...newApps
    };
  }
  const load = function() {
    Array.prototype.slice.call(document.querySelectorAll('[data-elm-app]')).forEach(function(element) {
      const app       = apps[element.dataset.elmApp]
      const propsJson = element.dataset.props
      const props     = propsJson ? JSON.parse(propsJson) : {}

      app.embed(element, props);
    })
  }

  document.addEventListener('DOMContentLoaded', load)

  if (document.readyState == 'complete') {
    load()
  }
})(window)

app-helpers-elm.rb

module ElmHelper
  def elm_app(name, props = {}, html_options = {})
    if props.has_key?(:elm_app)
      content_tag :div do
        content_tag :span, "elm_app is a reserved keyword. Your props need to not contain it"
      end
      return
    end

    html_options[:data] = {
      elm_app: name,
      props: props.as_json
    }

    content_tag :div, nil, html_options
  end
end

view.html.erb

<%= elm_app "HelloWorld" %>

webpack-shared.config.js

const webpack = require('webpack');
const Manifest = require('webpack-manifest-plugin');
const path = require('path');
const glob = require('glob');

module.exports = {
  entry: {
    leagues: [
      'babel-polyfill',
      './app/assets/javascripts/react/react.js',
    ].concat(glob.sync('app/assets/javascripts/components/public/**/*', {absolute: true})),
    teams: [
      'babel-polyfill',
      './app/assets/javascripts/react/react.js',
    ].concat(glob.sync('app/assets/javascripts/components/public/**/*', {absolute: true})),
    admin: [
      'babel-polyfill',
      './app/assets/javascripts/react/react.js',
    ].concat(glob.sync('app/assets/javascripts/components/admin/**/*', {absolute: true}))
    .concat(glob.sync('app/assets/javascripts/admin/**/*', {absolute: true}))
    .concat(glob.sync('app/assets/elm/admin/**/*', {absolute: true})),
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.json$/, // req'd for postcssJS autoprefixer
        loader: 'json-loader'
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: 'elm-webpack'
      },
    ],
  },
  node: {
    fs: 'empty' // req'd for postcssJS
  },
  output: {
    filename: '[name].js',
    path: 'public/assets/',
  },
  plugins: [
    new Manifest(),
  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  resolveLoader: {
    root: path.join(__dirname, '..', '..', 'node_modules')
  },
};