js_render 0.1.1

checksums.yaml

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

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -0,0 +1,2 @@
+--format progress
+--color

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.2.3
+before_install: gem install bundler -v 1.12.1

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at jonathan.lehman91@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jonathan Lehman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,145 @@
+# JsRender
+
+**Disclaimer: This is currently a "work in progress". More functionality, improvements, and docs are coming. Use at your own risk**
+
+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).
+
+The library works in two essential parts:
+- Calls a JavaScript function (defined by the user) that returns HTML. This allows us to render our JS component/view when the page initially loads, rather than having the delay of doing it solely on the client side.
+- Optionally calls a JavaScript function on the client (also defined by the user) that does any initialization that needs to happen on the client side. This generally will initialize the existing component HTML that has been rendered with the library of choice to make it interactive and attach behaviors.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'js_render'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install js_render
+
+## Usage
+
+### Rendering a component
+
+You can render a component like:
+
+```erb
+<div>
+  <%= render_component 'TodoList', {items: ['Build a gem', 'Add docs']} %>
+</div>
+```
+
+`render_component` takes 2 arguments, a String `component_name` and `data`, which is either a JSON String or an Object that responds to `to_json`.
+
+#### What happens under the hood
+
+After calling `render_component` here is what happens:
+
+**Initial Server Render**
+
+- find a file named `TodoList.js` in the path `app/assets/javascripts/**/*`
+  - if this file contains a function named `window.renderTodoListServer`, it will call it, passing to it the JSON data as an argument. the result of the function should be an HTML string
+  - the result of the function is wrapped in a span tag with a unique ID
+  - finally the HTML is inserted inline into our template and be rendered with the initial server render
+
+This takes care of the initial server render of our component. You can configure the suffix of the component lookup from `.js`, the lookup paths, and the name of the server render function. Check out the configuration section below.
+
+**Client Side Render**
+
+The other thing that happens when you call `render_component` is that a script tag is rendered inline. The script tag calls a function, `window.renderTodoListClient`, that takes the unique ID of the span the component has been rendered in, and the JSON data as arguments. The client render function can handle any initialization that needs to happen after the server render. JsRender expects this function to already be in scope by the time the script tag is called. Putting this in the user's hands prevents duplication of any library code and allows the user to expose the framework as well as the client render functions in whatever way they choose and that works best in their JS setup/build process. (that said this is a desired place for improvement in the future for JsRender)
+
+You can configure the name of the client render function. Check out the configuration section below.
+
+### With Rails
+
+JsRender exposes its methods as view helper methods via a Railtie.
+
+### Plain old Ruby
+
+You will need to instantiate a `JsRender::Renderer` to call JsRender methods with.
+
+```ruby
+renderer = JsRender::Renderer.new(component_name, data)
+renderer.render_component
+```
+
+### Configuration
+
+Configuration settings can be modified within the `JsRender.configure` block. Or set directly off of `JsRender.config`
+
+```ruby
+JsRender.configure do |config|
+  config.base_path = 'app/assets/javascripts/components'
+  config.component_paths = ['/**/*.js']
+end
+
+JsRender.config.base_path = 'app/assets/javascripts'
+JsRender.config.base_path = ['/components/*.js', '/legacy_components/**/*.js']
+```
+
+#### Options
+
+**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`
+
+**base_path**
+
+This is the base path where your components live.
+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 `['/**/*']`
+
+**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'
+
+**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`)
+
+**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`)
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jdlehman/js_render. 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).
+
+## Motivation and Thanks
+
+This project came out of the desire to support server side rendering of React components. The most popular existing solution, [`react-rails`](https://github.com/reactjs/react-rails) is much more opinionated, but also does a lot implicitly under the hood. If your focus is on React server side rendering, and your experience primarily lies in Ruby on Rails, or you do not mind writing your JavaScript within the boundaries and opinions of react-rails, I highly recommend you take a look at it. Another good React/Rails specific library for server side React rendering to check out is [react_on_rails](https://github.com/shakacode/react_on_rails). Many thanks to the contributors of these projects as they were both influential in creating JsRender.
+
+The goal of this project is to be framework agnostic and support server side rendering for any JavaScript component library, popular or self-rolled. While Rails support is baked in, the ultimate goal of this project is to work anywhere where Ruby is used as the server side language.

data/Rakefile

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

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "js_render"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/examples/vanilla_js/.gitignore

@@ -0,0 +1,17 @@
+# 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

data/examples/vanilla_js/Gemfile

@@ -0,0 +1,49 @@
+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 '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/vanilla_js/Gemfile.lock

@@ -0,0 +1,167 @@
+PATH
+  remote: ../../
+  specs:
+    js_render (0.1.0)
+      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)
+    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
+  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/vanilla_js/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/vanilla_js/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/vanilla_js/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/vanilla_js/app/assets/javascripts/components/Counter/index.js

@@ -0,0 +1,32 @@
+function Counter(data) {
+  this.value = data.value;
+}
+
+Counter.prototype.plus = function() {
+  this.value++;
+};
+
+Counter.prototype.minus = function() {
+  this.value--;
+};
+
+Counter.prototype.renderServer = function() {
+  return '<div class="counter"><span id="value">' + this.value + '</span><button id="minus">-</button><button id="plus">+</button></div>';
+};
+
+Counter.prototype.updateValue = function(id) {
+  $('#' + id + ' #value').text(this.value);
+};
+
+Counter.prototype.setUpHandlers = function (id) {
+  var self = this;
+  $('#' + id + ' #minus').click(function(e) {
+    self.minus();
+    self.updateValue(id);
+  });
+
+  $('#' + id + ' #plus').click(function(e) {
+    self.plus();
+    self.updateValue(id);
+  });
+};

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

@@ -0,0 +1,4 @@
+window.renderCounterClient = function(id, data) {
+  var counter = new Counter(data);
+  counter.setUpHandlers(id);
+};

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

@@ -0,0 +1,4 @@
+window.renderCounterServer = function(data) {
+  var counter = new Counter(data);
+  return counter.renderServer();
+};

data/examples/vanilla_js/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/vanilla_js/app/assets/stylesheets/components/Counter.scss

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

data/examples/vanilla_js/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/vanilla_js/app/helpers/application_helper.rb

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