glimmer-dsl-web 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2615511253319f0227b782825764b4b009c0a3d4072b366d7409a3255f653d47
-  data.tar.gz: 0d09f5a38cd26cd6f8edad82aab884b89178ffa79043e5e7dc88fbd19f2e5958
+  metadata.gz: '028be0c05ee74f8e639b3b43adbdd52e7b90e7e5b52a0e7026fbf74e0d017300'
+  data.tar.gz: d2b8e3fc639dfa55655f05faf740fd36fcf518bc143eb8f08a874be3e34f72ec
 SHA512:
-  metadata.gz: 54ce5174ba09451931424f9c7d30b4abc7aebfd8486ecb6fe0863ece4a4747c908c9445753cc68e535bfb90835d1ad1951fde8f31f9fe2e90f34980754b4ecbf
-  data.tar.gz: d654378ed6fa4c7d05322c09054a44039d83ef2d4dcecc048963b2dc31c723a68c679072f71da2a1984ba94cd4630a382d363928ca57315ca673ae33dfe62d59
+  metadata.gz: e9a0add34e7db5cd7d0816e0006ed0426f9bc739402e4951f672195f6dcce472943b5f5c501213269b0ec84fb636aaea701fe35326639827bd580b94db370a5a
+  data.tar.gz: 19ccf1280735e472c6f643a21e105f0b1020fdacc53a66f63588be6f7b8faddb1e8391667094687a204c3d1363ee760c6b752c84866b86323437c17b8fdbe7d6

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 0.0.8
+
+- Validate that element keywords belong to the valid list of HTML element tag names to prevent rendering fake elements the keyword does not match a real HTML element tag
+- Support inner_html/outer_html properties (it seems they did not convert to innerHTML/outerHTML correctly because of the all caps HTML)
+- Support element properties via original JS names (e.g. innerHTML) to prevent logic from breaking if some do not convert correctly from underscored versions
+- Package dependencies properly in the gem to avoid instructing users to add in Rails Gemfile manually
+- Content Data-Binding support to regenerate element content based on changes to an observed model attribute.
+Content Data-Binding Example:
+content(*data_binding_options) { |data_binding_value|
+  li {
+    data_binding_value
+  }
+}
+- Ensuring removing data-binding model listeners when calling `element#remove` in addition to already removing standard HTML event listeners
+- New Hello, Content Data-Binding! Sample: `require 'glimmer-dsl-web/samples/hello/hello_content_data_binding'`
+
 ## 0.0.7
 
 - Support input[type=number] value data-binding as a Ruby Numeric object (Integer or Float)

data/README.md

@@ -1,9 +1,11 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.0.7 (Early Alpha)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.0.8 (Early Alpha)
 ## Ruby in the Browser Web GUI Frontend Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web GUI frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It aims at providing the simplest, most intuitive, and most straight-forward frontend library in existence. The library follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) while supporting both Unidirectional (One-Way) Data-Binding (using `<=`) and Bidirectional (Two-Way) Data-Binding (using `<=>`). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web GUI frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend library in existence. The library follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) while supporting both Unidirectional (One-Way) Data-Binding (using `<=`) and Bidirectional (Two-Way) Data-Binding (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via Content Data-Binding. You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
+
+(the project plans to add component support very soon, albeit components are already supported by creating your own Ruby classes and having them render part of the GUI hierarchy)
 
 **Hello, World! Sample**
 
@@ -337,6 +339,137 @@ Screenshot:
 
 ![Hello, Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-data-binding.gif)
 
