glimmer-dsl-web 0.2.7 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ebc8e783bfbc67d9366e1887368e89bb7a75db102e56ca966268a2091c5a8e90
-  data.tar.gz: a44da8782e6ca10c5183f4f7377eac39bb2b7af4d7e03f088d885a2fce34b219
+  metadata.gz: 6147bc2c609c3b5d7871c0d7f16b84f57c5b10c83c22a8ab63fb7e7120a69e65
+  data.tar.gz: e469cc54afb68870470d1bb5ab4a265000d87901873119e01c68f7586ebd883e
 SHA512:
-  metadata.gz: 577aea1ffced7cb27937958583c877416921d3f784fd4a2a9589ed3a3b95f39037b1a22f596ab03ed2c336abdab080fce67533b4120e800cb81d3cef144954a8
-  data.tar.gz: 05726c636474ad543649bb3200a51c2a238e79248f89207698b229a09fc3e3c6cb9b19489142d71c973505098c1809c8d2978c17ab8628ef9c339666f6fae2f5
+  metadata.gz: dadb81d22299adef771b31cc9152881a61f2cde0a93bd4a46223669d688fd78bae4fe33311875baa2cf6ee30f6f53d534ba2d4af2b5d57a49e3e902b00605dad
+  data.tar.gz: a3426ea5baa49c13d0091bd1e3410f43ac168b1c3f04dbff5b7c7eb4c584b61bf9463b9ad59e89d3e7827abc6a48ad5c468219762a9b58332b46c8980a74397d

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 0.3.0
+
+- Optimize performance (~170%-226% faster) by building GUI with a bulk_render call that assembles html as a string from all nested elements and mounts all HTML at once (instead of making many small DOM mount calls). The trade-off is not being able to interact with elements until rendering of the complete hierarchy is complete, which is acceptable because interactions do not happen till after everything is rendered anyways. Can be disabled by passing `bulk_render: false` option to the top-level element of a frontend app.
+- Fix issue with not being able to add content to a custom control by opening a block that should add content inside its markup root element
+
+## 0.2.8
+
+- Support Content Data-Binding to multiple model attributes via `computed_by` option (e.g. `content(@game, :scale, computed_by: [:width, :height])` or `content(@game, computed_by: [:scale, :width, :height])` will re-render content on changes to `:scale`, `:width`, or `:height`)
+
 ## 0.2.7
 
 - Unidirectional Data-Binding of element `style` property

data/README.md

@@ -1,4 +1,4 @@
-# [<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.2.7 (Beta)
+# [<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.3.0 (Beta)
 ## Ruby in the Browser Web Frontend Framework
 ### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
