Merge remote-tracking branch 'origin/20200810_refactor-isolated-component' into next-release

jonasjabari · jonasjabari · commit 55e764d8e42f · 2020-08-21T12:51:11.000+02:00
diff --git a/app/concepts/matestack/ui/core/component/base.rb b/app/concepts/matestack/ui/core/component/base.rb
@@ -231,23 +231,23 @@ def add_child(child_class, *args, &block)
       # the childs content in order to respond to the subsequent component rendering call with
       # the childs content. In this case: "I should be deferred"
       skip_deferred_child_response = false
-      if child_class <= Matestack::Ui::Core::Async::Async || child_class < Matestack::Ui::Core::Isolate::Isolate
+      if child_class <= Matestack::Ui::Core::Async::Async || child_class < Matestack::Ui::Core::Isolated::Isolated
         if args.any? { |arg| arg[:defer].present? } && @matestack_skip_defer == true
           skip_deferred_child_response = true
         end
       end
 
       # check only allowed keys are passed to isolated components
-      if child_class < Matestack::Ui::Core::Isolate::Isolate
-        unless args.empty? || args[0].keys.all? { |key| [:defer, :public_options, :rerender_on, :init_on, :rerender_delay].include? key }
+      if child_class < Matestack::Ui::Core::Isolated::Isolated
+        unless args.empty? || args[0].keys.all? { |key| [:defer, :public_options, :rerender_on, :init_on, :rerender_delay, :matestack_context].include? key }
           raise "isolated components can only take params in a public_options hash, which will be exposed to the client side in order to perform an async request with these params."
         end
         if args.any? { |arg| arg[:init_on].present? } && @matestack_skip_defer == true
           skip_deferred_child_response = true
         end
       end
 
-      if self.class < Matestack::Ui::Core::Isolate::Isolate
+      if self.class < Matestack::Ui::Core::Isolated::Isolated
         parent_context_included_config = @current_parent_context.get_included_config || {}
         parent_context_included_config.merge!({ isolated_parent_class: self.class.name })
         args_with_context = add_context_to_options(args,parent_context_included_config)
diff --git a/app/concepts/matestack/ui/core/isolated/children_wrapper.haml b/app/concepts/matestack/ui/core/isolated/children_wrapper.haml
diff --git a/app/concepts/matestack/ui/core/isolated/isolated.haml b/app/concepts/matestack/ui/core/isolated/isolated.haml
diff --git a/app/concepts/matestack/ui/core/isolated/isolated.js b/app/concepts/matestack/ui/core/isolated/isolated.js
@@ -71,21 +71,15 @@ const componentDef = {
   },
   mounted: function (){
     const self = this
-    console.log('mounted isolated component')
     if(this.componentConfig["init_on"] === undefined || this.componentConfig["init_on"] === null){
-      console.log('Its me')
       if(self.componentConfig["defer"] == true || Number.isInteger(self.componentConfig["defer"])){
-        console.log('I should render deferred')
         if(!isNaN(self.componentConfig["defer"])){
           self.startDefer()
         }
         else{
           self.renderIsolatedContent();
         }
       }
-      else {
-        console.log('I should NOT render deferred')
-      }
     }else{
       if(self.componentConfig["defer"] != undefined){
         if(!isNaN(self.componentConfig["defer"])){
diff --git a/app/concepts/matestack/ui/core/isolated/isolated.rb b/app/concepts/matestack/ui/core/isolated/isolated.rb
@@ -1,5 +1,5 @@
-module Matestack::Ui::Core::Isolate
-  class Isolate < Matestack::Ui::Core::Component::Dynamic
+module Matestack::Ui::Core::Isolated
+  class Isolated < Matestack::Ui::Core::Component::Dynamic
     vue_js_component_name "matestack-ui-core-isolate"
 
     def initialize(*args)
@@ -11,9 +11,9 @@ def public_options
       @public_options ||= {}
     end
 
-    def params
-      context[:params] ||= {}
-    end
+    # def params
+    #   context[:params] || matestack_context[:params]
+    # end
 
     def setup
       @component_config[:component_class] = self.class.name
@@ -35,7 +35,7 @@ def render_content
 
     # only render vuejs component wrapper on show
     def show
-      render :isolate
+      render :isolated
     end
 
     # this method gets called when the isolate vuejs component requests isolated content
diff --git a/app/concepts/matestack/ui/core/js/core.js b/app/concepts/matestack/ui/core/js/core.js
@@ -16,7 +16,7 @@ import onclick from '../onclick/onclick'
 import collectionContent from '../collection/content/content'
 import collectionFilter from '../collection/filter/filter'
 import collectionOrder from '../collection/order/order'
-import isolate from '../isolate/isolate'
+import isolate from '../isolated/isolated'
 
 let matestackUiApp = undefined
 
diff --git a/app/helpers/matestack/ui/core/application_helper.rb b/app/helpers/matestack/ui/core/application_helper.rb
@@ -44,13 +44,11 @@ def render(*args)
                   (matestack_arg < Matestack::Ui::Page)
             Rendering::MainRenderer.render(self, matestack_arg, options)
           else
-            # if called from a controller and params contains a component key render without layout
-            # else it was called from within an app/page and should render normally
-            # if self.is_a?(ActionController::Base) && params&.dig(:component_key)
-            #   super layout: false
-            # else
+            if params[:component_class].present? && !((options = args.first).is_a?(Hash) && options[:html].present?)
+              Rendering::MainRenderer.render(self, Matestack::Ui::Page, {})
+            else
               super
-            # end
+            end
           end
         end
 
diff --git a/app/lib/matestack/ui/core/rendering/main_renderer.rb b/app/lib/matestack/ui/core/rendering/main_renderer.rb
@@ -153,7 +153,7 @@ def resolve_component(name)
 
   def resolve_isolated_component(name)
     constant = const_get(name)
-    if constant < Matestack::Ui::Core::Isolate::Isolate
+    if constant < Matestack::Ui::Core::Isolated::Isolated
       constant
     else
       nil
diff --git a/app/lib/matestack/ui/isolated_component.rb b/app/lib/matestack/ui/isolated_component.rb
@@ -1 +1 @@
-Matestack::Ui::IsolatedComponent = Matestack::Ui::Core::Isolate::Isolate
+Matestack::Ui::IsolatedComponent = Matestack::Ui::Core::Isolated::Isolated
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -72,6 +72,17 @@ services:
     volumes:
       - test-data-volume:/var/lib/postgresql/data
 
+  postgres_dummy:
+    image: postgres
+    expose:
+      - 5432
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: dummy
+    volumes:
+      - test-data-volume:/var/lib/postgresql/data
+
 volumes:
   test-data-volume:
   dummy-data-volume:
diff --git a/docs/guides/essential/00_introduction.md b/docs/guides/essential/00_introduction.md
@@ -0,0 +1,37 @@
+# Getting Started with Matestack
+
+## Guide Assumptions
+
+* Required knowledge etc
+
+## What is Matestack?
+
+* Ruby Gem for easier development...
+* Steal from home page ;P
+
+### Apps
+
+* Konzept von Apps erklären
+* Allgemeiner Wrapper mit immer darzustellenden Content
+* Gefühl einer App/SinglePageApplication erzeugen ohne den Entwicklungsaufwand
+* Eine Webanwendung kann aus mehreren Apps bestehen, gliedern Bereiche der Anwendung
+
+### Pages
+
+* Pages sind wechselnder Content in einer App, was üblicherweise neue Seitenaufrufe sind, sind in Matestack Aufrufe von Pages
+* Pages werden in App gerendert und App verändert nicht ihren Zustand, wird nicht neu gerendert
+
+### Core Components
+
+* Core Components teilen sich in zwei Gruppen
+* **Components**
+  * Um UIs vollständig in Ruby zu schreiben existieren für fast alle HTML5 Tags entsprechende Core Components
+  * Verwendung einfach und fasst immer gleich, für Details in die API Doku der jeweiligen Komponente gucken
+* **Vue Components**
+  * Vue Components sind komplexere Komponenten, welche Funktionalitäten abdecken für die meist Javascript benötigt wird
+  * Ermöglichen Frontend Features in Ruby Backend Code zu schreiben
+
+### Components
+
+* Selber erstellbare Komponenten um UIs in kleinere Teile aufzubrechen 
+* Sind wiederverwendbar, bedeutet UI Parts können an verschiedensten Stellen erneut verwendet werden 
diff --git a/docs/guides/essential/01_setup.md b/docs/guides/essential/01_setup.md
@@ -4,15 +4,13 @@ Welcome to the first part of the 10-step-guide of setting up a working Rails CRU
 ## Introduction
 In this guide, we will
 - create a new Rails application
-- change it to use `postgresql` and `matestack-ui-core`
+- install `matestack-ui-core`
 - add a simple matestack app and two pages
-- deploy the application to Heroku
 
 ## Prerequisites
 To follow along, make sure you have successfully installed
 - Ruby (Version > 2.6, [view installation details](https://www.ruby-lang.org))
 - RubyOnRails (Version >6.0, [view installation details](https://rubyonrails.org/))
-- Heroku CLI ([view installation details](https://devcenter.heroku.com/articles/getting-started-with-ruby#set-up))
 - Postgresql ([view installation details](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup))
 
 <details>
@@ -30,7 +28,7 @@ The contents of this article are heavily inspired by [Getting Started on Heroku
 In the terminal, create a new Rails app by running
 
 ```sh
-rails new matestack-demo-application --database=postgresql
+rails new matestack-demo-application
 ```
 
 and switch into the newly created project via
@@ -51,48 +49,13 @@ To make sure things work as expected, you can run
 rails s
 ```
 
-to start the application - visiting [localhost:3000](http://localhost:3000/) now should reveal the canonical **Yay! You're on Rails!** screen!
-
-## Adding Postgres and MatestackUiCore
-In the Gemfile, replace the line starting with `gem 'sqlite3'` with `gem 'pg'`.
-Make sure to run `bundle install` afterwards and replace the contents of `config/database.yml` with
-
-```yaml
-default: &default
-  adapter: postgresql
-  encoding: unicode
-  # For details on connection pooling, see Rails configuration guide
-  # https://guides.rubyonrails.org/configuring.html#database-pooling
-  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
-
-development:
-  <<: *default
-  database: myapp_development
-
-test:
-  <<: *default
-  database: myapp_test
-
-production:
-  <<: *default
-  database: myapp_production
-  username: myapp
-  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
-```
-
-To install `matestack-ui-core`, add 
+to start the application. Now visit [localhost:3000](http://localhost:3000/) and you should see the canonical **Yay! You're on Rails!** screen!
 
-```ruby
-gem 'matestack-ui-core'
-```
+## Install Matestack
 
-to your Gemfile and run 
-
-```sh
-bundle install
-```
+To install matestack, run `gem install matestack-ui-core` or add `gem 'matestack-ui-core'` to your Gemfile and run `bundle install`.
 
-For a complete setup with Webpacker, you also need to run `yarn add https://github.com/matestack/matestack-ui-core#v0.7.6` followed by `yarn install`.
+For a complete setup with Webpacker, you also need to run `yarn add https://github.com/matestack/matestack-ui-core#v1.0.0` followed by `yarn install`.
 
 Then, add
 
@@ -108,15 +71,15 @@ bin/webpack
 
 to compile your JavaScript code.
 
-In order to complete the `matestack-ui-core` setup, change your `app/controllers/application_controller.rb` to look like this
+In order to use matestack complete the setup by including the `Matestack::Ui::Core::ApplicationHelper` in your `ApplicationController`. Your `app/controllers/application_controller.rb` should look like this:
 
 ```ruby
 class ApplicationController < ActionController::Base
   include Matestack::Ui::Core::ApplicationHelper
 end
 ```
 
-and the `app/views/layouts/application.html.erb` to look like this:
+And add an element with the id `matestack_ui` to your layout, by changing your `app/views/layouts/application.html.erb`. It should look like this:
 
 ```html
 <!DOCTYPE html>
@@ -138,7 +101,7 @@ and the `app/views/layouts/application.html.erb` to look like this:
 </html>
 ```
 
-Background: You now can use `matestack` helpers in your controller actions, and your `matestack` apps (and the corresponding pages) get rendered into your application layout!
+By including the `Matestack::Ui::Core::ApplicationHelper` and defining a div with the `matestack_ui` id you can now use matestacks render method in your controller actions. Based on the id matestack apps and pages can be rendered and pages can be replaced without a full reload of the browser page.
 
 ## Add a demo page
 Within your `app` directory, create a directory called `matestack` - this is where `matestack` **apps**, **pages** and, later on, **components**, will live.
diff --git a/docs/guides/essential/11_heroku_deployment.md b/docs/guides/essential/11_heroku_deployment.md
@@ -0,0 +1,39 @@
+# Heroku Deployment with Postgres
+
+## Introduction
+In this guide, we will
+- install and use PostgreSQL instead of SQLite3
+- deploy our application to heroku
+
+## Prerequisites
+- Heroku CLI ([view installation details](https://devcenter.heroku.com/articles/getting-started-with-ruby#set-up))
+- Postgresql ([view installation details](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup))
+
+## Adding Postgres
+
+In the Gemfile, replace the line starting with `gem 'sqlite3'` with `gem 'pg'`.
+
+Make sure to run `bundle install` afterwards and replace the contents of `config/database.yml` with
+
+```yaml
+default: &default
+  adapter: postgresql
+  encoding: unicode
+  # For details on connection pooling, see Rails configuration guide
+  # https://guides.rubyonrails.org/configuring.html#database-pooling
+  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+
+development:
+  <<: *default
+  database: myapp_development
+
+test:
+  <<: *default
+  database: myapp_test
+
+production:
+  <<: *default
+  database: myapp_production
+  username: myapp
+  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
+```
diff --git a/lib/matestack/ui/core/components.rb b/lib/matestack/ui/core/components.rb
@@ -85,7 +85,7 @@ def self.require_core_component(name)
   require_core_component "img"
   require_core_component "input"
   require_core_component "ins"
-  require_core_component "isolate"
+  require_core_component "isolated"
   require_core_component "kbd"
   require_core_component "label"
   require_core_component "legend"
diff --git a/spec/dummy/app/controllers/legacy_views/pages_controller.rb b/spec/dummy/app/controllers/legacy_views/pages_controller.rb
@@ -45,6 +45,10 @@ def form_custom_component
   def onclick_custom_component
   end
 
+  def isolated_custom_component
+    render 'isolated_custom_component'
+  end
+
   def success
     render json: params.to_unsafe_h, status: :ok
   end
diff --git a/spec/dummy/app/matestack/components/legacy_views/pages/isolated.rb b/spec/dummy/app/matestack/components/legacy_views/pages/isolated.rb
@@ -0,0 +1,17 @@
+class Components::LegacyViews::Pages::Isolated < Matestack::Ui::IsolatedComponent
+
+  def response
+    div class: 'my-isolated' do
+      plain DateTime.now.strftime('%Q')
+    end
+    hr
+    async rerender_on: 'async_update_time', id: 'foobar' do
+      paragraph id: 'async-time', text: DateTime.now.strftime('%Q')
+    end
+  end
+
+  def authorized?
+    true
+  end
+
+end
diff --git a/spec/dummy/app/matestack/components/registry.rb b/spec/dummy/app/matestack/components/registry.rb
@@ -11,6 +11,7 @@ module Components::Registry
     legacy_views_pages_collection: Components::LegacyViews::Pages::Collection,
     legacy_views_pages_form: Components::LegacyViews::Pages::Form,
     legacy_views_pages_onclick: Components::LegacyViews::Pages::Onclick,
+    legacy_views_pages_isolated: Components::LegacyViews::Pages::Isolated,
   )
 
 end
diff --git a/spec/dummy/app/views/legacy_views/pages/isolated_custom_component.html.erb b/spec/dummy/app/views/legacy_views/pages/isolated_custom_component.html.erb
@@ -0,0 +1,4 @@
+<h1>Isolated Custom Component</h1>
+<%=
+  matestack_component(:legacy_views_pages_isolated, rerender_on: 'update_time' )
+%>
diff --git a/spec/dummy/config/routes.rb b/spec/dummy/config/routes.rb
@@ -54,6 +54,7 @@
     get 'form_inline', to: 'pages#form_inline'
     get 'form_custom_component', to: 'pages#form_custom_component'
     get 'onclick_custom_component', to: 'pages#onclick_custom_component'
+    get 'isolated_custom_component', to: 'pages#isolated_custom_component'
     post 'success', to: 'pages#success'
     post 'failure', to: 'pages#failure'
     post 'create', to: 'pages#create'
diff --git a/spec/test/components/dynamic/async/rerender_spec.rb b/spec/test/components/dynamic/async/rerender_spec.rb
@@ -256,12 +256,10 @@ def response
         expect(page).to have_content("#{item} -", count: 1)
       end
       initial_content = (0..5).map { |item| page.find("#my-div-#{item}").text }
-      save_screenshot
   
       # rerender first list element asynchronously, others should not change
       page.execute_script('MatestackUiCore.matestackEventHub.$emit("my_event_0")')
       expect(page).not_to have_content(initial_content[0])
-      save_screenshot
       initial_content[0] = page.find("#my-div-0").text
       (0..5).each do |item| 
         expect(page).to have_content("#{item} -", count: 1)
diff --git a/spec/test/components/dynamic/isolated/defer_spec.rb b/spec/test/components/dynamic/isolated/defer_spec.rb
diff --git a/spec/test/components/dynamic/isolated/isolated_spec.rb b/spec/test/components/dynamic/isolated/isolated_spec.rb
diff --git a/spec/test/components/legacy_views/isolated_spec.rb b/spec/test/components/legacy_views/isolated_spec.rb
diff --git a/vendor/assets/javascripts/dist/matestack-ui-core.js b/vendor/assets/javascripts/dist/matestack-ui-core.js
diff --git a/vendor/assets/javascripts/dist/matestack-ui-core.js.map b/vendor/assets/javascripts/dist/matestack-ui-core.js.map

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-Matestack::Ui::IsolatedComponent = Matestack::Ui::Core::Isolate::Isolate`
	`1`	`+Matestack::Ui::IsolatedComponent = Matestack::Ui::Core::Isolated::Isolated`