glimmer-dsl-web 0.0.10 → 0.0.11

data/VERSION

@@ -1 +1 @@
-0.0.10
+0.0.11

data/glimmer-dsl-web.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.0.10 ruby lib
+# stub: glimmer-dsl-web 0.0.11 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.10".freeze
+  s.version = "0.0.11".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2024-01-05"
+  s.date = "2024-01-06"
   s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) - Enables frontend GUI development with Ruby by adopting a DSL that follows web-like HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development. This library relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -37,7 +37,9 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
+    "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
     "lib/glimmer/config/opal_logger.rb",
     "lib/glimmer/data_binding/element_binding.rb",
@@ -49,6 +51,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/element_expression.rb",
     "lib/glimmer/dsl/web/general_element_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
+    "lib/glimmer/dsl/web/observe_expression.rb",
     "lib/glimmer/dsl/web/p_expression.rb",
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/select_expression.rb",
@@ -74,7 +77,7 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
   s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
   s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.0".freeze])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.4.6".freeze])
+  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.0".freeze])
   s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
   s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0".freeze])
   s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0".freeze, "< 14.0.0".freeze])

data/lib/glimmer/dsl/web/component_expression.rb

@@ -21,8 +21,9 @@ module Glimmer
           if block.source_location && (block.source_location == parent.content&.__getobj__&.source_location)
             parent.content.call(parent) unless parent.content.called?
           else
-            super
+            super(parent, keyword, *args, &block)
           end
+          parent.post_add_content
         end
       end
     end

data/lib/glimmer/dsl/web/dsl.rb

@@ -1,3 +1,24 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# 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:
+#
+# 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.
+
 require 'glimmer/dsl/engine'
 require 'glimmer/dsl/web/element_expression'
 require 'glimmer/dsl/web/listener_expression'
@@ -9,6 +30,7 @@ require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'
 require 'glimmer/dsl/web/shine_data_binding_expression'
 require 'glimmer/dsl/web/component_expression'
+require 'glimmer/dsl/web/observe_expression'
 
 module Glimmer
   module DSL

data/lib/glimmer/dsl/web/observe_expression.rb

@@ -0,0 +1,42 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# 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:
+#
+# 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.
+
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/dsl/observe_expression'
+require 'glimmer/web/component'
+
+module Glimmer
+  module DSL
+    module SWT
+      class ObserveExpression < StaticExpression
+        include TopLevelExpression
+        include Glimmer::DSL::ObserveExpression
+
+        def interpret(parent, keyword, *args, &block)
+          observer_registration = super(parent, keyword, *args, &block)
+          Glimmer::Web::Component.interpretation_stack.last&.observer_registrations&.push(observer_registration)
+          observer_registration
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/helpers/glimmer_helper.rb

@@ -15,13 +15,11 @@ module GlimmerHelper
     component_args_json = JSON.dump(component_args)
     opal_script = <<~Opal
       require 'glimmer-dsl-web'
-      Document.ready? do
-        component_args_json = '#{component_args_json}'
-        component_args = JSON.parse(component_args_json)
-        component_args << {} if !component_args.last.is_a?(Hash)
-        component_args.last[:parent] = "##{component_id}"
-        #{component_class_name}.render(*component_args)
-      end
+      component_args_json = '#{component_args_json}'
+      component_args = JSON.parse(component_args_json)
+      component_args << {} if !component_args.last.is_a?(Hash)
+      component_args.last[:parent] = "##{component_id}"
+      #{component_class_name}.render(*component_args)
     Opal
     content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"]) do
       content_tag(:div, '', id: component_id, class: ['glimmer_component', component_file]) +

data/lib/glimmer/web/component.rb

@@ -176,6 +176,10 @@ module Glimmer
         def reset_component_namespaces
           @component_namespaces = Set[Object, Glimmer::Web]
         end
+        
+        def interpretation_stack
+          @interpretation_stack ||= []
+        end
       end
       # <- end of class methods
       
@@ -184,6 +188,7 @@ module Glimmer
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
+        Component.interpretation_stack.push(self)
         @parent = parent
         options = args.delete_at(-1) if args.is_a?(Array) && args.last.is_a?(Hash)
         if args.is_a?(Hash)
@@ -203,6 +208,14 @@ module Glimmer
         @parent ||= @markup_root.parent
         raise Glimmer::Error, 'Invalid Glimmer web component for having an empty markup! Please fill markup block!' if @markup_root.nil?
         execute_hooks('after_render')
+        
+        # TODO adapt for web
+        observer_registration_cleanup_listener = proc do
+          observer_registrations.compact.each(&:deregister)
+          observer_registrations.clear
+        end
+        @markup_root.handle_observation_request('on_remove', observer_registration_cleanup_listener)
+        post_add_content if content.nil?
       end
       
       # Subclasses may override to perform post initialization work on an added child
