glimmer-dsl-web 0.0.3 → 0.0.5

data/VERSION

@@ -1 +1 @@
-0.0.3
+0.0.5

data/glimmer-dsl-web.gemspec

@@ -2,17 +2,17 @@
 # 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.3 ruby lib
+# stub: glimmer-dsl-web 0.0.5 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.3".freeze
+  s.version = "0.0.5".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 = "2023-12-28"
-  s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI 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.date = "2023-12-30"
+  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 = [
     "CHANGELOG.md",
@@ -31,24 +31,27 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/ext/date.rb",
     "lib/glimmer-dsl-web/ext/exception.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_button.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
     "lib/glimmer/config/opal_logger.rb",
     "lib/glimmer/data_binding/element_binding.rb",
-    "lib/glimmer/data_binding/observable_element.rb",
     "lib/glimmer/dsl/web/dsl.rb",
     "lib/glimmer/dsl/web/element_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
+    "lib/glimmer/dsl/web/p_expression.rb",
+    "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
     "lib/glimmer/web/element_proxy.rb",
+    "lib/glimmer/web/event_proxy.rb",
     "lib/glimmer/web/listener_proxy.rb",
     "lib/glimmer/web/property_owner.rb"
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
   s.licenses = ["MIT".freeze]
   s.rubygems_version = "3.5.3".freeze
-  s.summary = "Glimmer DSL for Web".freeze
+  s.summary = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library)".freeze
 
   s.specification_version = 4
 

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

@@ -2,6 +2,8 @@ require 'glimmer/dsl/engine'
 # Dir[File.expand_path('../*_expression.rb', __FILE__)].each {|f| require f}
 require 'glimmer/dsl/web/element_expression'
 require 'glimmer/dsl/web/listener_expression'
+require 'glimmer/dsl/web/property_expression'
+require 'glimmer/dsl/web/p_expression'
 
 module Glimmer
   module DSL
@@ -10,7 +12,7 @@ module Glimmer
 #        %w[
 #          listener
 #          data_binding
-#          attribute
+#          property
 #          shine_data_binding
 #          element
 #        ]
@@ -18,6 +20,7 @@ module Glimmer
        Web,
        %w[
          listener
+         property
          element
        ]
       )

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

@@ -11,7 +11,7 @@ module Glimmer
         def can_interpret?(parent, keyword, *args, &block)
           # TODO automatically pass parent option as element if not passed instead of rejecting elements without a paraent nor root
           # TODO raise a proper error if root is an element that is not found (maybe do this in model)
-          !keyword.to_s.start_with?('on_')
+          !keyword.to_s.start_with?('on')
         end
 
         def interpret(parent, keyword, *args, &block)

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

@@ -0,0 +1,31 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/parent_expression'
+
+require 'glimmer/web/element_proxy'
+
+module Glimmer
+  module DSL
+    module Web
+      class PExpression < StaticExpression
+        include ParentExpression
+
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Web::ElementProxy.for(keyword, parent, args, block)
+        end
+        
+        def add_content(parent, keyword, *args, &block)
+          if parent.rendered? || parent.skip_content_on_render_blocks?
+            return_value = super(parent, keyword, *args, &block)
+            if return_value.is_a?(String) && parent.dom_element.text.to_s.empty?
+              parent.add_text_content(return_value)
+            end
+            parent.post_add_content
+            return_value
+          else
+            parent.add_content_on_render(&block)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+require 'glimmer/dsl/expression'
+
+require 'glimmer/web/element_proxy'
+
+module Glimmer
+  module DSL
+    module Web
+      class PropertyExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          parent.is_a?(Glimmer::Web::ElementProxy) and
+            (!args.empty?) and
+            parent.respond_to?("#{keyword}=") and
+            block.nil?
+        end
+
+        def interpret(parent, keyword, *args, &block)
+          parent.send("#{keyword}=", *args)
+          args
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/web/element_proxy.rb

@@ -74,7 +74,7 @@ module Glimmer
       
       GLIMMER_ATTRIBUTES = [:parent]
       
-      attr_reader :keyword, :parent, :args, :options, :children, :enabled, :foreground, :background, :focus, :removed?, :rendered
+      attr_reader :keyword, :parent, :args, :options, :children, :enabled, :foreground, :background, :removed?, :rendered
       alias rendered? rendered
       
       def initialize(keyword, parent, args, block)