+**Hello, Content Data-Binding!**
+
+If you need to regenerate HTML element content dynamically, you can use Content Data-Binding to effortlessly
+rebuild HTML elements based on changes in a Model attribute that provides the source data.
+In this example, we generate multiple address forms based on the number of addresses the user has.
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class Address
+  attr_accessor :text
+  attr_reader :name, :street, :city, :state, :zip
+  
+  def name=(value)
+    @name = value
+    update_text
+  end
+  
+  def street=(value)
+    @street = value
+    update_text
+  end
+  
+  def city=(value)
+    @city = value
+    update_text
+  end
+  
+  def state=(value)
+    @state = value
+    update_text
+  end
+  
+  def zip=(value)
+    @zip = value
+    update_text
+  end
+  
+  private
+  
+  def update_text
+    self.text = [name, street, city, state, zip].compact.reject(&:empty?).join(', ')
+  end
+end
+
+class User
+  attr_accessor :addresses
+  attr_reader :address_count
+  
+  def initialize
+    @address_count = 1
+    @addresses = []
+    update_addresses
+  end
+  
+  def address_count=(value)
+    value = [[1, value.to_i].max, 3].min
+    @address_count = value
+    update_addresses
+  end
+  
+  private
+  
+  def update_addresses
+    address_count_change = address_count - addresses.size
+    if address_count_change > 0
+      address_count_change.times { addresses << Address.new }
+    else
+      address_count_change.abs.times { addresses.pop }
+    end
+  end
+end
+
+@user = User.new
+
+div {
+  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;
+                }
+                #{address_div.selector} input, #{address_div.selector} select {
+                  grid-column: 2;
+                }
+              CSS
+            }
+          }
+        }
+      end
+    end
+  }
+}.render
+```
+
+Screenshot:
+
+![Hello, Content Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-content-data-binding.gif)
+
 **Button Counter Sample**
 
 **UPCOMING (NOT RELEASED OR SUPPORTED YET)**
@@ -441,6 +574,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Button!](#hello-button)
       - [Hello, Form!](#hello-form)
       - [Hello, Data-Binding!](#hello-data-binding)
+      - [Hello, Content Data-Binding!](#hello-content-data-binding)
       - [Hello, Input (Date/Time)!](#hello-input-datetime)
       - [Button Counter](#button-counter)
   - [Glimmer Process](#glimmer-process)
@@ -487,13 +621,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'opal', '1.4.1'
-gem 'opal-rails', '2.0.2'
-gem 'opal-async', '~> 1.4.0'
-gem 'opal-jquery', '~> 0.4.6'
-gem 'glimmer-dsl-web', '~> 0.0.7'
-gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
-gem 'glimmer-dsl-css', '~> 1.2.1', require: false
+gem 'glimmer-dsl-web', '~> 0.0.8'
 ```
 
 Run:
@@ -632,13 +760,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'opal', '1.4.1'
-gem 'opal-rails', '2.0.2'
-gem 'opal-async', '~> 1.4.0'
-gem 'opal-jquery', '~> 0.4.6'
-gem 'glimmer-dsl-web', '~> 0.0.7'
-gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
-gem 'glimmer-dsl-css', '~> 1.2.1', require: false
+gem 'glimmer-dsl-web', '~> 0.0.8'
 ```
 
 Run:
@@ -1254,6 +1376,133 @@ Screenshot:
 
 ![Hello, Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-data-binding.gif)
 
+#### Hello, Content Data-Binding!
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class Address
+  attr_accessor :text
+  attr_reader :name, :street, :city, :state, :zip
+  
+  def name=(value)
+    @name = value
+    update_text
+  end
+  
+  def street=(value)
+    @street = value
+    update_text
+  end
+  
+  def city=(value)
+    @city = value
+    update_text
+  end
+  
+  def state=(value)
+    @state = value
+    update_text
+  end
+  
+  def zip=(value)
+    @zip = value
+    update_text
+  end
+  
+  private
+  
+  def update_text
+    self.text = [name, street, city, state, zip].compact.reject(&:empty?).join(', ')
+  end
+end
+
+class User
+  attr_accessor :addresses
+  attr_reader :address_count
+  
+  def initialize
+    @address_count = 1
+    @addresses = []
+    update_addresses
+  end
+  
+  def address_count=(value)
+    value = [[1, value.to_i].max, 3].min
+    @address_count = value
+    update_addresses
+  end
+  
+  private
+  
+  def update_addresses
+    address_count_change = address_count - addresses.size
+    if address_count_change > 0
+      address_count_change.times { addresses << Address.new }
+    else
+      address_count_change.abs.times { addresses.pop }
+    end
+  end
+end
+
+@user = User.new
+
+div {
+  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;
+                }
+                #{address_div.selector} input, #{address_div.selector} select {
+                  grid-column: 2;
+                }
+              CSS
+            }
+          }
+        }
+      end
+    end
+  }
+}.render
+```
+
+Screenshot:
+
+![Hello, Content Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-content-data-binding.gif)
+
 #### Hello, Input (Date/Time)!
 
 Glimmer GUI code:

data/VERSION

