HyperModel

Hyperstack
Website Github Join our Slack Chat Ask a Stack Overflow Question
Search…
Welcome
Rails Installation and Configuration
Development Tools, Workflow and Procedures
Tutorial
Community
HyperModel
​
 HyperModel extends Rails ActiveRecord models so that you have direct access to them on the client, using the same ActiveRecord classes and methods as you would on the server. Nothing new to learn, or configure, just plug in and go.
This Page Under Construction
In Hyperstack, your ActiveRecord Models are available in your Isomorphic code.
Components, Operations, and Stores have CRUD access to your server side ActiveRecord Models, using the standard ActiveRecord API.
In addition, Hyperstack implements push notifications (via a number of possible technologies) so changes to records on the server are dynamically pushed to all authorized clients.
In other words, one browser creates, updates, or destroys a Model, and the changes are persisted in ActiveRecord models and then broadcast to all other authorized clients.
You access your Model data in your Components, Operations, and Stores just like you would on the server or in an ERB or HAML view file.
If an optional push transport is connected Hyperstack broadcasts any changes made to your ActiveRecord models as they are persisted on the server or updated by one of the authorized clients.
Some Models (or even parts of Models) can be designated as server-only which means they are not available to the client code.
For example, consider a simple model called Dictionary which might be part of Wiktionary type app.
1
class Dictionary < ActiveRecord::Base
2
​
3
  # attributes
4
  #   word: string   
5
  #   definition: text
6
  #   pronunciation: string
7
​
8
  scope :defined, -> { 'definition IS NOT NULL AND pronunciation IS NOT NULL' }
9
end
Copied!
Here is a very simple Hyperstack Component that shows a random word from the dictionary:
1
class WordOfTheDay < Hyperstack::Component
2
​
3
  def pick_entry!  
4
    # pick a random word and assign the selected record to entry
5
    mutate @entry = Dictionary.defined[rand(Dictionary.defined.count)]
6
    # Notice that we use standard ActiveRecord constructs to select our
7
    # random entry value
8
  end
9
​
10
  # pick an initial entry before we mount our component...
11
  before_mount :pick_entry
12
​
13
  # Again in our render block we use the standard ActiveRecord API, such
14
  # as the 'defined' scope, and the 'word', 'pronunciation', and
15
  # 'definition' attribute getters.  
16
  render(DIV) do
17
    DIV { "total definitions: #{Dictionary.defined.count}" }
18
    DIV do
19
      DIV { @entry.word }
20
      DIV { @entry.pronunciation }
21
      DIV { @entry.definition }
22
      BUTTON { 'pick another' }.on(:click) { pick_entry! }
23
    end
24
  end
