glimmer-dsl-web 0.0.8 → 0.0.10

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

@@ -0,0 +1,223 @@
+# 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'
+
+Address = Struct.new(:full_name, :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
+    to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+  end
+end
+
+# AddressForm Glimmer Web Component (View component)
+#
+# Including Glimmer::Web::Component makes this class a View component and automatically
+# generates a new Glimmer GUI DSL keyword that matches the lowercase underscored version
+# of the name of the class. AddressForm generates address_form keyword, which can be used
+# elsewhere in Glimmer GUI DSL code as done inside AddressPage below.
+class AddressForm
+  include Glimmer::Web::Component
+  
+  option :address
+  
+  # Optionally, you can execute code before rendering markup.
+  # This is useful for pre-setup of variables (e.g. Models) that you would use in the markup.
+  #
+  # before_render do
+  # end
+  
+  # Optionally, you can execute code after rendering markup.
+  # This is useful for post-setup of extra Model listeners that would interact with the
+  # markup elements and expect them to be rendered already.
+  #
+  # after_render do
+  # end
+  
+  # markup block provides the content of the
+  markup {
+    div {
+      div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
+        label('Full Name: ', for: 'full-name-field')
+        input(id: 'full-name-field') {
+          value <=> [address, :full_name]
+        }
+        
+        @somelabel = label('Street: ', for: 'street-field')
+        input(id: 'street-field') {
+          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') {
+          value <=> [address, :zip_code,
+                      on_write: :to_s,
+                    ]
+        }
+        
+        style {
+          <<~CSS
+            #{address_div.selector} * {
+              margin: 5px;
+            }
+            #{address_div.selector} input, #{address_div.selector} select {
+              grid-column: 2;
+            }
+          CSS
+        }
+      }
+      
+      div(style: 'margin: 5px') {
+        inner_text <= [address, :summary,
+                        computed_by: address.members + ['state_code'],
+                      ]
+      }
+    }
+  }
+end
+
+# AddressPage Glimmer Web Component (View component)
+#
+# This View component represents the main page being rendered,
+# as done by its `render` class method below
+class AddressPage
+  include Glimmer::Web::Component
+  
+  before_render do
+    @shipping_address = Address.new(
+      full_name: 'Johnny Doe',
+      street: '3922 Park Ave',
+      street2: 'PO BOX 8382',
+      city: 'San Diego',
+      state: 'California',
+      zip_code: '91913',
+    )
+    @billing_address = Address.new(
+      full_name: 'John C Doe',
+      street: '123 Main St',
+      street2: 'Apartment 3C',
+      city: 'San Diego',
+      state: 'California',
+      zip_code: '91911',
+    )
+  end
+  
+  markup {
+    div {
+      h1('Shipping Address')
+      
+      address_form(address: @shipping_address)
+      
+      h1('Billing Address')
+      
+      address_form(address: @billing_address)
+    }
+  }
+end
+
+Document.ready? do
+  # renders a top-level (root) AddressPage component
+  AddressPage.render
+end

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

@@ -87,51 +87,55 @@ end
 
 @user = User.new
 
-div {
+include Glimmer
+
+Document.ready? do
   div {
-    label('Number of addresses: ', for: 'address-count-field')
-    input(id: 'address-count-field', type: 'number', min: 1, max: 3) {
-      value <=> [@user, :address_count]
+    div {
+      label('Number of addresses: ', for: 'address-count-field')
+      input(id: 'address-count-field', type: 'number', min: 1, max: 3) {
+        value <=> [@user, :address_count]
+      }
     }
-  }
-  
-  div {
-    # Content Data-Binding is used to dynamically (re)generate content of div
-    # based on changes to @user.addresses, replacing older content on every change
-    content(@user, :addresses) do
-      @user.addresses.each do |address|
-        div {
-          div(style: 'display: grid; grid-auto-columns: 80px 280px;') { |address_div|
-            [:name, :street, :city, :state, :zip].each do |attribute|
-              label(attribute.to_s.capitalize, for: "#{attribute}-field")
-              input(id: "#{attribute}-field", type: 'text') {
-                value <=> [address, attribute]
-              }
-            end
-            
-            div(style: 'grid-column: 1 / span 2;') {
-              inner_text <= [address, :text]
-            }
-            
-            style {
-              <<~CSS
-                #{address_div.selector} {
-                  margin: 10px 0;
-                }
-                #{address_div.selector} * {
-                  margin: 5px;
-                }
-                #{address_div.selector} label {
-                  grid-column: 1;
+    
+    div {
+      # Content Data-Binding is used to dynamically (re)generate content of div
+      # based on changes to @user.addresses, replacing older content on every change
+      content(@user, :addresses) do
+        @user.addresses.each do |address|
+          div {
+            div(style: 'display: grid; grid-auto-columns: 80px 280px;') { |address_div|
+              [:name, :street, :city, :state, :zip].each do |attribute|
+                label(attribute.to_s.capitalize, for: "#{attribute}-field")
+                input(id: "#{attribute}-field", type: 'text') {
+                  value <=> [address, attribute]
                 }
-                #{address_div.selector} input, #{address_div.selector} select {
-                  grid-column: 2;
-                }
-              CSS
+              end
+              
+              div(style: 'grid-column: 1 / span 2;') {
+                inner_text <= [address, :text]
+              }
+              
+              style {
+                <<~CSS
+                  #{address_div.selector} {
+                    margin: 10px 0;
+                  }
+                  #{address_div.selector} * {
+                    margin: 5px;
+                  }
+                  #{address_div.selector} label {
+                    grid-column: 1;
+                  }
+                  #{address_div.selector} input, #{address_div.selector} select {
+                    grid-column: 2;
+                  }
+                CSS
+              }
             }
           }
