tilt-react 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,15 @@
 ---
-SHA1:
-  metadata.gz: bbcaf6f0207e3e10892e7770f8717513f490095f
-  data.tar.gz: 329c3140e578f25104e710ab89d62a66e71e9337
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    ZjM5Mjk2ZjUxMWI0NDAzYjMzZTkwNzllYTY1NWI5OTJiY2I0MDZhYQ==
+  data.tar.gz: !binary |-
+    MjkxZmRhYjRhMDVjNzQxMmNlZjhiZDBjMzlkYjEyZmY0NzQ3ZGVmZA==
 SHA512:
-  metadata.gz: c4f15fca0cc8a5f690b95229488c96ca181d3c9e7922aff80f701a8b1108f098a624d30ea6280b238716c4887fea1a3cd17b5280e967c32b6113101a035deb97
-  data.tar.gz: 81b158738e68e6b75862dbf1e507894e10117454c2f5793821dd4703843fd3ff31633d114a1fbd830cbf1517d4b089f28de2ae89739280bd0ee175fa23e13360
+  metadata.gz: !binary |-
+    MWU5MGY4ZWMzNjFiNTg0ZWU2MDhiOWU4NTBmNzhjMDI1OWQ5NGI0ZGUzNjQ5
+    YzViZWJmYmM2YTgwZTg5ZTg3M2EwN2VkYzFjMjZiYzAzMTY2ZWU2MDgzZjZk
+    M2E2YmIwZDQxMDg1ZDZmM2YyYTEyMDgzYTI5ZDUwY2JlOTQyNTM=
+  data.tar.gz: !binary |-
+    Njk5OTRjZDg1ODIwZTQyMWY3NmZmNGFiZTA4YWMxMGZiMGE3NzJhN2RkMDMw
+    ZmI3Y2Q3MDI0Mjg1Mzc4MTA4MTliMjJhMDdjM2RhOTZkNWZkMzBiMDkwNDk2
+    NDZiMzkyNTljNzMwY2EyYzkyZDEzNzEyMzJhYzkwZDllYjNjNGY=

data/.travis.yml

@@ -4,10 +4,11 @@ rvm:
 deploy:
   provider: rubygems
   api_key:
+    secure: pVtlk2B2iWhYtZmUApIe6H8RHDjiaZWUTjCHnyPKQmkIeB4wC+Mu/Cr1ykqXUwko6rOMz0BllNn5J/DIX4hNBzYZnI7JWRM7rpV11Ni76rWXU+RxcQ07XtnZeBwb6PSZLsnt2x0T5CqJjidcJJo3IiQVz3DrRGtX6bOpMV9nf5ySjOwBq/PyHzaOi4vCdH+t3KDco4R1ppCz+AXuKry3FNm+HWxsRQOsswerEi9wWGJClq07W8/IRPhL5AGbML5hS1VbKtR0WCQyz4uax1hvty01VsEwijTiwui6ed0wtXjU/rnKZ/cTYDV+U0TyiGchclvlCd5IBlsNmck+9LQjsJcvxMbCtG0dMuOhwwmxvVG+MqBGIEFmR+eKQPa+PNuWb1ApRTT7/Jh8u5YcVBhiKqzZ3MJxCg8Gl+NVlN/SPIfWOgj4KWqJI9w73lGiw7mSbh9Vp1n0eV3LmVeZgza+Hgk+ATztZupyGPyiKZ9WUxEppVJvAp5+/YQPompklaSkL84JccH+4zkD+62nX7oltjS8f+mSj8JeubZ0X+bfYD6hVYc7rkNVnYVzj4Moa1OO68zM5OYAAM8e9J8gvnjhuBElhWb/feVh0VOlWhP8qxjO/dYdVVAZ6LJAHg0zEK9YPiabaNMZ6oxhRZVBWSd07yW0NzmYm3jG2emDZdDxfxM=
   gem: tilt-react
   on:
     tags: true
     repo: jphastings/tilt-react
 addons:
   code_climate:
