js_render 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dbce6c1a3bd0afd8b8571bb064a1eb9c8f7e7d20
-  data.tar.gz: bf5662b4c7d62fdb58f19b7c9f0e9a8d9e2705f6
+  metadata.gz: 5b8a50324a1e29411b656887a42e712abc725525
+  data.tar.gz: bbc79e9601ad177347554ffae6bad8f3b8bbb56a
 SHA512:
-  metadata.gz: 792e627a3da7768d058f15b41895e5e072334ba7ff30828d0eff753fa428d98df41a11b3ca70e3e09918bad64d8013c30860a227077ecde45b9f1d56f84e90ad
-  data.tar.gz: 3f77b2f120ce8869cc7e7603097c734346cfab1476ed212a3695dc83ef57a64130ab3f7d8c32078985b4a751ad9549c70830be8611bb3ff7ba09354876bc033b
+  metadata.gz: 5ae2860584985861a352d3de82327b7da28006d2be451bb7350fe5576ba8c7f244b131652ffa5ec5d375d3ce8ea3b636bd5b2a2133e7725d7ea477b41b4c0d27
+  data.tar.gz: 0f161814ea23b7f5d82d93eca445b1bbec78dcf9a2c13d94d6f2cd940c51a58ed38d7d1685abf31a7a14d6d60c4ed680e1ab12c5fd6e68b678b3ab8099e78879

data/README.md

