Skip to content

Do not follow these instructions depreciated

Jump to bottom Edit New page
Barrie Hadfield edited this page Mar 24, 2019 · 1 revision

Do not follow these instructions - depreciated

Gemfile

Update the gem files and remove any old

gem 'opal', github: 'janbiedermann/opal', branch: 'es6_import_export'
gem 'opal-webpack-compile-server', github: 'janbiedermann/opal-webpack-compile-server', branch: 'master'
gem 'opal-autoloader', github: 'janbiedermann/opal-autoloader', branch: 'master'

gem 'hyper-component', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-component/*.gemspec', branch: 'ulysses'
gem 'hyper-router', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-router/*.gemspec', branch: 'ulysses'
gem 'hyper-store', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-store/*.gemspec', branch: 'ulysses'
gem 'hyper-transport', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-transport/*.gemspec', branch: 'ulysses'
gem 'hyper-transport-actioncable', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-transport-actioncable/*.gemspec', branch: 'ulysses'
gem 'hyper-transport-store-redis', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-transport-store-redis/*.gemspec', branch: 'ulysses'
gem 'hyper-model', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-model/*.gemspec', branch: 'ulysses'
gem 'hyper-operation', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-operation/*.gemspec', branch: 'ulysses'
gem 'hyper-policy', :git => 'https://github.com/hyperstack-org/hyperstack', :glob => 'ruby/hyper-policy/*.gemspec', branch: 'ulysses'
#gem 'hyper-international', github: 'janbiedermann/hyper-international', branch: 'ulysses'
#gem 'hyper-spectre', github: 'janbiedermann/hyper-spectre', branch: 'master'

Gems not needed (if not used) can be removed

gem 'opal-jquery', git: 'https://github.com/opal/opal-jquery.git', branch: 'master'
gem 'libv8'

app/hyperstack/hyperstack_webpack_loader.rb

Should be done by a installer task

require 'opal'
require 'browser' # CLIENT ONLY
require 'browser/delay' # CLIENT ONLY
require 'opal-autoloader'
require 'hyper-store'
require 'hyper-react'
require 'hyper-router'
require 'hyper-transport-actioncable'
require 'hyper-transport'
require 'hyper-resource'
require 'hyper-business'
require 'react/auto-import'

require_tree 'stores'
require_tree 'models'
require_tree 'operations'
require_tree 'components'

app/javascript/app.js

Should be done by a installer task

  • Suggestion to make a hyperstack.js file soit is very clear that it is hyperstack related
import React from 'react';
import ReactDOM from 'react-dom';
import * as History from 'history';
import * as ReactRouter from 'react-router';
import * as ReactRouterDOM from 'react-router-dom';
import * as ReactRailsUJS from 'react_ujs';
import ActionCable from 'actioncable';

global.React = React;
global.ReactDOM = ReactDOM;
global.History = History;
global.ReactRouter = ReactRouter;
global.ReactRouterDOM = ReactRouterDOM;
global.ReactRailsUJS = ReactRailsUJS;
global.ActionCable = ActionCable;

import init_app from 'hyperstack_webpack_loader.rb';

init_app();
Opal.load('hyperstack_webpack_loader');
if (module.hot) {
    module.hot.accept('./app.js', function () {
        console.log('Accepting the updated app module!');
    })
}

remove app/assets/javascripts/application.js

//= require hyperloop-loader

Remove gems because they conflict

  • react-rails

Remove hyperloop initializer and mount points

  • config/initializers/hyperloop.rb
  • config/routes.rb
    • mount Hyperloop::Engine => '/hyperloop'

Install new webpack config

Should be done by a installer task

Add Yarn packages

  • $ yarn add opal-webpack-loader
  • $ yarn add opal-webpack-resolver-plugin
  • $ yarn add webpack-serve

Rename hyperloop to hyperstack

  • $ git mv app/hyperloop app/hyperstack

Remove Hyperloop regulators

  • Remove regulate_scope :all from the application_record and models
  • regulate: :always_allow from all models

Add to the ApplicationHelper

If using rails and the rails gem this could be already included

  • include Hyperstack::ViewHelpers

Replace react_component by hyper_component

In order to render only a component you need to add a line to the application_layout and include the Hyperstack::ViewHelpers

  • Rename in views: react_component => hyper_component
  • Add to application_layout.rb
    • <%= hyper_script_tag(current_user_id: current_user.id, session_id: session.id, form_authenticity_token: form_authenticity_token) %>

Load pack before normal application sprockets

See the suggested rename at topic: app/javascript/app.js

  • <%= owl_include_tag '/packs/app.js' %>
  • <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Add changes to the package.json

In scripts section

"scripts": {
  "test": "bundle exec opal-webpack-compile-server kill; bundle exec opal-webpack-compile-server && webpack --config=config/webpack/test.js; bundle exec opal-webpack-compile-server kill",
  "watch": "bundle exec opal-webpack-compile-server kill; bundle exec opal-webpack-compile-server && webpack --watch --config=config/webpack/development.js; bundle exec opal-webpack-compile-server kill",
  "start": "bundle exec opal-webpack-compile-server kill; bundle exec opal-webpack-compile-server && bundle exec webpack-serve --config ./config/webpack/development.js; bundle exec opal-webpack-compile-server kill",
  "build": "bundle exec opal-webpack-compile-server kill; bundle exec opal-webpack-compile-server && webpack --config=config/webpack/production.js; bundle exec opal-webpack-compile-server kill"
}

Ensure you have @rails/webpacker version 4 or higher

  • $ npm install @rails/webpacker@4.12.0

Expand the application_helper

Suggestion this should be included in Hyperstack::ViewHelpers

  def owl_include_tag(path)
    case Rails.env
    when 'production'
      public, packs, asset = path.split('/')
      path = OpalWebpackManifest.lookup_path_for(asset)
      javascript_include_tag(path)
    when 'development' then javascript_include_tag('http://localhost:3035' + path[0..-4] + '_development' + path[-3..-1])
    when 'test' then javascript_include_tag(path[0..-4] + '_test' + path[-3..-1])
    end
  end

Expand the assets

Add to the config/initializers/assets.rb

class OpalWebpackManifest
  def self.manifest
    @manifest ||= JSON.parse(File.read(File.join(Rails.root, 'public', 'packs', 'manifest.json')))
  end

  def self.lookup_path_for(asset)
    manifest[asset]
  end
end

Hyperstack models don't support all helper classes

Suggestion this should be taken cared of if a cleaner way of detecting RUBY_ENGINE == 'opal' and where possible stub the unsupported methods

# app/hyperstack/models/application_record.rb
#  Abstract parent
if RUBY_ENGINE == 'opal'
  class ApplicationRecord
    include Hyperstack::Record::Mixin
  end
else
  class ApplicationRecord < ActiveRecord::Base
    include Hyperstack::Record::Mixin
    # when updating this part, also update the ApplicationRecord in app/models/application_record.rb
    # for rails eager loading in production, so production doesn't fail
    self.abstract_class = true
  end
end

Guard Server specific code in your models (this is unavoidable):

class NewModel < ApplicationRecord
  if RUBY_ENGINE != 'opal'
    establish_connection "other_database_#{Rails.env}".to_sym
    self.abstract_class = true
  end
end

Remove old policy directory

  • $ git rm -r app/policies

Rename all Hyperloop models to the new Hyperstack

  • $ find ./hyperloop/models -type f -exec sed -i -e 's/Hyperloop::Model/Hyperstack::Model/' {} \;

Add action able if you use hyper-transport-actioncable

  • $ yarn add actioncable
  • add to app/javascript/app.js: 
    • import ActionCable from 'actioncable';
global.ActionCable = ActionCable;

done

Add a custom footer
Add a custom sidebar
Clone this wiki locally