-    secure: "NLJ1KBW8QcBQLY2R8qYgr+M4MgaGr1NZFBBffPvsQf/fqHo+n26B+z42SoMQIUaGm40Y9fDB3FgloumG5GGCNsdQ+6mIec2948Fjh9BsBy8ZDdpOypcsX5cAtBwHAhOa1tUv/nOU1udMEExT9dFQ7FCae+Z/ivw2EvpgaZuOd5bDwZWvnPiDAybVwlwusTWOPxQhTR3OEd1y0WnXfoVtdT0ACdp6mLxzy7ERs8uEuoOBHq/Q4Ai807beseNtZs9H+2K4L48fi3u65/p7c9WpyzCUVeEpUXPBjLl43NzWXqC8Zj6sOL5gRzj4gV3y7a+NTBzDyOHEAqNvnNe83AHS38AMLidvbmnLWSf2GvKBHr9oSdiQzyBxiHVdZXgP/1FjrVu2JC7MAYVKz5va9Pri4Ey38qjdT1JrR+9meXCq9nTMyPVWxdiO6AysoXBG+7YaNqZjvvxpT60UfKc9pzYf+YxHNEgmYvK0AbjiY2A+wX7f5+mT/BgwKIr6LHSy136Y9IuduUKfuhsdeKn1LBD68ox6pmB24oz2XNJPJ2cLPgIARGMj55ZYg/3zrccaqa/sHBp/XvQ7r+MsR6gCZ7Kedfhevq7JimSsbN6FkNrzIPlzAMxOIQCuSLtwc52FVMMrznmihbN2TmWssdBvAyua5dkqlwqgOUYKDP69m3gI2Bc="
+    secure: NLJ1KBW8QcBQLY2R8qYgr+M4MgaGr1NZFBBffPvsQf/fqHo+n26B+z42SoMQIUaGm40Y9fDB3FgloumG5GGCNsdQ+6mIec2948Fjh9BsBy8ZDdpOypcsX5cAtBwHAhOa1tUv/nOU1udMEExT9dFQ7FCae+Z/ivw2EvpgaZuOd5bDwZWvnPiDAybVwlwusTWOPxQhTR3OEd1y0WnXfoVtdT0ACdp6mLxzy7ERs8uEuoOBHq/Q4Ai807beseNtZs9H+2K4L48fi3u65/p7c9WpyzCUVeEpUXPBjLl43NzWXqC8Zj6sOL5gRzj4gV3y7a+NTBzDyOHEAqNvnNe83AHS38AMLidvbmnLWSf2GvKBHr9oSdiQzyBxiHVdZXgP/1FjrVu2JC7MAYVKz5va9Pri4Ey38qjdT1JrR+9meXCq9nTMyPVWxdiO6AysoXBG+7YaNqZjvvxpT60UfKc9pzYf+YxHNEgmYvK0AbjiY2A+wX7f5+mT/BgwKIr6LHSy136Y9IuduUKfuhsdeKn1LBD68ox6pmB24oz2XNJPJ2cLPgIARGMj55ZYg/3zrccaqa/sHBp/XvQ7r+MsR6gCZ7Kedfhevq7JimSsbN6FkNrzIPlzAMxOIQCuSLtwc52FVMMrznmihbN2TmWssdBvAyua5dkqlwqgOUYKDP69m3gI2Bc=

data/Gemfile

@@ -2,3 +2,5 @@ source 'https://rubygems.org'
 
 # Specify your gem's dependencies in tilt-react.gemspec
 gemspec
+
+gem "codeclimate-test-reporter", group: :test, require: nil

data/README.md

@@ -2,11 +2,12 @@
 
 Use react components as view templates in Sinatra and other frameworks using Tilt.
 
