glimmer-dsl-web 0.8.10 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +15 -0
  3. data/README.md +173 -233
  4. data/VERSION +1 -1
  5. data/glimmer-dsl-web.gemspec +11 -2
  6. data/lib/glimmer/dsl/web/bind_expression.rb +0 -21
  7. data/lib/glimmer/dsl/web/component_slot_content_expression.rb +0 -21
  8. data/lib/glimmer/dsl/web/content_data_binding_expression.rb +0 -21
  9. data/lib/glimmer/dsl/web/dsl.rb +0 -21
  10. data/lib/glimmer/dsl/web/observe_expression.rb +0 -21
  11. data/lib/glimmer/helpers/glimmer_helper.rb +21 -0
  12. data/lib/glimmer/util/debounce.rb +34 -0
  13. data/lib/glimmer/util/proc_tracker.rb +0 -21
  14. data/lib/glimmer/util/url_builder.rb +0 -21
  15. data/lib/glimmer/util/url_query_string_builder.rb +0 -21
  16. data/lib/glimmer/web/component/back_link.rb +16 -0
  17. data/lib/glimmer/web/component/page_component.rb +33 -0
  18. data/lib/glimmer/web/component/page_component_button.rb +54 -0
  19. data/lib/glimmer/web/component/page_component_link.rb +55 -0
  20. data/lib/glimmer/web/component.rb +8 -21
  21. data/lib/glimmer/web/element_proxy.rb +5 -21
  22. data/lib/glimmer/web/event_proxy.rb +0 -21
  23. data/lib/glimmer/web/formatting_element_proxy.rb +0 -21
  24. data/lib/glimmer/web/listener_proxy.rb +0 -21
  25. data/lib/glimmer/web.rb +0 -21
  26. data/lib/glimmer-dsl-web/ext/kernel.rb +0 -21
  27. data/lib/glimmer-dsl-web/samples/hello/hello_button.rb +0 -21
  28. data/lib/glimmer-dsl-web/samples/hello/hello_component.rb +0 -21
  29. data/lib/glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb +0 -21
  30. data/lib/glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb +0 -21
  31. data/lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb +0 -21
  32. data/lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.rb +0 -21
  33. data/lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb +0 -21
  34. data/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb +0 -21
  35. data/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb +0 -21
  36. data/lib/glimmer-dsl-web/samples/hello/hello_form.rb +0 -21
  37. data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp.rb +0 -21
  38. data/lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb +0 -21
  39. data/lib/glimmer-dsl-web/samples/hello/hello_modal.rb +141 -0
  40. data/lib/glimmer-dsl-web/samples/hello/hello_observer.rb +0 -21
  41. data/lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb +0 -21
  42. data/lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb +43 -0
  43. data/lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talks_page.rb +30 -0
  44. data/lib/glimmer-dsl-web/samples/hello/hello_page_component_link/models/conference_talk.rb +9 -0
  45. data/lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb +0 -21
  46. data/lib/glimmer-dsl-web/samples/hello/hello_style.rb +0 -21
  47. data/lib/glimmer-dsl-web/samples/hello/hello_svg.rb +0 -21
  48. data/lib/glimmer-dsl-web/samples/hello/hello_world.rb +0 -21
  49. data/lib/glimmer-dsl-web.rb +3 -21
  50. data/lib/rails/resource_service.rb +9 -7
  51. metadata +10 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c899b0a787682edbeef45beea8eb4742b296026e9302927c7ee2dbd57486451e
4
- data.tar.gz: 4ec88fbe899b1beab079d7fcf7bed0ca0554db5448acc39e4bd42e07f830ab0b
3
+ metadata.gz: 80d1ce05da87fe291727aa2a4adf9055292ceea97ac7f78093dc85d363cc10ae
4
+ data.tar.gz: 2bc64773da995efb53b89676dfe6d4504c75e57ebbce3082f913233865746089
5
5
  SHA512:
