glimmer-dsl-web 0.3.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6147bc2c609c3b5d7871c0d7f16b84f57c5b10c83c22a8ab63fb7e7120a69e65
-  data.tar.gz: e469cc54afb68870470d1bb5ab4a265000d87901873119e01c68f7586ebd883e
+  metadata.gz: 162d98e6fa4d8eefcec1f4edb2f5af6c3d5d3a88aaa01704ded825b982aabbd9
+  data.tar.gz: 8c133105ac1cf160658c476771a9b58c0ac351116a1b919cdef37db19bd085e7
 SHA512:
-  metadata.gz: dadb81d22299adef771b31cc9152881a61f2cde0a93bd4a46223669d688fd78bae4fe33311875baa2cf6ee30f6f53d534ba2d4af2b5d57a49e3e902b00605dad
-  data.tar.gz: a3426ea5baa49c13d0091bd1e3410f43ac168b1c3f04dbff5b7c7eb4c584b61bf9463b9ad59e89d3e7827abc6a48ad5c468219762a9b58332b46c8980a74397d
+  metadata.gz: 5bc70f98db8b2fec83310e789967447663f9d1d7017ad6dd8b1984ce5e520ef835430d5f5b8c885fa92282d63617a58ba42cb30dda6b0212cafd63e3ce378b93
+  data.tar.gz: 75561cba8a7a7d61e71e286e197dbbb80879261715500249ddd565f0833273777039632f2553a1cb5e0e3c4c1258704fc83f73ea7e163c1d4ab64a0af0e2f307

data/CHANGELOG.md

@@ -1,8 +1,17 @@
 # Change Log
 
+## 0.3.1
+
+- Optimize Todo MVC performance for filtering between all, active, and completed (it happens instantly now)
+- Append Todo MVC todos at the bottom instead of prepending them at the top (I copied the ES6 version initially which did things the opposite way from how Todo MVC behaves normally in other versions)
+- Make Todo MVC "items left" text show "item left" if there is only 1 todo (I missed this detail before)
+- Make Todo MVC footer links open a new tab/window (with `target: '_blank'` option)
+- Refactor/Simplify Todo MVC sample code
+- Upgrade to glimmer 2.7.8
+
 ## 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.
