AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap

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

PreviousWelcomeNextInstallation & Update

Last updated

Was this helpful?