-        }
+        end
       end
-    end
-  }
-}.render
+    }
+  }.render
+end

data/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb

@@ -0,0 +1,156 @@
+require 'glimmer-dsl-web'
+
+class AddressForm
+  Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, keyword_init: true) do
+    def state_code
+      STATES.invert[state]
+    end
+    
+    def state_code=(value)
+      self.state = STATES[value]
+    end
+  
+    def summary
+      to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+    end
+  end
+  
+  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"
+  }
+
+  include Glimmer::Web::Component
+  
+  option :full_name
+  option :street
+  option :street2
+  option :city
+  option :state
+  option :zip_code
+  
+  attr_reader :address
+  
+  before_render do
+    @address = Address.new(
+      full_name: full_name,
+      street: street,
+      street2: street2,
+      city: city,
+      state: state,
+      zip_code: zip_code,
+    )
+  end
+  
+  markup {
+    div {
+      div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
+        label('Full Name: ', for: 'full-name-field')
+        input(id: 'full-name-field') {
+          value <=> [address, :full_name]
+        }
+        
+        @somelabel = label('Street: ', for: 'street-field')
+        input(id: 'street-field') {
+          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') {
+          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') {
+          value <=> [address, :zip_code,
+                      on_write: :to_s,
+                    ]
+        }
+        
+        style {
+          <<~CSS
+            #{address_div.selector} * {
+              margin: 5px;
+            }
+            #{address_div.selector} input, #{address_div.selector} select {
+              grid-column: 2;
+            }
+          CSS
+        }
+      }
+      
+      div(style: 'margin: 5px') {
+        inner_text <= [address, :summary,
+                        computed_by: address.members + ['state_code'],
+                      ]
+      }
+    }
+  }
+end

data/lib/glimmer-dsl-web.rb

@@ -30,6 +30,7 @@ if RUBY_ENGINE != 'opal'
   require 'opal-rails'
   require 'opal-async'
   require 'opal-jquery'
+  require 'glimmer/helpers/glimmer_helper'
 else
 #   GLIMMER_DSL_OPAL_MISSING = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib', 'glimmer-dsl-opal', 'missing')
    

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.10
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-03 00:00:00.000000000 Z
+date: 2024-01-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -58,28 +58,28 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.4.1
+        version: 1.8.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.4.1
+        version: 1.8.2
 - !ruby/object:Gem::Dependency
   name: opal-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.0.2
+        version: 2.0.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.0.2
+        version: 2.0.3
 - !ruby/object:Gem::Dependency
   name: opal-async
   requirement: !ruby/object:Gem::Requirement
@@ -253,15 +253,18 @@ 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_component.rb
 - lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.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_glimmer_component_helper/address_form.rb
 - lib/glimmer-dsl-web/samples/hello/hello_input_date_time.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/dsl/web/bind_expression.rb
+- lib/glimmer/dsl/web/component_expression.rb
 - lib/glimmer/dsl/web/content_data_binding_expression.rb
 - lib/glimmer/dsl/web/data_binding_expression.rb
 - lib/glimmer/dsl/web/dsl.rb
@@ -272,8 +275,10 @@ files:
 - 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/helpers/glimmer_helper.rb
 - lib/glimmer/util/proc_tracker.rb
 - lib/glimmer/web.rb
+- lib/glimmer/web/component.rb
 - lib/glimmer/web/element_proxy.rb
 - lib/glimmer/web/event_proxy.rb
 - lib/glimmer/web/listener_proxy.rb