@@ -1 +1 @@
-0.0.7
+0.0.8

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.7 ruby lib
+# stub: glimmer-dsl-web 0.0.8 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.7".freeze
+  s.version = "0.0.8".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-02"
+  s.date = "2024-01-03"
   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 = [
@@ -31,6 +31,7 @@ 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_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_input_date_time.rb",
@@ -39,6 +40,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/config/opal_logger.rb",
     "lib/glimmer/data_binding/element_binding.rb",
     "lib/glimmer/dsl/web/bind_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",
     "lib/glimmer/dsl/web/element_expression.rb",
@@ -61,10 +63,13 @@ Gem::Specification.new do |s|
 
   s.specification_version = 4
 
-  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.4.1".freeze])
+  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.2".freeze])
+  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.4.1".freeze])
+  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.2".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<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])
@@ -72,7 +77,5 @@ Gem::Specification.new do |s|
   s.add_development_dependency(%q<jeweler>.freeze, [">= 2.3.9".freeze, "< 3.0.0".freeze])
   s.add_development_dependency(%q<rdoc>.freeze, [">= 6.2.1".freeze, "< 7.0.0".freeze])
   s.add_development_dependency(%q<opal-rspec>.freeze, ["~> 0.8.0.alpha2".freeze])
-  s.add_development_dependency(%q<opal-rails>.freeze, ["~> 1.1.2".freeze])
-  s.add_development_dependency(%q<opal-jquery>.freeze, ["~> 0.4.4".freeze])
 end
 

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

@@ -0,0 +1,41 @@
+# 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/expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class ContentDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'content' &&
+            block_given? &&
+            args.size > 0 &&
+            parent&.respond_to?(:bind_content)
+        end
+  
+        def interpret(parent, keyword, *args, &block)
+          parent.bind_content(*args, &block)
+        end
+      end
+    end
+  end
+end

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

@@ -1,5 +1,4 @@
 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'
@@ -7,25 +6,19 @@ require 'glimmer/dsl/web/p_expression'
 require 'glimmer/dsl/web/select_expression'
 require 'glimmer/dsl/web/bind_expression'
 require 'glimmer/dsl/web/data_binding_expression'
+require 'glimmer/dsl/web/content_data_binding_expression'
 require 'glimmer/dsl/web/shine_data_binding_expression'
 
 module Glimmer
   module DSL
     module Web
-      # TODO implement all those expressions
-#        %w[
-#          listener
-#          data_binding
-#          property
-#          shine_data_binding
-#          element
-#        ]
       Engine.add_dynamic_expressions(
        Web,
        %w[
          listener
          data_binding
          property
+         content_data_binding
          shine_data_binding
          element
        ]

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

@@ -1,6 +1,8 @@
 require 'glimmer/dsl/expression'
 require 'glimmer/dsl/web/general_element_expression'
 
+require 'glimmer/web/element_proxy'
+
 module Glimmer
   module DSL
     module Web
@@ -8,9 +10,7 @@ module Glimmer
         include GeneralElementExpression
         
         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')
+          Glimmer::Web::ElementProxy.keyword_supported?(keyword)
         end
       end
     end

data/lib/glimmer/web/element_proxy.rb

@@ -25,6 +25,10 @@ module Glimmer
   module Web
     class ElementProxy
       class << self
+        def keyword_supported?(keyword)
+          ELEMENT_KEYWORDS.include?(keyword.to_s)
+        end
+      
         # Factory Method that translates a Glimmer DSL keyword into a ElementProxy object
         def for(keyword, parent, args, block)
           element_type(keyword).new(keyword, parent, args, block)
@@ -67,7 +71,28 @@ module Glimmer
       
       Event = Struct.new(:widget, keyword_init: true)
       
+      ELEMENT_KEYWORDS = [
+        "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b",
+        "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br",
+        "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data",
+        "datalist", "dd", "decorator", "del", "details", "dfn", "dir", "div", "dl", "dt",
+        "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame",
+        "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup",
+        "hr", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen",
+        "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "menu",
+        "menuitem", "meta", "meter", "nav", "nobr", "noframes", "noscript", "object", "ol", "optgroup",
+        "option", "output", "p", "param", "plaintext", "pre", "progress", "q", "rp", "rt",
+        "ruby", "s", "samp", "script", "section", "select", "shadow", "small", "source", "spacer",
+        "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td",
+        "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt",
+        "u", "ul", "var", "video", "wbr", "xmp",
+      ]
+
       GLIMMER_ATTRIBUTES = [:parent]
+      PROPERTY_ALIASES = {
+        'inner_html' => 'innerHTML',
+        'outer_html' => 'outerHTML',
+      }
       FORMAT_DATETIME = '%Y-%m-%dT%H:%M'
       FORMAT_DATE = '%Y-%m-%d'
       FORMAT_TIME = '%H:%M'
@@ -123,6 +148,11 @@ module Glimmer
         listeners.each do |event, event_listeners|
           event_listeners.dup.each(&:unregister)
         end
+        listeners.clear
+        data_bindings.each do |element_binding, model_binding|
+          element_binding.unregister_all_observables
+        end
+        data_bindings.clear
       end
       
       # Subclasses can override with their own selector
@@ -423,6 +453,10 @@ module Glimmer
         event_listener_proxies.clear
       end
       
+      def data_bindings
+        @data_bindings ||= {}
+      end
+      
       def data_bind(property, model_binding)
         element_binding_translator = value_converters_for_input_type(type)[:model_to_view]
         element_binding_parameters = [self, property, element_binding_translator]
@@ -430,6 +464,7 @@ module Glimmer
         element_binding.call(model_binding.evaluate_property)
         #TODO make this options observer dependent and all similar observers in element specific data binding handlers
         element_binding.observe(model_binding)
+        data_bindings[element_binding] = model_binding
         unless model_binding.binding_options[:read_only]
           # TODO add guards against nil cases for hash below
           listener_keyword = data_binding_listener_for_element_and_property(keyword, property)
@@ -444,19 +479,36 @@ module Glimmer
         end
       end
       
+      # Data-binds the generation of nested content to a model/property (in binding args)
+      # consider providing an option to avoid initial rendering without any changes happening
+      def bind_content(*binding_args, &content_block)
+        # TODO in the future, consider optimizing code by diffing content if that makes sense
+        content_binding_work = proc do |*values|
+          children.dup.each { |child| child.remove }
+          content(&content_block)
+        end
+        content_binding_observer = Glimmer::DataBinding::Observer.proc(&content_binding_work)
+        content_binding_observer.observe(*binding_args)
+        content_binding_work.call # TODO inspect if we need to pass args here (from observed attributes) [but it's simpler not to pass anything at first]
+      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)
+        unnormalized_property_name = unnormalized_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.to_s.camelcase, include_private)) ||
+          (dom_element && dom_element.length > 0 && Native.call(dom_element, '0').respond_to?(method_name.to_s, include_private)) ||
           dom_element.respond_to?(method_name, include_private) ||
           (!dom_element.prop(property_name).nil? && !dom_element.prop(property_name).is_a?(Proc)) ||