@@ -95,7 +95,7 @@ module Glimmer
       
       # Executes for the parent of a child that just got removed
       def post_remove_child(child)
-        @children&.delete(child)
+        @children.delete(child)
       end
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
@@ -108,26 +108,19 @@ module Glimmer
       end
       
       def remove
+        @children.dup.each do |child|
+          child.remove
+        end
         remove_all_listeners
         dom_element.remove
         parent&.post_remove_child(self)
-#         children.each(:remove) # TODO enable this safely
         @removed = true
-        listeners_for('widget_removed').each {|listener| listener.call(Event.new(widget: self))}
+#         listeners_for('widget_removed').each {|listener| listener.call(Event.new(widget: self))}
       end
       
       def remove_all_listeners
-        effective_observation_request_to_event_mapping.keys.each do |keyword|
-          effective_observation_request_to_event_mapping[keyword].to_collection.each do |mapping|
-            observation_requests[keyword].to_a.each do |event_listener|
-              event = mapping[:event]
-              event_handler = mapping[:event_handler]
-              event_element_css_selector = mapping[:event_element_css_selector]
-              the_listener_dom_element = event_element_css_selector ? Element[event_element_css_selector] : listener_dom_element
-              the_listener_dom_element.off(event, event_listener)
-              # TODO improve to precisely remove the listeners that were added, no more no less. (or use the event_listener_proxies method instead or in collaboration)
-            end
-          end
+        listeners.each do |event, event_listeners|
+          event_listeners.dup.each(&:unregister)
         end
       end
       
@@ -183,16 +176,6 @@ module Glimmer
         dom_element.css('background-color', background.to_css) unless background.nil?
       end
       
-      def focus=(value)
-        @focus = value
-        dom_element.focus # TODO consider if a delay or async_exec is needed here
-      end
-      
-      def set_focus
-        self.focus = true
-      end
-      alias setFocus set_focus
-      
       def parent_selector
         @parent&.selector
       end
@@ -233,7 +216,7 @@ module Glimmer
           end
         end
       end
-      alias redraw render
+      alias rerender render
         
       def attach(the_parent_dom_element)
         the_parent_dom_element.append(@dom)
@@ -267,7 +250,6 @@ module Glimmer
         # TODO consider passing parent element instead and having table item include a table cell widget only for opal
         @dom = nil
         @dom = dom # TODO unify how to build dom for most widgets based on element, id, and name (class)
-#         @dom = @parent.get_layout.dom(@dom) if @parent.respond_to?(:layout) && @parent.get_layout
         @dom
       end
             
@@ -275,17 +257,6 @@ module Glimmer
         # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
         @dom ||= html {
           send(keyword, html_options) {
-            # TODO consider supporting the idea of dynamic CSS building on close of shell that adds only as much CSS as needed for widgets that were mentioned
-#             style(class: 'common-style') {
-#               style_dom_css
-#             }
-#             [LayoutProxy, WidgetProxy].map(&:descendants).reduce(:+).each do |style_class|
-#               if style_class.constants.include?('STYLE')
-#                 style(class: "#{style_class.name.split(':').last.underscore.gsub('_', '-').sub(/-proxy$/, '')}-style") {
-#                   style_class::STYLE
-#                 }
-#               end
-#             end
             args.first if args.first.is_a?(String)
           }
         }.to_s
@@ -762,7 +733,7 @@ module Glimmer
       def can_handle_observation_request?(keyword)
         # TODO sort this out for Opal
         keyword = keyword.to_s
-        keyword.start_with?('on_')
+        keyword.start_with?('on')
 #         if keyword.start_with?('on_swt_')
 #           constant_name = keyword.sub(/^on_swt_/, '')
 #           SWTProxy.has_constant?(constant_name)
@@ -784,14 +755,15 @@ module Glimmer
       
       def handle_javascript_observation_request(keyword, original_event_listener)
         listener = ListenerProxy.new(
-          element_proxy: self,
+          element: self,
           selector: selector,
           dom_element: dom_element,
-          event: keyword.sub(/^on_/, ''),
+          event_attribute: keyword,
           listener: original_event_listener,
           original_event_listener: original_event_listener
         )
         listener.register
+        listeners_for(keyword) << listener
         listener
 #         return unless effective_observation_request_to_event_mapping.keys.include?(keyword)
 #         event = nil
@@ -845,22 +817,33 @@ module Glimmer
       end
       
       def respond_to_missing?(method_name, include_private = false)