@@ -1,6 +1,9 @@
+[![Gem Version](https://badge.fury.io/rb/js_render.png)](http://badge.fury.io/rb/js_render)
+[![Build Status](https://secure.travis-ci.org/jdlehman/js_render.svg?branch=master)](http://travis-ci.org/jdlehman/js_render)
+
 # JsRender
 
-**Disclaimer: This is currently a "work in progress". More functionality, improvements, and docs are coming. Use at your own risk**
+**Disclaimer: This is currently a "work in progress". More functionality, improvements, and docs are coming. That said everything does work, but the API might change in the near future. Check out the docs below as well as the [`examples`](./examples).**
 
 JsRender is an unopinionated Ruby library for rendering JavaScript "components" on the server side. This approach works with [React](https://facebook.github.io/react/), [Angular](ihttps://angular.io/), [Ember](http://emberjs.com/), or any other library of your choice. The only requirement is that there is a JavaScript function that returns HTML for the component or view such that it can be properly rendered on the server side (e.g. [`ReactDOMServer.renderToString`](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring) in React).
 
@@ -89,40 +92,46 @@ JsRender.config.base_path = ['/components/*.js', '/legacy_components/**/*.js']
 **use_asset_pipeline**
 
 Indicate if you want Rails asset pipeline to handle your component files. This will take care of any pre-processing for you (like if your asset pipeline is compiling CoffeeScript or ES2015/ES6 code for you). If you are not using JsRender with Rails, this setting will not do anything.
-Defalts to `false`
+
+> Defaults to `false`
 
 **base_path**
 
 This is the base path where your components live.
-Defaults to `app/assets/javascripts`
+
+> Defaults to `app/assets/javascripts`
 
 **component_paths**
 
 These are the paths off of your base path that are searched to find your component (or more accurately your components' server render functions). Wildcards are supported.
 
 If you are using Rails AND the asset pipeline, the lookup path can point to your pre-built file and the asset pipeline will give JsRender the built file. If you are using another build tool, make sure you are pointing to the built assets. JsRender will NOT take care of any compile step for you, it expects these files to already be compiled to ES5 compatible with [ExecJS](https://github.com/rails/execjs).
-Defaults to `['/**/*']`
+
+> Defaults to `['/**/*']`
 
 **component_suffix**
 
 This is the suffix that is added to your component name. It functions as a regex string when looking up your render `"#{component_name}#{component_suffix}"`.
 
 If your component structure is a folder named after your component with an `index.js` file, you can do something like `/renderer.js` to find a specific file within your folder. Or if your component and server render function are in different files you could do something like `/(index|serverRenderer).js`. The regex aspect is also useful if you need a wildcard to match a hash in the file name (generated by your build tool potentially).
-Defaults to '.js'
+
+> Defaults to '.js'
 
 **server_render_function**
 
 This is the name of the function that is called to render your component on the server. It receives the JSON data as an argument and returns a string of HTML that is rendered inline.
 
 If you want the component name to be included in the name dynamically, you can use a `*` to denote where the component name is inserted into the function.
-Defaults to `window.render*Server` (eg for `MyComponent`, `window.renderMyComponentServer`)
+
+> Defaults to `window.render*Server` (eg for `MyComponent`, `window.renderMyComponentServer`)
 
 **client_render_function**
 
 This is the name of the function that is called to render your component on the client (which may just be initialization since it was already rendered by the server). It receives the unique ID of the span that the component was rendered in initially as well as the JSON data as arguments.
 
 If you want the component name to be included in the name dynamically, you can use a `*` to denote where the component name is inserted into the function.
-Defaults to `window.render*Client` (eg for `MyComponent`, `window.renderMyComponentClient`)
+
+> Defaults to `window.render*Client` (eg for `MyComponent`, `window.renderMyComponentClient`)
 
 ## Development
 

data/examples/react/.gitignore

@@ -0,0 +1,19 @@
+# See https://help.github.com/articles/ignoring-files for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+#   git config --global core.excludesfile '~/.gitignore_global'
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-journal
+
+# Ignore all logfiles and tempfiles.
+/log/*
+!/log/.keep
+/tmp
+
+/node_modules

data/examples/react/Gemfile

@@ -0,0 +1,50 @@
+source 'https://rubygems.org'
+
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem 'rails', '4.2.6'
+# Use sqlite3 as the database for Active Record
+gem 'sqlite3'
+# Use SCSS for stylesheets
+gem 'sass-rails', '~> 5.0'
+# Use Uglifier as compressor for JavaScript assets
+gem 'uglifier', '>= 1.3.0'
+# Use CoffeeScript for .coffee assets and views
+gem 'coffee-rails', '~> 4.1.0'
+# See https://github.com/rails/execjs#readme for more supported runtimes
+# gem 'therubyracer', platforms: :ruby
+
+# Use jquery as the JavaScript library
+gem 'jquery-rails'
+# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
+gem 'turbolinks'
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'jbuilder', '~> 2.0'
+# bundle exec rake doc:rails generates the API under doc/api.
+gem 'sdoc', '~> 0.4.0', group: :doc
+
+gem 'browserify-rails'
+gem 'js_render', path: '../../'
+
+# Use ActiveModel has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+
+# Use Unicorn as the app server
+# gem 'unicorn'
+
+# Use Capistrano for deployment
+# gem 'capistrano-rails', group: :development
+
+group :development, :test do
+  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem 'byebug'
+end
+
+group :development do
+  # Access an IRB console on exception pages or by using <%= console %> in views
+  gem 'web-console', '~> 2.0'
+
+  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+  gem 'spring'
+end
+

data/examples/react/Gemfile.lock

@@ -0,0 +1,171 @@
+PATH
+  remote: ../../
+  specs:
+    js_render (0.1.1)
+      execjs
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionmailer (4.2.6)
+      actionpack (= 4.2.6)
+      actionview (= 4.2.6)
+      activejob (= 4.2.6)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+    actionpack (4.2.6)
+      actionview (= 4.2.6)
+      activesupport (= 4.2.6)
+      rack (~> 1.6)
+      rack-test (~> 0.6.2)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (4.2.6)
+      activesupport (= 4.2.6)
+      builder (~> 3.1)
+      erubis (~> 2.7.0)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    activejob (4.2.6)
+      activesupport (= 4.2.6)
+      globalid (>= 0.3.0)
+    activemodel (4.2.6)
+      activesupport (= 4.2.6)
+      builder (~> 3.1)
+    activerecord (4.2.6)
+      activemodel (= 4.2.6)
+      activesupport (= 4.2.6)
+      arel (~> 6.0)
+    activesupport (4.2.6)
+      i18n (~> 0.7)
+      json (~> 1.7, >= 1.7.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    arel (6.0.3)
+    binding_of_caller (0.7.2)
+      debug_inspector (>= 0.0.1)
+    browserify-rails (3.0.1)
+      railties (>= 4.0.0, < 5.0)
+      sprockets (>= 3.5.2)
+    builder (3.2.2)
+    byebug (8.2.5)
+    coffee-rails (4.1.1)
+      coffee-script (>= 2.2.0)
+      railties (>= 4.0.0, < 5.1.x)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.10.0)
+    concurrent-ruby (1.0.2)
+    debug_inspector (0.0.2)
+    erubis (2.7.0)
+    execjs (2.6.0)
+    globalid (0.3.6)
+      activesupport (>= 4.1.0)
+    i18n (0.7.0)
+    jbuilder (2.4.1)
+      activesupport (>= 3.0.0, < 5.1)
+      multi_json (~> 1.2)
+    jquery-rails (4.1.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
+    json (1.8.3)
+    loofah (2.0.3)
+      nokogiri (>= 1.5.9)
+    mail (2.6.4)
+      mime-types (>= 1.16, < 4)
+    mime-types (3.0)
+      mime-types-data (~> 3.2015)
+    mime-types-data (3.2016.0221)
+    mini_portile2 (2.0.0)
+    minitest (5.8.4)
+    multi_json (1.12.0)
+    nokogiri (1.6.7.2)
+      mini_portile2 (~> 2.0.0.rc2)
+    rack (1.6.4)
+    rack-test (0.6.3)
+      rack (>= 1.0)
+    rails (4.2.6)
+      actionmailer (= 4.2.6)
+      actionpack (= 4.2.6)
+      actionview (= 4.2.6)
+      activejob (= 4.2.6)
+      activemodel (= 4.2.6)
+      activerecord (= 4.2.6)
+      activesupport (= 4.2.6)
+      bundler (>= 1.3.0, < 2.0)
+      railties (= 4.2.6)
+      sprockets-rails
+    rails-deprecated_sanitizer (1.0.3)
+      activesupport (>= 4.2.0.alpha)
+    rails-dom-testing (1.0.7)
+      activesupport (>= 4.2.0.beta, < 5.0)
+      nokogiri (~> 1.6.0)
+      rails-deprecated_sanitizer (>= 1.0.1)
+    rails-html-sanitizer (1.0.3)
+      loofah (~> 2.0)
+    railties (4.2.6)
+      actionpack (= 4.2.6)
+      activesupport (= 4.2.6)
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (11.1.2)
+    rdoc (4.2.2)
+      json (~> 1.4)
+    sass (3.4.22)
+    sass-rails (5.0.4)
+      railties (>= 4.0.0, < 5.0)
+      sass (~> 3.1)
+      sprockets (>= 2.8, < 4.0)
+      sprockets-rails (>= 2.0, < 4.0)
+      tilt (>= 1.1, < 3)
+    sdoc (0.4.1)
+      json (~> 1.7, >= 1.7.7)
+      rdoc (~> 4.0)
+    spring (1.7.1)
+    sprockets (3.6.0)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.0.4)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.3.11)
+    thor (0.19.1)
+    thread_safe (0.3.5)
+    tilt (2.0.2)
+    turbolinks (2.5.3)
+      coffee-rails
+    tzinfo (1.2.2)
+      thread_safe (~> 0.1)
+    uglifier (3.0.0)
+      execjs (>= 0.3.0, < 3)
+    web-console (2.3.0)
+      activemodel (>= 4.0)
+      binding_of_caller (>= 0.7.2)
+      railties (>= 4.0)
+      sprockets-rails (>= 2.0, < 4.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  browserify-rails
+  byebug
+  coffee-rails (~> 4.1.0)
+  jbuilder (~> 2.0)
+  jquery-rails
+  js_render!
+  rails (= 4.2.6)
+  sass-rails (~> 5.0)
+  sdoc (~> 0.4.0)
+  spring
+  sqlite3
+  turbolinks
+  uglifier (>= 1.3.0)
+  web-console (~> 2.0)
+
+BUNDLED WITH
+   1.12.1

data/examples/react/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/examples/react/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks

data/examples/react/app/assets/javascripts/application.js

@@ -0,0 +1,16 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require_tree .

data/examples/react/app/assets/javascripts/components/Counter/index.js

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+
+export default class Counter extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: this.props.startingValue || 0
+    };
+  }
+
+  handleMinusClick() {
+    const value = this.state.value;
+    this.setState({value: value - 1});
+  }
+
+  handlePlusClick() {
+    const value = this.state.value;
+    this.setState({value: value + 1});
+  }
+
+  render() {
+    return (
+      <div className="counter">
+        <span style={{marginRight: '1rem'}}>{this.state.value}</span>
+        <button onClick={this.handleMinusClick.bind(this)}>-</button>
+        <button onClick={this.handlePlusClick.bind(this)}>+</button>
+      </div>
+    );
+  }
+}

data/examples/react/app/assets/javascripts/components/Counter/renderClient.js

@@ -0,0 +1,8 @@
+import {render} from 'react-dom';
+import React from 'react';
+import Counter from './index';
+
+window.renderCounterClient = function(id, props) {
+  const node = document.getElementById(id);
+  render(<Counter {...props} />, node);
+};

data/examples/react/app/assets/javascripts/components/Counter/renderServer.js

@@ -0,0 +1,7 @@
+import {renderToString} from 'react-dom/server';
+import React from 'react';
+import Counter from './index';
+
+window.renderCounterServer = function(props) {
+  return renderToString(<Counter {...props} />);
+};

data/examples/react/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/examples/react/app/assets/stylesheets/components/Counter.scss

@@ -0,0 +1,6 @@
+.counter {
+  padding: 1rem;
+  margin: 1rem;
+  border: 1px solid black;
+  width: 100px;
+}

data/examples/react/app/controllers/application_controller.rb

@@ -0,0 +1,8 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+
+  def index
+  end
+end

data/examples/react/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/examples/react/app/views/application/index.html.erb

@@ -0,0 +1,7 @@
+<h1>React Example</h1>
+
+<h2>Counter Components</h2>
+<%= render_component 'Counter' %>
+<%= render_component 'Counter', {startingValue: 10} %>
+
+<%= javascript_include_tag 'components/Counter/renderClient' %>

data/examples/react/app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>React</title>
+  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/examples/react/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+load Gem.bin_path('bundler', 'bundle')

data/examples/react/bin/rails

@@ -0,0 +1,9 @@
+#!/usr/bin/env ruby
+begin
+  load File.expand_path('../spring', __FILE__)
+rescue LoadError => e
+  raise unless e.message.include?('spring')
+end
+APP_PATH = File.expand_path('../../config/application', __FILE__)
+require_relative '../config/boot'
+require 'rails/commands'

data/examples/react/bin/rake

@@ -0,0 +1,9 @@
+#!/usr/bin/env ruby
+begin
+  load File.expand_path('../spring', __FILE__)
+rescue LoadError => e
+  raise unless e.message.include?('spring')
+end
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run

data/examples/react/bin/setup

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+require 'pathname'
+
+# path to your application root.
+APP_ROOT = Pathname.new File.expand_path('../../',  __FILE__)
+
+Dir.chdir APP_ROOT do
+  # This script is a starting point to setup your application.
+  # Add necessary setup steps to this file:
+
+  puts "== Installing dependencies =="
+  system "gem install bundler --conservative"
+  system "bundle check || bundle install"
+
+  # puts "\n== Copying sample files =="
+  # unless File.exist?("config/database.yml")
+  #   system "cp config/database.yml.sample config/database.yml"
+  # end
+
+  puts "\n== Preparing database =="
+  system "bin/rake db:setup"
+
+  puts "\n== Removing old logs and tempfiles =="
+  system "rm -f log/*"
+  system "rm -rf tmp/cache"
+
+  puts "\n== Restarting application server =="
+  system "touch tmp/restart.txt"
+end

data/examples/react/bin/spring

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+# This file loads spring without using Bundler, in order to be fast.
+# It gets overwritten when you run the `spring binstub` command.
+
+unless defined?(Spring)
+  require 'rubygems'
+  require 'bundler'
+
+  if (match = Bundler.default_lockfile.read.match(/^GEM$.*?^    (?:  )*spring \((.*?)\)$.*?^$/m))
+    Gem.paths = { 'GEM_PATH' => [Bundler.bundle_path.to_s, *Gem.path].uniq.join(Gem.path_separator) }
+    gem 'spring', match[1]
+    require 'spring/binstub'
+  end
+end

data/examples/react/config/application.rb

@@ -0,0 +1,31 @@
+require File.expand_path('../boot', __FILE__)
+
+require 'rails/all'
+
+# Require the gems listed in Gemfile, including any gems
+# you've limited to :test, :development, or :production.
+Bundler.require(*Rails.groups)
+
+module React
+  class Application < Rails::Application
+    # Settings in config/environments/* take precedence over those specified here.
+    # Application configuration should go into files in config/initializers
+    # -- all .rb files in that directory are automatically loaded.
+
+    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
+    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
+    # config.time_zone = 'Central Time (US & Canada)'
+
+    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
+    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
+    # config.i18n.default_locale = :de
+
+    # Do not swallow errors in after_commit/after_rollback callbacks.
+    config.active_record.raise_in_transactional_callbacks = true
+
+    config.assets.precompile += %w( components/* )
+
+    config.browserify_rails.commandline_options = '-t [ babelify --presets [ es2015 react ] ]'
+    config.browserify_rails.source_map_environments << 'development'
+  end
+end

data/examples/react/config/boot.rb

@@ -0,0 +1,3 @@
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+
+require 'bundler/setup' # Set up gems listed in the Gemfile.

data/examples/react/config/database.yml

@@ -0,0 +1,25 @@
+# SQLite version 3.x
+#   gem install sqlite3
+#
+#   Ensure the SQLite 3 gem is defined in your Gemfile
+#   gem 'sqlite3'
+#
+default: &default
+  adapter: sqlite3
+  pool: 5
+  timeout: 5000
+
+development:
+  <<: *default
+  database: db/development.sqlite3
+
+# Warning: The database defined as "test" will be erased and
+# re-generated from your development database when you run "rake".
+# Do not set this db to the same as development or production.
+test:
+  <<: *default
+  database: db/test.sqlite3
+
+production:
+  <<: *default
+  database: db/production.sqlite3

data/examples/react/config/environment.rb

@@ -0,0 +1,5 @@
+# Load the Rails application.
+require File.expand_path('../application', __FILE__)
+
+# Initialize the Rails application.
+Rails.application.initialize!