matestack-ui-core 1.3.2 → 2.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41c80a6f5789f72a5d72ac93e16b15935026c5a9abe849e8de69558ed6a21caa
-  data.tar.gz: 81e3567844fd8137016cd54e80c5ad642e445614cff671dfcf0ea031838aa816
+  metadata.gz: 3a5d4970d227d9a4c70fbc9636a0550428f94bd2b2493a3417ce90022822d3fb
+  data.tar.gz: dce43149e8bdc8aeb4eb6e01e5e743868b6f158d40f0329fd11ba2b6b94e1303
 SHA512:
-  metadata.gz: 4376b8f3a2807f77ca7915d6642074cb73e9ddbd17ba1de2f81bb53573f9fdb4a978b1be3c4878218ea4abe611b061d2463dc17bbecbb147626a151434df6cdc
-  data.tar.gz: b00695ffa067070d9c6b362b28fec733af2fa97fb9b887b8ecd9afb18c21a88a6e5df146259dba09d3ffc2ff732aa566dae154935a7cc5379cb6a5747c268e32
+  metadata.gz: 82cb29e13e825a0d28cbef90b92c8d8fbec11d5539ebea1cdc4dd32d7a2b9d53f1ec753f573056de9e3a07299aabf6e12f5620df59c5c19af91cdc0f8fc6210c
+  data.tar.gz: 47b3d6b7b36140f1e56f1e548296875cc161e7ac72f982a09b09856b7271a8e2f813cf02bd50f32e6852ce155f79b16a53c5f95eb4811632c909d479e6321144

data/LICENSE

@@ -1,8 +1,20 @@
 Copyright (c) Matestack GmbH
 
-matestack-ui-core is an Open Source project licensed under the terms of
-the LGPLv3 license.  Please see <http://www.gnu.org/licenses/lgpl-3.0.html>
-for license text.
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
 
-Matestack will provide a commercial-friendly license allowing private forks
-and modifications of matestack-ui-core.  Please request at jonas@matestack.io
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -8,6 +8,19 @@
 
 # matestack-ui-core | UI in pure Ruby
 