+        # TODO consider doing more correct checking of availability of properties/methods using native `` ticks
+        property_name = property_name_for(method_name)
         super(method_name, include_private) ||
-          (dom_element && dom_element.length > 0 && Native.call(dom_element, '0').respond_to?(method_name, include_private)) ||
+          (dom_element && dom_element.length > 0 && Native.call(dom_element, '0').respond_to?(method_name.to_s.camelcase, include_private)) ||
           dom_element.respond_to?(method_name, include_private) ||
+          (!dom_element.prop(property_name).nil? && !dom_element.prop(property_name).is_a?(Proc)) ||
           method_name.to_s.start_with?('on_')
       end
       
       def method_missing(method_name, *args, &block)
+        # TODO consider doing more correct checking of availability of properties/methods using native `` ticks
+        property_name = property_name_for(method_name)
         if method_name.to_s.start_with?('on_')
           handle_observation_request(method_name, block)
         elsif dom_element.respond_to?(method_name)
           dom_element.send(method_name, *args, &block)
+        elsif !dom_element.prop(property_name).nil? && !dom_element.prop(property_name).is_a?(Proc)
+          if method_name.end_with?('=')
+            dom_element.prop(property_name, *args)
+          else
+            dom_element.prop(property_name)
+          end
         elsif dom_element && dom_element.length > 0
           begin
             js_args = block.nil? ? args : (args + [block])
             Native.call(dom_element, '0').method_missing(method_name.to_s.camelcase, *js_args)
-          rescue Exception
+          rescue Exception => e
             super(method_name, *args, &block)
           end
         else
@@ -868,6 +851,10 @@ module Glimmer
         end
       end
       
+      def property_name_for(method_name)
+        method_name.end_with?('=') ? method_name.to_s[0...-1].camelcase : method_name.to_s.camelcase
+      end
+      
       def swt_widget
         # only added for compatibility/adaptibility with Glimmer DSL for SWT
         self

data/lib/glimmer/web/event_proxy.rb

@@ -0,0 +1,59 @@
+# Copyright (c) 2023 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.
+
+module Glimmer
+  module Web
+    class EventProxy
+      attr_reader :js_event, :listener
+
+      def initialize(js_event:, listener:)
+        @js_event = js_event
+        @listener = listener
+      end
+      
+      def element = listener.element
+      def event_name = listener.event_name
+      def event_attribute = listener.event_attribute
+      
+      def original_event
+        Native(`#{js_event.to_n}.originalEvent`)
+      end
+      
+      def respond_to_missing?(method_name, include_private = false)
+        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}`
+      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}`
+          original_event[property_name]
+        else
+          super(method_name, *args, &block)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/web/listener_proxy.rb

@@ -1,34 +1,58 @@
+# Copyright (c) 2023 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/web/event_proxy'
+
 module Glimmer
   module Web
     class ListenerProxy
-      attr_reader :element_proxy, :event, :dom_element, :selector, :listener, :original_event_listener
+      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :listener, :js_listener, :original_event_listener
 
-      def initialize(element_proxy:, event:, dom_element:, selector:, listener:)
-        @element_proxy = element_proxy
-        @event = event
+      def initialize(element:, event_attribute:, dom_element:, selector:, listener:)
+        @element = element
+        @event_attribute = event_attribute
+        @event_name = event_attribute.sub(/^on/, '')
         @dom_element = dom_element
         @selector = selector
         @listener = listener
-        @js_listener = lambda do |event|
-          event.prevent
-          event.prevent_default
-          event.stop_propagation
-          event.stop_immediate_propagation
+        @js_listener = lambda do |js_event|
           # TODO wrap event with a Ruby Event object before passing to listener
-          listener.call(event)
-          false
+          event = EventProxy.new(js_event: js_event, listener: self)
+          result = listener.call(event)
+          result = true if result.nil?
+          result
         end
         @original_event_listener = original_event_listener
       end
       
       def register
-        @dom_element.on(@event, &@js_listener)
+        @dom_element.on(@event_name, &@js_listener)
       end
       alias observe register
       alias reregister register
       
       def unregister
-        @dom_element.off(@event, &@js_listener)
+        # 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)
+        @element.listeners_for(@event_attribute).delete(self)
       end
       alias unobserve unregister
       alias deregister unregister

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

