Using the Generators
As well as the installer Hyperstack includes two generators to create basic component skeletons.
bundle exec rails g hyper:component ComponentName # add a new component
bundle exec rails g hyper:router RouterName # add a new router component
both support the following flags:
--no-helpdon't add extra comments and method examples
--add-route=...add a route to this component to the Rails routes file
--base-class=...change the base class name from the default
To add a new component skeleton use the
bundle exec rails g hyper:component ComponentName
The above will create a new class definition for
MyComponentin a file named
my_component.rband place it in the
app/hyperstack/components/directory. The component may be name spaced and will be placed in the appropriate subdirectory. I.e.
By default the skeleton will be verbose and contain examples of the most often used class methods which you can keep or delete as needed. You can generate a minimal component with the
Typically your top level component will be a Router which will take care of dispatching to specific components as the URL changes. This provides the essence of a Single Page App where as the user moves between parts of the application the URL is updated, the back and forward buttons work, but the page is not reloaded from the server.
A component becomes a router by including the
Hyperstack::Routermodule which provides a number of methods that will be used in the router component.
To generate a new router skeleton use the
bundle exec rails g hyper:router App
Note that in any Single Page App there will be two routers in play. On the server the router is responsible dispatching each incoming HTTP request to a controller. The controller will deliver back (usually using a view) the contents of the request.In addition on a Single Page App you will have a router running on the client, which will dispatch to different components depending on the current value of the URL. The server is only contacted if the current URL leaves the set of URLs that client router knows how to deal with.
When you generate a new component you can use the
--add-routeoption to add the route for you. For example:
bundle exec rails g hyper:router MainApp \
get '/(*others)', to: 'hyperstack#main_app'
to the Rails
routes.rbfile, which will direct all URLS to the
By default components will inherit from the
You can globally override this by changing the value
For example some teams prefer
ApplicationComponentas their base class name.
You can also override the base class name when generating a component using the
This is useful when you have a common library subclass that other classes will inherit from. For example:
bundle exec rails g hyper:component UserBio --base-class=TextArea
class UserBio < TextArea