+- Optimize performance (~170%-226% faster) of rendering by building GUI in bulk, assembling html as a string from all nested elements and mounting 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 the `bulk_render: false` option to the top-level component/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

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.3.0 (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.1 (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)
@@ -1154,6 +1154,10 @@ Screenshot:
 
 [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)
+
+[lib/glimmer-dsl-web/samples/regular/todo_mvc](/lib/glimmer-dsl-web/samples/regular/todo_mvc)
+
 ```ruby
 require 'glimmer-dsl-web'
 
@@ -1329,7 +1333,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.3.0'
+gem 'glimmer-dsl-web', '~> 0.3.1'
 ```
 
 Run:
@@ -1521,6 +1525,8 @@ module ApplicationHelper
 end
 ```
 
+By default, elements are rendered in bulk for faster performance, meaning you cannot interact with element objects until rendering is done. This is a sensible default because most of the time, there is no need to interact with elements until the full frontend application is fully rendered. That said, if it is preferred every once in a while to render elements piecemeal instead of in bulk, this behavior can be adjusted by passing the option `bulk_render: false` to the top-level component or top-level element (if there is no component).
+
 Note that Turbo is disabled on Glimmer elements/components. You can still use Turbo/Hotwire side by side with Glimmer DSL for Web by using one of the two technologies in every page. But, mixing them in the same pages is not recommended at the moment, so any pages loaded with Glimmer DSL for Web must be loaded without Turbo (e.g. by putting "data-turbo"="false" on anchor "a" tag links to Glimmer pages).
 
 If you run into any issues in setup, refer to the [Sample Glimmer DSL for Web Rails 7 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) project (in case I forgot to include some setup steps by mistake).
@@ -1556,7 +1562,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.3.0'
+gem 'glimmer-dsl-web', '~> 0.3.1'
 ```
 
 Run:
@@ -3262,6 +3268,8 @@ Screenshot:
 
 [lib/glimmer-dsl-web/samples/regular/todo_mvc.rb](/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb)
 
+[lib/glimmer-dsl-web/samples/regular/todo_mvc](/lib/glimmer-dsl-web/samples/regular/todo_mvc)
+
 ```ruby
 require 'glimmer-dsl-web'
 
@@ -3354,10 +3362,6 @@ 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.3.0
+0.3.1

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.3.0 ruby lib
+# stub: glimmer-dsl-web 0.3.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.3.0"
+  s.version = "0.3.1"
 
   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-25"
+  s.date = "2024-07-01"
   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 = [
@@ -93,7 +93,7 @@ Gem::Specification.new do |s|
 
   s.specification_version = 4
 
-  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6"])
+  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.8"])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0"])
   s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.4.0"])
   s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2"])
@@ -101,7 +101,7 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1"])
   s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.1"])
   s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1", "< 3.0.0"])
-  s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 1.0.0"])
+  s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 1.0.1"])
   s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0", "< 14.0.0"])
   s.add_development_dependency(%q<rake-tui>.freeze, [">= 0"])
   s.add_development_dependency(%q<jeweler>.freeze, [">= 2.3.9", "< 3.0.0"])

data/lib/glimmer/web/component.rb

@@ -316,6 +316,10 @@ module Glimmer
         @markup_root&.render(parent: parent, custom_parent_dom_element: custom_parent_dom_element, brand_new: brand_new)
       end
       
+      def remove
+        @markup_root&.remove
+      end
+      
       # Returns content block if used as an attribute reader (no args)
       # Otherwise, if a block is passed, it adds it as content to this Glimmer web component
       def content(*args, &block)

data/lib/glimmer/web/element_proxy.rb

@@ -542,9 +542,9 @@ module Glimmer
         element_binding_translator = value_converters_for_input_type(type)[:model_to_view]
         element_binding_parameters = [self, property, element_binding_translator]
         element_binding = DataBinding::ElementBinding.new(*element_binding_parameters)
-        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)
+        element_binding.call(model_binding.evaluate_property)
         data_bindings[element_binding] = model_binding
         unless model_binding.binding_options[:read_only]
           # TODO add guards against nil cases for hash below

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/models/todo.rb

@@ -1,28 +1,9 @@
-Todo = Struct.new(:task, :completed, :editing, keyword_init: true) do
-  class << self
-    attr_writer :all
-    
-    def all
-      @all ||= []
-    end
-    
-    def active
-      all.select(&:active?)
-    end
-    
-    def completed
-      all.select(&:completed?)
-    end
-  end
-  
-  FILTERS = [:all, :active, :completed]
-  
+Todo = Struct.new(:task, :completed, :editing, :deleted, keyword_init: true) do
   alias completed? completed
   alias editing? editing
+  alias deleted? deleted
   
-  def active
-    !completed
-  end
+  def active = !completed
   alias active? active
   
   def start_editing

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/presenters/todo_presenter.rb

@@ -3,53 +3,54 @@ require 'glimmer/data_binding/observer'
 require_relative '../models/todo'
 
 class TodoPresenter
+  FILTERS = [:all, :active, :completed]
   FILTER_ROUTE_REGEXP = /\#\/([^\/]*)$/
   
-  attr_accessor :todos, :can_clear_completed, :active_todo_count
-  attr_reader :new_todo, :filter
+  attr_accessor :can_clear_completed, :active_todo_count, :created_todo
+  attr_reader :todos, :new_todo, :filter
   
   def initialize
-    @todos = Todo.all.clone
+    @todos = []
     @new_todo = Todo.new(task: '')
     @filter = :all
-    refresh_todo_stats
+    @can_clear_completed = false
+    @active_todo_count = 0
+    todo_stat_refresh_observer.observe(todos) # refresh stats if todos array adds/removes todo objects
   end
   
-  def create_todo(todo = nil)
-    todo ||= new_todo.clone
-    Todo.all.prepend(todo)
-    observers_for_todo_stats[todo.object_id] = todo_stat_observer.observe(todo, :completed) unless observers_for_todo_stats.has_key?(todo.object_id)
-    refresh_todos_with_filter
-    refresh_todo_stats
-    new_todo.task = ''
-  end
+  def active_todos = todos.select(&:active?)
+  
+  def completed_todos = todos.select(&:completed?)
   
-  def refresh_todos_with_filter
-    self.todos = Todo.send(filter).clone
+  def create_todo
+    todo = new_todo.clone
+    todos.append(todo)
+    observe_todo_completion_to_update_todo_stats(todo)
+    new_todo.task = ''
+    self.created_todo = todo # notifies View observer indirectly to add created todo to todo list
   end
   
   def filter=(filter)
     return if filter == @filter
     @filter = filter
-    refresh_todos_with_filter
   end
   
   def destroy(todo)
     delete(todo)
-    refresh_todos_with_filter
-    refresh_todo_stats
   end
   
   def clear_completed
-    Todo.completed.each { |todo| delete(todo) }
-    refresh_todos_with_filter
-    refresh_todo_stats
+    refresh_todo_stats do
+      completed_todos.each { |todo| delete(todo) }
+    end
   end
   
   def toggle_all_completed
-    target_completed_value = Todo.active.any?
-    todos_to_update = target_completed_value ? Todo.active : Todo.completed
-    todos_to_update.each { |todo| todo.completed = target_completed_value }
+    target_completed_value = active_todos.any?
+    todos_to_update = target_completed_value ? active_todos : completed_todos
+    refresh_todo_stats do
+      todos_to_update.each { |todo| todo.completed = target_completed_value }
+    end
   end
   
   def setup_filter_routes
@@ -73,30 +74,42 @@ class TodoPresenter
   
   private
   
+  def observe_todo_completion_to_update_todo_stats(todo)
+    # saving observer registration object to deregister when deleting todo
+    observers_for_todo_stats[todo.object_id] = todo_stat_refresh_observer.observe(todo, :completed)
+  end
+  
+  def todo_stat_refresh_observer
+    @todo_stat_refresh_observer ||= Glimmer::DataBinding::Observer.proc { refresh_todo_stats }
+  end
+  
   def delete(todo)
-    Todo.all.delete(todo)
+    todos.delete(todo)
     observer_registration = observers_for_todo_stats.delete(todo.object_id)
     observer_registration&.deregister
+    todo.deleted = true # notifies View observer indirectly to delete todo
   end
   
   def observers_for_todo_stats
     @observers_for_todo_stats = {}
   end
   
-  def todo_stat_observer
-    @todo_stat_observer ||= Glimmer::DataBinding::Observer.proc { refresh_todo_stats }
-  end
-  
-  def refresh_todo_stats
+  def refresh_todo_stats(&work_before_refresh)
+    if work_before_refresh
+      @do_not_refresh_todo_stats = true
+      work_before_refresh.call
+      @do_not_refresh_todo_stats = nil
+    end
+    return if @do_not_refresh_todo_stats
     refresh_can_clear_completed
     refresh_active_todo_count
   end
   
   def refresh_can_clear_completed
-    self.can_clear_completed = Todo.completed.any?
+    self.can_clear_completed = todos.any?(&:completed?)
   end
   
   def refresh_active_todo_count
-    self.active_todo_count = Todo.active.count
+    self.active_todo_count = active_todos.count
   end
 end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_filters.rb

@@ -5,7 +5,7 @@ class TodoFilters
   
   markup {
     footer(class: 'todo-filters') {
-      style <= [ Todo, :all,
+      style <= [ presenter, :todos,
                  on_read: ->(todos) { todos.empty? ? 'display: none;' : '' }
                ]
       
@@ -14,12 +14,14 @@ class TodoFilters
           inner_text <= [presenter, :active_todo_count]
         }
         span {
-          " items left"
+          inner_text <= [presenter, :active_todo_count,
+                          on_read: -> (active_todo_count) { " item#{'s' if active_todo_count != 1} left" }
+                        ]
         }
       }
       
       ul(class: 'filters') {
-        Todo::FILTERS.each do |filter|
+        TodoPresenter::FILTERS.each do |filter|
           li {
             a(filter.to_s.capitalize, href: "#/#{filter unless filter == :all}") {
               class_name <= [ presenter, :filter,

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list.rb

@@ -5,9 +5,17 @@ class TodoList
   
   option :presenter
   
+  after_render do
+    observe(presenter, :created_todo) do |todo|
+      @todo_ul.content { # re-open todo ul content to add created todo
+        todo_list_item(presenter:, todo:)
+      }
+    end
+  end
+  
   markup {
     main(class: 'main') {
-      style <= [ Todo, :all,
+      style <= [ presenter, :todos,
                  on_read: ->(todos) { todos.empty? ? 'display: none;' : '' }
                ]
       
@@ -21,12 +29,14 @@ class TodoList
         }
       }
       
-      ul(class: 'todo-list') {
-        content(presenter, :todos) {
-          presenter.todos.each do |todo|
-            todo_list_item(presenter:, todo:)
-          end
-        }
+      @todo_ul = ul {
+        class_name <= [presenter, :filter,
+                        on_read: ->(filter) { "todo-list #{filter}" }
+                      ]
+      
+        presenter.todos.each do |todo|
+          todo_list_item(presenter:, todo:)
+        end
       }
       
       style {
@@ -84,5 +94,15 @@ class TodoList
       margin '0'
       padding '0'
     }
+    
+    rule('.todo-list.active li.completed') {
+      display 'none'
+    }
+    
+    rule('.todo-list.completed li.active') {
+      display 'none'
+    }
+    
+    TodoListItem.todo_list_item_styles
   end
 end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list_item.rb

@@ -6,20 +6,25 @@ class TodoListItem
   option :presenter
   option :todo
   
+  after_render do
+    # after rendering markup, observe todo deleted attribute and remove component when deleted
+    observe(todo, :deleted) do |deleted|
+      self.remove if deleted
+    end
+  end
+  
   markup {
     li {
       class_name <= [ todo, :completed,
-                      on_read: -> (completed) { li_class_name(todo) }
+                      on_read: -> { li_class_name(todo) }
                     ]
       class_name <= [ todo, :editing,
-                      on_read: -> (editing) { li_class_name(todo) }
+                      on_read: -> { li_class_name(todo) }
                     ]
       
       div(class: 'view') {
         input(class: 'toggle', type: 'checkbox') {
-          checked <=> [ todo, :completed,
-                        after_write: -> (_) { presenter.refresh_todos_with_filter if presenter.filter != :all }
-                      ]
+          checked <=> [todo, :completed]
         }
         
         label {
@@ -38,23 +43,18 @@ class TodoListItem
       }
       
       edit_todo_input(presenter:, todo:)
-      
-      if todo == presenter.todos.first
-        style {
-          todo_list_item_styles
-        }
-      end
     }
   }
   
   def li_class_name(todo)
     classes = []
     classes << 'completed' if todo.completed?
+    classes << 'active' if !todo.completed?
     classes << 'editing' if todo.editing?
     classes.join(' ')
   end
   
-  def todo_list_item_styles
+  def self.todo_list_item_styles
     rule('.todo-list li.completed label') {
       color '#949494'
       text_decoration 'line-through'

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_mvc_footer.rb

@@ -7,10 +7,10 @@ class TodoMvcFooter
         "Double-click to edit a todo"
       }
       p {
-        "Created by #{a('Andy Maleh', href: 'https://github.com/AndyObtiva')}"
+        "Created by #{a('Andy Maleh', href: 'https://github.com/AndyObtiva', target: '_blank')}"
       }
       p {
-        "Part of #{a('TodoMVC', href: 'http://todomvc.com')}"
+        "Part of #{a('TodoMVC', href: 'http://todomvc.com', target: '_blank')}"
       }
       
       style {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-25 00:00:00.000000000 Z
+date: 2024-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.7.6
+        version: 2.7.8
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.7.6
+        version: 2.7.8
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-xml
   requirement: !ruby/object:Gem::Requirement
@@ -134,14 +134,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.0.0
+        version: 1.0.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.0.0
+        version: 1.0.1
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement