react-webpack-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 0fd2bddc740ba893006fb0ac87e13a560f7f25b8
+  data.tar.gz: 223f3c1d0a1800b818f0bdbdd26375673b1d2636
+SHA512:
+  metadata.gz: 1c6fbd3e9464517dd5d2cee5adc43d4475c0750ac61cc38dc3997c2284b50272cca4d37bc0b89f50fd90a39a2e8625bc159f67e4f97444f4ceb285acfa490a33
+  data.tar.gz: c34cd4e6aefdfb2baa7e038a202addc3f4683acbb9b3356f78a66ef1ad250b31247edefbd8931f243c64c2229925a333f5400b6770f82b0a5ae867ed2e1bbbd7

data/README.md

@@ -0,0 +1,104 @@
+# React::Webpack::Rails
+A simple installation tool for getting up and running with React + Webpack in Rails.
+
+_* This is still in the early stages of development, and is experimental. Feedback is appreciated, and pull requests are welcome._
+
+## OVERVIEW
+This is a minimalist approach to integrating React and Webpack with Rails. There's nothing really hidden in the gem. The point is to be transparent about what is being added to your app and why.
+
+There are several goals for this gem:
+
+* Provide a lightweight gem for integrating React and Webpack to Rails
+* Easy asset compiling for development and production
+* Fluid development workflow
+* Easy npm module integration
+* single step server for development
+* single asset compilation for deployment
+
+## INSTALLATION
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'react-webpack-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install react-webpack-rails
+
+
+## GENERATOR TOOL
+_* not currently supporting HAML_
+
+$ rails g react:webpack:install
+
+### WHAT THIS GENERATES
+**EMPTY DIRECTORIES**
+* `client/components`
+* `app/assets/webpack`
+
+**BASE FILES**
+* `webpack.config.js`
+* `.babelrc`
+* `app/helpers/react_helper.rb`
+* `client/index.js`
+* `Procfile`
+* `lib/tasks/assets.rake`
+
+**GEMS**
+
+* `foreman`
+
+_* you can skip immediate installation_
+
+**NODE MODULES**
+
+* `babel-core`
+* `babel-loader`
+* `babel-preset-es2015`
+* `babel-preset-react`
+* `classnames`
+* `react`
+* `react-dom`
+* `webpack`
+
+_* you can skip immediate installation_
+
+**APPENDING ASSETS INTO THE PIPELINE**
+
+## DEVELOPMENT
+The generator installs Foreman and adds a Procfile to fire up Webpack and the Rails server in a single command:
+
+    $ foreman start
+
+You can also run these separately if you'd like.
+
+```
+npm run watch
+```
+```
+rails server
+```
+
+If everything went well, you should be able to view your app at http://localhost:3000
+
+ You can add your components to `client/components/` and be sure to list them in `client/index.js`
+
+You can call components in the view with an `erb` tag for your components and props: `<%= react_component :Dropdown, listItems: [1,2,3,4] %>`
+
+## PRODUCTION
+A rake task for precompiling the webpack assets is added by the generator. This essentially adds the Webpack/Babel transpiling to the precompilation task that runs when you deploy to production. So you should never need to have two separate build tasks.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/react-webpack-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/lib/generators/react/webpack/install_generator.rb

@@ -0,0 +1,98 @@
+require 'rails/generators'
+
+module React
+  module Webpack
+    module Generators
+      class InstallGenerator < ::Rails::Generators::Base
+        source_root File.expand_path('../templates', __FILE__)
+
+        desc "Installs necessary framework for react-webpack integration"
+
+        def create_base_directories
+          empty_directory("clients/components")
+          empty_directory("app/assets/webpack")
+        end
+
+        def create_base_files
+          puts "Creating base files"
+          copy_file "webpack.config.js", "webpack.config.js"
+          copy_file "babelrc", ".babelrc"
+          copy_file "react_helper.rb", "app/helpers/react_helper.rb"
+          copy_file "index.js", "client/index.js"
+          copy_file "Procfile", "Procfile"
+          copy_file "assets.rake", "lib/tasks/assets.rake"
+        end
+
+        def install_foreman
+          puts "Adding foreman gem"
+          gem "foreman"
+          if yes?("Run bundle install?")
+            system("bundle install")
+          else
+            puts "Cool. Just remember to run 'bundle install' later."
+          end
+          puts "DONE"
+        end
+
+        def install_node_modules
+          if npm_and_node_installed?
+            initialize_npm_and_node_modules
+          else
+            puts "You'll need to install node & npm to be able to use React."
+            puts "Visit https://nodejs.org/en/ to install."
+          end
+        end
+
+        def inject_assets_into_pipeline
+          puts "Injecting assets into pipeline"
+          append_to_file "app/views/layouts/application.html.erb", "<%= javascript_include_tag 'bundle' %>"
+          append_to_file "config/initializers/assets.rb", "Rails.application.config.assets.precompile += %w( bundle.js )"
+        end
+
+        private
+
+        def npm_and_node_installed?
+          system("which npm") && system("which node")
+        end
+
+        def initialize_npm_and_node_modules
+          puts "Initalizing package.json"
+          system("npm init -y")
+          if yes?("Install node modules?")
+            puts "Installing..."
+            system("npm install --save babel-core babel-loader babel-preset-es2015 babel-preset-react classnames react react-dom webpack")
+            append_npm_run_tasks
+          else
+            puts "Cool. We'll add a standard `package.json` with the appropriate dependencies for you now. Just remember to run 'npm install' later."
+            inject_into_file "package.json", node_dependencies, { after: '#readme"' }
+            append_npm_run_tasks
+          end
+        end
+
+        def append_npm_run_tasks
+          puts "Adding webpack watch task"
+          inject_into_file "package.json", webpack_watch_task, { after: '"test": "echo \"Error: no test specified\" && exit 1"'}
+        end
+
+        def webpack_watch_task
+          ',
+    "watch": "webpack --watch --colors --progress"'
+        end
+
+        def node_dependencies
+          ',
+  "dependencies": {
+    "babel-core": "^6.7.7",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "classnames": "^2.2.5",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "webpack": "^1.13.0"
+  }'
+        end
+      end
+    end
+  end
+end

data/lib/generators/react/webpack/templates/Procfile

@@ -0,0 +1,2 @@
+webpack: npm run watch
+rails: rails server

data/lib/generators/react/webpack/templates/assets.rake

@@ -0,0 +1,8 @@
+namespace :assets do
+  task :precompile => :webpack
+end
+
+task :webpack do
+  sh "npm install"
+  sh "./node_modules/.bin/webpack"
+end

data/lib/generators/react/webpack/templates/babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

data/lib/generators/react/webpack/templates/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+// import SomeComponent from './components/SomeComponent';
+// import AnotherComponent from './components/AnotherComponent';
+
+const components = {
+  // Your components go here:
+  // 'SomeComponent': SomeComponent,
+  // 'AnotherComponent': AnotherComponent
+}
+
+const reactTargetDivs = document.getElementsByClassName('react-component-target');
+
+let componentName, componentProps
+Array.prototype.forEach.call(reactTargetDivs, function (targetDiv) {
+  componentName = targetDiv.getAttribute('data-react-class')
+  componentProps = JSON.parse(targetDiv.getAttribute('data-react-props'))
+  ReactDOM.render(
+    React.createElement(
+       components[componentName],
+       componentProps
+     ),
+    targetDiv
+  )
+});

data/lib/generators/react/webpack/templates/react_helper.rb

@@ -0,0 +1,15 @@
+require 'json'
+
+module ReactHelper
+  def react_component(component_name, props = {})
+    content_tag(
+      :div,
+      nil,
+      class: 'react-component-target',
+      data: {
+        react_class: component_name,
+        react_props: props.to_json
+      }
+    )
+  end
+end

data/lib/generators/react/webpack/templates/webpack.config.js

@@ -0,0 +1,23 @@
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+  entry: [
+    './client/'
+  ],
+  module: {
+    loaders: [
+      { test: /\.js?$/, loader: 'babel', exclude: /node_modules/ }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js']
+  },
+  output: {
+    path: path.join(__dirname, '/app/assets/webpack/'),
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+  ]
+};

data/lib/react/webpack/rails.rb

@@ -0,0 +1,9 @@
+require "react/webpack/rails/version"
+
+module React
+  module Webpack
+    module Rails
+      # Your code goes here...
+    end
+  end
+end

data/lib/react/webpack/rails/version.rb

@@ -0,0 +1,7 @@
+module React
+  module Webpack
+    module Rails
+      VERSION = "0.1.0"
+    end
+  end
+end

data/lib/tasks/assets.rake

@@ -0,0 +1,8 @@
+namespace :assets do
+  task :precompile => :webpack
+end
+
+task :webpack do
+  sh "npm install"
+  sh "./node_modules/.bin/webpack"
+end

metadata

@@ -0,0 +1,97 @@
+--- !ruby/object:Gem::Specification
+name: react-webpack-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Alan Smith
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-05-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+description: ''
+email:
+- a.bax.smith@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/generators/react/webpack/install_generator.rb
+- lib/generators/react/webpack/templates/Procfile
+- lib/generators/react/webpack/templates/assets.rake
+- lib/generators/react/webpack/templates/babelrc
+- lib/generators/react/webpack/templates/index.js
+- lib/generators/react/webpack/templates/react_helper.rb
+- lib/generators/react/webpack/templates/webpack.config.js
+- lib/react/webpack/rails.rb
+- lib/react/webpack/rails/version.rb
+- lib/tasks/assets.rake
+homepage: https://github.com/alanbsmith/react-webpack-rails
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Integration tool for React + Webpack with Rails
+test_files: []