From 6e6e8dbd84ed013b2b97c63474665990891cc4d4 Mon Sep 17 00:00:00 2001
From: Flarnie Marchan <fnonemaker@gmail.com>
Date: Sun, 31 Aug 2014 07:48:21 -0700
Subject: [PATCH] Add some example scripts to load with webpack

The example JS files demonstrate
 * The use of CommonJS dependency management syntax[1]; 'require' and
'module.exports' statements
 * Using webpack to require dependencies that (for whatever reason) are
in the global scope
 * Using ES6 features in your JS (relying on the ES6-loader to polyfill
your code)
 * Using sprockets to load JS bundled by webpack as well as JS from gems
(in this case just the default Rails jquery gem
---
 app/assets/javascripts/_application.js        |  2 ++
 app/assets/javascripts/application.js         |  2 +-
 app/assets/javascripts/hello_world.js         |  8 +++++++
 .../javascripts/views/hello_world_view.js     | 22 +++++++++++++++++++
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/_application.js
 create mode 100644 app/assets/javascripts/hello_world.js
 create mode 100644 app/assets/javascripts/views/hello_world_view.js

diff --git a/app/assets/javascripts/_application.js b/app/assets/javascripts/_application.js
new file mode 100644
index 0000000..cb39b08
--- /dev/null
+++ b/app/assets/javascripts/_application.js
@@ -0,0 +1,2 @@
+// files required here will run in the global scope
+require('./hello_world');
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index d6925fa..826a848 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,4 +13,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require_tree .
+//= require main.bundle
diff --git a/app/assets/javascripts/hello_world.js b/app/assets/javascripts/hello_world.js
new file mode 100644
index 0000000..abccca1
--- /dev/null
+++ b/app/assets/javascripts/hello_world.js
@@ -0,0 +1,8 @@
+var $ = require('jquery'),
+    HelloWorldView = require('./views/hello_world_view');
+
+// Any logic to initialize the app goes here
+// For example, starting any routers or initializing the 'home' view
+$(function() {
+  HelloWorldView.render();
+});
diff --git a/app/assets/javascripts/views/hello_world_view.js b/app/assets/javascripts/views/hello_world_view.js
new file mode 100644
index 0000000..f2ef8d7
--- /dev/null
+++ b/app/assets/javascripts/views/hello_world_view.js
@@ -0,0 +1,22 @@
+var $ = require('jquery');
+
+var firstPar = $('<p>'),
+    textStart = $('<span>').text("You're using "),
+    webpackURL = 'http://webpack.github.io/',
+    webpackLink = $('<a>').attr('href', webpackURL).text('webpack'),
+    textEnd = $('<span>').text(' with Rails.'),
+    es6text = 'ES6',
+// The ES6 loader will compile this template string into the ES5 equivalent.
+    es6Par = $('<p>').text(
+      `You can also use ${es6text} features with the ES6 loader.`
+    );
+
+firstPar.append(textStart).append(webpackLink).append(textEnd);
+
+var HelloWorldView = {
+  render: function() {
+    $('.main').append(firstPar).append(es6Par);
+  }
+};
+
+module.exports = HelloWorldView;