+          (!dom_element.prop(unnormalized_property_name).nil? && !dom_element.prop(unnormalized_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)
+        unnormalized_property_name = unnormalized_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)
@@ -467,12 +519,22 @@ module Glimmer
           else
             dom_element.prop(property_name)
           end
+        elsif !dom_element.prop(unnormalized_property_name).nil? && !dom_element.prop(unnormalized_property_name).is_a?(Proc)
+          if method_name.end_with?('=')
+            dom_element.prop(unnormalized_property_name, *args)
+          else
+            dom_element.prop(unnormalized_property_name)
+          end
         elsif dom_element && dom_element.length > 0
+          js_args = block.nil? ? args : (args + [block])
           begin
-            js_args = block.nil? ? args : (args + [block])
             Native.call(dom_element, '0').method_missing(method_name.to_s.camelcase, *js_args)
           rescue Exception => e
-            super(method_name, *args, &block)
+            begin
+              Native.call(dom_element, '0').method_missing(method_name.to_s, *js_args)
+            rescue Exception => e
+              super(method_name, *args, &block)
+            end
           end
         else
           super(method_name, *args, &block)
@@ -480,7 +542,12 @@ module Glimmer
       end
       
       def property_name_for(method_name)
-        method_name.end_with?('=') ? method_name.to_s[0...-1].camelcase : method_name.to_s.camelcase
+        attribute_name = method_name.end_with?('=') ? method_name.to_s[0...-1] : method_name.to_s
+        PROPERTY_ALIASES[attribute_name] || attribute_name.camelcase
+      end
+      
+      def unnormalized_property_name_for(method_name)
+        method_name.end_with?('=') ? method_name.to_s[0...-1] : method_name.to_s
       end
       
       def swt_widget

