glimmer-dsl-web 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 481114ba7f1ac010cb7c751e3bad3fc70ee0e8353f8702ad8a86fd56a110b64d
-  data.tar.gz: be9b2ba00df78c89061b984f5437f32e5e0b7a87cdbcd34b8245837f722e01a5
+  metadata.gz: 80d1ce05da87fe291727aa2a4adf9055292ceea97ac7f78093dc85d363cc10ae
+  data.tar.gz: 2bc64773da995efb53b89676dfe6d4504c75e57ebbce3082f913233865746089
 SHA512:
-  metadata.gz: 8415b5c4fe8801512ee1e5e7d6c8d1a487dabd3420f920992ca547095aa75b59c35e0349a3a229568d91a22bdee0278cf9558de61d242f050e3e11492190d920
-  data.tar.gz: 3c14a0224d41730249213c2140c293a3fbb7f4f71f76d0573c84deb5218226cac2f073ba65e8bc19e0f970a38decc4e8166f46733e13d16d82c2fa2059864478
+  metadata.gz: 35efaaed778a61e00ac81ed1580e1f4556112926f0932fa64af1bd64e6eadb01a9add2c3760d56be3c9b78b8b2b47333e918445a7280b095ac6c112aec060088
+  data.tar.gz: 317c2cce49f3ebc01d4a95762a9b6c40d9cc6b661437dd742d3c4ca5bf8150e4ca25692a40b5541309919f3be5cb7a1ed0db9b3893dbea2bc315ad942a42e9f7

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 0.9.1
+
+- Hello, Modal! Sample: `require 'glimmer-dsl-web/samples/hello/hello_modal.rb'`
+
 ## 0.9.0
 
 - page_component_link(text:, component_class:, component_attributes:, page_url:, css_id:, css_class:, css_style:) Glimmer Web Component to instantly render a new page component in the Frontend while changing the browser URL to a shareable bookmarkable URL

data/README.md

@@ -1,18 +1,18 @@
-# [<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.9.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.9.1 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### 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)
 
