hyper-router 4.1.1 → 4.2.6.lap22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cdd67209abe4796f00f93341e2cade73a89450b5
-  data.tar.gz: a9a01054f1f528518234836a7b4068e7e815f5d0
+  metadata.gz: fadc957c6b724c58a23a188aa45851dcef486324
+  data.tar.gz: 1f8e828dab34572bcaa53e18d42b67538b63337f
 SHA512:
-  metadata.gz: 6f23a61bc404a5ec208bd6a1dfe8d6e08d39446fac5411cf83eb644a4b594451f6e060b64e73025e173bea63c2ecf4946dc79ef404e7f2ade7b514f64e9df38f
-  data.tar.gz: 74be482b96d8aca1fc0d38f55be6cb90297cd9d00231e8b9a1af7b338dc24818587c96bf09abfce2d9da480e971b28fd827d31bd586701cdae6cff00ac8b1126
+  metadata.gz: db0b782f9ec8817c46f6c96bf09f07a9493e8ce11816395a25cf2924ec1c9b51261a7e78b279f2a1a1edc2c57ed416848cd623f50c50d008aaf25c55a7e56ae7
+  data.tar.gz: 3e795b7a3ff0bb79fd35317f2be4754781b6e8d342f66bf7bc9355544bfb524994b7f0e5240e0a086d4ecae8a6f31f04d4bb62b49100758d080c9e183a948314

data/README.md

@@ -1,458 +1,79 @@
-<p align="center">
-  <a href="http://ruby-hyperloop.io/" alt="Hyperloop" title="Hyperloop">
-    <img src="https://github.com/ruby-hyperloop/ruby-hyperloop.io/blob/source/source/images/HyperRouter.png" width="150px"/>
-  </a>
- </p>
-
-<h1 align="center">
-  HyperRouter
-</h1>
+<div class="githubhyperloopheader">
 
 <p align="center">
-  HyperRouter allows you write and use the React Router in Ruby through Opal.
-</p>
-
-
-## Installation
-
-Add this line to your application's Gemfile:
-```ruby
-gem 'hyper-router'
-```
-Or execute:
-```bash
-gem install hyper-router
-```
-
-Then add this to your components.rb:
-```ruby
-require 'hyper-router'
-```
-
-### Using the included source
-Add this to your component.rb:
-```ruby
-require 'hyper-router/react-router-source'
-require 'hyper-router'
-```
-
-### Using with NPM/Webpack
-react-router has now been split into multiple packages, so make sure they are all installed
-```bash
-npm install react-router react-router-dom history --save
-```
-
-Add these to your webpack js file:
-```javascript
-ReactRouter = require('react-router')
-ReactRouterDOM = require('react-router-dom')
-History = require('history')
-```
-
-## Usage
-
-This is simply a DSL wrapper on [react-router](https://github.com/ReactTraining/react-router)
-
-## Warning!!
-The folks over at react-router have gained a reputation for all their API rewrites, so with V4 we have made some changes to follow.
-This version is **incompatible** with previous versions' DSL.
-
-### DSL
-
-Here is the basic example that is used on the [react-router site](https://reacttraining.com/react-router/)
-
-```javascript
-import React from 'react'
-import {
-  BrowserRouter as Router,
-  Route,
-  Link
-} from 'react-router-dom'
-
-const BasicExample = () => (
-  <Router>
-    <div>
-      <ul>
-        <li><Link to="/">Home</Link></li>
-        <li><Link to="/about">About</Link></li>
-        <li><Link to="/topics">Topics</Link></li>
-      </ul>
-
-      <hr/>
-
-      <Route exact path="/" component={Home}/>
-      <Route path="/about" component={About}/>
-      <Route path="/topics" component={Topics}/>
-    </div>
-  </Router>
-)
-
-const Home = () => (
-  <div>
-    <h2>Home</h2>
-  </div>
-)
-
-const About = () => (
-  <div>
-    <h2>About</h2>
-  </div>
-)
-
-const Topics = ({ match }) => (
-  <div>
-    <h2>Topics</h2>
-    <ul>
-      <li><Link to={`${match.url}/rendering`}>Rendering with React</Link></li>
-      <li><Link to={`${match.url}/components`}>Components</Link></li>
-      <li><Link to={`${match.url}/props-v-state`}>Props v. State</Link></li>
-    </ul>
-
-    <Route path={`${match.url}/:topicId`} component={Topic}/>
-    <Route exact path={match.url} render={() => (
-      <h3>Please select a topic.</h3>
-    )}/>
-  </div>
-)
-
-const Topic = ({ match }) => (
-  <div>
-    <h3>{match.params.topicId}</h3>
-  </div>
-)
-
-export default BasicExample
-```
-
-Here is what it looks like for us:
-```ruby
-class BasicExample < Hyperloop::Router
-  history :browser
-
-  route do
-    DIV do
-      UL do
-        LI { Link('/') { 'Home' } }
-        LI { Link('/about') { 'About' } }
-        LI { Link('/topics') { 'Topics' } }
-      end
-
-      Route('/', exact: true, mounts: Home)
-      Route('/about', mounts: About)
-      Route('/topics', mounts: Topics)
-    end
-  end
-end
-
-class Home < Hyperloop::Router::Component
-  render(:div) do
-    H2 { 'Home' }
-  end
-end
-
-class About < Hyperloop::Router::Component
-  render(:div) do
-    H2 { 'About' }
-  end
-end
-
-class Topics < Hyperloop::Router::Component
-  render(:div) do
-    H2 { 'Topics' }
-    UL() do
-      LI { Link("#{match.url}/rendering") { 'Rendering with React' } }
-      LI { Link("#{match.url}/components") { 'Components' } }
-      LI { Link("#{match.url}/props-v-state") { 'Props v. State' } }
-    end
-    Route("#{match.url}/:topic_id", mounts: Topic)
-    Route(match.url, exact: true) do
-      H3 { 'Please select a topic.' }
-    end
-  end
-end
-
-class Topic < Hyperloop::Router::Component
-  render(:div) do
-    H3 { match.params[:topic_id] }
-  end
-end
-```
-
-Since react-router migrated back to everything being a component,
-this makes the DSL very easy to follow if you have already used react-router v4.
-
-### Router
-
-This is the base Router class, it can either be inherited or included:
-```ruby
-class MyRouter < Hyperloop::Router
-end
-
-class MyRouter < React::Component::Base
-  include Hyperloop::Router::Base
-end
-```
 
-With the base Router class, you must specify the history you want to use.
+<a href="http://ruby-hyperloop.org/" alt="Hyperloop" title="Hyperloop">
+<img width="350px" src="http://ruby-hyperloop.org/images/hyperloop-github-logo.png">
+</a>
 
-This can be done either using a macro:
-```ruby
-class MyRouter < Hyperloop::Router
-  history :browser
-end
-```
-The macro accepts three options: `:browser`, `:hash`, or `:memory`.
-
-Or defining the `history` method:
-```ruby
-class MyRouter < Hyperloop::Router
-  def history
-    self.class.browser_history
-  end
-end
-```
-
-### BrowserRouter, HashRouter, MemoryRouter
-
-Using one of these classes automatically takes care of the history for you,
-so you don't need to specify one.
-They also can be used by inheritance or inclusion:
-
-```ruby
-class MyRouter < Hyperloop::HashRouter
-end
-
-class MyRouter < React::Component::Base
-  include Hyperloop::Router::Hash
-end
-```
-
-### StaticRouter
-
-Static router is a little different, since it doesn't actually have a history.
-These are used under-the-hood for any other Router during prerendering.
-
-```ruby
-class MyRouter < Hyperloop::StaticRouter
-  route do
-    DIV do
-      Route('/:name', mounts: Greet)
-    end
-  end
-end
-```
-
-### Rendering a Router
-
-To render children/routes use the `route` macro, it is the equivalent to `render` of a component.
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
-
-  route do
-    DIV do
-      H1 { 'Hello world!' }
-    end
-  end
-end
-```
-
-
-### Routes
-
-Routes are no longer defined separately, but are just components you call inside the router/components.
-
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
-
-  route do
-    DIV do
-      Route('/', mounts: HelloWorld)
-    end
-  end
-end
-
-class HelloWorld < React::Component::Base
-  render do
-    H1 { 'Hello world!' }
-  end
-end
-```
-
-The `Route` method takes a url path, and these options:
-- `mounts: Component` The component you want to mount when routed to
-- `exact: Boolean` When true, the path must match the location exactly
-- `strict: Boolean` When true, the path will only match if the location and path **both** have/don't have a trailing slash
-It can also take a block instead of the `mounts` option.
-
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
-
-  route do
-    DIV do
-      Route('/', exact: true) do
-        H1 { 'Hello world!' }
-      end
-    end
-  end
-end
-```
-The block will give you the match, location, and history data:
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
-
-  route do
-    DIV do
-      Route('/:name') do |match, location, history|
-        H1 { "Hello #{match.params[:foo]} from #{location.pathname}, click me to go back!" }
-          .on(:click) { history.go_back }
-      end
-    end
-  end
-end
-```
+</p>
 
-It is recommended to inherit from `Hyperloop::Router::Component` for components mounted by routes.
-This automatically sets the `match`, `location`, and `history` params,
-and also gives you instance methods with those names.
-You can use either `params.match` or just `match`.
-and gives you access to the Route method and more.
-This allows you to create inner routes as you need them.
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
+<h2 align="center">The Complete Isomorphic Ruby Framework</h2>
 
-  route do
-    DIV do
-      Route('/:name', mounts: Greet)
-    end
-  end
-end
+<br>
 
-class Greet < Hyperloop::Router::Component
-  render(DIV) do
-    H1 { "Hello #{match.params[:foo]}!" }
-    Route(match.url, exact: true) do
-      H2 { 'What would you like to do?' }
-    end
-    Route("#{match.url}/:activity", mounts: Activity)
-  end
-end
+<a href="http://ruby-hyperloop.org/" alt="Hyperloop" title="Hyperloop">
+<img src="http://ruby-hyperloop.org/images/githubhyperloopbadge.png">
+</a>
 
-class Activity < Hyperloop::Router::Component
-  render(DIV) do
-    H2 { params.match.params[:activity] }
-  end
-end
-```
+<a href="https://gitter.im/ruby-hyperloop/chat" alt="Gitter chat" title="Gitter chat">
+<img src="http://ruby-hyperloop.org/images/githubgitterbadge.png">
+</a>
 
-Routes will **always** render alongside sibling routes that match as well.
+[![Codeship Status for ruby-hyperloop/hyper-store](https://app.codeship.com/projects/4454c560-d4ea-0134-7c96-362b4886dd22/status?branch=master)](https://app.codeship.com/projects/202301)
+[![Gem Version](https://badge.fury.io/rb/hyper-router.svg)](https://badge.fury.io/rb/hyper-router)
 
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
+<p align="center">
+<img src="http://ruby-hyperloop.org/images/HyperRouter.png" width="100" alt="Hyper-router">
+</p>
 
-  route do
-    DIV do
-      Route('/goodbye', mounts: Goodbye)
-      Route('/:name', mounts: Greet)
-    end
-  end
-end
-```
+</div>
 
-### Switch
+## Hyper-Router GEM is part of Hyperloop GEMS family
 
-Going to `/goodbye` would match `/:name` as well and render `Greet` with the `name` param with the value 'goodbye'.
-To avoid this behavior and only render one matching route at a time, use a `Switch` component.
+Build interactive Web applications quickly. Hyperloop encourages rapid development with clean, pragmatic design. With developer productivity as our highest goal, Hyperloop takes care of much of the hassle of Web development, so you can focus on innovation and delivering end-user value.
 
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
+One language. One model. One set of tests. The same business logic and domain models running on the clients and the server. Hyperloop is fully integrated with Rails and also gives you unfettered access to the complete universe of JavaScript libraries (including React) from within your Ruby code. Hyperloop lets you build beautiful interactive user interfaces in Ruby.
 
-  route do
-    DIV do
-      Switch do
-        Route('/goodbye', mounts: Goodbye)
-        Route('/:name', mounts: Greet)
-      end
-    end
-  end
-end
-```
+Everything has a place in our architecture. Components deliver interactive user experiences, Operations encapsulate business logic, Models magically synchronize data between clients and servers, Policies govern authorization and Stores hold local state. 
 
-Now, going to `/goodbye` would match the `Goodbye` route first and only render that component.
+**Hyper-router** allows you write and use the React Router in Ruby through Opal.
 
-### Links
 
-Links are available to Routers, classes that inherit from `HyperLoop::Router::Component`,
-or by including `Hyperloop::Router::Mixin`.
+## Getting Started
 
-The `Link` method takes a url path, and these options:
-- `search: String` adds the specified string to the search query
-- `hash: String` adds the specified string to the hash location
-It can also take a block of children to render inside it.
+1. Update your Gemfile:
+        
 ```ruby
-class MyRouter < Hyperloop::Router
-  ...
+#Gemfile
 
-  route do
-    DIV do
-      Link('/Gregor Clegane')
-
-      Route('/', exact: true) { H1() }
-      Route('/:name') do |match|
-        H1 { "Will #{match.params[:name]} eat all the chickens?" }
-      end
-    end
-  end
-end
+gem 'hyperloop'
 ```
 
-### NavLinks
+2. At the command prompt, update your bundle :
 
-NavLinks are the same as Links, but will add styling attributes when it matches the current url
-- `active_class: String` adds the class to the link when the url matches
-- `active_style: String` adds the style to the link when the url matches
-- `active: Proc` A proc that will add extra logic to determine if the link is active
-```ruby
-class MyRouter < Hyperloop::Router
-  ...
+        $ bundle update
 
-  route do
-    DIV do
-      NavLink('/Gregor Clegane', active_class: 'active-link')
-      NavLink('/Rodrik Cassel', active_style: { color: 'grey' })
-      NavLink('/Oberyn Martell',
-              active: ->(match, location) {
-                match && match.params[:name] && match.params[:name] =~ /Martell/
-              })
+3. Run the hyperloop install generator:
 
-      Route('/', exact: true) { H1() }
-      Route('/:name') do |match|
-        H1 { "Will #{match.params[:name]} eat all the chickens?" }
-      end
-    end
-  end
-end
-```
+        $ rails g hyperloop:install
 
-### Pre-rendering
+4. Follow the guidelines to start developing your application. You may find
+   the following resources handy:
+    * [Getting Started with Hyperloop](http://ruby-hyperloop.org/start/components/)
+    * [Hyperloop Guides](http://ruby-hyperloop.org/docs/architecture)
+    * [Hyperloop Tutorial](http://ruby-hyperloop.org/tutorials)
 
-Pre-rendering is automatically taken care for you unde the hood, no more need to pass in the url.
+## Community
 
+#### Getting Help
+Please **do not post** usage questions to GitHub Issues. For these types of questions use our [Gitter chatroom](https://gitter.im/ruby-hyperloop/chat) or [StackOverflow](http://stackoverflow.com/questions/tagged/hyperloop).
 
-## Development
+#### Submitting Bugs and Enhancements
+[GitHub Issues](https://github.com/ruby-hyperloop/hyperloop/issues) is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following:
+* Check out our [contributing guide](https://github.com/ruby-hyperloop/hyperloop/blob/master/CONTRIBUTING.md) for info on our release cycle.
 
-`bundle exec rake` runs test suite
+## License
 
-## Contributing
+Hyperloop is released under the [MIT License](http://www.opensource.org/licenses/MIT).
 
-1. Fork it ( https://github.com/ruby-hyperloop/reactrb-router/tree/hyper-router/fork )
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create a new Pull Request