+This new imroved version uses webpack; which means both server and client side render is supported! There are helper functions which will allow single-page-like AJAX re-rendering of the page with History API integration.
+
 Bonus feature: RSpec::React, a helpful framework for writing unit tests for the server generated HTML your components produce.
 
 This is proof-of-concept code, there are some limitations:
 
-* Only server-side rendering is supported at the moment
 * There's some hacky code around the place (search for FIXME)
 * There aren't any tests for the actual library…
 

data/Rakefile

@@ -1 +1,7 @@
-require "bundler/gem_tasks"
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+task :default => :test
+task :test => :spec
+
+RSpec::Core::RakeTask.new(:spec)

data/examples/sinatra/.gitignore

@@ -1,2 +1,4 @@
 /node_modules/
-/public/js/components.js
+/public/js/*
+package.json
+webpack.config.js

data/examples/sinatra/Gemfile.lock

@@ -2,18 +2,13 @@ PATH
   remote: ../..
   specs:
     tilt-react (0.1.0)
-      babel-transpiler (~> 0.7)
-      commonjs (~> 0.2)
+      rack-accept (~> 0.4)
       therubyracer (~> 0.12)
 
 GEM
   remote: https://rubygems.org/
   specs:
     addressable (2.4.0)
-    babel-source (5.8.35)
-    babel-transpiler (0.7.0)
-      babel-source (>= 4.0, < 6)
-      execjs (~> 2.0)
     capybara (2.6.2)
       addressable
       mime-types (>= 1.16)
@@ -21,9 +16,7 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
-    commonjs (0.2.7)
     diff-lcs (1.2.5)
-    execjs (2.6.0)
     libv8 (3.16.14.13)
     mime-types (3.0)
       mime-types-data (~> 3.2015)
@@ -32,6 +25,8 @@ GEM
     nokogiri (1.6.7.2)
       mini_portile2 (~> 2.0.0.rc2)
     rack (1.6.4)
+    rack-accept (0.4.5)
+      rack (>= 0.4)
     rack-protection (1.5.3)
       rack
     rack-test (0.6.3)
@@ -76,3 +71,6 @@ DEPENDENCIES
   rspec-its (~> 1.2)
   sinatra (~> 1.4)
   tilt-react!
+
+BUNDLED WITH
+   1.11.2

data/examples/sinatra/README.md

@@ -4,16 +4,19 @@ This example app demonstrates how to use React Components as view templates in y
 
 ## Go go gadget example app
 
-You'll need to download React in order to get this example to work. [Install NPM](https://docs.npmjs.com/getting-started/installing-node), install the npm dependencies, then run the app:
+You'll need to download NPM in order to get this example to work. [Install NPM](https://docs.npmjs.com/getting-started/installing-node), run the setup tasks, then run the app:
 
 ```bash
-npm install
+rake react:setup:npm
+rake react:compile
 rackup
 ```
 You should be set! Try visiting http://127.0.0.1:9292/?name=world
 
 ## Writing unit tests for your components
 
+_Tests aren't working right now - webpack support is a WIP!_
+
 There are also simple tests demonstrating how to write unit tests for the HTML your components produce.
 
 If you declare `type: :component` on the root `describe` block of your test suite, then that component is loaded, rendered with the `props` given, and the subject of the test becomes a Nokogiri HTML object, which allows easy assertion with `rspec-its` etc.

data/examples/sinatra/Rakefile

@@ -0,0 +1,2 @@
+$:<<'../../lib'
+require 'tilt/react/tasks'

data/examples/sinatra/app.rb

@@ -5,6 +5,10 @@ class ExampleApp < Sinatra::Base
   register Sinatra::React
 
   get '/' do
-    react :home_page, locals: { name: params['name'] || 'you' }
+    react :home_page, locals: { name: params['name'] }
+  end
+
+  get '/other' do
+    react :other_page
   end
 end

data/examples/sinatra/components/HomePage/HomePage.jsx

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+
+class HomePage extends React.Component {
+  render() {
+    return (
+      <section>
+        <h1>Hello {this.props.name || 'you'}</h1>
+        <p>This is being rendered with React. Head to <a href="/other" onClick={window.TiltReact.ajaxLoad}>another page</a>.</p>
+      </section>
+    );
+  }
+}
+
+HomePage.propTypes = { name: PropTypes.string };
+
+export default HomePage;

data/examples/sinatra/components/OtherPage/OtherPage.jsx

@@ -0,0 +1,14 @@
+import React, { PropTypes } from 'react';
+
+class OtherPage extends React.Component {
+  render() {
+    return (
+      <section>
+        <h1>Another page</h1>
+        <p>Go back <a href="/" onClick={window.TiltReact.ajaxLoad}>Home</a>.</p>
+      </section>
+    );
+  }
+}
+
+export default OtherPage;

data/examples/sinatra/components/home.js

@@ -0,0 +1,5 @@
+import HomePage from './HomePage';
+import OtherPage from './OtherPage';
+
+window.TiltReact.addComponent(HomePage);
+window.TiltReact.addComponent(OtherPage);

data/examples/sinatra/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Title Page</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="js/tilt_react_client_bundle.js"></script>
+    <script src="js/home_bundle.js"></script>
+  </body>
+</html>

data/examples/sinatra/views/layout.erb

@@ -8,6 +8,8 @@
   </head>
   <body>
     <%= yield %>
-    <script src="js/components.js"></script>
+    <script src="js/tilt_react_client_bundle.js"></script>
+    <script src="js/home_bundle.js"></script>
+    <script>TiltReact.bind()</script>
   </body>
 </html>

data/ext/default.package.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "babel-core": "^6.7.7",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "fbjs": "0.8",
+    "glob": "^7.0.3",
+    "react": "^15.0",
+    "react-dom": "^15.0",
+    "webpack": "^1.13.0"
+  }
+}

data/ext/tilt-react-server.js

@@ -0,0 +1,6 @@
+import ReactDOMServer from 'react-dom/server';
+
+window.TiltReact.renderToString = function(componentName, props) {
+  const element = window.TiltReact.elementForComponent(componentName, props);
+  return ReactDOMServer.renderToString(element);
+};

data/ext/tilt-react.js

@@ -1,12 +1,120 @@
-React = require('react');
-DOMServer = require('react-dom/server');
-
-var tiltReact = {
-  render: function(componentName, props) {
-    var component = React.createFactory(tiltReact.components[componentName]);
-    return DOMServer.renderToString(component(props));
-  },
-  components: {}
-};
-
-module.exports = tiltReact;
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class TiltReactClass {
+  constructor() {
+    this.components = {};
+  }
+
+  bind() {
+    this.reactContainers().forEach(container => {
+      const componentName = container.dataset.reactClass;
+      const propsContainer = container.nextElementSibling;
+      const props = JSON.parse(propsContainer.innerText);
+      this.render(container, componentName, props);
+      container.parentElement.removeChild(propsContainer);
+    });
+
+    window.addEventListener('popstate', event => {
+      const containers = this.reactContainers();
+      try {
+        event.state.forEach((data, i) => {
+          this.render(
+            containers[i],
+            data[0],
+            JSON.parse(data[1]) || {}
+          );
+        });
+      } catch(e) {
+        // State wasn't in the correct format
+      }
+    });
+  }
+
+  render(container, componentName, props, pathChange) {
+    const element = this.elementForComponent(componentName, props);
+    ReactDOM.render(element, container);
+    container.dataset.reactClass = componentName;
+    container.dataset.props = JSON.stringify(props);
+
+    if (typeof pathChange === 'undefined') {
+      window.history.replaceState(
+        this.pageState(),
+        document.title,
+        window.location.href
+      );
+    } else {
+      window.history.pushState(
+        this.pageState(),
+        document.title,
+        pathChange
+      );
+    }
+  }
+
+  elementForComponent(componentName, props) {
+    const component = this.components[componentName];
+    const element = React.createElement(component, props);
+    return element;
+  }
+
+  addComponent(component) {
+    this.components[component.name] = component;
+  }
+
+  componentNames() {
+    return Object.keys(this.components);
+  }
+
+  reactContainers() {
+    return Array.prototype.slice.call(document.querySelectorAll('div[data-react-class]'));
+  }
+
+  reactContainerFor(element) {
+    while(typeof element !== 'null') {
+      if (element.hasAttribute('data-react-class')) {
+        return element;
+      }
+      element = element.parentElement;
+    }
+  }
+
+  pageState() {
+    return this.reactContainers().map(container => {
+      return [
+        container.dataset.reactClass,
+        container.dataset.props
+      ];
+    });
+  }
+
+  fetch(path, options, targetContainer) {
+    targetContainer = targetContainer || this.reactContainers()[0];
+    options = options || {};
+    options.headers = options.headers || {};
+    options.headers.Accept = 'application/json';
+
+    fetch(path, options).then(response => {
+      return response.json();
+    }).then(json => {
+      this.render(targetContainer, json[0], json[1], path);
+    });
+  }
+
+  ajaxLoad(event) {
+    event.preventDefault();
+    switch(event.type) {
+      case 'click':
+        TiltReact.fetch(
+          event.target.href,
+          { method: 'GET' },
+          TiltReact.reactContainerFor(event.target)
+        );
+        return;
+    }
+  }
+}
+
+window.TiltReact = new TiltReactClass();
+
+module.exports = window.TiltReact;

data/ext/webpack.config.js

@@ -0,0 +1,47 @@
+var path = require('path');
+var glob = require('glob')
+var webpack = require('webpack');
+
+function entryPoints(dir) {
+  var entryPoints = {};
+  var opts = {
+    nosort: true,
+    realpath: true,
+  };
+  glob.sync(path.join(dir, '*.js'), opts).forEach(function (file) {
+    var parts = file.match(/\/([^\/]+).js$/);
+    if (parts[1] !== null) {
+      entryPoints[parts[1]] = file;
+    }
+  });
+  return entryPoints;
+}
+
+module.exports = {
+  entry: entryPoints('./components'),
+  output: {
+    path: path.join(__dirname, 'public/js'),
+    filename: '[name]_bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /.jsx?/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          presets: ['es2015', 'react'],
+        },
+      }
+    ]
+  },
+  plugins: [
+    // Avoid publishing files when compilation fails
+    new webpack.NoErrorsPlugin(),
+    // new webpack.optimize.UglifyJsPlugin({minimize: true}),
+  ],
+  stats: {
+    colors: true
+  },
+  devtool: 'source-map',
+};

data/lib/sinatra/react.rb

@@ -1,44 +1,47 @@
 require 'sinatra/base'
 require 'tilt/react'
+require 'rack/accept'
 
 module Sinatra
   module React
     module Helpers
-      def react(*args)
-        render :jsx, *args
+      def react(component, opts = {})
+        req = Rack::Accept::MediaType.new(request.env['HTTP_ACCEPT'])
+        if req.accept?('text/html')
+          return render :jsx, component, opts
+        elsif req.accept?('application/json')
+          content_type :json
+          return json_for_props(component, opts[:locals])
+        else
+          halt 406
+        end
       end
 
       def find_template(views, name, engine, &block)
         if engine == Tilt::ReactTemplate
-          views = settings.components
+          views = Tilt::ReactTemplate.components
         end
         super(views, name, engine, &block)
       end
+
+      private
+
+      def json_for_props(component, props)
+        [
+          Tilt::ReactTemplate.file_to_class_name(component.to_s),
+          props
+        ].to_json
+      end
     end
 
     def self.registered(app)
       app.helpers(Helpers)
-      app.set :components, Proc.new { root && File.join(root, 'components') }
-      app.set :js_libs, Proc.new { root && File.join(root, 'node_modules') }
-      app.set :component_bundles, { '*.jsx' => 'js/components.js' }
+      app.set :bundles_glob, 'public/js/*_bundle.js'
       app.set :jsx, layout_engine: :erb
 
       app.configure do |config|
-        # FIXME: I don't like this following line. Apparently this block gets called
-        # multiple times, once without the settings above returning nil, and a second
-        # time with them being what they should be. Because this block configures the
-        # JS context calling it without js_libs means no libraries are loaded, so we
-        # must wait until js_libs has content. 
-        next unless config.settings.js_libs
-
-        Tilt::ReactTemplate.js_libs = config.settings.js_libs
-        Tilt::ReactTemplate.load_context
-        Tilt::ReactTemplate.compile_bundles(config.settings.component_bundles.map { |glob, bundle|
-          [
-            File.expand_path(glob, config.settings.components),
-            File.expand_path(bundle, config.settings.public_folder)
-          ]
-        })
+        Tilt::ReactTemplate.prepare_context
+        Tilt::ReactTemplate.load_directory(config.settings.bundles_glob)
       end
     end
   end

data/lib/tilt/react.rb

@@ -1,8 +1,6 @@
 require 'tilt/react/version'
 require 'tilt'
 require 'fileutils'
-require 'commonjs'
-require 'commonjs/require_string'
 require 'json'
 require 'v8'
 
@@ -10,87 +8,42 @@ module Tilt
   class ReactTemplate < Template
     def initialize(file=nil, line=1, options={}, &block)
       file = File.expand_path(file)
-      @bundle = @@bundle_lookup[file]
-      raise "The requested component has not be loaded, or does not exist: #{file}" unless @bundle
       @component_class = File.basename(file, '.jsx').split('_').map(&:capitalize).join
     end
 
     def evaluate(scope, props, &block)
       @output ||= begin
-        component = @@tilt_react_js.render(@component_class, props)
+        component = @@renderer.renderToString(@component_class, props)
         %{<div data-react-class="#{@component_class}">#{component}</div><script data-react-class="#{@component_class}" type="application/json">#{props.to_json}</script>}
       end
     end
 
-    def self.context
-      @@context
+    def self.prepare_context
+      @@context = V8::Context.new
+      @@context.eval('window = {};')
     end
 
-    def self.js_libs=(js_dirs)
-      # Expand the js_libs to be the root and all folders in it, because CommonJS.rb doesn't do this
-      @js_libs = [*js_dirs].map { |dir|
-        [
-          dir,
-          Dir.glob("#{dir}/*").select { |f| File.directory? f }
-        ]
-      }.flatten.compact
-    end
-
-    def self.load_context
-      # Include the tilt-react bootstrap JS
-      all_libs = @js_libs + [File.expand_path('../../ext/', __dir__)]
-
-      @@context = CommonJS::Environment.new(
-        V8::Context.new,
-        path: all_libs
-      ).tap { |env|
-        env.runtime[:process] = { 'env' => ENV }
-        @@tilt_react_js = env.require('tilt-react')
-      }
-    end
-
-    def self.compile_bundles(bundles)
-      bundles.each do |selector, target|
-        files = case selector
-        when Enumerable then selector
-        when String then Dir.glob(selector)
-        else raise "Cannot coerce into list of files: #{selector}"
-        end
-
-        if files.any?
-          FileUtils.mkdir_p(File.dirname(target))
-
-          compile(files).each do |file, es5|
-            @@bundle_lookup[file] = target
-          end
-          
-          # FIXME: Browserify the es5
-          File.open(target, 'w') {}
+    def self.load_directory(glob)
+      Dir.glob(glob).to_a.sort_by { |bundle|
+        case bundle
+        when %r{/tilt_react_client_bundle.js$} then 0
+        when %r{/tilt_react_server_bundle.js$} then 1
+        else 2
         end
+      }.each do |bundle|
+        @@context.load(bundle)
       end
-    end
-
-    def self.compile(files)
-      @@bundle_lookup ||= {}
 
-      [*files].map do |file|
-        file = File.expand_path(file)
-        next if @@bundle_lookup[file]
-
-        export_as = file_to_class_name(file)
-        template = Tilt::BabelTemplate.new(file)
-        es5 = template.render
-        @@tilt_react_js.components[export_as] = context.require_string(export_as, es5)
-        @@bundle_lookup[file] = true
-        [file, es5]
-      end
+      @@renderer = @@context.eval('window.TiltReact')
     end
 
-    private
-
     def self.file_to_class_name(file)
       File.basename(file, '.jsx').split('_').map(&:capitalize).join
     end
+
+    def self.components
+      @@context.eval('window.TiltReact.componentNames()').to_a
+    end
   end
 end
 

data/lib/tilt/react/tasks.rb

@@ -0,0 +1,59 @@
+require 'fileutils'
+
+namespace :react do
+  desc "Compiles components according to the webpack config."
+  task compile: :'setup:webpack' do
+    puts "Running webpack…"
+
+    libs = {
+      tilt_react_client: File.expand_path('../../../ext/tilt-react.js', __dir__),
+      tilt_react_server: File.expand_path('../../../ext/tilt-react-server.js', __dir__),
+    }
+
+    libs.each do |file, source|
+      FileUtils.cp(source, "components/#{file}.js")
+    end
+
+    %x[webpack]
+
+    libs.each do |file, _|
+      FileUtils.rm("components/#{file}.js")
+    end
+  end
+
+  desc "Compiles components according to the webpack config."
+  task watch: :'setup:webpack' do
+    puts "Watching for changes in components…"
+    %x[webpack --watch]
+  end
+
+  namespace :setup do
+    desc "Installs all required npm packages."
+    task npm: :package do
+      puts "Ensuring all NPM packages are installed…"
+      %x[npm install]
+    end
+
+    desc "Copies the default package.json to the current directory."
+    task :package do
+      default_package = File.expand_path('../../../ext/default.package.json', __dir__)
+      local_package   = File.expand_path('./package.json')
+      
+      if !File.exist?(local_package)
+        FileUtils.cp(default_package, local_package)
+        puts "Default package.json copied to local directory"
+      end
+    end
+
+    desc "Copies the default webpack.config.json to the current directory."
+    task :webpack do
+      default_config = File.expand_path('../../../ext/webpack.config.js', __dir__)
+      local_config   = File.expand_path('./webpack.config.js')
+      
+      if !File.exist?(local_config)
+        FileUtils.cp(default_config, local_config)
+        puts "Default webpack.config.js copied to local directory"
+      end
+    end
+  end
+end

data/lib/tilt/react/version.rb

@@ -1,5 +1,5 @@
 module Tilt
   module React
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

data/tilt-react.gemspec

@@ -19,12 +19,12 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_dependency 'babel-transpiler', '~> 0.7'
-  spec.add_dependency 'commonjs', '~> 0.2'
+  spec.add_dependency 'rack-accept', '~> 0.4'
   spec.add_dependency 'therubyracer', '~> 0.12'
 
   spec.add_development_dependency 'bundler', '~> 1.9'
   spec.add_development_dependency 'rake', '~> 10.0'
+  spec.add_development_dependency 'rspec', '~> 3.4'
   spec.add_development_dependency 'nokogiri', '~> 1.6'
   spec.add_development_dependency 'capybara', '~> 2.6'
   spec.add_development_dependency 'rspec-as_fixture', '~> 0.1'

metadata

@@ -1,125 +1,125 @@
 --- !ruby/object:Gem::Specification
 name: tilt-react
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - JP Hastings-Spital
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-04-15 00:00:00.000000000 Z
+date: 2016-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: babel-transpiler
+  name: rack-accept
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0.4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
-        version: '0.7'
-- !ruby/object:Gem::Dependency
-  name: commonjs
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.2'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.2'
+        version: '0.4'
 - !ruby/object:Gem::Dependency
   name: therubyracer
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '0.12'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '0.12'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '1.9'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '1.9'
 - !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: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.4'
 - !ruby/object:Gem::Dependency
   name: nokogiri
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '1.6'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '1.6'
 - !ruby/object:Gem::Dependency
   name: capybara
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '2.6'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '2.6'
 - !ruby/object:Gem::Dependency
   name: rspec-as_fixture
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '0.1'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '0.1'
 description: Render React.js JSX files with the Tilt templating system.
@@ -129,13 +129,13 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".codeclimate.yml"
-- ".eslintignore"
-- ".eslintrc"
-- ".gitignore"
-- ".rspec"
-- ".rubocop.yml"
-- ".travis.yml"
+- .codeclimate.yml
+- .eslintignore
+- .eslintrc
+- .gitignore
+- .rspec
+- .rubocop.yml
+- .travis.yml
 - CODE_OF_CONDUCT.md
 - Gemfile
 - LICENSE.txt
@@ -148,21 +148,26 @@ files:
 - examples/sinatra/Gemfile
 - examples/sinatra/Gemfile.lock
 - examples/sinatra/README.md
+- examples/sinatra/Rakefile
 - examples/sinatra/app.rb
-- examples/sinatra/components/home_page.jsx
+- examples/sinatra/components/HomePage/HomePage.jsx
+- examples/sinatra/components/OtherPage/OtherPage.jsx
+- examples/sinatra/components/home.js
 - examples/sinatra/config.ru
-- examples/sinatra/package.json
+- examples/sinatra/public/index.html
 - examples/sinatra/spec/fixtures/home_page.yml
 - examples/sinatra/spec/home_page_spec.rb
 - examples/sinatra/spec/spec_helper.rb
 - examples/sinatra/views/layout.erb
-- ext/tilt-react-client.js
+- ext/default.package.json
+- ext/tilt-react-server.js
 - ext/tilt-react.js
-- lib/commonjs/require_string.rb
+- ext/webpack.config.js
 - lib/rspec/react.rb
 - lib/rspec/react/component_helpers.rb
 - lib/sinatra/react.rb
 - lib/tilt/react.rb
+- lib/tilt/react/tasks.rb
 - lib/tilt/react/version.rb
 - tilt-react.gemspec
 homepage: https://github.com/jphastings/tilt-react
@@ -175,20 +180,19 @@ 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.4.5.1
+rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
 summary: Use React.js JSX files as view templates in Sinatra and other Tilt powered
   frameworks.
 test_files: []
-has_rdoc: 

data/examples/sinatra/components/home_page.jsx

@@ -1,13 +0,0 @@
-import React, { PropTypes } from 'react';
-
-class HomePage extends React.Component {
-  render() {
-    return (
-      <h1>Hello {this.props.name || 'you'}</h1>
-    );
-  }
-}
-
-HomePage.propTypes = { name: PropTypes.string };
-
-export default HomePage;

data/examples/sinatra/package.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": {
-    "fbjs": "^0.7",
-    "react": "^0.14",
-    "react-dom": "^0.14"
-  }
-}

data/lib/commonjs/require_string.rb

@@ -1,12 +0,0 @@
-module CommonJS
-  class Environment
-    def require_string(module_id, js)
-      raise "#{module_id} has already been loaded" if @modules[module_id]
-      load_js = "( function(module, require, exports) {\n#{js}\n} )"
-      load = @runtime.eval(load_js)
-      @modules[module_id] = mod = Module.new(module_id, self)
-      load.call(mod, mod.require_function, mod.exports)
-      mod.exports
-    end
-  end
-end