Migrating from 2.x to 3.0

Core/VueJs repo and gem split
matestack-ui-core previously contained logic for
Ruby -> HTML conversion
Reactivity via prebuilt and custom Vue.js components
in order to have better seperation of concerns, we've moved the reactivity related things to its own repository/gem -> matestack-ui-vuejs
matestack-ui-core is now meant to be combined with any reactivity framework or none at all
Please follow the migration guide within the docs of matestack-ui-vuejs when using reactivity features of matestack-ui-core 2.x
Installation
Add the latest version to your Gemfile
gem 'matestack-ui-core', '~> 3.0.0.rc2'
and run
$ bundle update matestack-ui-core
Remove matestack-ui-core JavaScript package
matestack-ui-core does not ship a JavaScript package anymore
please remove the package from your application and switch to matestack-ui-vuejs for the VueJs driven reactivity if required
yarn remove matestack-ui-core
Matestack::Ui::App is now called Matestack::Ui::Layout
Matestack::Ui::App was always meant to be a layout wrapping pages, but was supercharged with some vuejs logic before splitting the core and vuejs repos
now Matestack::Ui::App is only a layout, that's why it should be named like that: Matestack::Ui::Layout
-> Search&Replace
matestack_app method is renamed to matestack_layout
following the above mentioned naming adjustment, the matestack_app method used on controller level is renamed to matestack_layout
app/controllers/demo_controller.rb
class DemoController < ActionController::Base
  include Matestack::Ui::Core::Helper
​
  layout "application" # root rails layout file
​
  matestack_layout DemoApp::Layout # <-- renamed from matestack_app
​
  def foo
    render DemoApp::Pages::Foo
  end
​
end
-> Search&Replace
Matestack::Ui::Layout Matestack::Ui::Page wrapping DOM structures
previously, Matestack::Ui::App added some wrapping DOM structure around the whole layout and around it's yield
this enabled dynamic page transition and loading state animations
Matestack::Ui::Layout now purely renders the layout and yields a page without anything in between
the wrapping DOM structres required for dynamic page transitions and loading state animations needs to be added via two new components if you want to use these features via matestack-ui-vue_js (see section below!)
matestack/some/app/layout.rb
class Some::App::Layout < Matestack::Ui::Layout
  def response
    h1 "Demo App"
    main do
      yield
    end
  end
end
matestack/some/app/pages/some_page.rb
class Some::App::Pages::SomePage < Matestack::Ui::Page
  def response
    h2 "Some Page"
  end
end
will just render:
<body> <!-- coming from rails layout if specified -->
  <!-- no wrapping DON structure around the layout -->
  <h1>Demo App</<h1>
  <main>
    <!-- page markup without any wrapping DOM structure -->
    <h2>Some Page</h2>
  <main>
</body>
-> Adjust CSS if you have created any rules targeting the wrapping DOM structure which now only is applied when using components from matestack-ui-vuejs explicitly

Welcome

Next - Getting started

Installation & Update

Last modified 6mo ago

Copy link

Edit on GitHub

Outline

Core/VueJs repo and gem split

Installation

Remove matestack-ui-core JavaScript package

Matestack::Ui::App is now called Matestack::Ui::Layout

matestack_app method is renamed to matestack_layout

Matestack::Ui::Layout Matestack::Ui::Page wrapping DOM structures

Core/VueJs repo and gem split

Installation

Remove `matestack-ui-core` JavaScript package

`Matestack::Ui::App` is now called `Matestack::Ui::Layout`

`matestack_app` method is renamed to `matestack_layout`

`Matestack::Ui::Layout` `Matestack::Ui::Page` wrapping DOM structures