6
- metadata.gz: ea45917a51ea567c9a6acf3c77a0642dbe2edac020826923a3fd4433724384384e00ed87758dff1e9e4bb08b3ba5681f6dfc34ccb1577d06179d1895fedf4ac0
7
- data.tar.gz: 8abec79d203b6220589cbe4cbd04104332b1bcb99e6eef81af3c583295fa4ba1ae80aa01b05722e7bf21db183f600294d121f69b2e735cc3a43beb351b8006e1
6
+ metadata.gz: 35efaaed778a61e00ac81ed1580e1f4556112926f0932fa64af1bd64e6eadb01a9add2c3760d56be3c9b78b8b2b47333e918445a7280b095ac6c112aec060088
7
+ data.tar.gz: 317c2cce49f3ebc01d4a95762a9b6c40d9cc6b661437dd742d3c4ca5bf8150e4ca25692a40b5541309919f3be5cb7a1ed0db9b3893dbea2bc315ad942a42e9f7
data/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.9.1
4
+
5
+ - Hello, Modal! Sample: `require 'glimmer-dsl-web/samples/hello/hello_modal.rb'`
6
+
7
+ ## 0.9.0
8
+
9
+ - 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
10
+ - page_component_button(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
11
+ - back_link Glimmer Web Component that renders an anchor tag that can trigger the browser history back button
12
+ - `Glimmer::Util::Debounce.new(&work).call(delay: 300, debounce: true)` to support debouncing repetitive requests, such as those made by a text input filter.
13
+ - Normalize glimmer_component ActiveRecord::Base option values by calling as_json on them automatically
14
+ - Normalize glimmer_component ActiveRecord::Relation option values by calling to_a on them automatically
15
+ - Support `structure {}` as an alias for `markup {}` inside `Glimmer::Web::Component` implementors
16
+ - Hello, Page Component Link! sample
17
+
3
18
  ## 0.8.10
4
19
 
5
20
  - Remove unnecessary `puts` statements from `Rails::ResourceService`
data/README.md CHANGED
@@ -1,18 +1,18 @@
1
- # [<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.8.10 (Beta)
1
+ # [<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)
2
2
  ## Ruby-in-the-Browser Web Frontend Framework
3
3
  ### The "Rails" of Frontend Frameworks!!! ([Fukuoka Award Winning](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))
4
4
  #### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
5
5
  [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
6
6
  [![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)
7
7
 
8
- **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**
9
-
10
8
  **UPCOMING MAY 30, 2026 TALK: "Frontend Ruby on Rails with Glimmer DSL for Web" at [RubyConf Austria 2026](https://rubyconf.at/), in Vienna, Austria**
11
9
 
12
10
  **(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
13
11
 
14
12
  **([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/)**
15
13
 
14
+ (**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)**)
15
+
16
16
  **(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)**
17
17
 
18
18
  **(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
1360
1360
  - [Hello, Component Attribute Listeners!](#hello-component-attribute-listeners)
1361
1361
  - [Hello, Component Attribute Data-Binding!](#hello-component-attribute-data-binding)
1362
1362
  - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
1363
+ - [Hello, Modal!](#hello-modal)
1363
1364
  - [Hello, Paragraph!](#hello-paragraph)
1364
1365
  - [Hello, Style!](#hello-style)
1365
1366
  - [Hello, SVG!](#hello-svg)
@@ -1388,249 +1389,34 @@ Learn more about the differences between various [Glimmer](https://github.com/An
1388
1389
 
1389
1390
  ## Setup
1390
1391
 
1391
- You can setup Glimmer DSL for Web in [Rails 7](#rails-7) or [Standalone (No Rails)](#standalone-no-rails).
1392
+ You can setup Glimmer DSL for Web in one of the following ways:
1393
+
1394
+ - [Rails 7/8 (Build pipeline)](#rails-78-build-pipeline)
1395
+ - [Rails 7 (Sprockets pipeline)](#rails-7-sprockets-pipeline)
1396
+ - [Standalone (No Rails)](#standalone-no-rails)
1392
1397
 
1393
1398
  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.
1394
1399
 
1395
1400
  (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)
1396
1401
 
1397
- ### Rails 8
1398
-
1399
- 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.
1400
-
1401
- Instructions will be added in the future.
1402
-
1403
- 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.
1404
-
1405
- ### Rails 7
1406
-
1407
- (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.)
1408
-
1409
- Please follow these steps to setup.
1410
-
1411
- Install a Rails 7 gem:
1412
-
1413
- ```
1414
- gem install rails -v7.0.8.10
1415
- ```
1416
-
1417
- Start a new Rails 7 app:
1418
-
1419
- ```
1420
- rails new glimmer_app_server
1421
- ```
1422
-
1423
- Add the following to `Gemfile`:
1424
-
1425
- ```
1426
- gem 'glimmer-dsl-web', '~> 0.8.10'
1427
- ```
1428
-
1429
- Run:
1430
-
1431
- ```
1432
- bundle
1433
- ```
1434
-
1435
- (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)
1436
-
1437
- Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically running:
1438
-
1439
- ```
1440
- bin/rails g opal:install
1441
- ```
1442
-
1443
- 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):
1444
-
1445
- ```ruby
1446
- Opal.use_gem 'glimmer-dsl-web'
1447
- Opal.append_path Rails.root.join('app', 'assets', 'opal')
1448
- Rails.application.config.assets.precompile += %w[manifest.opal.js]
1449
- ```
1450
-
1451
- 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:
1452
-
1453
- ```ruby
1454
- config.assets.debug = true if Rails.env.development?
1455
- ```
1456
-
1457
- 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.
1458
-
1459
- Run:
1460
-
1461
- ```
1462
- rails g scaffold welcome
1463
- ```
1464
-
1465
- Run:
1466
-
1467
- ```
1468
- rails db:migrate
1469
- ```
1470
-
1471
- Add the following to `config/routes.rb` inside the `Rails.application.routes.draw` block:
1472
-
1473
- ```ruby
1474
- root to: 'welcomes#index'
1475
- ```
1476
-
1477
- Clear the file `app/views/welcomes/index.html.erb` completely from all content.
1478
-
1479
- Rename `app/assets/javascript/application.js.rb` file to `app/assets/javascript/opal_application.rb`.
1480
-
1481
- Rename `app/assets/javascript` directory to `app/assets/opal`.
1482
-
1483
- Edit `app/assets/config/manifest.js` and update `//= link_directory ../javascript .js` to `//= link_directory ../opal .js`:
1484
-
1485
- ```js
1486
- //= link_directory ../opal .js
1487
- ```
1488
-
1489
- Also, create `app/assets/config/manifest.opal.js` and add the following content to it:
1490
- ```js
1491
- //= link_tree ../opal .js
1492
- //= link_directory ../opal .js
1493
- ```
1494
-
1495
- 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" %>`:
1496
-
1497
- ```erb
1498
- <%= javascript_include_tag "opal_application", "data-turbolinks-track": "reload" %>
1499
- ```
1500
-
1501
- 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):
1502
-
1503
- ```ruby
1504
- require 'glimmer-dsl-web' # brings opal and other dependencies automatically
1505
-
1506
- # Add more require-statements or Glimmer HTML DSL code
1507
- ```
1508
-
1509
- ```ruby
1510
- require 'glimmer-dsl-web'
1511
-
1512
- require 'glimmer-dsl-web/samples/hello/hello_world.rb'
1513
- ```
1514
-
1515
- 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):
1516
-
1517
- ```ruby
1518
- require 'glimmer-dsl-web'
1519
-
1520
- Document.ready? do
1521
- require 'glimmer-dsl-web/samples/hello/hello_world.rb'
1522
- end
1523
- ```
1524
-
1525
- Example to confirm setup is working:
1526
-
1527
- Glimmer HTML DSL Ruby code in the frontend:
1528
-
1529
- ```ruby
1530
- require 'glimmer-dsl-web'
1531
-
1532
- include Glimmer
1533
-
1534
- Document.ready? do
1535
- # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
1536
- div {
1537
- label(class: 'greeting') {
1538
- 'Hello, World!'
1539
- }
1540
- }
1541
- end
1542
- ```
1543
-
1544
- That produces:
1545
-
1546
- ```html
1547
- <body>
1548
- <div data-parent="body" class="element element-1">
1549
- <label class="greeting element element-2">
1550
- Hello, World!
1551
- </label>
1552
- </div>
1553
- </body>
1554
- ```
1555
-
1556
- Start the Rails server:
1557
- ```
1558
- rails s
1559
- ```
1560
-
1561
- Visit `http://localhost:3000`
1562
-
1563
- You should see:
1564
-
1565
- ![setup is working](/images/glimmer-dsl-web-setup-example-working.png)
1566
-
1567
- If you want to customize where the top-level element is mounted, just pass a `parent: 'css_selector'` option.
1568
-
1569
- HTML:
1570
-
1571
- ```html
1572
- ...
1573
- <div id="app-container">
1574
- </div>
1575
- ...
1576
- ```
1577
-
1578
- Glimmer HTML DSL Ruby code in the frontend:
1579
-
1580
- ```ruby
1581
- require 'glimmer-dsl-web'
1582
-
1583
- include Glimmer
1584
-
1585
- Document.ready? do
1586
- # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
1587
- div(parent: '#app-container') {
1588
- label(class: 'greeting') {
1589
- 'Hello, World!'
1590
- }
1591
- }
1592
- end
1593
- ```
1594
-
1595
- That produces:
1596
-
1597
- ```html
1598
- ...
1599
- <div id="app-container">
1600
- <div data-parent="app-container" class="element element-1">
1601
- <label class="greeting element element-2">
1602
- Hello, World!
1603
- </label>
1604
- </div>
1605
- </div>
1606
- ...
1607
- ```
1608
-
1609
- 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.
1610
-
1611
- 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.
1402
+ ### Rails 7/8 (Build pipeline)
1612
1403
 
1613
- 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`.
1404
+ 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).
1614
1405
 
1615
- `app/helpers/application_helper.rb` should look like this after the change:
1406
+ This is the recommended setup for:
1616
1407
 
1617
- ```ruby
1618
- require 'glimmer/helpers/glimmer_helper'
1408
+ - Rails 8 apps
1409
+ - Rails 7 apps that you want on the same explicit build/watch flow, whether the host app serves assets with Propshaft or Sprockets
1619
1410
 
1620
- module ApplicationHelper
1621
- # ...
1622
- include GlimmerHelper
1623
- # ...
1624
- end
1625
- ```
1411
+ 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.
1626
1412
 
1627
- 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).
1413
+ 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.
1628
1414
 
1629
- 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).
1415
+ ### Rails 7 (Sprockets pipeline)
1630
1416
 
1631
- 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).
1417
+ 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).
1632
1418
 
1633
- 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).
1419
+ 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.
1634
1420
 
1635
1421
  Next, read [Usage](#usage) instructions, and check out [Samples](#samples).
1636
1422
 
@@ -4187,6 +3973,160 @@ Screenshot:
4187
3973
 
4188
3974
  ![Hello, glimmer_component Rails Helper!](/images/glimmer-dsl-web-samples-hello-hello-component.png)
4189
3975
 
3976
+ #### Hello, Modal!
3977
+
3978
+ [lib/glimmer-dsl-web/samples/hello/hello_modal.rb](/lib/glimmer-dsl-web/samples/hello/hello_modal.rb)
3979
+
3980
+ Glimmer HTML DSL Ruby code in the frontend:
3981
+
3982
+ ```ruby
3983
+ require 'glimmer-dsl-web'
3984
+
3985
+ # only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
3986
+ unless Object.const_defined?(:GreetingPerson)
3987
+ GreetingPerson = Struct.new(:name, keyword_init: true)
3988
+ end
3989
+
3990
+ # only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
3991
+ unless Object.const_defined?(:GreetingModal)
3992
+ class GreetingModal
3993
+ include Glimmer::Web::Component
3994
+
3995
+ attribute :greeting_target, default: 'World'
3996
+
3997
+ markup {
3998
+ div(class: 'modal-outer') {
3999
+ div(class: 'modal-inner') {
4000
+ h2 { 'Greeting' }
4001
+
4002
+ h3 { "Hello, #{greeting_target}!" }
4003
+
4004
+ div {
4005
+ button('Close') {
4006
+ onclick do
4007
+ markup_root.remove
4008
+ end
4009
+ }
4010
+ }
4011
+ }
4012
+ }
4013
+ }
4014
+
4015
+ style {
4016
+ r('.modal-outer') {
4017
+ display 'flex'
4018
+ position 'fixed'
4019
+ left 0
4020
+ top 0
4021
+ width 100.vw
4022
+ height 100.vh
4023
+ background 'rgba(200, 200, 200, 0.8)'
4024
+ margin 0
4025
+ padding 0
4026
+ justify_content 'center'
4027
+ align_items 'center'
4028
+ }
4029
+
4030
+ r('div.modal-inner') {
4031
+ display 'flex'
4032
+ flex_direction 'column'
4033
+ width 300
4034
+ height 160
4035
+ justify_content 'center'
4036
+ align_items 'center'
4037
+ box_shadow '0 10px 30px rgba(0, 0, 0, 0.5)'
4038
+ background :white
4039
+ border_radius 15
4040
+ padding 15
4041
+ }
4042
+
4043
+ r('div.modal-inner button') {
4044
+ width 135
4045
+ margin 5
4046
+ border_radius 5
4047
+ padding 5
4048
+ background :white
4049
+ }
4050
+
4051
+ r('div.modal-inner button:hover') {
4052
+ background :black
4053
+ color :white
4054
+ }
4055
+
4056
+
4057
+ r('div.modal-inner h2') {
4058
+ margin_top 10
4059
+ }
4060
+ }
4061
+ end
4062
+ end
4063
+
4064
+ # only in the sample we need the unless statement to avoid conflicting with other samples, but not in real usage
4065
+ unless Object.const_defined?(:HelloModal)
4066
+ class HelloModal
4067
+ include Glimmer::Web::Component
4068
+
4069
+ before_render do
4070
+ @greeting_person = GreetingPerson.new
4071
+ end
4072
+
4073
+ markup {
4074
+ div {
4075
+ div {
4076
+ button('Greet The World') {
4077
+ onclick do
4078
+ # renders Modal under body by default, which works for Modals because they rely on fixed positioning
4079
+ GreetingModal.render
4080
+ end
4081
+ }
4082
+ }
4083
+ div {
4084
+ button('Greet Laura') {
4085
+ onclick do
4086
+ # renders Modal under body explicitly (parent takes a CSS expression) while passing it an attribute value
4087
+ GreetingModal.render(parent: 'body', greeting_target: 'Laura')
4088
+ end
4089
+ }
4090
+ }
4091
+ div {
4092
+ label { 'Greeting Person Name:' }
4093
+ input(type: 'text') {
4094
+ value <=> [@greeting_person, :name]
4095
+ }
4096
+ button {
4097
+ inner_text <= [@greeting_person, :name, on_read: ->(name) { "Greet #{name}" }]
4098
+
4099
+ onclick do
4100
+ # renders Modal under body by default while passing it a Model attribute value
4101
+ GreetingModal.render(greeting_target: @greeting_person.name)
4102
+ end
4103
+ }
4104
+ }
4105
+ }
4106
+ }
4107
+
4108
+ style {
4109
+ r('.hello-modal div') {
4110
+ margin_bottom 10
4111
+ }
4112
+ r('.hello-modal label, .hello-modal input, .hello-modal button') {
4113
+ margin_right 5
4114
+ }
4115
+ }
4116
+ end
4117
+ end
4118
+
4119
+ # only in the sample we need the Document.ready? call; in real usage,
4120
+ # we rely on the glimmer_component helper to load this file inside a Rails View
4121
+ Document.ready? do
4122
+ HelloModal.render
4123
+ end
4124
+ ```
4125
+
4126
+ Screenshot:
4127
+
4128
+ ![Hello, Modal!](/images/glimmer-dsl-web-samples-hello-hello-modal.gif)
4129
+
4190
4130
  #### Hello, Paragraph!
4191
4131
 
4192
4132
  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 CHANGED
@@ -1 +1 @@
1
- 0.8.10
1
+ 0.9.1
@@ -2,11 +2,11 @@
2
2
  # DO NOT EDIT THIS FILE DIRECTLY
3
3
  # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
4
4
  # -*- encoding: utf-8 -*-
5
- # stub: glimmer-dsl-web 0.8.10 ruby lib
5
+ # stub: glimmer-dsl-web 0.9.1 ruby lib
6
6
 
7
7
  Gem::Specification.new do |s|
8
8
  s.name = "glimmer-dsl-web".freeze
9
- s.version = "0.8.10".freeze
9
+ s.version = "0.9.1".freeze
10
10
 
11
11
  s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
12
12
  s.require_paths = ["lib".freeze]
@@ -48,8 +48,12 @@ Gem::Specification.new do |s|
48
48
  "lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_table.rb",
49
49
  "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
50
50
  "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
51
+ "lib/glimmer-dsl-web/samples/hello/hello_modal.rb",
51
52
  "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
52
53
  "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",
54
+ "lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb",
55
+ "lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talks_page.rb",
56
+ "lib/glimmer-dsl-web/samples/hello/hello_page_component_link/models/conference_talk.rb",
53
57
  "lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb",
54
58
  "lib/glimmer-dsl-web/samples/hello/hello_style.rb",
55
59
  "lib/glimmer-dsl-web/samples/hello/hello_svg.rb",
@@ -88,12 +92,17 @@ Gem::Specification.new do |s|
88
92
  "lib/glimmer/dsl/web/span_expression.rb",
89
93
  "lib/glimmer/dsl/web/style_element_expression.rb",
90
94
  "lib/glimmer/helpers/glimmer_helper.rb",
95
+ "lib/glimmer/util/debounce.rb",
91
96
  "lib/glimmer/util/proc_tracker.rb",
92
97
  "lib/glimmer/util/url_builder.rb",
93
98
  "lib/glimmer/util/url_query_string_builder.rb",
94
99
  "lib/glimmer/web.rb",
95
100
  "lib/glimmer/web/component.rb",
101
+ "lib/glimmer/web/component/back_link.rb",
96
102
  "lib/glimmer/web/component/component_style_container.rb",
103
+ "lib/glimmer/web/component/page_component.rb",
104
+ "lib/glimmer/web/component/page_component_button.rb",
105
+ "lib/glimmer/web/component/page_component_link.rb",
97
106
  "lib/glimmer/web/element_proxy.rb",
98
107
  "lib/glimmer/web/event_proxy.rb",
99
108
  "lib/glimmer/web/formatting_element_proxy.rb",
@@ -1,24 +1,3 @@
1
- # Copyright (c) 2023-2024 Andy Maleh
2
- #
3
- # Permission is hereby granted, free of charge, to any person obtaining
4
- # a copy of this software and associated documentation files (the
5
- # "Software"), to deal in the Software without restriction, including
6
- # without limitation the rights to use, copy, modify, merge, publish,
7
- # distribute, sublicense, and/or sell copies of the Software, and to
8
- # permit persons to whom the Software is furnished to do so, subject to
9
- # the following conditions:
10
- #
11
- # The above copyright notice and this permission notice shall be
12
- # included in all copies or substantial portions of the Software.
13
- #
14
- # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
- # EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
- # MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
- # NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
- # LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
- # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
- # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21
-
22
1
  require 'glimmer/dsl/static_expression'
23
2
  require 'glimmer/dsl/bind_expression'
24
3
  require 'glimmer/data_binding/model_binding'
@@ -1,24 +1,3 @@
1
- # Copyright (c) 2023-2024 Andy Maleh
2
- #
3
- # Permission is hereby granted, free of charge, to any person obtaining
4
- # a copy of this software and associated documentation files (the
5
- # "Software"), to deal in the Software without restriction, including
6
- # without limitation the rights to use, copy, modify, merge, publish,
7
- # distribute, sublicense, and/or sell copies of the Software, and to
8
- # permit persons to whom the Software is furnished to do so, subject to
9
- # the following conditions:
10
- #
11
- # The above copyright notice and this permission notice shall be
12
- # included in all copies or substantial portions of the Software.
13
- #
14
- # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
- # EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
- # MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
- # NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
- # LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
- # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
- # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21
-
22
1
  require 'glimmer'
23
2
  require 'glimmer/dsl/expression'
24
3
  require 'glimmer/web/component'
@@ -1,24 +1,3 @@
1
- # Copyright (c) 2023-2024 Andy Maleh
2
- #
3
- # Permission is hereby granted, free of charge, to any person obtaining
4
- # a copy of this software and associated documentation files (the
5
- # "Software"), to deal in the Software without restriction, including
6
- # without limitation the rights to use, copy, modify, merge, publish,
7
- # distribute, sublicense, and/or sell copies of the Software, and to
8
- # permit persons to whom the Software is furnished to do so, subject to
9
- # the following conditions:
10
- #
11
- # The above copyright notice and this permission notice shall be
12
- # included in all copies or substantial portions of the Software.
13
- #
14
- # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
- # EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
- # MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
- # NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
- # LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
- # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
- # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21
-
22
1
  require 'glimmer/dsl/expression'
23
2
 
24
3
  module Glimmer
@@ -1,24 +1,3 @@
1
- # Copyright (c) 2023-2024 Andy Maleh
2
- #
3
- # Permission is hereby granted, free of charge, to any person obtaining
4
- # a copy of this software and associated documentation files (the
5
- # "Software"), to deal in the Software without restriction, including
6
- # without limitation the rights to use, copy, modify, merge, publish,
7
- # distribute, sublicense, and/or sell copies of the Software, and to
8
- # permit persons to whom the Software is furnished to do so, subject to
9
- # the following conditions:
10
- #
11
- # The above copyright notice and this permission notice shall be
12
- # included in all copies or substantial portions of the Software.
13
- #
14
- # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
- # EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
- # MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
- # NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
- # LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
- # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
- # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21
-
22
1
  require 'glimmer/dsl/engine'
23
2
  require 'glimmer/dsl/web/element_expression'
24
3
  require 'glimmer/dsl/web/formatting_element_expression'
@@ -1,24 +1,3 @@
1
- # Copyright (c) 2023-2024 Andy Maleh
2
- #
3
- # Permission is hereby granted, free of charge, to any person obtaining
4
- # a copy of this software and associated documentation files (the
5
- # "Software"), to deal in the Software without restriction, including
6
- # without limitation the rights to use, copy, modify, merge, publish,
7
- # distribute, sublicense, and/or sell copies of the Software, and to
8
- # permit persons to whom the Software is furnished to do so, subject to
9
- # the following conditions:
10
- #
11
- # The above copyright notice and this permission notice shall be
12
- # included in all copies or substantial portions of the Software.
13
- #
14
- # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
- # EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
- # MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
- # NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
- # LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
- # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
- # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21
-
22
1
  require 'glimmer/dsl/static_expression'
23
2
  require 'glimmer/dsl/top_level_expression'
24
3
  require 'glimmer/dsl/observe_expression'