-**UPCOMING APRIL 17, 2026 WORKSHOP: "Building Rails SPAs in Frontend Ruby with Glimmer DSL for Web" at [wroclove.rb 2026 Ruby Conference](https://wrocloverb.com/), in Wroclaw, Poland**
-
 **UPCOMING MAY 30, 2026 TALK: "Frontend Ruby on Rails with Glimmer DSL for Web" at [RubyConf Austria 2026](https://rubyconf.at/), in Vienna, Austria**
 
 **(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)) [(Award Announcement)](https://digitalfukuoka.jp/news/info/528/)**
 
+(**Workshops: [wroclove.rb 2026 Ruby conference workshop exercises: "Building Rails SPAs in Frontend Ruby with Glimmer DSL for Web"](https://github.com/AndyObtiva/glimmer_commerce)**)
+
 **(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)) / [Frontend Ruby with Glimmer DSL for Web at Ruby on Rio 2025-06-06 Talk](https://www.youtube.com/watch?v=LY6ulYICuzE)**
 
 **(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))**
@@ -1360,6 +1360,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Component Attribute Listeners!](#hello-component-attribute-listeners)
       - [Hello, Component Attribute Data-Binding!](#hello-component-attribute-data-binding)
       - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
+      - [Hello, Modal!](#hello-modal)
       - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Style!](#hello-style)
       - [Hello, SVG!](#hello-svg)
@@ -1388,250 +1389,34 @@ 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) or [Standalone (No Rails)](#standalone-no-rails).
+You can setup Glimmer DSL for Web in one of the following ways:
+
+- [Rails 7/8 (Build pipeline)](#rails-78-build-pipeline)
+- [Rails 7 (Sprockets pipeline)](#rails-7-sprockets-pipeline)
+- [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, 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 8
-
-Rails 8 instructions are not ready yet though they would rely on the `opal --watch` command in the Development environment to generate JavaScript files in the directory that propshaft is setup with, and Rails 8 would rely on the `opal` command to generate JavaScript files for the Production environment.
-
-Instructions will be added in the future.
-
-If you want to help contribute Rails 8 instructions, please look at the Rails 7 instructions and see what needs to be adjusted in light of the first statement above about using `opal --watch` in Development and `opal` in Production.
-
-### Rails 7
-
-(NOTE: In the future, we plan to automate the setup steps below. If you would like to help contribute that to the project, please do so and open a Pull Request.)
-
-Please follow these steps to setup.
-
-Install a Rails 7 gem:
-
-```
-gem install rails -v7.0.9.0
-```
-
-Start a new Rails 7 app:
-
-```
-rails new glimmer_app_server
-```
-
-Add the following to `Gemfile`:
-
-```
-gem 'glimmer-dsl-web', '~> 0.9.0'
-gem 'opal-rails', '2.0.4' # for Rails 7 use of Sprockets
-```
-
-Run:
-
-```
-bundle
-```
-
-(run `rm -rf tmp/cache` from inside your Rails app if you upgrade your `glimmer-dsl-web` gem version from an older one to clear Opal-Rails's cache)
-
-Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically running:
-
-```
-bin/rails g opal:install
-```
-
-To enable the `glimmer-dsl-web` gem in the frontend, edit `config/initializers/assets.rb` and add the following at the bottom (requires that you also create `manifest.opal.js` as per instructions below):
-
-```ruby
-Opal.use_gem 'glimmer-dsl-web'
-Opal.append_path Rails.root.join('app', 'assets', 'opal')
-Rails.application.config.assets.precompile += %w[manifest.opal.js]
-```
-
-To enable Opal Browser Debugging in Ruby with the [Source Maps](https://opalrb.com/docs/guides/v1.4.1/source_maps.html) feature, edit `config/initializers/opal.rb` and add the following inside the `Rails.application.configure do; end` block at the bottom of it:
-
-```ruby
-  config.assets.debug = true if Rails.env.development?
-```
-
-Assuming this is a brand new Rails application and you do not have any Rails resources, you can scaffold the welcome resource just for testing purposes.
-
-Run:
-
-```
-rails g scaffold welcome
-```
-
-Run:
-
-```
-rails db:migrate
-```
-
-Add the following to `config/routes.rb` inside the `Rails.application.routes.draw` block:
-
-```ruby
-root to: 'welcomes#index'
-```
-
-Clear the file `app/views/welcomes/index.html.erb` completely from all content.
-
-Rename `app/assets/javascript/application.js.rb` file to `app/assets/javascript/opal_application.rb`.
-
-Rename `app/assets/javascript` directory to `app/assets/opal`.
-
-Edit `app/assets/config/manifest.js` and update `//= link_directory ../javascript .js` to `//= link_directory ../opal .js`:
-
-```js
-//= link_directory ../opal .js
-```
-
-Also, create `app/assets/config/manifest.opal.js` and add the following content to it:
-```js
-//= link_tree ../opal .js
-//= link_directory ../opal .js
-```
-
-Edit `app/views/layouts/application.html.erb` and update `<%= javascript_include_tag "application", "data-turbolinks-track": "reload" %>` to `<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>`:
-
-```erb
-<%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>
-```
-
-Edit and replace `app/assets/opal/opal_application.rb` content with code below (optionally including a require statement for one of the [samples](#samples) below):
-
-```ruby
-require 'glimmer-dsl-web' # brings opal and other dependencies automatically
-
-# Add more require-statements or Glimmer HTML DSL code
-```
-
-```ruby
-require 'glimmer-dsl-web'
-
-require 'glimmer-dsl-web/samples/hello/hello_world.rb'
-```
-
-If the `<body></body>` element (where the Glimmer HTML DSL adds elements by default) is not available when the JS file is loading, you need to put the code inside a `Document.ready? do; end` (but, it is recommended that you load the JS file after the parent element like `<body></body>` is in the page already for faster performance, which is guaranteed automatically by using `glimmer_component`, mentioned in details below):
-
-```ruby
-require 'glimmer-dsl-web'
-
-Document.ready? do
-  require 'glimmer-dsl-web/samples/hello/hello_world.rb'
-end
-```
-
-Example to confirm setup is working:
-
-Glimmer HTML DSL Ruby code in the frontend:
-
-```ruby
-require 'glimmer-dsl-web'
-
-include Glimmer
-
-Document.ready? do
-  # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
-  div {
-    label(class: 'greeting') {
-      'Hello, World!'
-    }
-  }
-end
-```
-
-That produces:
-
-```html
-<body>
-  <div data-parent="body" class="element element-1">
-    <label class="greeting element element-2">
-      Hello, World!
-    </label>
-  </div>
-</body>
-```
-
-Start the Rails server:
-```
-rails s
-```
-
-Visit `http://localhost:3000`
-
-You should see:
-
-![setup is working](/images/glimmer-dsl-web-setup-example-working.png)
-
-If you want to customize where the top-level element is mounted, just pass a `parent: 'css_selector'` option.
-
-HTML:
-
-```html
-...
-<div id="app-container">
-</div>
-...
-```
-
-Glimmer HTML DSL Ruby code in the frontend:
-
-```ruby
-require 'glimmer-dsl-web'
-
-include Glimmer
-
-Document.ready? do
-  # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
-  div(parent: '#app-container') {
-    label(class: 'greeting') {
-      'Hello, World!'
-    }
-  }
-end
-```
-
-That produces:
-
-```html
-...
-<div id="app-container">
-  <div data-parent="app-container" class="element element-1">
-    <label class="greeting element element-2">
-      Hello, World!
-    </label>
-  </div>
-</div>
-...
-```
-
-You may delete `opal_application.rb` after confirming that the setup works because `glimmer_component` is the recommended way for serious use of Glimmer DSL for Web in Rails web apps.
-
-You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper` or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
+### Rails 7/8 (Build pipeline)
 
-To use `glimmer_component`, edit `app/helpers/application_helper.rb` in your Rails application, add `require 'glimmer/helpers/glimmer_helper'` on top and `include GlimmerHelper` inside `module`.
+For the modern build-based `opal-rails` flow, follow [docs/setup/rails_7_8_build_pipeline.md](docs/setup/rails_7_8_build_pipeline.md).
 
-`app/helpers/application_helper.rb` should look like this after the change:
+This is the recommended setup for:
 
-```ruby
-require 'glimmer/helpers/glimmer_helper'
+- Rails 8 apps
+- Rails 7 apps that you want on the same explicit build/watch flow, whether the host app serves assets with Propshaft or Sprockets
 
-module ApplicationHelper
-  # ...
-  include GlimmerHelper
-  # ...
-end
-```
+It is based on the current `opal-rails` build pipeline and the verified migration path used in the [Sample Glimmer DSL for Web Rails 7 App](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app). In this flow, Rails just serves the compiled assets from `app/assets/builds`; it does not compile Opal source files at request time.
 
-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).
+If you are migrating an existing app from the legacy request-time pipeline to this build pipeline, start with [docs/setup/rails_7_8_build_pipeline.md](docs/setup/rails_7_8_build_pipeline.md) and the `opal-rails` porting notes at https://github.com/opal/opal-rails/blob/master/PORTING.md.
 
-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).
+### Rails 7 (Sprockets pipeline)
 
-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).
+For the legacy Rails 7 + Sprockets/request-time compilation flow, follow [docs/setup/rails_7_sprockets_pipeline.md](docs/setup/rails_7_sprockets_pipeline.md).
 
-Otherwise, if you still cannot setup successfully (even with the help of the sample project, or if the sample project stops working), please do not hesitate to report an [Issue request](https://github.com/AndyObtiva/glimmer-dsl-web/issues) or fix and submit a [Pull Request](https://github.com/AndyObtiva/glimmer-dsl-web/pulls).
+That guide explicitly pins `opal-rails` to `~> 2.0.4`. If you are starting a new app or want the newer build/watch workflow, use the build-pipeline guide above instead.
 
 Next, read [Usage](#usage) instructions, and check out [Samples](#samples).
 
@@ -4188,6 +3973,160 @@ Screenshot:
 
 ![Hello, glimmer_component Rails Helper!](/images/glimmer-dsl-web-samples-hello-hello-component.png)
 
+#### Hello, Modal!
+
+[lib/glimmer-dsl-web/samples/hello/hello_modal.rb](/lib/glimmer-dsl-web/samples/hello/hello_modal.rb)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+# only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
+unless Object.const_defined?(:GreetingPerson)
+  GreetingPerson = Struct.new(:name, keyword_init: true)
+end
+
+# only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
+unless Object.const_defined?(:GreetingModal)
+  class GreetingModal
+    include Glimmer::Web::Component
+    
+    attribute :greeting_target, default: 'World'
+    
+    markup {
+      div(class: 'modal-outer') {
+        div(class: 'modal-inner') {
+          h2 { 'Greeting' }
+          
+          h3 { "Hello, #{greeting_target}!" }
+          
+          div {
+            button('Close') {
+              onclick do
+                markup_root.remove
+              end
+            }
+          }
+        }
+      }
+    }
+    
+    style {
+      r('.modal-outer') {
+        display 'flex'
+        position 'fixed'
+        left 0
+        top 0
+        width 100.vw
+        height 100.vh
+        background 'rgba(200, 200, 200, 0.8)'
+        margin 0
+        padding 0
+        justify_content 'center'
+        align_items 'center'
+      }
+      
+      r('div.modal-inner') {
+        display 'flex'
+        flex_direction 'column'
+        width 300
+        height 160
+        justify_content 'center'
+        align_items 'center'
+        box_shadow '0 10px 30px rgba(0, 0, 0, 0.5)'
+        background :white
+        border_radius 15
+        padding 15
+      }
+      
+      r('div.modal-inner button') {
+        width 135
+        margin 5
+        border_radius 5
+        padding 5
+        background :white
+      }
+      
+      r('div.modal-inner button:hover') {
+        background :black
+        color :white
+      }
+      
+      
+      r('div.modal-inner h2') {
+        margin_top 10
+      }
+    }
+  end
+end
+
+# only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
+unless Object.const_defined?(:HelloModal)
+  class HelloModal
+    include Glimmer::Web::Component
+    
+    before_render do
+      @greeting_person = GreetingPerson.new
+    end
+    
+    markup {
+      div {
+        div {
+          button('Greet The World') {
+            onclick do
+              # renders Modal under body by default, which works for Modals because they rely on fixed positioning
+              GreetingModal.render
+            end
+          }
+        }
+        div {
+          button('Greet Laura') {
+            onclick do
+              # renders Modal under body explicitly (parent takes a CSS expression) while passing it an attribute value
+              GreetingModal.render(parent: 'body', greeting_target: 'Laura')
+            end
+          }
+        }
+        div {
+          label { 'Greeting Person Name:' }
+          input(type: 'text') {
+            value <=> [@greeting_person, :name]
+          }
+          button {
+            inner_text <= [@greeting_person, :name, on_read: ->(name) { "Greet #{name}" }]
+            
+            onclick do
+              # renders Modal under body by default while passing it a Model attribute value
+              GreetingModal.render(greeting_target: @greeting_person.name)
+            end
+          }
+        }
+      }
+    }
+    
+    style {
+      r('.hello-modal div') {
+        margin_bottom 10
+      }
+      r('.hello-modal label, .hello-modal input, .hello-modal button') {
+        margin_right 5
+      }
+    }
+  end
+end
+
+# only in the sample we need the Document.ready? call; in real usage,
+# we rely on the glimmer_component helper to load this file inside a Rails View
+Document.ready? do
+  HelloModal.render
+end
+```
+
+Screenshot:
+
+![Hello, Modal!](/images/glimmer-dsl-web-samples-hello-hello-modal.gif)
+
 #### Hello, Paragraph!
 
 To facilitate building formatted textual paragraphs in Ruby, thanks to [Glimmer](https://github.com/AndyObtiva/glimmer#dsl-engine), the most advanced DSL engine in Ruby, the Glimmer HTML DSL is advanced enough to intelligently behave differently under different situations, like when using HTML formatting elements: `<br>`, `<strong>`, `<em>`, `<br>`, `<i>`, `<sub>`, `<sup>`, `<del>`, `<ins>`, `<small>`, `<mark>`

data/VERSION

@@ -1 +1 @@
-0.9.0
+0.9.1

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.9.0 ruby lib
+# stub: glimmer-dsl-web 0.9.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.9.0".freeze
+  s.version = "0.9.1".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -48,6 +48,7 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_table.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_modal.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb",

data/lib/glimmer/web/component/page_component.rb

@@ -1,4 +1,5 @@
 module PageComponent
+  # TODO provide the ability to programmatically push a component in and programmatically trigger a page load
   class << self
     def page_url_to_component_mapping
       unless defined?(@@page_url_to_component_mapping)

data/lib/glimmer/web/component/page_component_button.rb

@@ -23,6 +23,11 @@ class PageComponentButton
   markup {
     button(text, **@button_tag_attributes) {
       onclick do |event|
+        # TODO provide the ability to programmatically push a component in
+        # and programmatically trigger a page load
+        # TODO support custom onclick behavior that comes from outside the component as well in case that's needed
+        # especially if needed to determine the component_attributes dynamically ahead of the code below
+        # Maybe there is a need for another listener to execute afterwards as well (like by supporting hooks)
         event.prevent_default
         page_component = nil
         if component_attributes.nil?

data/lib/glimmer/web/component/page_component_link.rb

@@ -23,6 +23,12 @@ class PageComponentLink
   markup {
     a(text, **@anchor_tag_attributes) {
       onclick do |event|
+        # TODO provide the ability to programmatically push a component in
+        # and programmatically trigger a page load
+        # TODO support custom onclick behavior that comes from outside the component as well in case that's needed
+        # especially if needed to determine the component_attributes dynamically ahead of the code below
+        # Maybe there is a need for another listener to execute afterwards as well (like by supporting hooks)
+      
         event.prevent_default
         page_component = nil
         if component_attributes.nil?

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

@@ -0,0 +1,141 @@
+require 'glimmer-dsl-web'
+
+# only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
+unless Object.const_defined?(:GreetingPerson)
+  GreetingPerson = Struct.new(:name, keyword_init: true)
+end
+
+# only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
+unless Object.const_defined?(:GreetingModal)
+  class GreetingModal
+    include Glimmer::Web::Component
+    
+    attribute :greeting_target, default: 'World'
+    
+    markup {
+      div(class: 'modal-outer') {
+        div(class: 'modal-inner') {
+          h2 { 'Greeting' }
+          
+          h3 { "Hello, #{greeting_target}!" }
+          
+          div {
+            button('Close') {
+              onclick do
+                markup_root.remove
+              end
+            }
+          }
+        }
+      }
+    }
+    
+    style {
+      r('.modal-outer') {
+        display 'flex'
+        position 'fixed'
+        left 0
+        top 0
+        width 100.vw
+        height 100.vh
+        background 'rgba(200, 200, 200, 0.8)'
+        margin 0
+        padding 0
+        justify_content 'center'
+        align_items 'center'
+      }
+      
+      r('div.modal-inner') {
+        display 'flex'
+        flex_direction 'column'
+        width 300
+        height 160
+        justify_content 'center'
+        align_items 'center'
+        box_shadow '0 10px 30px rgba(0, 0, 0, 0.5)'
+        background :white
+        border_radius 15
+        padding 15
+      }
+      
+      r('div.modal-inner button') {
+        width 135
+        margin 5
+        border_radius 5
+        padding 5
+        background :white
+      }
+      
+      r('div.modal-inner button:hover') {
+        background :black
+        color :white
+      }
+      
+      
+      r('div.modal-inner h2') {
+        margin_top 10
+      }
+    }
+  end
+end
+
+# only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
+unless Object.const_defined?(:HelloModal)
+  class HelloModal
+    include Glimmer::Web::Component
+    
+    before_render do
+      @greeting_person = GreetingPerson.new
+    end
+    
+    markup {
+      div {
+        div {
+          button('Greet The World') {
+            onclick do
+              # renders Modal under body by default, which works for Modals because they rely on fixed positioning
+              GreetingModal.render
+            end
+          }
+        }
+        div {
+          button('Greet Laura') {
+            onclick do
+              # renders Modal under body explicitly (parent takes a CSS expression) while passing it an attribute value
+              GreetingModal.render(parent: 'body', greeting_target: 'Laura')
+            end
+          }
+        }
+        div {
+          label { 'Greeting Person Name:' }
+          input(type: 'text') {
+            value <=> [@greeting_person, :name]
+          }
+          button {
+            inner_text <= [@greeting_person, :name, on_read: ->(name) { "Greet #{name}" }]
+            
+            onclick do
+              # renders Modal under body by default while passing it a Model attribute value
+              GreetingModal.render(greeting_target: @greeting_person.name)
+            end
+          }
+        }
+      }
+    }
+    
+    style {
+      r('.hello-modal div') {
+        margin_bottom 10
+      }
+      r('.hello-modal label, .hello-modal input, .hello-modal button') {
+        margin_right 5
+      }
+    }
+  end
+end
+
+# only in the sample we need the Document.ready? call; in real usage,
+# we rely on the glimmer_component helper to load this file inside a Rails View
+Document.ready? do
+  HelloModal.render
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Andy Maleh
@@ -315,6 +315,7 @@ files:
 - lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_table.rb
 - lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb
 - lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb
+- lib/glimmer-dsl-web/samples/hello/hello_modal.rb
 - lib/glimmer-dsl-web/samples/hello/hello_observer.rb
 - lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb