From ef4a22709a5221aecf1d7ef529d787d524176955 Mon Sep 17 00:00:00 2001 From: Torsten Date: Tue, 7 Feb 2023 13:28:22 +0200 Subject: [PATCH] better undestanding of vue, walking dom --- app/assets/javascript/vue_r.rb | 1 + app/assets/javascript/vue_r/application.rb | 24 ++++++----------- app/assets/javascript/vue_r/mounter.rb | 31 ++++++++++++++++++++++ app/views/kanta/show.html.haml | 6 ++--- 4 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 app/assets/javascript/vue_r/mounter.rb diff --git a/app/assets/javascript/vue_r.rb b/app/assets/javascript/vue_r.rb index 77b2aa1..baf4b4c 100644 --- a/app/assets/javascript/vue_r.rb +++ b/app/assets/javascript/vue_r.rb @@ -1 +1,2 @@ require "vue_r/application" +require "vue_r/mounter" diff --git a/app/assets/javascript/vue_r/application.rb b/app/assets/javascript/vue_r/application.rb index 6eafcd8..98724ce 100644 --- a/app/assets/javascript/vue_r/application.rb +++ b/app/assets/javascript/vue_r/application.rb @@ -5,7 +5,6 @@ module VueR hash.each do |k,v| wrap_attr(k,v) end - wrap_methods @effect = nil @subscribers = {} end @@ -42,6 +41,7 @@ module VueR end def get_subscribers_for(key) + key = key.to_sym unless @subscribers.has_key?(key) @subscribers[key] = [] end @@ -49,25 +49,17 @@ module VueR end def mount(on_class) - puts $document[on_class].inner_html + @mounter = Mounter.new(on_class , self) + @mounter.mount end - def wrap_methods - methods = self.class.methods(false).collect{|name| self.class.method(name)} - methods.select!{|method| method.arity > 0 } - methods.each{|method| wrap_method(method.name)} - end - - def wrap_method(method_name) - clazz = self.class - clazz.alias "#{method_name}_original".to_sym , method_name - clazz.remove_method method_name - clazz.define_method method_name do - @effect = self.class.method(method_name) - self.class.method("#{method_name}_original".to_sym).call + def watch_effect( update_proc ) + effect = Proc.new do + @effect = effect + update_proc.call @effect = nil end - clazz.method(method_name).call + effect.call end end end diff --git a/app/assets/javascript/vue_r/mounter.rb b/app/assets/javascript/vue_r/mounter.rb new file mode 100644 index 0000000..7fadf90 --- /dev/null +++ b/app/assets/javascript/vue_r/mounter.rb @@ -0,0 +1,31 @@ +module VueR + class Mounter + + def initialize( id , app ) + @root = $document[id] + @application = app + end + + def mount + mount_Element(@root) + end + + def mount_Text elem + puts "Text: #{elem.text}" + puts "DYN text" if elem.text.include? "{{" + end + + def mount_Element(elem) + elem.attributes.each do |name , value| + puts "Name: #{name}" + puts "Value: #{value}" + puts "DYN" if name.start_with?("r_") + puts "EVENT" if name.start_with?("e_") + end + elem.children.each do |elem| + base_name = elem.class.to_s.split("::").last + send "mount_#{base_name}" , elem + end + end + end +end diff --git a/app/views/kanta/show.html.haml b/app/views/kanta/show.html.haml index 395161f..01cd2cf 100644 --- a/app/views/kanta/show.html.haml +++ b/app/views/kanta/show.html.haml @@ -2,9 +2,9 @@ .flex.flex-col = @image.attributes - %a.underline{ '@click' => "hi"} - Back - + %a.underline{ e_click: "hi"} + {{Back}} + %div{ r_class: 21 } :opal class Clicker < VueR::Application