Copied!
This is the entire code. There are no application APIs needed. The synchronization between server and client is completely taken care of by HyperModel. If you have an existing code base little to updates to your existing Models is needed, and you will use the same ActiveRecord API you have been using.
Isomorphic Models
Depending on the architecture of your application, you may decide that some of your models should be Isomorphic and some should remain server-only. The consideration will be that your Isomorphic models will be compiled by Opal to JavaScript and accessible on he client (without the need for a boilerplate API) - Hyperstack takes care of the communication between your server-side models and their client-side compiled versions and you can use Policy to govern access to the models.
In order for Hyperstack to see your Models (and make them Isomorphic) you need to move them to the hyperstack/models folder. Only models in this folder will be seen by Hyperstack and compiled to Javascript. Once a Model is on this folder it ill be accessable to both your client and server code.
Location of Models
Scope
app\models
Server-side code only
app\hyperstack\models
Isomorphic code (client and server)
ActiveRecord API
Hyperstack uses a subset of the standard ActiveRecord API to give your Isomorphic Components, Operations and Stores access to your server side Models. As much as possible Hyperstack follows the syntax and semantics of ActiveRecord.
Interfacing to React
Hyperstack integrates with React (through Components) to deliver your Model data to the client without you having to create extra APIs or specialized controllers. The key idea of React is that when state (or params) change, the portions of the display effected by this data will be updated.
On the client each database record being used by the client is represented as an observable store (see the chapter on HyperState for details) which will mutate as server side data is loaded or changes. When these states change the associated parts of the display will be updated.
A brief overview of how this works will help you understand the how HyperStack gets the job done.
Rendering Cycle
On the UI you will be reading models in order to display data.
If during the rendering of the display the Model data is not yet loaded, placeholder values (the default values from the database schema) will be returned by Hyperstack.
Hyperstack then keeps track of where these placeholders (or DummyValues) are displayed, and when they do get loaded, those parts of the display will re-render.
If later the data changes (either due to local user actions, or receiving push updates) then again any parts of the display that were dependent on the current values will be re-rendered.
You normally do not have to be aware of this. Just access your Models using the normal scopes and finders, then compute values and display attributes as you would on the server. Initially the display will show the placeholder values and then will be replaced with the real values.
Prerendering
During server-side pre-rendering, Hyperstack has direct access to the server so on initial page load all the values will be loaded and present.
Lazy Loading
Hyperstack lazy loads values, and does not load any thing until an explicit displayable value is requested. For example Todo.all will have no action, but Todo.all.pluck[:title] will return an array of titles.
At the end of the rendering cycle the set of all values requested will be merged into a tree structure and sent to the server, returning the minimum amount of data needed.
Load Cycle Methods
There are a number of methods that allow you to interact with this load cycle when needed. These are documented below.
Class Methods
New and Create
new: Takes a hash of attributes and initializes a new unsaved record. The values of any attributes not specified in the hash will be taken from the Models default values specified in the data base schema.
If new is passed a native javascript object it will be treated as a hash and converted accordingly.
create: Short hand for new(...).save. See the save instance method for details on how saving is done.
Scoping and Finding
scope and default_scope: Hyperstack adds four new options to these methods: joins, client, select and server. The joins option provides information on how the scope will be joined with other models. The client and select options allow scoping to be done on the client side to offload this from the server, and the server option is there just for symmetry with the other options.
1
# the active scope proc is executed on the server
2
scope :active, -> () { where(completed: true) }
3
​
4
# if the scope does a join (or include) this must be indicated
5
# using the joins: option.
6
scope :with_recent_comments,
7
      -> { joins(:comments).where('comment.created_at >= ?', Time.now-1.week) },
8
      joins: ['comments'] # or joins: 'comments'
9
​
10
# the server side proc can be indicated by the server: option
11
# an optional client side proc can be provided to compute the scope
12
# locally at the client
13
scope :completed,
14
      server: -> { where(complete: true) }
15
      client: -> { complete } # return true if the record should be included
Copied!
unscoped and all: These builtin scopes work just like standard ActiveRecord.
BTW: to save typing you can skip the all: Models will respond like enumerators.
1
Word.all.each { |word| LI { word.text }}
Copied!
where: The where method can be used to filter records:
1
Word.where("LENGTH(text) = ?", n)
Copied!
The where method is implemented internally as a scope on the client that will execute the where method on the server. If the parameters to the where method the scope will be updated on the client, but using SQL in the where as in the above example will get executed on the server.
find: takes an id and delivers the corresponding record.
find_by: takes a single item hash indicating an attribute value pair to find.
find_by_...: i.e. find_by_first_name these methods will find the first record with a matching attribute.
1
Word.find_by_text('hello') # short for Word.find_by(text: 'hello')
Copied!
limit and offset: These builtin scopes behave as they do on the server:
1
Word.offset(500).limit(20) # get words 500-519
Copied!
Applying Class Methods to Collections
Like Rails if you define a class method on a model, you can apply it to a collection of those records, allowing you to chain methods with scopes (and relationships)
1
class Word < ApplicationRecord
2
  def self.page(pg)
3
    offset(pg-1 * 20).limit(20)
4
  end
5
end
6
...
7
  Word.some_scope.page(3)