@@ -10,7 +10,7 @@
 
 [![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb)
 
-You can finally have Ruby developer happiness and productivity in the Frontend! No more wasting time splitting your resources across multiple languages, using badly engineered, over-engineered, or premature-optimization-obsessed JavaScript libraries, fighting JavaScript build issues (e.g. webpack), or rewriting Ruby Backend code in Frontend JavaScript. With [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), you can have an exponential jump in development productivity (2x or higher), time-to-release (1/2 or less time), cost (1/2 or cheaper), and maintainability (~50% the code that is simpler and more readable) over JavaScript libraries like React, Angular, Ember, Vue, and Svelte, while being able to reuse Backend Ruby code as is in the Frontend for faster interactions when needed. Also, companies can cut their hiring budget in half by having Backend Ruby Software Engineers do Frontend Development with Ruby! [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c) finally fulfills every highly-productive Rubyist's dream by bringing Ruby productivity fun to Frontend Development, the same productivity fun you had for years and decades in Backend Development.
+You can finally have Ruby developer happiness and productivity in the Frontend! No more wasting time splitting your resources across multiple languages, using badly engineered, over-engineered, or premature-optimization-obsessed JavaScript libraries, fighting JavaScript build issues (e.g. webpack), or rewriting Ruby Backend code in Frontend JavaScript. With [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), you can have an exponential jump in development productivity (2x or higher), time-to-release (1/2 or less time), cost (1/2 or cheaper), and maintainability (~50% the code that is simpler and more readable) over JavaScript libraries like React, Angular, Ember, Vue, and Svelte, while being able to reuse Backend Ruby code as is in the Frontend for faster interactions when needed. Also, with Frontend Ruby, companies can cut their hiring budget in half by having Backend Ruby Software Engineers do Frontend Development in Ruby! [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c) finally fulfills every smart highly-productive Rubyist's dream by bringing Ruby productivity fun to Frontend Development, the same productivity fun you had for years and decades in Backend Development.
 
 [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web 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 supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework 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)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). To automatically convert legacy HTML & CSS code to Glimmer DSL Ruby code, Software Engineers could use the included [`html_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-xml#html-to-glimmer-converter) and [`css_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-css#css-to-glimmer-converter) commands. Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). 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)!
 
@@ -379,7 +379,7 @@ Screenshot:
 
 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.
+In this example, we generate multiple address forms based on the number of addresses the user has using `content(@user, :address_count)` (you can add a `computed_by: array_of_attributes` option if you want to re-render content based on changes to multiple attributes like `content(@user, computed_by: [:address_count, :street_count])`, which fires on changes to `address_count` or `street_count`) .
 
 [lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb)
 
@@ -468,7 +468,7 @@ Document.ready? do
     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
+      content(@user, :address_count) do
         @user.addresses.each do |address|
           div {
             div(style: 'display: grid; grid-auto-columns: 80px 280px;') { |address_div|
@@ -1152,6 +1152,8 @@ Screenshot:
 
 **Todo MVC**
 
+[Todo MVC Ruby Edition Is the One Todo MVC To Rule Them All!!!](https://andymaleh.blogspot.com/2024/06/todo-mvc-in-ruby-is-one-todo-mvc-to.html)
+
 ```ruby
 require 'glimmer-dsl-web'
 
@@ -1280,6 +1282,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Input (Date/Time)!](#hello-input-datetime)
       - [Button Counter](#button-counter)
+      - [Todo MVC](#todo-mvc)
   - [Design Principles](#design-principles)
   - [Supporting Libraries](#supporting-libraries)
   - [Glimmer Process](#glimmer-process)
@@ -1326,7 +1329,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.2.7'
+gem 'glimmer-dsl-web', '~> 0.3.0'
 ```
 
 Run:
@@ -1553,7 +1556,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.2.7'
+gem 'glimmer-dsl-web', '~> 0.3.0'
 ```
 
 Run:
@@ -2411,9 +2414,9 @@ Screenshot:
 
 #### 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.
+If you need to regenerate (re-render) HTML element content dynamically, you can use Content Data-Binding to effortlessly
+rebuild (rerender) 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 using `content(@user, :address_count)` (you can add a `computed_by: array_of_attributes` option if you want to re-render content based on changes to multiple attributes like `content(@user, computed_by: [:address_count, :street_count])`, which fires on changes to `address_count` or `street_count`) .
 
 [lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb)
 
@@ -2501,8 +2504,8 @@ Document.ready? do
     
     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
+      # based on changes to @user.address_count, replacing older content on every change
+      content(@user, :address_count) do
         @user.addresses.each do |address|
           div {
             div(style: 'display: grid; grid-auto-columns: 80px 280px;') { |address_div|
@@ -3253,6 +3256,108 @@ Screenshot:
 
 ![Button Counter](/images/glimmer-dsl-web-samples-regular-button-counter.gif)
 
+#### Todo MVC
+
+[Todo MVC Ruby Edition Is the One Todo MVC To Rule Them All!!!](https://andymaleh.blogspot.com/2024/06/todo-mvc-in-ruby-is-one-todo-mvc-to.html)
+
+[lib/glimmer-dsl-web/samples/regular/todo_mvc.rb](/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb)
+
+```ruby
+require 'glimmer-dsl-web'
+
+require_relative 'todo_mvc/presenters/todo_presenter'
+
+require_relative 'todo_mvc/views/new_todo_form'
+require_relative 'todo_mvc/views/todo_list'
+require_relative 'todo_mvc/views/todo_filters'
+require_relative 'todo_mvc/views/todo_mvc_footer'
+
+class TodoMvc
+  include Glimmer::Web::Component
+  
+  before_render do
+    @presenter = TodoPresenter.new
+  end
+  
+  after_render do
+    @presenter.setup_filter_routes
+  end
+  
+  markup {
+    div(class: 'todomvc') {
+      section(class: 'todoapp') {
+        new_todo_form(presenter: @presenter)
+        
+        todo_list(presenter: @presenter)
+        
+        todo_filters(presenter: @presenter)
+              
+        style {
+          todo_mvc_styles
+        }
+      }
+      
+      todo_mvc_footer
+      
+      on_remove do
+        @presenter.unsetup_filter_routes
+      end
+    }
+  }
+  
+  def todo_mvc_styles
+    rule('body, button, html') {
+      margin '0'
+      padding '0'
+    }
+    
+    rule('button') {
+      _webkit_font_smoothing 'antialiased'
+      _webkit_appearance 'none'
+      appearance 'none'
+      background 'none'
+      border '0'
+      color 'inherit'
+      font_family 'inherit'
+      font_size '100%'
+      font_weight 'inherit'
+      vertical_align 'baseline'
+    }
+    
+    rule('.todoapp') {
+      background '#fff'
+      margin '130px 0 40px 0'
+      position 'relative'
+      box_shadow '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'
+    }
+  
+    media('screen and (-webkit-min-device-pixel-ratio:0)') {
+      rule('body') {
+        font "14px 'Helvetica Neue', Helvetica, Arial, sans-serif"
+        line_height '1.4em'
+        background '#f5f5f5'
+        color '#111111'
+        min_width '230px'
+        max_width '550px'
+        margin '0 auto'
+        _webkit_font_smoothing 'antialiased'
+        font_weight '300'
+      }
+    }
+  end
+end
+
+Document.ready? do
+  TodoMvc.render
+end
+```
+
+![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)
+
+The rest of the files are found at:
+
+[lib/glimmer-dsl-web/samples/regular/todo_mvc](/lib/glimmer-dsl-web/samples/regular/todo_mvc)
+
 ## Design Principles
 
 - The Ruby Way (including TIMTOWTDI: There Is More Than One Way To Do It)

data/VERSION

@@ -1 +1 @@
-0.2.7
+0.3.0

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.2.7 ruby lib
+# stub: glimmer-dsl-web 0.3.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.2.7"
+  s.version = "0.3.0"
 
   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-06-15"
+  s.date = "2024-06-25"
   s.description = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) enables building Web Frontends using Ruby in the Browser, as per Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) in building Isomorphic Ruby on Rails Applications. It provides a Ruby HTML DSL, which uniquely enables writing both structure code and logic code in one language. It supports 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. Modular design is supported with Glimmer Web Components. And, a Ruby CSS DSL is supported with the included Glimmer DSL for CSS. Many samples are demonstrated in the Rails sample app (there is a very minimal Standalone [No Rails] sample app too). You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This gem relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [

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

@@ -12,11 +12,9 @@ module Glimmer
         end
         
         def add_content(parent, keyword, *args, &block)
-          if parent.rendered? || parent.skip_content_on_render_blocks?
+          if parent.bulk_render? || 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.add_text_content(return_value, on_empty: true) if return_value.is_a?(String)
             parent.post_add_content
             return_value
           else

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

@@ -14,12 +14,10 @@ module Glimmer
         end
         
         def add_content(parent, keyword, *args, &block)
-          if parent.rendered? || parent.skip_content_on_render_blocks?
+          if parent.bulk_render? || parent.rendered? || parent.skip_content_on_render_blocks?
             return_value = css(&block).to_s
             return_value = super(parent, keyword, *args, &block) if return_value.to_s.empty?
-            if return_value.is_a?(String) && parent.dom_element.text.to_s.empty?
-              parent.add_text_content(return_value)
-            end
+            parent.add_text_content(return_value, on_empty: true) if return_value.is_a?(String)
             parent.post_add_content
             return_value
           else

data/lib/glimmer/web/element_proxy.rb

@@ -83,6 +83,11 @@ module Glimmer
             "<#{element}#{attributes}>#{content}</#{element}>"
           end
         end
+        
+        def unrendered_dom_element(keyword)
+          @unrendered_dom_elements ||= {}
+          @unrendered_dom_elements[keyword] ||= Element["<#{keyword} />"]
+        end
       end
       
       include Glimmer
@@ -118,22 +123,28 @@ module Glimmer
       REGEX_FORMAT_DATE = /^\d{4}-\d{2}-\d{2}$/
       REGEX_FORMAT_TIME = /^\d{2}:\d{2}$/
       
-      attr_reader :keyword, :parent, :args, :options, :children, :enabled, :foreground, :background, :removed?, :rendered
+      attr_reader :keyword, :parent, :parent_component, :args, :options, :children, :enabled, :foreground, :background, :removed?, :rendered
       alias rendered? rendered
       
       def initialize(keyword, parent, args, block)
         @keyword = keyword
-        @parent = parent
+        @parent = parent.is_a?(Glimmer::Web::Component) ? parent.markup_root : parent
+        @parent_component = parent if parent.is_a?(Glimmer::Web::Component)
         @options = args.last.is_a?(Hash) ? args.last.symbolize_keys : {}
         if parent.nil?
           options[:parent] ||= Component.interpretation_stack.last&.options&.[](:parent)
           options[:render] ||= Component.interpretation_stack.last&.options&.[](:render)
+          options[:bulk_render] ||= Component.interpretation_stack.last&.options&.[](:bulk_render)
         end
         @args = args
         @block = block
         @children = []
         @parent&.post_initialize_child(self)
-        render if !@rendered && render_after_create?
+        render if !bulk_render? && !@rendered && render_after_create?
+      end
+      
+      def bulk_render?
+        options[:bulk_render] != false && (@parent.nil? || @parent.bulk_render?)
       end
       
       def render_after_create?
@@ -143,7 +154,7 @@ module Glimmer
       # Executes for the parent of a child that just got added
       def post_initialize_child(child)
         @children << child
-        child.render if !render_after_create?
+        child.render if !bulk_render? && !render_after_create?
       end
       
       # Executes for the parent of a child that just got removed
@@ -153,21 +164,22 @@ module Glimmer
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
       def post_add_content
-        # TODO double check every place we should call this method
-        # No Op
+        render if bulk_render? && @parent.nil?
       end
       
       def css_classes
-        dom_element.attr('class').to_s.split
+        dom_element.attr('class').to_s.split if rendered?
       end
       
       def remove
-        @children.dup.each do |child|
-          child.remove
-        end
         on_remove_listeners = listeners_for('on_remove').dup
-        remove_all_listeners
-        dom_element.remove
+        if rendered?
+          @children.dup.each do |child|
+            child.remove
+          end
+          remove_all_listeners
+          dom_element.remove
+        end
         parent&.post_remove_child(self)
         @removed = true
         on_remove_listeners.each do |listener|
@@ -222,20 +234,32 @@ module Glimmer
       end
 
       def enabled=(value)
-        @enabled = value
-        dom_element.prop('disabled', !@enabled)
+        if rendered?
+          @enabled = value
+          dom_element.prop('disabled', !@enabled)
+        else
+          enqueue_post_render_method_call('enabled=', value)
+        end
       end
       
       def foreground=(value)
-        value = ColorProxy.new(value) if value.is_a?(String)
-        @foreground = value
-        dom_element.css('color', foreground.to_css) unless foreground.nil?
+        if rendered?
+          value = ColorProxy.new(value) if value.is_a?(String)
+          @foreground = value
+          dom_element.css('color', foreground.to_css) unless foreground.nil?
+        else
+          enqueue_post_render_method_call('foreground=', value)
+        end
       end
       
       def background=(value)
-        value = ColorProxy.new(value) if value.is_a?(String)
-        @background = value
-        dom_element.css('background-color', background.to_css) unless background.nil?
+        if rendered?
+          value = ColorProxy.new(value) if value.is_a?(String)
+          @background = value
+          dom_element.css('background-color', background.to_css) unless background.nil?
+        else
+          enqueue_post_render_method_call('background=', value)
+        end
       end
       
       def parent_selector
@@ -243,8 +267,8 @@ module Glimmer
       end
       
       def parent_dom_element
-        if parent_selector
-          Document.find(parent_selector)
+        if parent
+          parent.dom_element
         else
           options[:parent] ||= 'body'
           the_element = Document.find(options[:parent])
@@ -272,26 +296,12 @@ module Glimmer
         else
           reattach(old_element)
         end
-        observation_requests&.each do |keyword, event_listener_set|
-          event_listener_set.each do |event_listener|
-            handle_observation_request(keyword, event_listener)
-          end
-        end
-        unless render_after_create?
-          children.each do |child|
-            child.render
-          end
-        end
-        @rendered = true
-        unless skip_content_on_render_blocks?
-          content_on_render_blocks.each do |content_block|
-            content(&content_block)
-          end
-        end
-        # TODO replace following line with a method call like (`notify_listeners('on_render')`)
-        listeners_for('on_render').each do |listener|
-          listener.original_event_listener.call(EventProxy.new(listener: listener))
-        end
+        mark_rendered
+        invoke_post_render_method_calls if bulk_render?
+        handle_observation_requests
+        children.each(&:render) if !bulk_render? && !render_after_create?
+        add_contents_for_render_blocks
+        notify_on_render_listeners
       end
       alias rerender render
         
@@ -303,8 +313,17 @@ module Glimmer
         old_element.replace_with(@dom)
       end
       
-      def add_text_content(text)
-        dom_element.append(text.to_s)
+      def mark_rendered
+        @rendered = true
+        children.each(&:mark_rendered) if bulk_render?
+      end
+      
+      def add_text_content(text, on_empty: false)
+        if rendered?
+          dom_element.append(text.to_s) if !on_empty || dom_element.text.to_s.empty?
+        else
+          enqueue_post_render_method_call('add_text_content', text, on_empty:)
+        end
       end
       
       def content_on_render_blocks
@@ -332,11 +351,16 @@ module Glimmer
         # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
         # TODO check if we need to avoid rendering content block if no content is available
         @dom ||= begin
-          content = args.first if args.first.is_a?(String)
+          content = args.first.is_a?(String) ? args.first : ''
+          content += children_dom_content if bulk_render?
           ElementProxy.render_html(keyword, html_options, content)
         end
       end
       
+      def children_dom_content
+        children.map(&:dom).join
+      end
+      
       def html_options
         body_class = ([name, element_id] + css_classes.to_a).join(' ')
         html_options = options.dup
@@ -351,8 +375,12 @@ module Glimmer
         html_options
       end
       
-      def content(&block)
-        Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ElementExpression.new, keyword, &block)
+      def content(bulk_render: false, &block)
+        original_bulk_render = options[:bulk_render]
+        options[:bulk_render] = bulk_render if rendered?
+        return_value = Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ElementExpression.new, keyword, &block)
+        options[:bulk_render] = original_bulk_render if rendered?
+        return_value
       end
       
       # Subclasses must override with their own mappings
@@ -372,13 +400,21 @@ module Glimmer
       end
       
       def class_name=(value)
-        value = value.is_a?(Array) ? value.join(' ') : value.to_s
-        new_class_name = "#{name} #{element_id} #{value}"
-        dom_element.prop('className', new_class_name)
+        if rendered?
+          value = value.is_a?(Array) ? value.join(' ') : value.to_s
+          new_class_name = "#{name} #{element_id} #{value}"
+          dom_element.prop('className', new_class_name)
+        else
+          enqueue_post_render_method_call('class_name=', value)
+        end
       end
       
       def add_css_class(css_class)
-        dom_element.add_class(css_class)
+        if rendered?
+          dom_element.add_class(css_class)
+        else
+          enqueue_post_render_method_call('class_name=', value)
+        end
       end
       
       def add_css_classes(css_classes_to_add)
@@ -386,7 +422,11 @@ module Glimmer
       end
       
       def remove_css_class(css_class)
-        dom_element.remove_class(css_class)
+        if rendered?
+          dom_element.remove_class(css_class)
+        else
+          enqueue_post_render_method_call('class_name=', value)
+        end
       end
       
       def remove_css_classes(css_classes_to_remove)
@@ -397,38 +437,17 @@ module Glimmer
         css_classes.each {|css_class| remove_css_class(css_class)}
       end
       
-      def has_style?(symbol)
-        @args.include?(symbol) # not a very solid implementation. Bring SWT constants eventually
-      end
-      
       def dom_element
-        # TODO consider making this pick an element in relation to its parent, allowing unhooked dom elements to be built if needed (unhooked to the visible page dom)
-        Document.find(selector)
-      end
-      
-      # TODO consider adding a default #dom method implementation for the common case, automatically relying on #element and other methods to build the dom html
-      
-      def style_element
-        style_element_id = "#{id}-style"
-        style_element_selector = "style##{style_element_id}"
-        element = dom_element.find(style_element_selector)
-        if element.empty?
-          new_element = Element.new(:style)
-          new_element.attr('id', style_element_id)
-          new_element.attr('class', "#{name.gsub('_', '-')}-instance-style widget-instance-style")
-          dom_element.prepend(new_element)
-          element = dom_element.find(style_element_selector)
+        if rendered?
+          # TODO consider making this pick an element in relation to its parent, allowing unhooked dom elements to be built if needed (unhooked to the visible page dom)
+          Document.find(selector)
+        else
+          # Using a fill-in dom element until self is rendered
+          ElementProxy.unrendered_dom_element(keyword)
         end
-        element
-      end
-      
-      def listener_selector
-        selector
       end
       
-      def listener_dom_element
-        Document.find(listener_selector)
-      end
+      # TODO consider adding a default #dom method implementation for the common case, automatically relying on #element and other methods to build the dom html
       
       def observation_requests
         @observation_requests ||= {}
@@ -473,16 +492,20 @@ module Glimmer
       end
       
       def handle_observation_request(keyword, original_event_listener)
-        listener = ListenerProxy.new(
-          element: self,
-          selector: selector,
-          dom_element: dom_element,
-          event_attribute: keyword,
-          original_event_listener: original_event_listener,
-        )
-        listener.register
-        listeners_for(keyword) << listener
-        listener
+        if rendered?
+          listener = ListenerProxy.new(
+            element: self,
+            selector: selector,
+            dom_element: dom_element,
+            event_attribute: keyword,
+            original_event_listener: original_event_listener,
+          )
+          listener.register
+          listeners_for(keyword) << listener
+          listener
+        else
+          enqueue_post_render_method_call('handle_observation_request', keyword, original_event_listener)
+        end
       end
       
       def remove_event_listener_proxies
@@ -492,10 +515,29 @@ module Glimmer
         event_listener_proxies.clear
       end
       
+      def notify_listeners(event)
+        listeners_for(event).each do |listener|
+          listener.original_event_listener.call(EventProxy.new(listener: listener))
+        end
+      end
+      
+      def notify_on_render_listeners
+        notify_listeners('on_render')
+        children.each(&:notify_on_render_listeners) if bulk_render?
+      end
+      
       def data_bindings
         @data_bindings ||= {}
       end
       
+      def type
+        if rendered?
+          super
+        else
+          options[:type] || 'text'
+        end
+      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]
@@ -521,13 +563,24 @@ module Glimmer
       # 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|
+          # TODO in the future, consider optimizing code by diffing content if that makes sense (e.g. using opal-virtual-dom)
+          # To do so, we must avoid generating new content with new unique IDs/Classes and only append the new IDs classes after mounting
+          # TODO consider optimizing remove performance by doing clear instead and removing listeners separately
           children.dup.each { |child| child.remove }
-          content(&content_block)
+          content(bulk_render: true, &content_block)
+          if bulk_render? && rendered?
+            self.inner_html = children_dom_content
+            children.each(&:mark_rendered)
+            children.each(&:invoke_post_render_method_calls)
+            children.each(&:handle_observation_requests)
+            children.each(&:add_contents_for_render_blocks)
+            children.each(&:notify_on_render_listeners)
+          end
         end
+        model_binding_observer = Glimmer::DataBinding::ModelBinding.new(*binding_args)
         content_binding_observer = Glimmer::DataBinding::Observer.proc(&content_binding_work)
-        content_binding_observer.observe(*binding_args)
+        content_binding_observer.observe(model_binding_observer)
         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
       
@@ -551,35 +604,86 @@ module Glimmer
         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)
+          if rendered?
+            dom_element.send(method_name, *args, &block)
+          else
+            enqueue_post_render_method_call(method_name, *args, &block)
+          end
         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)
+          if rendered?
+            if method_name.end_with?('=')
+              dom_element.prop(property_name, *args)
+            else
+              dom_element.prop(property_name)
+            end
           else
-            dom_element.prop(property_name)
+            enqueue_post_render_method_call(method_name, *args, &block)
           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)
+          if rendered?
+            if method_name.end_with?('=')
+              dom_element.prop(unnormalized_property_name, *args)
+            else
+              dom_element.prop(unnormalized_property_name)
+            end
           else
-            dom_element.prop(unnormalized_property_name)
+            enqueue_post_render_method_call(method_name, *args, &block)
           end
         elsif dom_element && dom_element.length > 0
-          js_args = block.nil? ? args : (args + [block])
-          begin
-            Native.call(dom_element, '0').method_missing(method_name.to_s.camelcase, *js_args)
-          rescue Exception => e
+          if rendered?
+            js_args = block.nil? ? args : (args + [block])
             begin
-              Native.call(dom_element, '0').method_missing(method_name.to_s, *js_args)
+              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
+            enqueue_post_render_method_call(method_name, *args, &block)
           end
         else
           super(method_name, *args, &block)
         end
       end
       
+      def post_render_method_calls
+        @post_render_method_calls ||= []
+      end
+      
+      def enqueue_post_render_method_call(method_name, *args, &block)
+        post_render_method_calls << [method_name, args, block]
+        nil
+      end
+      
+      def invoke_post_render_method_calls
+        return unless rendered?
+        post_render_method_calls.each do |method_name, args, block|
+          send(method_name, *args, &block)
+        end
+        children.each(&:invoke_post_render_method_calls) if bulk_render?
+      end
+      
+      def handle_observation_requests
+        observation_requests&.each do |keyword, event_listener_set|
+          event_listener_set.each do |event_listener|
+            handle_observation_request(keyword, event_listener)
+          end
+        end
+        children.each(&:handle_observation_requests) if bulk_render?
+      end
+      
+      def add_contents_for_render_blocks
+        unless skip_content_on_render_blocks?
+          content_on_render_blocks.each do |content_block|
+            content(&content_block)
+          end
+        end
+        children.each(&:add_contents_for_render_blocks) if bulk_render?
+      end
+      
       def property_name_for(method_name)
         attribute_name = method_name.end_with?('=') ? method_name.to_s[0...-1] : method_name.to_s
         PROPERTY_ALIASES[attribute_name] || attribute_name.camelcase

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

@@ -100,8 +100,8 @@ Document.ready? do
     
     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
+      # based on changes to @user.address_count, replacing older content on every change
+      content(@user, :address_count) do
         @user.addresses.each do |address|
           div {
             div(style: 'display: grid; grid-auto-columns: 80px 280px;') { |address_div|

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.2.7
+  version: 0.3.0
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-15 00:00:00.000000000 Z
+date: 2024-06-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer