Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
webpack & elm
const Elm = require("../../elm/HelloWorld.elm")
window.registerApp({ HelloWorld: Elm.HelloWorld })
(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)
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
<%= elm_app "HelloWorld" %>
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')
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.