Copied!
Relationships and Aggregations
belongs_to, has_many, has_one: These all work as on the server. However it is important that you fully specify both sides of the relationship.
1
class Todo < ActiveRecord::Base
2
  belongs_to :assigned_to, class_name: 'User'
3
end
4
​
5
class User < ActiveRecord::Base
6
  has_many :todos, foreign_key: 'assigned_to_id'
7
end
Copied!
Note that on the client the linkages between relationships are live and direct. In the above example this works:
1
Todo.create(assigned_to: some_user)
Copied!
but this may not:
1
Todo.create(assigned_to_id: some_user.id)
Copied!
composed_of: You can create aggregate models like ActiveRecord.
Similar to the linkages in relationships, aggregate records are represented on the client as actual independent objects.
Defining server methods
Normally an application defined instance method will run on the client and the server:
1
class User < ActiveRecord::Base
2
  def full_name
3
    "#{first_name} #{last_name}"
4
  end
5
end
Copied!
Sometimes it is desirable to only run the method on the server. This can be done using the server_method macro:
1
class User < ActiveRecord::Base
2
  server_method :full_name, default: '' do
3
    "#{first_name} #{last_name}"
4
  end
5
end
Copied!
When the method is first called on the client the default value will be returned, and there will be a reactive update when the true value is returned from the server.
To force the value to be recomputed at the server append a ! to the end of the name, otherwise the last value returned from the server will continue to be returned.
Model Information
column_names: returns a list of the database columns.
columns_hash: returns the details of the columns specification. Note that on the server columns_hash returns a hash of objects specifying column information. On the client the entire structure is just one big hash of hashes.
abstract_class=, abstract_class?, primary_key, primary_key=, inheritance_column, inheritance_column=, model_name: All work as on the server. See ActiveRecord documentation for more info.
Instance Methods
Attribute and Relationship Getter and Setters
All attributes have an associated getter and setter. All relationships have a getter. All belongs_to relationships also have a setter. has_many relationships can be updated using the push (<<) operator or using the delete method.
1
  puts my_todo.title
2
  my_todo.title = "neutitle"
3
  my_todo.comments << a_new_comment
4
  a_new_comment.todo == my_todo # true!
Copied!
In addition if the attribute getter ends with a bang (!) then this will force a fetch of the attribute from the server. This is typically not necessary if push updates are configured.
Saving
The save method works like ActiveRecord save, except it returns a promise that is resolved when the save completes (or fails.)
1
my_todo.save(validate: false).then do |result|
2
  # result is a hash with {success: ..., message: , models: ....}
3
end
Copied!
After a save operation completes the models will have an errors hash (just like on the server) with any validation problems.
During the save operation the method saving? will return true. This can be used to instead of (or with) the promise to update the screen:
1
render do
2
  ...
3
  if some_model.saving?
4
    ... display please wait ...
5
  elsif some_model.errors.any?
6
    ... highlight the errors ...
7
  else
8
    ... display data ...
9
  end
10
  ...
11
end
Copied!
Destroy
Like save destroy returns a promise that is resolved when the destroy completes.
After the destroy completes the record's destroyed? method will return true.
Other Instance Methods
new? returns true if the model is new and not yet saved.
primary_key returns the primary key for the model
id returns the value of the primary key for this instance
model_name returns the model_name.
revert Undoes any unsaved changes to the instance.
changed? returns true if any attributes have changed (always true for a new model)
dup duplicate the instance.
== two instances are the same if it is known that they reference the same underlying table row.
..._changed? (i.e. name_changed?) returns true if the specific attribute has changed.
itself returns the record, but will override lazy loading and force a load of at least the model's id.
Load and Render Cycle
loading? and loaded?
All Ruby objects will respond to these methods. If you want to put up a "Please Wait" message, spinner, etc, you can use the loaded? or loading? method to determine if the object represents a real loaded value or not. Any value for which loaded? returns false (or loading? returns true) will eventually load and cause a re-render
Hyperstack::Model.load method
Sometimes it is necessary to insure values are loaded outside of the rendering cycle. For this you can use the Hyperstack::Model.load method:
1
Hyperstack::Model.load do
2
  x = my_model.some_attribute