+----
+Version 2.0.0 was released on the 12th of April and proudly presented at RailsConf.
+
+Most important changes:
+
+- Changed to MIT License
+- 5 to 12 times better rendering performance (depending on the context)
+- Removed Trailblazer dependency
+- Improved core code readability/maintainability
+----
+
+[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
+
 Boost your productivity & easily create component based web UIs in pure Ruby.
 Reactivity included if desired.
 
@@ -25,13 +38,35 @@ The main goals are:
 it alongside your classic views and incrementally turn your Rails-App into a
 dynamic Web-App.
 
+## Compatibility
+
+### Ruby/Rails
+
+`matestack-ui-core` is tested against:
+
+- Rails 6.1.1 + Ruby 3.0.0
+- Rails 6.1.1 + Ruby 2.7.2
+- Rails 6.0.3.4 + Ruby 2.6.6
+- Rails 5.2.4.4 + Ruby 2.6.6
+
+Rails versions below 5.2 are not supported.
+
+### Vue.js
+
+`matestack-ui-core` optionally requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
+
+- Vue.js ^2.6.0
+- Vuex ^3.6.0
+
+Vue 3 / Vuex 4 update is planned for Q2 2021.
+
 ## Documentation/Installation
 
 Documentation can be found [here](https://docs.matestack.io)
 
 ## Getting started
 
-A getting started guide can be found [here](https://docs.matestack.io/docs/start/150-getting_started)
+A getting started guide can be found [here](https://docs.matestack.io/getting-started/quick-start)
 
 ## Changelog
 
@@ -66,16 +101,16 @@ The Ruby method \"div\" for example calls one of the static core components, res
 
 class Components::Card < Matestack::Ui::Component
 
-  requires :body
+  required :body
   optional :title
   optional :image
 
   def response
     div class: "card shadow-sm border-0 bg-light" do
-      img path: image, class: "w-100" if image.present?
+      img path: context.image, class: "w-100" if context.image.present?
       div class: "card-body" do
-        heading size: 5, text: title if title.present?
-        paragraph class: "card-text", text: body
+        h5 context.title if context.title.present?
+        paragraph context.body, class: "card-text"
       end
     end
   end
@@ -86,32 +121,18 @@ end
 
 #### Use your Ruby UI components on your existing Rails views
 
-Register your Ruby UI component classes with your desired DSL method and use the \"matestack_component\" helper in order to render your component within existing ERB views or Rails controllers.
-The Ruby method \"card\" for example calls your \"Card\" class, enabling you to create a reuseable card components, abstracting UI complexity in your ow components.
+Components can be then called on Rails views (not only! see below), enabling you to create a reusable card components, abstracting UI complexity in your own components.
 
 `app/views/your_view.html.erb`
 
 ```erb
 
 <!-- some other erb markup -->
-<%= matestack_component :card, title: "hello", body: "world" %>
+<%= Components::Card.(title: "hello", body: "world") %>
 <!-- some other erb markup -->
 
 ```
 
-`app/matestack/components/registry.rb`
-
-```ruby
-module Components::Registry
-
-  Matestack::Ui::Core::Component::Registry.register_components(
-    card: Components::Card,
-    #...
-  )
-
-end
-```
-
 
 #### Use Ruby methods as partials
 
@@ -124,23 +145,23 @@ Using this approach helps you to create a clean, readable and maintainable codeb
 
 class Components::Card < Matestack::Ui::Component
 
-  requires :body
+  required :body
   optional :title
   optional :image
   optional :footer
 
   def response
     div class: "card shadow-sm border-0 bg-light" do
-      img path: image, class: "w-100" if image.present?
+      img path: context.image, class: "w-100" if context.image.present?
       card_content
-      card_footer if footer.present?
+      card_footer if context.footer.present?
     end
   end
 
   def card_content
     div class: "card-body" do
-      heading size: 5, text: title if title.present?
-      paragraph class: "card-text", text: body
+      h5 context.title if context.title.present?
+      paragraph context.body, class: "card-body"
     end
   end
 
@@ -158,7 +179,7 @@ end
 
 ```erb
 <!-- some other erb markup -->
-<%= matestack_component :card, title: "hello", body: "world", footer: "foo" %>
+<%= Components::Card.(title: "hello", body: "world", footer: "foo") %>
 <!-- some other erb markup -->
 ```
 
@@ -176,7 +197,7 @@ class Components::BlueCard < Components::Card
 
   def response
     div class: "card shadow-sm border-0 bg-primary text-white" do
-      img path: image, class: "w-100" if image.present?
+      img path: context.image, class: "w-100" if context.image.present?
       card_content #defined in parent class
       card_footer if footer.present? #defined in parent class
     end
@@ -186,24 +207,11 @@ end
 
 ```
 
-`app/matestack/components/registry.rb`
-
-```ruby
-module Components::Registry
-
-  Matestack::Ui::Core::Component::Registry.register_components(
-    blue_card: Components::BlueCard,
-    #...
-  )
-
-end
-```
-
 `app/views/your_view.html.erb`
 
 ```erb
 <!-- some other erb markup -->
-<%= matestack_component :blue_card, title: "hello", body: "world" %>
+<%= Components::BlueCard.(title: "hello", body: "world") %>
 <!-- some other erb markup -->
 ```
 
@@ -218,15 +226,15 @@ You decide when using a Ruby method partial should be replaced by another self c
 
 class Components::Card < Matestack::Ui::Component
 
-  requires :body
+  required :body
   optional :title
   optional :image
 
   def response
     div class: "card shadow-sm border-0 bg-light" do
-      img path: image, class: "w-100" if image.present?
+      img path: context.image, class: "w-100" if context.image.present?
       # calling the CardBody component rather than using Ruby method partials
-      card_body title: title, body: body
+      Components::CardBody.(title: context.title, body: context.body)
     end
   end
 
@@ -239,15 +247,15 @@ end
 
 class Components::CardBody < Matestack::Ui::Component
 
-  requires :body
+  required :body
   optional :title
 
   def response
     # Just an example. Would make more sense, if this component had
     # a more complex structure
     div class: "card-body" do
-      heading size: 5, text: title if title.present?
-      paragraph class: "card-text", text: body
+      h5 context.title if context.title.present?
+      paragraph context.body, class: "card-body"
     end
   end
 
@@ -256,20 +264,6 @@ end
 ```
 
 
-`app/matestack/components/registry.rb`
-
-```ruby
-module Components::Registry
-
-  Matestack::Ui::Core::Component::Registry.register_components(
-    card: Components::Card,
-    card_body: Components::CardBody,
-    #...
-  )
-
-end
-```
-
 #### Yield components into components
 
 Sometimes it's not enough to just pass simple data into a component. No worries! You can just yield a block into your components!
@@ -282,17 +276,17 @@ Using this approach gives you more flexibility when using your UI components. Of
 
 class Components::Card < Matestack::Ui::Component
 
-  requires :body
+  required :body
   optional :title
   optional :image
 
   def response
     div class: "card shadow-sm border-0 bg-light" do
-      img path: image, class: "w-100" if image.present?
-      card_body do
+      img path: context.image, class: "w-100" if context.image.present?
+      Components::CardBody.() do
         # yielding a block into the card_body component
-        heading size: 5, text: title if title.present?
-        paragraph class: "card-text", text: body
+        h5 context.title if context.title.present?
+        paragraph context.body, class: "card-body"
       end
     end
   end
@@ -311,7 +305,7 @@ class Components::CardBody < Matestack::Ui::Component
     # Just an example. Would make more sense, if this component had
     # a more complex structure
     div class: "card-body" do
-      yield_components
+      yield if block_given?
     end
   end
 
@@ -330,27 +324,26 @@ Slots help you to build complex UI components with multiple named content placeh
 
 class Components::Card < Matestack::Ui::Component
 
-  requires :body
+  required :body
   optional :title
   optional :image
 
   def response
     div class: "card shadow-sm border-0 bg-light" do
-      img path: image, class: "w-100" if image.present?
-      card_body slots: { heading: heading_slot, body: body_slot }
+      img path: context.image, class: "w-100" if context.image.present?
+      Components::CardBody.(slots: {
+        heading: method(:heading_slot),
+        body: method(:body_slot)
+      })
     end
   end
 
   def heading_slot
-    slot do
-      heading size: 5, text: title if title.present?
-    end
+    h5 context.title if context.title.present?      
   end
 
   def body_slot
-    slot do
-      paragraph class: "card-text", text: body
-    end
+    paragraph context.body, class: "card-body"
   end
 
 end
@@ -362,17 +355,17 @@ end
 
 class Components::CardBody < Matestack::Ui::Component
 
-  requires :slots
+  required :slots
 
   def response
     # Just an example. Would make more sense, if this component had
     # a more complex structure
     div class: "card-body" do
       div class: "heading-section" do
-        slot slots[:heading]
+        slot :heading
       end
       div class: "body-section" do
-        slot slots[:body]
+        slot :body
       end
     end
   end
@@ -399,7 +392,7 @@ class Components::SomeComponent < Matestack::Ui::Component
 
   def response
     onclick emit: "some_event" do
-      button text: "click me"
+      button "click me"
     end
     toggle show_on: "some_event", hide_after: 5000 do
       plain "Oh yes! You clicked me!"
@@ -423,7 +416,7 @@ class Components::SomeComponent < Matestack::Ui::Component
 
   def response
     action my_action_config do
-      button text: "click me"
+      button "click me"
     end
     toggle show_on: "some_event", hide_after: 5000 do
       plain "Success!"
@@ -456,16 +449,10 @@ Events emitted by the \"form\" component can be used to toggle parts of the UI.
 
 class Components::SomeComponent < Matestack::Ui::Component
 
-  def prepare
-    @new_active_record_instance = MyActiveRecordModel.new
-  end
-
   def response
-    form my_form_config do
+    matestack_form my_form_config do
       form_input key: :some_attribute, type: :text
-      form_submit do
-        button text: "click me"
-      end
+      button "click me", type: :submit
     end
     toggle show_on: "submitted", hide_after: 5000 do
       span class: "message success" do
@@ -481,7 +468,7 @@ class Components::SomeComponent < Matestack::Ui::Component
 
   def my_form_config
     {
-      for: @new_active_record_instance,
+      for: MyActiveRecordModel.new,
       path: some_rails_route_path,
       method: :post,
       success: {
@@ -499,7 +486,7 @@ end
 
 #### Implement asynchronous, event-based UI rerendering in pure Ruby
 
-Using matestack's built-in event system, you can rerender parts of the UI on client side events, such as form or action submissions. Even server side events pushed via ActionCable may be received!
+Using Matestack's built-in event system, you can rerender parts of the UI on client side events, such as form or action submissions. Even server side events pushed via ActionCable may be received!
 The \"async\" component requests a new version of its body at the server via an HTTP GET request after receiving the configured event. After successfu server response, the DOM of the \"async\" component gets updated. Everything else stays untouched.
 
 `app/matestack/components/some_component.rb`
@@ -509,14 +496,14 @@ The \"async\" component requests a new version of its body at the server via an
 class Components::SomeComponent < Matestack::Ui::Component
 
   def response
-    form my_form_config do
+    matestack_form my_form_config do
       #...
     end
     #...
     async rerender_on: "submitted", id: "my-model-list" do
       ul do
         MyActiveRecordModel.last(5).each do |model|
-          li text: model.some_attribute
+          li model.some_attribute
         end
       end
     end
@@ -550,14 +537,14 @@ The \"cable\" component can be configured to receive events and data pushed via
 class Components::SomeComponent < Matestack::Ui::Component
 
   def response
-    form my_form_config do
+    matestack_form my_form_config do
       #...
     end
     #...
     ul do
       cable prepend_on: "new_element_created", id: "mocked-instance-list" do
         MyActiveRecordModel.last(5).each do |model|
-          li text: model
+          li model
         end
       end
     end
@@ -573,7 +560,7 @@ end
 # within your controller action handling the form input
 ActionCable.server.broadcast("matestack_ui_core", {
   event: "new_element_created",
-  data: matestack_component(:li, text: params[:some_attribute])
+  data: "<li>foo</li>" # or better: calling a component here
 })
 
 ```
@@ -606,11 +593,11 @@ end
 ```ruby
 class Components::MyVueJsComponent < Matestack::Ui::VueJsComponent
 
-  vue_js_component_name "my-vue-js-component"
+  vue_name "my-vue-js-component"
 
   def response
     div class: "my-vue-js-component" do
-      button attributes: {"@click": "increaseValue"}
+      button "@click": "increaseValue"
       br
       plain "{{ dynamicValue }}!"
     end
@@ -622,7 +609,7 @@ end
 `app/matestack/components/my_vue_js_component.js`
 
 ```javascript
-MatestackUiCore.Vue.component('my-vue-js-component', {
+Vue.component('my-vue-js-component', {
   mixins: [MatestackUiCore.componentMixin],
   data: () => {
     return {
@@ -632,7 +619,7 @@ MatestackUiCore.Vue.component('my-vue-js-component', {
   methods: {
     increaseValue(){
       this.dynamicValue++
-      MatestackUiCore.matestackEventHub.$emit("some_event")
+      MatestackUiCore.eventHub.$emit("some_event")
     }
   }
 });
@@ -656,15 +643,15 @@ class SomeApp::App < Matestack::Ui::App
   def response
     nav do
       transition path: page1_path do
-        button text: "Page 1"
+        button "Page 1"
       end
       transition path: page2_path do
-        button text: "Page 2"
+        button "Page 2"
       end
     end
     main do
       div class: "container" do
-        yield_page
+        yield
       end
     end
   end
@@ -718,8 +705,7 @@ Work with controllers, actions and routing as you're used to! Controller hooks (
 
 class SomeController < ApplicationController
 
-  include Matestack::Ui::Core::ApplicationHelper
-  include Components::Registry
+  include Matestack::Ui::Core::Helper
 
   matestack_app SomeApp::App
 
@@ -763,23 +749,21 @@ class SomeApp::App < Matestack::Ui::App
   def response
     nav do
       transition path: page1_path do
-        button text: "Page 1"
+        button "Page 1"
       end
       transition path: page2_path do
-        button text: "Page 2"
+        button "Page 2"
       end
     end
     main do
       div class: "container" do
-        yield_page slots: { loading_state: loading_state_element }
+        yield
       end
     end
   end
 
   def loading_state_element
-    slot do
-      div class: 'some-loading-element-styles'
-    end
+    div class: 'some-loading-element-styles'
   end
 
 end
@@ -815,4 +799,5 @@ end
 ```
 
 ## License
-matestack-ui-core is an Open Source project licensed under the terms of the [LGPLv3 license](./LICENSE)
+
+`matestack-ui-core` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)