@@ -25,75 +25,10 @@ include Glimmer
 
 Document.ready? do
   div {
-    h1('Contact Form')
-    form {
-      div(class: 'field-row') {
-        label('Name: ', for: 'name-field')
-        @name_input = input(id: 'name-field', class: 'field', type: 'text', required: true)
-      }
-      div(class: 'field-row') {
-        label('Email: ', for: 'email-field')
-        @email_input = input(id: 'email-field', class: 'field', type: 'email', required: true)
-      }
-      @add_button = button('Add Contact', class: 'submit-button') {
-        on_click do
-          if ([@name_input, @email_input].all? {|input| input.check_validity })
-            @table.content {
-              tr {
-                td { @name_input.value }
-                td { @email_input.value }
-              }
-            }
-            @email_input.value = @name_input.value = ''
-          else
-            error_messages = []
-            error_messages << "Name is not valid! Make sure it is filled." if !@name_input.check_validity
-            error_messages << "Email is not valid! Make sure it is filled and has a valid format." if !@email_input.check_validity
-            $$.alert(error_messages.join("\n"))
-          end
-        end
-      }
-    }
-    h1('Contacts Table')
-    @table = table {
-      tr {
-        th('Name')
-        th('Email')
-      }
-      tr {
-        td('John Doe')
-        td('johndoe@example.com')
-      }
-      tr {
-        td('Jane Doe')
-        td('janedoe@example.com')
-      }
-    }
-    
-    # CSS Styles
-    style {
-      <<~CSS
-        .field-row {
-          margin: 10px 5px;
-        }
-        .field {
-          margin-left: 5px;
-        }
-        .submit-button {
-          display: block;
-          margin: 10px 5px;
-        }
-        table {
-          border:1px solid grey;
-          border-spacing: 0;
-        }
-        table tr td, table tr th {
-          padding: 5px;
-        }
-        table tr:nth-child(even) {
-          background: #ccc;
-        }
-      CSS
+    button('Greet') {
+      onclick do
+        $$.alert('Hello, Button!')
+      end
     }
   }.render
 end

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

@@ -0,0 +1,102 @@
+# Copyright (c) 2023 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'
+
+include Glimmer
+
+Document.ready? do
+  div {
+    h1('Contact Form')
+    
+    form {
+      div {
+        label('Name: ', for: 'name-field')
+        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true)
+      }
+      
+      div {
+        label('Email: ', for: 'email-field')
+        @email_input = input(type: 'email', id: 'email-field', required: true)
+      }
+      
+      div {
+        input(type: 'submit', value: 'Add Contact') {
+          onclick do |event|
+            if ([@name_input, @email_input].all? {|input| input.check_validity })
+              event.prevent_default
+              # re-open table content and add row
+              @table.content {
+                tr {
+                  td { @name_input.value }
+                  td { @email_input.value }
+                }
+              }
+              @email_input.value = @name_input.value = ''
+              @name_input.focus
+            end
+          end
+        }
+      }
+    }
+    
+    h1('Contacts Table')
+    
+    @table = table {
+      tr {
+        th('Name')
+        th('Email')
+      }
+      
+      tr {
+        td('John Doe')
+        td('johndoe@example.com')
+      }
+      
+      tr {
+        td('Jane Doe')
+        td('janedoe@example.com')
+      }
+    }
+    
+    # CSS Styles
+    style {
+      <<~CSS
+        input {
+          margin: 5px;
+        }
+        input[type=submit] {
+          margin: 5px 0;
+        }
+        table {
+          border:1px solid grey;
+          border-spacing: 0;
+        }
+        table tr td, table tr th {
+          padding: 5px;
+        }
+        table tr:nth-child(even) {
+          background: #ccc;
+        }
+      CSS
+    }
+  }.render
+end

data/lib/glimmer-dsl-web.rb

@@ -76,12 +76,7 @@ if RUBY_ENGINE == 'opal'
   require 'glimmer-dsl-xml'
   require 'glimmer-dsl-css'
   
-  # TODO double check if alias native calls below have been added to jQuery-Opal (remove if so)
-  Element.alias_native :replace_with, :replaceWith
-  Element.alias_native :select
-#   Element.alias_native :dialog
-    
-  Glimmer::Config.loop_max_count = 150 # TODO disable
+  Glimmer::Config.loop_max_count = 150 # TODO consider disabling if preferred
   
   original_logger_level = Glimmer::Config.logger.level
   Glimmer::Config.logger = Glimmer::Config::OpalLogger.new(STDOUT)