3
  OtherModel.find(x+12).other_attribute
4
  # code in here can be arbitrarily complex and load
5
  # will re-execute it until all values are loaded
6
  # the final expression is passed to the promise
7
end.then |result|
8
  puts result
9
end
Copied!
Force Loading Attributes
Normally you will simply display attributes as part of the render method, and when the values are loaded from the server the component will re-render.
Sometimes outside of the render method you may need to insure an attribute (or a server side method) is loaded before proceeding. This is typically when you are building some kind of higher level store.
The load method takes a list of attributes (symbols) and will insure these are loaded. Load returns a promise that is resolved when the load completes, or can be passed a block that will execute when the load completes.
1
before_mount do
2
  Todo.find(1).load(:name).then do |name|
3
    @name = name;
4
    state.loaded! true
5
  end
6
end
Copied!
Think hard about how you are using this, as Hyperstack already acts as flux store, and is managing state for you. It may be you are just creating a redundant store!
Client Side Scoping
By default scopes will be recalculated on the server. For simple scopes that do not use joins or includes no additional action needs to be taken to make scopes work with Hyperstack. For scopes that do use joins, or if you want to offload the scoping computation from the server to the client read this section.
ActiveRecord Scope Enhancement
When the client receives notification that a record has changed Hyperstack finds the set of currently rendered scopes that might be effected, and requests them to be updated from the server.
On the server scopes are a useful way to structure code. On the client scopes are vital as they limit the amount of data loaded, viewed, and updated in the browser. Consider a factory floor management system that shows job state as work flows through the factory. There may be millions of jobs that a production floor browser is authorized to view, but at any time there are probably only 50 being shown. Using ActiveRecord scopes is the way Hyperstack keeps the data requested by the browser limited to a reasonable amount.
To make scopes work efficiently on the client Hyperstack adds some features to the ActiveRecord scope and default_scope macros. Note you must use the scope macro (and not class methods) for things to work with Hyperstack.
The additional features are accessed via the :joins, :client, and :select options.
The :joins option tells the Hyperstack client which models are joined with the scope. You must add a :joins option if the scope has any data base join operations in it, otherwise if a joined model changes, Hyperstack will not know to update the scope.
The :client and :select options provide the client a way to update scopes without having to contact the server. Unlike the :joins option this is an optimization and is not required for scopes to work.
1
class Todo < ActiveRecord::Base
2
​
3
  # Standard ActiveRecord form:
4
  # the proc will be evaluated as normal on the server, and as needed updates
5
  # will be requested from the clients
6
​
7
  scope :active, -> () { where(completed: true) }
8
​
9
  # In the simple form the scope will be reevaluated if the model that is
10
  # being scoped changes, and if the scope is currently being used to render data.
11
​
12
  # If the scope joins with other data you will need to specify this by
13
  # passing a relationship or array of relationships to the `joins` option.
14
​
15
  scope :with_recent_comments,
16
        -> { joins(:comments).where('comment.created_at >= ?', Time.now-1.week) },
17
        joins: ['comments'] # or joins: 'comments'
18
​
19
  # Now with_recent_comments will be re-evaluated whenever a Todo record, or a Comment
20
  # joined with a Todo change.
21
​
22
  # Normally whenever Hyperstack detects that a scope may be effected by a changed
23
  # model, it will request the scope be re-evaluated on the server.  To offload this
24
  # computation to the client provide a client side scope method:
25
​
26
  scope :with_recent_comments,
27
        -> { joins(:comments).where('comment.created_at >= ?', Time.now-1.week) },
28
        joins: ['comments']
