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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +15 -0
- data/README.md +173 -233
- data/VERSION +1 -1
- data/glimmer-dsl-web.gemspec +11 -2
- data/lib/glimmer/dsl/web/bind_expression.rb +0 -21
- data/lib/glimmer/dsl/web/component_slot_content_expression.rb +0 -21
- data/lib/glimmer/dsl/web/content_data_binding_expression.rb +0 -21
- data/lib/glimmer/dsl/web/dsl.rb +0 -21
- data/lib/glimmer/dsl/web/observe_expression.rb +0 -21
- data/lib/glimmer/helpers/glimmer_helper.rb +21 -0
- data/lib/glimmer/util/debounce.rb +34 -0
- data/lib/glimmer/util/proc_tracker.rb +0 -21
- data/lib/glimmer/util/url_builder.rb +0 -21
- data/lib/glimmer/util/url_query_string_builder.rb +0 -21
- data/lib/glimmer/web/component/back_link.rb +16 -0
- data/lib/glimmer/web/component/page_component.rb +33 -0
- data/lib/glimmer/web/component/page_component_button.rb +54 -0
- data/lib/glimmer/web/component/page_component_link.rb +55 -0
- data/lib/glimmer/web/component.rb +8 -21
- data/lib/glimmer/web/element_proxy.rb +5 -21
- data/lib/glimmer/web/event_proxy.rb +0 -21
- data/lib/glimmer/web/formatting_element_proxy.rb +0 -21
- data/lib/glimmer/web/listener_proxy.rb +0 -21
- data/lib/glimmer/web.rb +0 -21
- data/lib/glimmer-dsl-web/ext/kernel.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_button.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_component.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_form.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_modal.rb +141 -0
- data/lib/glimmer-dsl-web/samples/hello/hello_observer.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb +43 -0
- data/lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talks_page.rb +30 -0
- data/lib/glimmer-dsl-web/samples/hello/hello_page_component_link/models/conference_talk.rb +9 -0
- data/lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_style.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_svg.rb +0 -21
- data/lib/glimmer-dsl-web/samples/hello/hello_world.rb +0 -21
- data/lib/glimmer-dsl-web.rb +3 -21
- data/lib/rails/resource_service.rb +9 -7
- metadata +10 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 80d1ce05da87fe291727aa2a4adf9055292ceea97ac7f78093dc85d363cc10ae
|
|
4
|
+
data.tar.gz: 2bc64773da995efb53b89676dfe6d4504c75e57ebbce3082f913233865746089
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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.
|
|
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
|
[](http://badge.fury.io/rb/glimmer-dsl-web)
|
|
6
6
|
[](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
|
|
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
|
-

|
|
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
|
-
|
|
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
|
-
|
|
1406
|
+
This is the recommended setup for:
|
|
1616
1407
|
|
|
1617
|
-
|
|
1618
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1415
|
+
### Rails 7 (Sprockets pipeline)
|
|
1630
1416
|
|
|
1631
|
-
|
|
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
|
-
|
|
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
|

|
|
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
|
+

|
|
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.
|
|
1
|
+
0.9.1
|
data/glimmer-dsl-web.gemspec
CHANGED
|
@@ -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.
|
|
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.
|
|
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
|
data/lib/glimmer/dsl/web/dsl.rb
CHANGED
|
@@ -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'
|