3.0
Getting started
HTML Rendering
Components
Migrating from 2.x to 3.0
Core/VueJs repo and gem split
matestack-ui-corepreviously 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-coreis 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.xInstallation
Add the latest version to your Gemfile
1
gem 'matestack-ui-core', '~> 3.0.0.rc2'
Copied!
and run
1
$ bundle update matestack-ui-core
Copied!
Remove matestack-ui-core JavaScript package
matestack-ui-core JavaScript packagematestack-ui-coredoes not ship a JavaScript package anymore- please remove the package from your application and switch to
matestack-ui-vuejsfor the VueJs driven reactivity if required
1
yarn remove matestack-ui-core
Copied!
Matestack::Ui::App is now called Matestack::Ui::Layout
Matestack::Ui::App is now called Matestack::Ui::LayoutMatestack::Ui::Appwas always meant to be a layout wrapping pages, but was supercharged with some vuejs logic before splitting thecoreandvuejsrepos- now
Matestack::Ui::Appis 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
matestack_app method is renamed to matestack_layout- following the above mentioned naming adjustment, the
matestack_appmethod used on controller level is renamed tomatestack_layout
app/controllers/demo_controller.rb1
class DemoController < ActionController::Base
2
include Matestack::Ui::Core::Helper
3
​
4
layout "application" # root rails layout file
5
​
6
matestack_layout DemoApp::Layout # <-- renamed from matestack_app
7
​
8
def foo
9
render DemoApp::Pages::Foo
10
end
11
​
12
end
Copied!
-> Search&Replace
Matestack::Ui::Layout Matestack::Ui::Page wrapping DOM structures
Matestack::Ui::Layout Matestack::Ui::Page wrapping DOM structures- previously,
Matestack::Ui::Appadded some wrapping DOM structure around the whole layout and around it'syield - this enabled dynamic page transition and loading state animations
Matestack::Ui::Layoutnow 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.rb1
class Some::App::Layout < Matestack::Ui::Layout
2
def response
3
h1 "Demo App"
4
main do
5
yield
6
end
7
end
8
end
Copied!
matestack/some/app/pages/some_page.rb1
class Some::App::Pages::SomePage < Matestack::Ui::Page
2
def response
3
h2 "Some Page"
4
end
5
end
Copied!
will just render:
1
<body> <!-- coming from rails layout if specified -->
2
<!-- no wrapping DON structure around the layout -->
3
<h1>Demo App</<h1>
4
<main>
5
<!-- page markup without any wrapping DOM structure -->
6
<h2>Some Page</h2>
7
<main>
8
</body>
Copied!
-> 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 explicitlyLast modified 2mo ago