29
        client: -> { comments.detect { |comment| comment.created_at >= Time.now-1.week }
30
​
31
  # The client proc is executed on each candidate record, and if it returns true the record
32
  # will be added to the scope.
33
​
34
  # Instead of a client proc you can provide a select proc, which will receive the entire
35
  # collection which can then be filtered and sorted.
36
​
37
  scope :sort_by_created_at,
38
        -> { order('created_at DESC') }
39
        select: -> { sort { |a, b| b.created_at <=> a.created_at }}
40
​
41
  # To keep things tidy you can specify the server scope proc with the :server option
42
​
43
  scope :completed,
44
        server: -> { where(complete: true) }
45
        client: -> { complete }
46
​
47
  # The expressions in the joins array can be arbitrary sequences of relationships and
48
  # scopes such as 'comments.author'.  
49
​
50
  scope :with_managers_comments,
51
        server: -> { ... }
52
        joins: ['comments.author', 'owner']
53
        client: -> { comments.detect { |comment| comment.author == owner.manager }}}
54
​
55
  # You can also use the client, select, server, and joins option with the default_scope macro
56
​
57
  default_scope server: -> { where(deleted: false).order('updated_at DESC') }
58
                select: -> { select { |r| !r.deleted }.sort { |a, b| b <=> a } }
59
​
60
  # NOTE: it is highly recommend to provide a client proc with default_scopes.  Otherwise
61
  # every change is going to require a server interaction regardless of what other client procs
62
  # you provide.
63
​
64
end
Copied!
How it works
Consider this scope on the Todo model
1
scope :with_managers_comments,
2
      server: -> { joins(owner: :manager, comments: :author).where('managers_users.id = authors_comments.id').distinct },
3
      client: -> { comments.detect { |comment| comment.author == owner.manager }}
4
      joins: ['comments.author', 'owner']
Copied!
The joins 'comments.author' relationship is inverted so that we have User 'has_many' Comments which 'belongs_to' Todos.
Thus we now know that whenever a User or a Comment changes this may effect our with_managers_comments scope
Likewise 'owner' becomes User 'has_many' Todos.
Lets say that a user changes teams and now has a new manager. This means according to the relationships that the User model will change (i.e. there will be a new manager_id in the User model) and thus all Todos belonging to that User are subject to evaluation.
While the server side proc efficiently delivers all the objects in the scope, the client side proc just needs to incrementally update the scope.
Configuring the Transport
Hyperstack implements push notifications (via a number of possible technologies) so changes to records on the server are dynamically pushed to all authorized clients.
The can be accomplished by configuring one of the push technologies below:
Push Technology
When to choose this...
​Simple Polling​
The easiest push transport is the built-in simple poller.  This is great for demos or trying out Hyperstack but because it is constantly polling it is not suitable for production systems or any kind of real debug or test activities.
​Action Cable​
If you are using Rails 5 this is the perfect route to go. Action Cable is a production ready transport built into Rails 5.
​Pusher.com​
Pusher.com is a commercial push notification service with a free basic offering. The technology works well but does require a connection to the internet at all times.
​Pusher Fake​
The Pusher-Fake gem will provide a transport using the same protocol as pusher.com but you can use it to locally test an app that will be put into production using pusher.com.
Setting up Simple Polling
The easiest push transport is the built-in simple poller. This is great for demos or trying out Hyperstack but because it is constantly polling it is not suitable for production systems or any kind of real debug or test activities.
Simply add this initializer:
1
#config/initializers/Hyperstack.rb
2
Hyperstack.configuration do |config|
3
  config.transport = :simple_poller
4
  # options
5
  # config.opts = {
6
  #   seconds_between_poll: 5, # default is 0.5 you may need to increase if testing with Selenium
7
  #   seconds_polled_data_will_be_retained: 1.hour  # clears channel data after this time, default is 5 minutes
8
  # }
9
end
Copied!
That's it. Hyperstack will use simple polling for the push transport.
Setting up Action Cable
To configure Hyperstack to use Action Cable, add this initializer:
1
#config/initializers/Hyperstack.rb
2
Hyperstack.configuration do |config|
3
  config.transport = :action_cable