@@ -210,6 +223,15 @@ module Glimmer
         # No Op by default
       end
 
+      def post_add_content
+        Component.interpretation_stack.pop
+      end
+      
+      # This stores observe keyword registrations of model/attribute observers
+      def observer_registrations
+        @observer_registrations ||= []
+      end
+
       def can_handle_observation_request?(observation_request)
         observation_request = observation_request.to_s
         result = false

data/lib/glimmer/web/element_proxy.rb

@@ -139,11 +139,14 @@ module Glimmer
         @children.dup.each do |child|
           child.remove
         end
+        on_remove_listeners = listeners_for('on_remove').dup
         remove_all_listeners
         dom_element.remove
         parent&.post_remove_child(self)
         @removed = true
-#         listeners_for('widget_removed').each {|listener| listener.call(Event.new(widget: self))}
+        on_remove_listeners.each do |listener|
+          listener.original_event_listener.call(EventProxy.new(listener: listener))
+        end
       end
       
       def remove_all_listeners
@@ -217,10 +220,12 @@ module Glimmer
         if parent_selector
           Document.find(parent_selector)
         else
-          # TODO consider moving this to initializer
           options[:parent] ||= 'body'
           the_element = Document.find(options[:parent])
-          the_element = Document.find('body') if the_element.length == 0
+          if the_element.length == 0
+            options[:parent] = 'body'
+            the_element = Document.find('body')
+          end
           the_element
         end
       end
@@ -433,22 +438,12 @@ module Glimmer
       end
       
       def handle_observation_request(keyword, original_event_listener)
-#         case keyword
-#         when 'on_widget_removed'
-#           listeners_for(keyword.sub(/^on_/, '')) << original_event_listener.to_proc
-#         else
-          handle_javascript_observation_request(keyword, original_event_listener)
-#         end
-      end
-      
-      def handle_javascript_observation_request(keyword, original_event_listener)
         listener = ListenerProxy.new(
           element: self,
           selector: selector,
           dom_element: dom_element,
           event_attribute: keyword,
-          listener: original_event_listener,
-          original_event_listener: original_event_listener
+          original_event_listener: original_event_listener,
         )
         listener.register
         listeners_for(keyword) << listener

data/lib/glimmer/web/event_proxy.rb

@@ -24,9 +24,11 @@ module Glimmer
     class EventProxy
       attr_reader :js_event, :listener
 
-      def initialize(js_event:, listener:)
-        @js_event = js_event
+      # Instantiates EventProxy
+      # When js_event is nil, it is a custom event
+      def initialize(listener:, js_event: nil)
         @listener = listener
+        @js_event = js_event
       end
       
       def element = listener.element
@@ -34,6 +36,7 @@ module Glimmer
       def event_attribute = listener.event_attribute
       
       def original_event
+        return if js_event.nil?
         Native(`#{js_event.to_n}.originalEvent`)
       end
       
@@ -41,14 +44,14 @@ module Glimmer
         property_name = method_name.to_s.camelcase
         super(method_name, include_private) ||
           js_event.respond_to?(method_name, include_private) ||
-          `#{property_name} in #{original_event.to_n}`
+          (original_event && `#{property_name} in #{original_event.to_n}`)
       end
       
       def method_missing(method_name, *args, &block)
         property_name = method_name.to_s.camelcase
         if js_event.respond_to?(method_name, true)
           js_event.send(method_name, *args, &block)
-        elsif `#{property_name} in #{original_event.to_n}`
+        elsif (original_event && `#{property_name} in #{original_event.to_n}`)
           original_event[property_name]
         else
           super(method_name, *args, &block)

data/lib/glimmer/web/listener_proxy.rb

@@ -24,33 +24,34 @@ require 'glimmer/web/event_proxy'
 module Glimmer
   module Web
     class ListenerProxy
-      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :listener, :js_listener, :original_event_listener
+      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :js_listener, :original_event_listener
 
-      def initialize(element:, event_attribute:, dom_element:, selector:, listener:)
+      def initialize(element:, event_attribute:, dom_element:, selector:, original_event_listener:)
         @element = element
         @event_attribute = event_attribute
-        @event_name = event_attribute.sub(/^on/, '')
+        @event_name = event_attribute.sub(/^on_/, '').sub(/^on/, '')
         @dom_element = dom_element
         @selector = selector
-        @listener = listener
-        @js_listener = lambda do |js_event|
-          event = EventProxy.new(js_event: js_event, listener: self)
-          result = listener.call(event)
-          result = true if result.nil?
-          result
+        if !event_attribute.start_with?('on_') # custom event
+          @js_listener = lambda do |js_event|
+            event = EventProxy.new(js_event: js_event, listener: self)
+            result = original_event_listener.call(event)
+            result = true if result.nil?
+            result
+          end
         end
         @original_event_listener = original_event_listener
       end
       
       def register
