glimmer-dsl-web 0.2.6 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45ca1b698d2d53da63a133041ac83c77888d42b1e504bc2fa3b81b54c610ff32
-  data.tar.gz: 91268134dcba4d5d04435d8ee517f7a1e39e277ff0be9487aa7dd99eb1899ee2
+  metadata.gz: a9f4b7e33522df500ca481bf4b9ba138c6cb3dad3847bee24f3f506fa985ac11
+  data.tar.gz: fd7fd300d3519276ffb27de97049daf2b59cec4a5f1c2882b7386257dddc25d7
 SHA512:
-  metadata.gz: 68b47d95332b4156d5c04643078cf95bf9d51098b5219836bb1a25eb440d2db25fca55ade3179c64b6587b887b890d4188eb8a91b2f9a32c78ba88027c114774
-  data.tar.gz: efdb2f8bfb640b0fe1ce052cf867c2d0b58f4ceae6284e23178f51d42b296e53dda009794cd08cb7a46ec2cc0894f0a9054c1a903d40bc7c62dae0570eec16e9
+  metadata.gz: dbfcc16bf944ef8726912ee31e2ab8f045bba776a63d4377fea70c0fa28d990907b17f94b59ea0cc8e6e4855a4bba2bd965a66bea44fb53fd20ce3539cb09518
+  data.tar.gz: 1220943c86ee1455654901700c1bf90834b81af96e355b86ebb7a91275a6130030917ce13eaa755cd0a8388d3fb9497b57a75372f1409989b9ffe0646774df32

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 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
+- Support `a` as a formatting element under `p`
+- Todo MVC Sample: `require 'glimmer-dsl-web/samples/regular/todo_mvc'`
+
 ## 0.2.6
 
 - Upgrade to `glimmer-dsl-xml` 1.4.0 to provide access to `html_to_glimmer` converter command (converts legacy HTML to Glimmer DSL syntax)

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.6 (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.2.8 (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)
@@ -8,9 +8,11 @@
 
 **(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) & [Frontend Ruby with Glimmer DSL for Web](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE))**
 
-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. [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.
+[![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb)
 
-[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). 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)!
+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)!
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based drop-in replacement for your existing JavaScript Frontend library (e.g. React, Angular, Vue, Ember, Svelte) or your JavaScript Frontend layer in general. It does not change how your Frontend interacts with the Backend, meaning you can continue to write Rails Backend API endpoints as needed and make Ajax HTTP requests or read data embedded in elements, but from [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c). Whatever is possible in JavaScript is possible when using Glimmer DSL for Web as it integrates with any existing JavaScript library. The [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) demonstrates how to [make Ajax HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_selector_presenter.rb) and how to [integrate with a JavaScript library](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/layouts/application.html.erb) (highlightjs) that performs [code syntax highlighting](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector.rb).
 
@@ -377,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)
 
@@ -466,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|
@@ -1148,6 +1150,102 @@ Screenshot:
 
 ![Hello, Observer!](/images/glimmer-dsl-web-samples-hello-hello-observer.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)
+
+```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)
+
 To get started, [Setup](#setup) Ruby gem, read [Usage](#usage) instructions, and check out more [Samples](#samples) (including playing around with a [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app)).
 
 --
@@ -1184,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)
@@ -1230,7 +1329,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.2.6'
+gem 'glimmer-dsl-web', '~> 0.2.8'
 ```
 
 Run:
@@ -1457,7 +1556,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.2.6'
+gem 'glimmer-dsl-web', '~> 0.2.8'
 ```
 
 Run:
@@ -2315,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)
 
@@ -2405,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|
@@ -3157,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.6
+0.2.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.2.6 ruby lib
+# stub: glimmer-dsl-web 0.2.8 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.2.6".freeze
+  s.version = "0.2.8"
 
   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-05-26"
+  s.date = "2024-06-21"
   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 = [
@@ -48,9 +48,21 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/models/todo.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/presenters/todo_presenter.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/edit_todo_input.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_form.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_input.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_filters.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_input.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list_item.rb",
+    "lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_mvc_footer.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
     "lib/glimmer/config/opal_logger.rb",
     "lib/glimmer/data_binding/element_binding.rb",
+    "lib/glimmer/dsl/web/a_expression.rb",
     "lib/glimmer/dsl/web/bind_expression.rb",
     "lib/glimmer/dsl/web/component_expression.rb",
     "lib/glimmer/dsl/web/content_data_binding_expression.rb",
@@ -76,24 +88,24 @@ Gem::Specification.new do |s|
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
   s.licenses = ["MIT".freeze]
-  s.rubygems_version = "3.5.3".freeze
+  s.rubygems_version = "3.4.10".freeze
   s.summary = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework)".freeze
 
   s.specification_version = 4
 
-  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.4.0".freeze])
-  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
-  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
-  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1".freeze])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.1".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])
-  s.add_development_dependency(%q<rake-tui>.freeze, [">= 0".freeze])
-  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_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6"])
+  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"])
+  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3"])
+  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<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"])
+  s.add_development_dependency(%q<rdoc>.freeze, [">= 6.2.1", "< 7.0.0"])
+  s.add_development_dependency(%q<opal-rspec>.freeze, ["~> 0.8.0.alpha2"])
 end
 

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

@@ -0,0 +1,17 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/web/general_element_expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class AExpression < StaticExpression
+        include GeneralElementExpression
+        
+        def can_interpret?(parent, keyword, *args, &block)
+          (parent.nil? ||
+            (parent.respond_to?(:keyword) && parent.keyword != 'p'))
+        end
+      end
+    end
+  end
+end

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

@@ -24,6 +24,7 @@ require 'glimmer/dsl/web/element_expression'
 require 'glimmer/dsl/web/formatting_element_expression'
 require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
+require 'glimmer/dsl/web/a_expression'
 require 'glimmer/dsl/web/span_expression'
 require 'glimmer/dsl/web/style_expression'
 require 'glimmer/dsl/web/bind_expression'
@@ -45,6 +46,7 @@ module Glimmer
          property
          content_data_binding
          shine_data_binding
+         style
          formatting_element
        ]
       )

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

@@ -24,7 +24,7 @@ end
 module Glimmer
   # Optimize performance through shortcut methods for all HTML elements that circumvent the DSL chain of responsibility
   element_expression = Glimmer::DSL::Web::ElementExpression.new
-  (Glimmer::Web::ElementProxy::ELEMENT_KEYWORDS - ['span', 'style']).each do |keyword|
+  (Glimmer::Web::ElementProxy::ELEMENT_KEYWORDS - ['a', 'span', 'style']).each do |keyword|
     Glimmer::DSL::Engine.static_expressions[keyword] ||= Concurrent::Hash.new
     element_expression_dsl = element_expression.class.dsl
     Glimmer::DSL::Engine.static_expressions[keyword][element_expression_dsl] = element_expression

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

@@ -1,13 +1,18 @@
-require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/expression'
 require 'glimmer/dsl/web/general_element_expression'
 
 module Glimmer
   module DSL
     module Web
-      class StyleExpression < StaticExpression
+      class StyleExpression < Expression
         include GeneralElementExpression
         include Glimmer
         
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'style' &&
+            !block.nil?
+        end
+        
         def add_content(parent, keyword, *args, &block)
           if parent.rendered? || parent.skip_content_on_render_blocks?
             return_value = css(&block).to_s

data/lib/glimmer/web/element_proxy.rb

@@ -526,8 +526,9 @@ module Glimmer
           children.dup.each { |child| child.remove }
           content(&content_block)
         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
       

data/lib/glimmer/web/formatting_element_proxy.rb

@@ -33,7 +33,8 @@ module Glimmer
           keyword = keyword.to_s
           (
             FORMATTING_ELEMENT_KEYWORDS.include?(keyword) ||
-            (keyword == 'span' && parent&.keyword == 'p')
+            (keyword == 'span' && parent&.keyword == 'p') ||
+            (keyword == 'a' && parent&.keyword == 'p')
           )
         end
       

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|

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

@@ -0,0 +1,44 @@
+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]
+  
+  alias completed? completed
+  alias editing? editing
+  
+  def active
+    !completed
+  end
+  alias active? active
+  
+  def start_editing
+    return if editing?
+    @original_task = task
+    self.editing = true
+  end
+  
+  def cancel_editing
+    return unless editing?
+    self.task = @original_task
+    self.editing = false
+  end
+  
+  def save_editing
+    return unless editing?
+    self.editing = false
+  end
+end