4
end
Copied!
If you are already using ActionCable in your app that is fine, as Hyperstack will not interfere with your existing connections.
Otherwise go through the following steps to setup ActionCable.
Firstly, make sure the action_cable js file is required in your assets.
Typically app/assets/javascripts/application.js will finish with a require_tree . and this will pull in the cable.js file which will pull in action_cable.js
However at a minimum if application.js simply does a require action_cable that will be sufficient for Hyperstack.
Make sure you have a cable.yml file:
1
# config/cable.yml
2
development:
3
  adapter: async
4
​
5
test:
6
  adapter: async
7
​
8
production:
9
  adapter: redis
10
  url: redis://localhost:6379/1
Copied!
Set allowed request origins (optional):
By default action cable will only allow connections from localhost:3000 in development. If you are going to something other than localhost:3000 you need to add something like this to your config:
1
# config/environments/development.rb
2
Rails.application.configure do
3
  config.action_cable.allowed_request_origins = ['http://localhost:3000', 'http://localhost:5000']
4
end
Copied!
That's it. Hyperstack will use Action Cable as the push transport.
Setting up Pusher.com
​Pusher.com provides a production ready push transport for your App. You can combine this with Pusher-Fake for local testing as well. You can get a free pusher account and API keys at https://pusher.com​
First add the Pusher and Hyperstack gems to your Rails app:
add gem 'pusher' to your Gemfile.
Next Add the pusher js file to your application.js file:
1
# app/assets/javascript/application.js
2
...
3
//= require 'Hyperstack/pusher'
4
//= require_tree .
Copied!
Finally set the transport:
1
# config/initializers/Hyperstack.rb
2
Hyperstack.configuration do |config|
3
  config.transport = :pusher
4
  config.channel_prefix = "Hyperstack"
5
  config.opts = {
6
    app_id: "2....9",
7
    key: "f.....g",
8
    secret: "1.......3"
9
  }
10
end
Copied!
That's it. You should be all set for push notifications using Pusher.com.
Setting up Pusher Fake
The Pusher-Fake gem will provide a transport using the same protocol as pusher.com. You can use it to locally test an app that will be put into production using pusher.com.
Firstly add the Pusher, Pusher-Fake and Hyperstack gems to your Rails app
add gem 'pusher' to your Gemfile.
add gem 'pusher-fake' to the development and test sections of your Gemfile.
Next add the pusher js file to your application.js file
1
# app/assets/javascript/application.js
2
...
3
//= require 'Hyperstack/pusher'
4
//= require_tree .
Copied!
Add this initializer to set the transport:
1
# typically app/config/initializers/Hyperstack.rb
2
# or you can do a similar setup in your tests (see this gem's specs)
3
require 'pusher'
4
require 'pusher-fake'
5
# Assign any values to the Pusher app_id, key, and secret config values.
6
# These can be fake values or the real values for your pusher account.
7
Pusher.app_id = "MY_TEST_ID"      # you use the real or fake values
8
Pusher.key =    "MY_TEST_KEY"
9
Pusher.secret = "MY_TEST_SECRET"
10
# The next line actually starts the pusher-fake server (see the Pusher-Fake readme for details.)
11
# it is important this require be AFTER the above settings, as it will use these
12
require 'pusher-fake/support/base' # if using pusher with rspec change this to pusher-fake/support/rspec
13
# now copy over the credentials, and merge with PusherFake's config details
14
Hyperstack.configuration do |config|
15
  config.transport = :pusher
16
  config.channel_prefix = "Hyperstack"
17
  config.opts = {
18
    app_id: Pusher.app_id,
19
    key: Pusher.key,
20
    secret: Pusher.secret
21
  }.merge(PusherFake.configuration.web_options)