-        @dom_element.on(@event_name, &@js_listener)
+        @dom_element.on(@event_name, &@js_listener) unless @js_listener.nil?
       end
       alias observe register
       alias reregister register
       
       def unregister
         # TODO contribute fix to opal to allow passing observer with & to off with selector not specified as nil
-        @dom_element.off(@event_name, @js_listener)
+        @dom_element.off(@event_name, @js_listener) unless @js_listener.nil?
         @element.listeners_for(@event_attribute).delete(self)
       end
       alias unobserve unregister

data/lib/glimmer-dsl-web/samples/hello/hello_observer.rb

@@ -0,0 +1,88 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# 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:
+#
+# 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.
+
+require 'glimmer-dsl-web'
+
+class NumberHolder
+  attr_accessor :number
+  
+  def initialize
+    self.number = 50
+  end
+end
+
+class HelloObserver
+  include Glimmer::Web::Component
+  
+  before_render do
+    @number_holder = NumberHolder.new
+  end
+  
+  after_render do
+    # observe Model attribute @number_holder.number for changes and update View
+    observe(@number_holder, :number) do
+      number_string = @number_holder.number.to_s
+      @number_input.value = number_string unless @number_input.value == number_string
+      @range_input.value = number_string unless @range_input.value == number_string
+    end
+    # Bidirectional Data-Binding does the same thing automatically
+    # Just disable the observe block above as well as the oninput listeners below
+    # and enable the `value <=> [@number_holder, :number]` lines to try the data-binding version
+    # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+  end
+  
+  markup {
+    div {
+      div {
+        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+          # oninput listener updates Model attribute @number_holder.number
+          oninput do
+            @number_holder.number = @number_input.value.to_i
+          end
+          
+          # Bidirectional Data-Binding simplifies the implementation significantly
+          # by enabling the following line and disabling oninput listeners as well
+          # as the after_body observe block observer
+          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+#           value <=> [@number_holder, :number]
+        }
+      }
+      div {
+        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+          # oninput listener updates Model attribute @number_holder.number
+          oninput do
+            @number_holder.number = @range_input.value.to_i
+          end
+          
+          # Bidirectional Data-Binding simplifies the implementation significantly
+          # by enabling the following line and disabling oninput listeners as well
+          # as the after_body observe block observer
+          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+#           value <=> [@number_holder, :number]
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloObserver.render
+end

data/lib/glimmer-dsl-web/samples/regular/button_counter.rb

@@ -0,0 +1,36 @@
+require 'glimmer-dsl-web'
+
+class Counter
+  attr_accessor :count
+
+  def initialize
+    self.count = 0
+  end
+end
+
+class ButtonCounter
+  include Glimmer::Web::Component
+  
+  before_render do
+    @counter = Counter.new
+  end
+  
+  markup {
+    div {
+      button {
+        # Unidirectional Data-Binding indicating that on every change to @counter.count, the value
+        # is read and converted to "Click To Increment: #{value}  ", and then automatically
+        # copied to button innerText (content) to display to the user
+        inner_text <= [@counter, :count,
+                        on_read: ->(value) { "Click To Increment: #{value}  " }
+                      ]
+        
+        onclick {
+          @counter.count += 1
+        }
+      }
+    }
+  }
+end
+
+ButtonCounter.render

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.10
+  version: 0.0.11
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-05 00:00:00.000000000 Z
+date: 2024-01-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -100,14 +100,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.4.6
+        version: 0.5.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.4.6
+        version: 0.5.0
 - !ruby/object:Gem::Dependency
   name: to_collection
   requirement: !ruby/object:Gem::Requirement
@@ -259,7 +259,9 @@ files:
 - lib/glimmer-dsl-web/samples/hello/hello_form.rb
 - lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb
 - lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb
+- lib/glimmer-dsl-web/samples/hello/hello_observer.rb
 - lib/glimmer-dsl-web/samples/hello/hello_world.rb
+- lib/glimmer-dsl-web/samples/regular/button_counter.rb
 - lib/glimmer-dsl-web/vendor/jquery.js
 - lib/glimmer/config/opal_logger.rb
 - lib/glimmer/data_binding/element_binding.rb
@@ -271,6 +273,7 @@ files:
 - lib/glimmer/dsl/web/element_expression.rb
 - lib/glimmer/dsl/web/general_element_expression.rb
 - lib/glimmer/dsl/web/listener_expression.rb
+- lib/glimmer/dsl/web/observe_expression.rb
 - lib/glimmer/dsl/web/p_expression.rb
 - lib/glimmer/dsl/web/property_expression.rb
 - lib/glimmer/dsl/web/select_expression.rb