better undestanding of vue, walking dom

This commit is contained in:
Torsten 2023-02-07 13:28:22 +02:00
parent feb6815d38
commit ef4a22709a
4 changed files with 43 additions and 19 deletions

View File

@ -1 +1,2 @@
require "vue_r/application"
require "vue_r/mounter"

View File

@ -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

View File

@ -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

View File

@ -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