22
end
Copied!
That's it. You should be all set for push notifications using Pusher Fake.
Debugging
Sometimes you need to figure out what connections are available, or what attributes are readable etc.
Its usually all to do with your policies, but perhaps you just need a little investigation.
TODO check rr has become Hyperstack (as below)
You can bring up a console within the controller context by browsing localhost:3000/Hyperstack/console
Note: change rr to wherever you are mounting Hyperstack in your routes file.
Note: in rails 4, you will need to add the gem 'web-console' to your development section
Within the context you have access to session.id and current acting_user which you will need, plus some helper methods to reduce typing
Getting auto connection channels: channels(session_id = session.id, user = acting_user) e.g. channels returns all channels connecting to this session and user providing nil as the acting_user will test if connections can be made without there being a logged in user.
Can a specific class connection be made: can_connect?(channel, user = acting_user) e.g. can_connect? Todo returns true if current acting_user can connect to the Todo class. You can also provide the class name as a string.
Can a specific instance connection be made: can_connect?(channel, user = acting_user) e.g. can_connect? Todo.first returns true if current acting_user can connect to the first Todo Model. You can also provide the instance in the form 'Todo-123'
What attributes are accessible for a Model instance: viewable_attributes(instance, user = acting_user)
Can the attribute be viewed: view_permitted?(instance, attribute, user = acting_user)
Can a Model be created/updated/destroyed: create_permitted?(instance, user = acting_user) e.g. create_permitted?(Todo.new, nil) can anybody save a new todo? e.g. destroy_permitted?(Todo.last) can the acting_user destroy the last Todo
You can of course simulate server side changes to your Models through this console like any other console. For example
Todo.new.save will broadcast the changes to the Todo Model to any authorized channels.
Common Errors
No policy class If you don't define a policy file, nothing will happen because nothing will get connected. By default Hyperstack will look for a ApplicationPolicy class.
Wrong version of pusher-fake (pusher-fake/base vs. pusher-fake/rspec) See the Pusher-Fake gem repo for details.
Forgetting to add require pusher in application.js file this results in an error like this:
1
Exception raised while rendering #<TopLevelRailsComponent:0x53e>
2
    ReferenceError: Pusher is not defined
Copied!
To resolve make sure you require 'pusher' in your application.js file if using pusher. DO NOT require pusher from your components manifest as this will cause prerendering to fail.
No create/update/destroy policies You must explicitly allow changes to the Models to be made by the client. If you don't you will see 500 responses from the server when you try to update. To open all access do this in your application policy: allow_change(to: :all, on: [:create, :update, :destroy]) { true }
Cannot connect to real pusher account If you are trying to use a real pusher account (not pusher-fake) but see errors like this
1
pusher.self.js?body=1:62 WebSocket connection to
2
'wss://127.0.0.1/app/PUSHER_API_KEY?protocol=7&client=js&version=3.0.0&flash=false'
3
failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
Copied!
Check to see if you are including the pusher-fake gem. Hyperstack will always try to use pusher-fake if it sees the gem included. Remove it and you should be good to go. See issue #5 for more details.
Cannot connect with ActionCable. Make sure that config.action_cable.allowed_request_origins includes the url you use for development (including the port) and that you are using Puma.
Attributes are not being converted from strings, or do not have their default values Eager loading is probably turned off. Hyperstack needs to eager load Hyperstack/models so it can find all the column information for all Isomorphic models.
When starting rails you get a message on the rails console couldn't find file 'browser' The hyper-component v0.10.0 gem removed the dependency on opal-browser. You will have to add the 'opal-browser' gem to your Gemfile.
On page load you get a message about super class mismatch for DummyValue You are still have the old reactive-record gem in your Gemfile, remove it from your gemfile and your components manifest.
On page load you get a message about no method session for nil You are still referencing the old reactive-ruby or reactrb gems either directly or indirectly though a gem like reactrb-router. Replace any gems like reactrb-router with hyper-router. You can also just remove reactrb, as hyper-model will be included by the hyper-model gem.
You keep seeing the message WebSocket connection to 'ws://localhost:3000/cable' failed: WebSocket is closed before the connection is established. every few seconds in the console. There are probably lots of reasons for this, but it means ActionCable can't get itself going. One reason is that you are trying to run with Passenger instead of Puma, and trying to use async mode in cable.yml file. async mode requires Puma.