glimmer-dsl-web 0.0.4 → 0.0.6

data/lib/glimmer/web/listener_proxy.rb

@@ -1,36 +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
         # TODO contribute fix to opal to allow passing observer with & to off with selector not specified as nil
-        @dom_element.off(@event, @js_listener)
-        @element_proxy.listeners_for(@event).delete(self)
+        @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)
-      }
-      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_data_binding.rb

@@ -0,0 +1,166 @@
+# 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'
+
+Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init: true) do
+  STATES = {
+    "AK"=>"Alaska",
+    "AL"=>"Alabama",
+    "AR"=>"Arkansas",
+    "AS"=>"American Samoa",
+    "AZ"=>"Arizona",
+    "CA"=>"California",
+    "CO"=>"Colorado",
+    "CT"=>"Connecticut",
+    "DC"=>"District of Columbia",
+    "DE"=>"Delaware",
+    "FL"=>"Florida",
+    "GA"=>"Georgia",
+    "GU"=>"Guam",
+    "HI"=>"Hawaii",
+    "IA"=>"Iowa",
+    "ID"=>"Idaho",
+    "IL"=>"Illinois",
+    "IN"=>"Indiana",
+    "KS"=>"Kansas",
+    "KY"=>"Kentucky",
+    "LA"=>"Louisiana",
+    "MA"=>"Massachusetts",
+    "MD"=>"Maryland",
+    "ME"=>"Maine",
+    "MI"=>"Michigan",
+    "MN"=>"Minnesota",
+    "MO"=>"Missouri",
+    "MS"=>"Mississippi",
+    "MT"=>"Montana",
+    "NC"=>"North Carolina",
+    "ND"=>"North Dakota",
+    "NE"=>"Nebraska",
+    "NH"=>"New Hampshire",
+    "NJ"=>"New Jersey",
+    "NM"=>"New Mexico",
+    "NV"=>"Nevada",
+    "NY"=>"New York",
+    "OH"=>"Ohio",
+    "OK"=>"Oklahoma",
+    "OR"=>"Oregon",
+    "PA"=>"Pennsylvania",
+    "PR"=>"Puerto Rico",
+    "RI"=>"Rhode Island",
+    "SC"=>"South Carolina",
+    "SD"=>"South Dakota",
+    "TN"=>"Tennessee",
+    "TX"=>"Texas",
+    "UT"=>"Utah",
+    "VA"=>"Virginia",
+    "VI"=>"Virgin Islands",
+    "VT"=>"Vermont",
+    "WA"=>"Washington",
+    "WI"=>"Wisconsin",
+    "WV"=>"West Virginia",
+    "WY"=>"Wyoming"
+  }
+  
+  def state_code
+    STATES.invert[state]
+  end
+  
+  def state_code=(value)
+    self.state = STATES[value]
+  end
+
+  def summary
+    values.map(&:to_s).reject(&:empty?).join(', ')
+  end
+end
+
+@address = Address.new(
+  street: '123 Main St',
+  street2: 'Apartment 3C, 2nd door to the right',
+  city: 'San Diego',
+  state: 'California',
+  zip_code: '91911'
+)
+
+include Glimmer
+
+Document.ready? do
+  div {
+    form(style: 'display: grid; grid-auto-columns: 80px 200px;') { |address_form|
+      label('Street: ', for: 'street-field')
+      input(id: 'street-field') {
+        # Bidirectional Data-Binding with <=> ensures input.value and @address.street
+        # automatically stay in sync when either side changes
+        value <=> [@address, :street]
+      }
+      
+      label('Street 2: ', for: 'street2-field')
+      textarea(id: 'street2-field') {
+        value <=> [@address, :street2]
+      }
+      
+      label('City: ', for: 'city-field')
+      input(id: 'city-field') {
+        value <=> [@address, :city]
+      }
+      
+      label('State: ', for: 'state-field')
+      select(id: 'state-field') {
+        Address::STATES.each do |state_code, state|
+          option(value: state_code) { state }
+        end
+        
+        value <=> [@address, :state_code]
+      }
+      
+      label('Zip Code: ', for: 'zip-code-field')
+      input(id: 'zip-code-field', type: 'number', min: '0', max: '99999') {
+        # Bidirectional Data-Binding with <=> ensures input.value and @address.zip_code
+        # automatically stay in sync when either side changes
+        # on_write option specifies :to_s method to invoke on value before writing to model attribute
+        # to ensure the numeric zip code value is stored as a String
+        value <=> [@address, :zip_code,
+                    on_write: :to_s
+                  ]
+      }
+      
+      style {
+        <<~CSS
+          .#{address_form.element_id} * {
+            margin: 5px;
+          }
+          .#{address_form.element_id} input, .#{address_form.element_id} select {
+            grid-column: 2;
+          }
+        CSS
+      }
+    }
+  
+    div(style: 'margin: 5px') {
+      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes update div.inner_text
+      # as computed by changes to the address member attributes + state_code address custom attribute
+      inner_text <= [@address, :summary,
+                      computed_by: @address.members + ['state_code']
+                    ]
+    }
+  }.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

@@ -48,7 +48,6 @@ if RUBY_ENGINE == 'opal'
   require 'opal-async'
   require 'async/ext'
   require 'to_collection'
-  require 'pure-struct' # TODO double check if the latest Opal implemented everything below already
   require 'glimmer-dsl-web/vendor/jquery'
   require 'opal-jquery'
   require 'opal/jquery/local_storage'
@@ -76,12 +75,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)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.6
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-30 00:00:00.000000000 Z
+date: 2024-01-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -86,26 +86,6 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: 3.0.0
-- !ruby/object:Gem::Dependency
-  name: pure-struct
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.0.2
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 2.0.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.0.2
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 2.0.0
 - !ruby/object:Gem::Dependency
   name: puts_debuggerer
   requirement: !ruby/object:Gem::Requirement
@@ -259,18 +239,26 @@ files:
 - 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_data_binding.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/bind_expression.rb
+- lib/glimmer/dsl/web/data_binding_expression.rb
 - lib/glimmer/dsl/web/dsl.rb
 - 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/p_expression.rb
 - lib/glimmer/dsl/web/property_expression.rb
+- lib/glimmer/dsl/web/select_expression.rb
+- lib/glimmer/dsl/web/shine_data_binding_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
 homepage: http://github.com/AndyObtiva/glimmer-dsl-web

data/lib/glimmer/data_binding/observable_element.rb

@@ -1,14 +0,0 @@
-module Glimmer
-  module DataBinding
-    module ObservableElement
-      def method_missing(method, *args, &block)
-        method_name = method.to_s
-        if method_name.start_with?('on_')
-          handle_observation_request(method_name, block)
-        else
-          super
-        end
-      end
-    end
-  end
-end