glimmer-dsl-web 0.6.5 → 0.6.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6eb86fb33f7053193df400df56389ceaecad3b8857b7e110da57353682f9d7a3
-  data.tar.gz: f713f308fbb0cf9fbdd5f965465e8d875571fc07a2b126e38403236124b047f2
+  metadata.gz: 542796633baef10477c8cda0c134586e6fda1cb7b9b335d618525fa889f14f2b
+  data.tar.gz: c35bc5b7d2a1290e700fea1853470f102351993d4a9747764a16b560bca36050
 SHA512:
-  metadata.gz: 98b0322be04f66756a304156880507c6f9cff290337d734709c3c6742693b0d0129e0e2a4c1af5e286ea41495e7c8064741d48f4e2e6d361049659d3619b0d3d
-  data.tar.gz: 05161d53f0d4a57a9b6c460ca6eef9a5a5e6606cfc21245ef77ca0c1720bac0116f619eccdf7b3e2a85018056e07a8e5525e23e05035edde0b84126b5ccb37c8
+  metadata.gz: eb2ed76d330dc4b503890e216d352210fd50fe2a1590883df31964853c7bd707857fc201c6ae102a507ed844bcd94537f318a86682a874f66448206bafa90bd0
+  data.tar.gz: f5836f4e4e8f0d377f54e1a16198a29bf0db10c28dc23a4a758435809ebc48b8982e882bcc1e408dce6d79db1ed11b5df237e8ee7f404a4e1f72fff5eab4f298

data/CHANGELOG.md

@@ -1,10 +1,16 @@
 # Change Log
 
+## 0.6.6
+
+- `Rails::ResourceService` supports index/show/create/update/destory REST API calls for any Rails resources
+- Support being able to set or data-bind `title` property on HTML elements
+- Restrict use of `title` tag to within a `head` element only
+
 ## 0.6.5
 
 - Ensure clearing input datetime/date/time/month values sends `nil` to the data-bound model attribute (not `''`, which caused issues)
-- Support data-binding input month vaue to a model attribute that has a datetime value
-- Fix issue with clearing date/time from Hello, Input Date/Time! causing errors in the web browser console
+- Support data-binding input month value to a model attribute that has a datetime value
+- Fix issue with clearing date/time in Hello, Input Date/Time! causing errors in the web browser console
 
 ## 0.6.4
 

data/README.md