data/lib/glimmer/web/listener_proxy.rb

@@ -34,7 +34,6 @@ module Glimmer
         @selector = selector
         @listener = listener
         @js_listener = lambda do |js_event|
-          # TODO wrap event with a Ruby Event object before passing to listener
           event = EventProxy.new(js_event: js_event, listener: self)
           result = listener.call(event)
           result = true if result.nil?

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

@@ -0,0 +1,137 @@
+# 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 Address
+  attr_accessor :text
+  attr_reader :name, :street, :city, :state, :zip
+  
+  def name=(value)
+    @name = value
+    update_text
+  end
+  
+  def street=(value)
+    @street = value
+    update_text
+  end
+  
+  def city=(value)
+    @city = value
+    update_text
+  end
+  
+  def state=(value)
+    @state = value
+    update_text
+  end
+  
+  def zip=(value)
+    @zip = value
+    update_text
+  end
+  
+  private
+  
+  def update_text
+    self.text = [name, street, city, state, zip].compact.reject(&:empty?).join(', ')
+  end
+end
+
+class User
+  attr_accessor :addresses
+  attr_reader :address_count
+  
+  def initialize
+    @address_count = 1
+    @addresses = []
+    update_addresses
+  end
+  
+  def address_count=(value)
+    value = [[1, value.to_i].max, 3].min
+    @address_count = value
+    update_addresses
+  end
+  
+  private
+  
+  def update_addresses
+    address_count_change = address_count - addresses.size
+    if address_count_change > 0
+      address_count_change.times { addresses << Address.new }
+    else
+      address_count_change.abs.times { addresses.pop }
+    end
+  end
+end
+
+@user = User.new
+
+div {
+  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;
+                }
+                #{address_div.selector} input, #{address_div.selector} select {
+                  grid-column: 2;
+                }
+              CSS
+            }
+          }
+        }
+      end
+    end
+  }
+}.render

data/lib/glimmer-dsl-web.rb

@@ -26,7 +26,11 @@ GLIMMER_DSL_OPAL_LIB = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib')
  
 $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_LIB)
 
-if RUBY_ENGINE == 'opal'
+if RUBY_ENGINE != 'opal'
+  require 'opal-rails'
+  require 'opal-async'
+  require 'opal-jquery'
+else
 #   GLIMMER_DSL_OPAL_MISSING = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib', 'glimmer-dsl-opal', 'missing')
    
 #   $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_MISSING) # missing Ruby classes/methods
@@ -75,7 +79,7 @@ if RUBY_ENGINE == 'opal'
   require 'glimmer-dsl-xml'
   require 'glimmer-dsl-css'
   
-  Glimmer::Config.loop_max_count = 150 # TODO consider disabling if preferred
+  Glimmer::Config.loop_max_count = 50 # 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.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-02 00:00:00.000000000 Z
+date: 2024-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.4.1
+        version: 2.7.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.4.1
+        version: 2.7.6
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-xml
   requirement: !ruby/object:Gem::Requirement
@@ -52,6 +52,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 1.2.2
+- !ruby/object:Gem::Dependency
+  name: opal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.4.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.4.1
+- !ruby/object:Gem::Dependency
+  name: opal-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.0.2
 - !ruby/object:Gem::Dependency
   name: opal-async
   requirement: !ruby/object:Gem::Requirement
@@ -66,6 +94,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 1.4.0
+- !ruby/object:Gem::Dependency
+  name: opal-jquery
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.4.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.4.6
 - !ruby/object:Gem::Dependency
   name: to_collection
   requirement: !ruby/object:Gem::Requirement
@@ -188,34 +230,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.8.0.alpha2
-- !ruby/object:Gem::Dependency
-  name: opal-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.1.2
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.1.2
-- !ruby/object:Gem::Dependency
-  name: opal-jquery
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.4.4
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.4.4
 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.
@@ -239,6 +253,7 @@ 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_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_input_date_time.rb
@@ -247,6 +262,7 @@ files:
 - lib/glimmer/config/opal_logger.rb
 - lib/glimmer/data_binding/element_binding.rb
 - lib/glimmer/dsl/web/bind_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
 - lib/glimmer/dsl/web/element_expression.rb