@@ -1,23 +1,27 @@
-# [<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.6.5 (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.6.6 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
-### The "Rails" of Frontend Frameworks!!!
+### The "Rails" of Frontend Frameworks!!! ([Fukuoka Award Winning](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))
 #### 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)
 [![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)
 
 **(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
 
+**([Fukuoka Prefecture Future IT Initiative 2025 Money Forward Award Winner](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))**
+
 **(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4))**
 
 **(Ruby Rogues Podcast: [Building Better Ruby Apps: Glimmer Component Slots and More](https://topenddevs.com/podcasts/ruby-rogues/episodes/building-better-ruby-apps-glimmer-s-component-slots-and-more-ruby-653))**
 
 [![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/)
 
+**Endorsement:** *"I'd like to endorse Andy Maleh’s work (Glimmer DSL for Web). I got introduced to it at RubyConf 2024 and have been playing around with it pretty successfully. What I have found most interesting is that I have been writing inside of a rails app, where I have been running the same code for models and presenters inside of MRI rspec. That way I can write tests that verify behavior of the presenters and models and still see them run successfully in the browser. That allows me to have a very nice cycle of refactoring and being confident in my changes without even running it in browser. I just assume that the binding will work and it usually works perfectly."* - Steve Tuckner on January 9, 2024
+
 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 Frontends (aka SPA: Single Page Applications) 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) (including full support for [SVG](#hello-svg)), 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), [Component Slots](#hello-component-slots), and [Component Custom Event Listeners](#hello-component-listeners). 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 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 SPA (Single Page Applications), 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 DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based SPA drop-in replacement for your existing JavaScript Frontend SPA 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 HTTP/Ajax 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 HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_api.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). [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) currently runs on [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)), a Ruby-to-JavaScript transpiler. In the future, it might support other Frontend Ruby environments, such as [ruby.wasm](https://github.com/ruby/ruby.wasm).
+[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based SPA drop-in replacement for your existing JavaScript Frontend SPA 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 HTTP/Ajax 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 HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_api.rb) or [Rails REST API index/show/create/update/destroy web requests for Resources](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager/presenters/contact_presenter.rb) via [Rails::ResourceService](/lib/rails/resource_service.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). [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) currently runs on [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)), a Ruby-to-JavaScript transpiler. In the future, it might support other Frontend Ruby environments, such as [ruby.wasm](https://github.com/ruby/ruby.wasm).
 
 After looking through the [samples](#samples) below, read the [FAQ (Frequently Asked Questions)](#faq) to learn more about how Glimmer DSL for Web compares to other approaches/libraries like Hotwire (Turbo), Phlex, ViewComponent, Angular, Vue, React, Svelte, and other JS frameworks.
 
@@ -1377,11 +1381,11 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Setup
 
-You can setup Glimmer DSL for Web in [Rails 7](#rails-7), [Rails 6](#rails-6), or [Standalone (No Rails)](#standalone-no-rails).
+You can setup Glimmer DSL for Web in [Rails 7](#rails-7) or [Standalone (No Rails)](#standalone-no-rails).
 
 Once done, read [Usage](#usage) instructions. Note that for serious app usage, it is recommended to build [components](#hello-component) and use the [`glimmer_component` Rails Helper](#hello-glimmer_component-rails-helper) to embed the top-level Web Frontend component in a Rails View.
 
-(NOTE: Keep in mind this is a Beta. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
+(NOTE: Keep in mind this is a Beta. If you run into issues, read the [FAQ](#faq) in case they are addressed there (e.g. [I sometimes get an Opal error that makes no sense in relation to my code. How do I fix it?](https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/README.md#i-sometimes-get-an-opal-error-that-makes-no-sense-in-relation-to-my-code-how-do-i-fix-it)) and try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
 
 ### Rails 7
 
@@ -1404,7 +1408,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.6.5'
+gem 'glimmer-dsl-web', '~> 0.6.6'
 ```
 
 Run:
@@ -1616,6 +1620,8 @@ Andreas Idogawa-Wildi ([@Largo](https://github.com/Largo)) created a project tha
 
 ## Usage
 
+### Glimmer HTML DSL
+
 Glimmer DSL for Web offers a HTML DSL ([Graphical User Interface](https://en.wikipedia.org/wiki/Graphical_user_interface) [Domain Specific Language](https://en.wikipedia.org/wiki/Domain-specific_language)) for building HTML Web User Interfaces declaratively in Ruby.
 
 1- **Keywords (HTML Elements)**
@@ -1690,6 +1696,40 @@ Next, check out [Samples](#samples).
 
 Note that for serious app usage, it is recommended to build [components](#hello-component) and use the [`glimmer_component` Rails Helper](#hello-glimmer_component-rails-helper) to embed the top-level Web Frontend component in a Rails View.
 
+### Rails::ResourceService
+
+To make REST API calls (web requests) to the Backend of a Rails application in order to index/show/create/update/delete resources,
+you can use [Rails::ResourceService](/lib/rails/resource_service.rb) (`require 'rails/resource_service'` to use). Consult
+the `Rails::ResourceService` class source code to find out what its API is. It can work with a basic Rails Scaffold of a Resource
+if Developers would rather not write the Backend by hand.
+
+Example from [ContactPresenter](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager/presenters/contact_presenter.rb) in the [Contact Manager](#contact-manager) sample:
+
+`form_contact` is an instance of the [Contact](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager/models/contact.rb) class.
+
+```ruby
+    Rails::ResourceService.update(resource: form_contact) do |response|
+      if response.ok?
+        updated_contact_response_body = Native(response.body)
+        updated_contact = form_contact.clone
+        updated_contact.updated_at = updated_contact_response_body.updated_at
+        contacts[edit_index].load_with(updated_contact)
+        self.edit_index = nil
+        form_contact.reset
+        form_contact.errors = nil
+      else
+        form_contact.errors = JSON.parse(response.body)
+      end
+    end
+```
+
+Note that there are alternative ways of invoking the `Rails::ResourceService.update` call:
+- `Rails::ResourceService.update(resource: form_contact)`
+- `Rails::ResourceService.update(resource_class: Contact, resource_id: form_contact.id, resource_attributes: {first_name: form_contact.first_name, ...})`
+- `Rails::ResourceService.update(singular_resource_name: 'contact', resource_id: form_contact.id, resource_attributes: {first_name: form_contact.first_name, ...})`
+- `Rails::ResourceService.update(update_resource_url: "/contacts/#{form_contact.id}.json", resource_attributes: {first_name: form_contact.first_name, ...})`
+- `Rails::ResourceService.update(update_resource_url: "/contacts/#{form_contact.id}.json", params: {contact: {first_name: form_contact.first_name, ...}})`
+
 ## Supported Glimmer DSL Keywords
 
 [All HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), following the Ruby method name standard of lowercase and underscored names.
@@ -4503,6 +4543,18 @@ end
 
 ![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)
 
+#### Contact Manager
+
+The Contact Manager sample demonstrates talking to the Rails Backend by making create/update/destory REST API calls
+to RESTful Resources via the `Rails::ResourceService` class that is included in Glimmer DSL for Web
+(`require 'rails/resource_service'` to use).
+
+[https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager.rb](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager.rb)
+
+[https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/contact_manager)
+
+![contact manager](/images/glimmer-dsl-web-samples-regular-contact-manager.gif)
+
 ## Design Principles
 
 - The Ruby Way (including TIMTOWTDI: There Is More Than One Way To Do It)
@@ -4544,30 +4596,33 @@ Learn more by reading the [GPG](https://github.com/AndyObtiva/glimmer/blob/maste
 
 F.A.Q. (Frequently Asked Questions):
 
-**Can I reuse JavaScript libraries from Glimmer DSL for Web in Ruby?**
+#### Can I reuse JavaScript libraries from Glimmer DSL for Web in Ruby?
 
 Absolutely. Glimmer DSL for Web can integrate with any JavaScript libraries. You can either load the JavaScript libraries in advance by linking to them in the Rails View/Layout (e.g. linking to JS library CDN URLs) or by including JavaScript files in the lookup directories of Opal Ruby, and adding a Ruby `require('path_to_js_lib')` call in the code. In Ruby, the `$$` global variable gives access to the top-level JavaScript global scope, which enables invocations on any JavaScript objects. For example, `$$.hljs` gives access to the loaded `window.hljs` object for the Highlight.js library, and that enables invoking any functions from that library as needed, like `$$.hljs.highlightAll` to activate code syntax highlighting.
 
-**How does Glimmer DSL for Web compare to Rails Hotwire (Turbo)?**
+#### How does Glimmer DSL for Web compare to Rails Hotwire (Turbo)?
 
 Glimmer DSL for Web is a Frontend library, meaning it replaces the JavaScript layer in a web application (e.g. Rails app) with Ruby code. On the other hand, Rails Hotwire (Turbo) is mostly a Backend-driven technology that enables automatically replacing HTML DOM elements with HTML markup sent over the wire from a Rails Backend. So, the two technologies are mostly orthogonal, but can be used in the same Rails web application, albeit exclusively on separate web pages at the moment. In the future, we might explore supporting the ability to combine both technologies in the same pages, but until then, use on separate pages. Glimmer DSL for Web can handle any sort of Frontend interactions even without making HTTP calls to the Backend, so it can implement more use-cases than Hotwire. Using Glimmer DSL for Web with Rails API end-points is simpler than using Hotwire overall. That is because Glimmer Content Data-Binding is a simpler version of Turbo Frames that does not require worrying about setting and using element IDs (as that is handled automatically) and that operates at a more correct abstraction level for how we think about View component updates in relation to Model changes (we make updates at the Model layer, and they automatically get reflected in the View through data-binding). Also, Glimmer DSL for Web supports Glimmer Web Components, which enable better division and organization of View code into modular components than ERB plus having higher readability. It is true that Hotwire is an improvement over using JavaScript frameworks like React when there is not much logic beyond updating elements with Server-Side rendered HTML. And, Glimmer DSL for Web is the next big advancement that provides an even simpler approach while also giving you full Frontend Development capabilities using Ruby in the Browser.
 
-**How does Glimmer DSL for Web compare to Phlex or ViewComponent?**
+#### How does Glimmer DSL for Web compare to Phlex or ViewComponent?
 
 Glimmer DSL for Web is a Frontend library, meaning it replaces the JavaScript layer in a web application (e.g. Rails app) with Ruby code while providing its own View-layer component support using [`Glimmer::Web::Component`](#hello-component). On the other hand, Phlex and ViewComponent are Backend View-layer component libraries, so they serve 100% orthogonal needs, and can be used side by side with Glimmer DSL for Web if needed (e.g. Phlex components can consist of Backend HTML elements + Glimmer components that are rendered in the Frontend). That said, Phlex came out years after previous Glimmer libraries like Glimmer DSL for SWT, and Phlex's component system is very similar to Glimmer's component system in Glimmer DSL for SWT (perhaps inspired by it unconsciously or consciously). So, if you like Phlex in the Backend, you'll love Glimmer DSL for Web in the Frontend.
 
-**How does Glimmer DSL for Web compare to Angular, React, Vue, Svelte, or other JS frameworks?**
+#### How does Glimmer DSL for Web compare to Angular, React, Vue, Svelte, or other JS frameworks?
 
 Without delving into details, Glimmer DSL for Web is meant to be a Ruby-based drop-in replacement for Angular, React, Vue, Svelte, and other JS frameworks. Glimmer Ruby code is transpiled to JavaScript, so it has JavaScript performance in general, which is not that far from that of Angular, React, or Vue. Glimmer DSL for Web has outperformed React by a factor of 33.33% in rendering 3000+ elements in a realistic app scenario that was benchmarked recently (in Oct 2024). Additionally, it enables writing both structure code and logic code in the same language (Ruby), greatly simplifying maintainability and improving productivity by eliminating multi-language dissonance and friction that drags down productivity as there is no need anymore to think in multiple languages unnecessarily, use XML based solutions (e.g. JSX), or use templating solutions (e.g. Mustache). Lastly, Glimmer DSL for Web supports familiar Software Engineering architectural patterns like Model-View-Controller and Model-View-Presenter, enabling Software Engineers to write the lightest and simplest code possible for building Web frontends in Ruby, with the best separation of concerns. Software Engineers can finally become happy Ruby developers by writing Ruby code in the Frontend too now in addition to the Backend.
 
-**How do I have a Glimmer Web Component re-render in a similar way to how React components re-render?**
+#### How do I have a Glimmer Web Component re-render in a similar way to how React components re-render?
 
 [Content Data-Binding](#hello-content-data-binding) supports re-rendering dynamic parts of a Glimmer Web Component (or the full component if all of it is dynamic). Glimmer DSL for Web simplifies Frontend Development significantly over React by not re-rendering everything if not needed (regardless of use of Virtual DOM) yet only re-rendering the parts of a component that do change dynamically. As a result, Software Engineers do not have to worry about the ripple effect of full re-renders or the possibility of breaking some parts of a page when making small changes to a single component in a hierarchy of page components. And, if only an element property changes, [Content Data-Binding](#hello-content-data-binding) is not even needed. It is much simpler to rely on simple [Property Data-Binding](#hello-data-binding) in that case. This makes reasoning about Glimmer DSL for Web Ruby code a lot simpler than reasoning about React component JavaScript code.
 
-**How do I reuse React components from Glimmer DSL for Web?**
+#### How do I reuse React components from Glimmer DSL for Web?
 
 In the future, support for HTML Web Components will be added, and that will enable reuse of React components by using a library that converts them to HTML Web Components first like [react-to-web-component](https://github.com/bitovi/react-to-web-component) or [react-webcomponent](https://github.com/adobe/react-webcomponent).
 
+#### I sometimes get an Opal error that makes no sense in relation to my code. How do I fix it?
+
+That happens randomly sometimes (e.g. `Uncaught SyntaxError: Unexpected token ':'`) because of a bug in Sprockets caching of Opal assets (which has been reported to the Opal team). To get around it, try first to restart the Rails server and then refresh the page. If that does not resolve the issue, stop the Rails server, clear tmp/cache (run `rm -rf tmp/cache` to clear cache generated by Opal), start the Rails server again, and refresh the page. This should definitely resolve the issue if it was indeed not caused by your code, yet by the Opal Sprockets caching bug.
 
 ### Issues
 

data/VERSION

@@ -1 +1 @@
-0.6.5
+0.6.6

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.6.5 ruby lib
+# stub: glimmer-dsl-web 0.6.6 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.6.5"
+  s.version = "0.6.6"
 
   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 = "2025-01-20"
+  s.date = "2025-02-17"
   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, Component Slots, and Component Custom Event Listeners. 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,8 @@ Gem::Specification.new do |s|
     "lib/glimmer/web/element_proxy.rb",
     "lib/glimmer/web/event_proxy.rb",
     "lib/glimmer/web/formatting_element_proxy.rb",
-    "lib/glimmer/web/listener_proxy.rb"
+    "lib/glimmer/web/listener_proxy.rb",
+    "lib/rails/resource_service.rb"
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
   s.licenses = ["MIT".freeze]

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

@@ -25,6 +25,11 @@ module Glimmer
               args.size == 1 && args.first.is_a?(Hash) ||
               args.size == 2 && args.first.is_a?(String) && args.last.is_a?(Hash)
             ) &&
+            (
+              keyword != 'title' ||
+              parent.nil? ||
+              parent.keyword == 'head'
+            ) &&
             ( # ensure SVG keywords only live under SVG element (unless it's the SVG element itself)
               !Glimmer::Web::ElementProxy.svg_keyword_supported?(keyword) ||
               keyword == 'svg' ||

data/lib/glimmer/web/element_proxy.rb

@@ -131,6 +131,9 @@ module Glimmer
       ].map(&:downcase)
  
       ELEMENT_KEYWORDS = HTML_ELEMENT_KEYWORDS + SVG_ELEMENT_KEYWORDS
+      
+      # title is a special attribute because it matches an element tag name (needs special treatment)
+      HTML_ELEMENT_SPECIAL_ATTRIBUTES = ['title']
 
       GLIMMER_ATTRIBUTES = [:parent]
       PROPERTY_ALIASES = {
@@ -732,7 +735,13 @@ module Glimmer
         # 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?('class_name_')
+        if method_name.end_with?('=') && HTML_ELEMENT_SPECIAL_ATTRIBUTES.include?(property_name)
+          if rendered?
+            dom_element.attr(property_name, *args)
+          else
+            enqueue_post_render_method_call(method_name, *args, &block)
+          end
+        elsif method_name.to_s.start_with?('class_name_')
           property, sub_property = method_name.to_s.match(REGEX_CLASS_NAME_SUB_PROPERTY).to_a.drop(1)
           if args.empty?
             class_name_included(sub_property)

data/lib/rails/resource_service.rb

@@ -0,0 +1,76 @@
+module Rails
+  # ResourceService supports index/show/create/update/destory REST API calls for any Rails resources
+  # Automatically loads the authenticity token from meta[name=csrf-token] content attribute
+  # Assumes a resource or resource class that matches the name of a Backend ActiveRecord Model (e.g. Contact class or instance)
+  class ResourceService
+    TIMESTAMP_ATTRIBUTES = ['created_at', 'updated_at']
+    
+    class << self
+      def index(resource: nil, resource_class: nil, singular_resource_name: nil, plural_resource_name: nil, index_resource_url: nil, params: nil, &response_handler)
+        resource_class ||= resource&.class
+        singular_resource_name ||= singular_resource_name_for_resource_class(resource_class)
+        plural_resource_name ||= "#{singular_resource_name}s"
+        index_resource_url ||= "/#{plural_resource_name}.json"
+        HTTP.get(index_resource_url, payload: index_show_destroy_resource_params(params: params.to_h), &response_handler)
+      end
+      
+      def show(resource: nil, resource_class: nil, resource_id: nil, singular_resource_name: nil, plural_resource_name: nil, show_resource_url: nil, params: nil, &response_handler)
+        resource_class ||= resource&.class
+        resource_id ||= resource&.id
+        singular_resource_name ||= singular_resource_name_for_resource_class(resource_class)
+        plural_resource_name ||= "#{singular_resource_name}s"
+        show_resource_url ||= "/#{plural_resource_name}/#{resource_id}.json"
+        HTTP.get(show_resource_url, payload: index_show_destroy_resource_params(params: params.to_h), &response_handler)
+      end
+      
+      def create(resource: nil, resource_class: nil, resource_attributes: nil, singular_resource_name: nil, plural_resource_name: nil, create_resource_url: nil, params: nil, &response_handler)
+        resource_class ||= resource&.class
+        singular_resource_name ||= singular_resource_name_for_resource_class(resource_class)
+        plural_resource_name ||= "#{singular_resource_name}s"
+        create_resource_url ||= "/#{plural_resource_name}.json"
+        HTTP.post(create_resource_url, payload: create_update_resource_params(resource:, resource_class:, resource_attributes:, singular_resource_name:, params: params.to_h), &response_handler)
+      end
+      
+      def update(resource: nil, resource_class: nil, resource_id: nil, resource_attributes: nil, singular_resource_name: nil, plural_resource_name: nil, update_resource_url: nil, params: nil, &response_handler)
+        resource_class ||= resource&.class
+        resource_id ||= resource&.id
+        singular_resource_name ||= singular_resource_name_for_resource_class(resource_class)
+        plural_resource_name ||= "#{singular_resource_name}s"
+        update_resource_url ||= "/#{plural_resource_name}/#{resource_id}.json"
+        HTTP.patch(update_resource_url, payload: create_update_resource_params(resource:, resource_class:, resource_attributes:, singular_resource_name:, params: params.to_h), &response_handler)
+      end
+      
+      def destroy(resource: nil, resource_class: nil, resource_id: nil, singular_resource_name: nil, plural_resource_name: nil, destroy_resource_url: nil, params: nil, &response_handler)
+        resource_class ||= resource&.class
+        resource_id ||= resource&.id
+        singular_resource_name ||= singular_resource_name_for_resource_class(resource_class)
+        plural_resource_name ||= "#{singular_resource_name}s"
+        destroy_resource_url ||= "/#{plural_resource_name}/#{resource_id}.json"
+        HTTP.delete(destroy_resource_url, payload: index_show_destroy_resource_params(params: params.to_h), &response_handler)
+      end
+      
+      def index_show_destroy_resource_params(params: nil)
+        {authenticity_token:}.merge(params.to_h)
+      end
+      
+      def create_update_resource_params(resource: nil, resource_class: nil, resource_attributes: nil, singular_resource_name: nil, params: nil)
+        resource_class ||= resource&.class
+        singular_resource_name ||= singular_resource_name_for_resource_class(resource_class)
+        resource_params = {authenticity_token:}
+        resource_attributes ||= resource&.to_h&.reject { |attribute, value| TIMESTAMP_ATTRIBUTES.include?(attribute) }
+        resource_params[singular_resource_name] = resource_attributes.to_h
+        resource_params = resource_params.merge(params.to_h)
+        resource_params
+      end
+      
+      def authenticity_token
+        Element['meta[name=csrf-token]'].attr('content')
+      end
+      
+      def singular_resource_name_for_resource_class(resource_class)
+        return nil if resource_class.nil?
+        resource_class.to_s.split('::').last.downcase
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.6.5
+  version: 0.6.6
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-20 00:00:00.000000000 Z
+date: 2025-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -328,6 +328,7 @@ files:
 - lib/glimmer/web/event_proxy.rb
 - lib/glimmer/web/formatting_element_proxy.rb
 - lib/glimmer/web/listener_proxy.rb
+- lib/rails/resource_service.rb
 homepage: http://github.com/AndyObtiva/glimmer-dsl-web
 licenses:
 - MIT